Как сделать свою первую HTML-страницу с ИИ

Задание после встречи: одна страница «где мне поможет вайб-кодинг и какую задачу я возьму». Это ваш первый артефакт: сделан с ИИ, открывается в любом браузере, ничего ставить не надо. На всё уходит один вечер. Рабочие данные не нужны: страница про задачу, а не про цифры.

0. Когда

Допишите одну строку и положите на видное место:

«Когда [день и момент], я открою [инструмент] и опишу свою задачу».

Инструмент — любой чат с ИИ, который у вас открыт: ChatGPT, Claude, GigaChat, внутренний сервис компании.

1. Словарь своих терминов

Три-пять слов, которые у вас в работе значат что-то своё: «заказ», «событие», «сверка», «план». По одной строке на слово. ИИ видел тысячи компаний и без словаря возьмёт самое частое значение, а не ваше. Словарь вставляйте в начало любого запроса.

2. Задача

Если на встрече вы уже написали задачу по шаблону «Я [роль], каждый [день или неделю] трачу [сколько] на [задачу]», она у вас есть. Если нет, пройдите опросник «Где мне поможет вайб-кодинг»: три вопроса, три минуты, на выходе задача, три ответа и готовый запрос.

Проверьте задачу тремя вопросами:

• повторяется ли регулярно;
• можно ли объяснить правила словами;
• можно ли проверить на примере, где правильный ответ известен заранее.

Три «да» — берите. Есть «нет» — сузьте задачу до куска, где три «да».

3. Страница

Скопируйте промпт для страницы в тот же чат, вставьте в него словарь и задачу. ИИ вернёт код страницы одним файлом.

Как открыть:

• Claude и ChatGPT показывают страницу сразу, рядом с ответом, и дают кнопку скачать.
• Если чат отдал только текст кода: скопируйте его целиком в Блокнот или TextEdit, сохраните как moya-stranica.html, откройте двойным щелчком. Если файл не открывается, попросите: «Отдай страницу как один файл .html для скачивания».

4. Если получилось криво

Первая версия почти всегда частично не такая. Это нормальный ход дела, а не провал. Скажите ИИ, что именно не так, одной фразой:

• «Текст не влезает, сделай разделы короче и крупнее заголовки».
• «Поменяй стиль: спокойнее, без градиентов, один цвет».
• «Раздел „как я проверю" пустой, вот что туда вставить: …».
• «На телефоне не читается, сделай одну колонку».
• «Верни предыдущую версию и поменяй только заголовок».

Три-четыре таких реплики, и страница готова.

5. Куда и когда

Выложите страницу туда, куда договорились на встрече, с одной фразой: что хотите сделать. Если файл не открывается у коллег, подойдёт PDF или скриншот. Спикеры посмотрят каждую работу и отберут несколько для продолжения.

Для смелых

Соберите не описание, а первую версию самого инструмента. В том же чате: «Сделай маленькую первую версию: [вход] → [выход]. Данные придумай сам по описанию, пять-десять строк. Правила: …».

Потом проверьте на примере, где ответ знаете заранее. Как это делать — в статье «Где ИИ ошибается и как это поймать».