Этот шаг — сердце всего пути. Здесь появляется сам сайт. Пишет его ИИ, а вы ставите задачи, читаете планы, смотрите результат и говорите «да» или «поправь вот это».

Инструментов для этого много, и они меняются каждые несколько месяцев. Поэтому главное здесь не название программы, а приёмы работы: они одинаковы везде. Я делал этот блог в Claude Code, но всё ниже работает и в других инструментах.

Три вида ИИ-инструментов для кода

  • Чат — ChatGPT, Claude, GigaChat, DeepSeek и похожие. Объясняет, отвечает на вопросы, пишет куски кода. Но переносить код в проект, создавать файлы и искать ошибки придётся вам. Отлично подходит для учёбы и вопросов, неудобен для целого сайта.
  • Редактор кода с ИИ — Cursor, VS Code с Copilot и другие. ИИ видит файлы проекта и правит их прямо в редакторе. Похоже на программу для разработчиков, к которой приставили помощника.
  • ИИ-агент — Claude Code, Codex от OpenAI, агентский режим в Cursor. Выполняет задачу целиком: читает проект, правит файлы, запускает команды, проверяет результат. Перед заметными действиями спрашивает разрешение.

Для своего сайта нужен агент или редактор с ИИ: они работают с проектом целиком, а не с отдельными кусками кода.

Схема: вы ставите задачу, ИИ-помощник составляет план, правит файлы и запускает сайт, вы проверяете результат и даёте следующую задачу
Рабочий цикл в любом инструменте: задача → план → изменения → проверка

Как выбрать инструмент

  • Работает с файлами проекта, а не только отвечает в чате.
  • Умеет планировать: сначала предлагает план и только потом меняет код. Об этом — ниже.
  • Спрашивает разрешение перед удалением файлов и запуском команд.
  • Вам удобно: приложение с окнами или работа в терминале — дело вкуса, но новичку проще приложение.
  • Доступен вам: можно оплатить и пользоваться без постоянных сложностей.

Первые шаги с любым инструментом

  1. Установите инструмент и войдите в аккаунт.

  2. Создайте на компьютере пустую папку для проекта, например «мой-сайт», и откройте её в инструменте.

  3. Положите в папку ТЗ из шага 1 и распакованный код прототипа из шага 3.

  4. Заведите файл с правилами проекта — как, расскажу ниже.

  5. Попросите план, прочитайте его и только потом скажите «да».

  6. Когда ИИ скажет, что сайт запущен, откройте в браузере адрес, который он назовёт (обычно http://localhost:3000). Это ваш сайт — пока только на вашем компьютере.

  7. Сохраните работу в GitHub.

Сначала план, потом код

Самый полезный приём — не давать ИИ сразу писать код. Сначала пусть изучит проект и предложит план: что и в каком порядке будет сделано. Вы читаете, задаёте вопросы, поправляете — и только потом разрешаете работу.

Во многих инструментах для этого есть отдельный режим планирования: ИИ только читает файлы и предлагает план, ничего не меняя. Если такого режима нет, просто попросите словами:

Промпт · Для любого ИИ-помощника
В этой папке лежат ТЗ моего сайта (файл [имя файла]) и прототип дизайна (папка [имя папки]).

Не меняй файлы. Сначала:
1) прочитай ТЗ и прототип и задай мне вопросы, если что-то неясно;
2) предложи план по этапам: что сделаем первым, что потом;
3) выбери технологии и объясни выбор простыми словами;
4) дизайн прототипа перенеси без изменений.

Начинай работу только после моего «да».

Правила проекта: файл, который экономит часы

ИИ не помнит ваших прошлых разговоров. Поэтому всё важное о проекте стоит записать в файл с правилами — инструмент читает его в начале каждой работы. Туда пишут: на каком языке общаться, что нельзя менять без спроса, как проверять работу, как устроен проект.

У такого файла есть общий формат — AGENTS.md в корне проекта, его понимают многие инструменты. У некоторых есть и свои названия: Claude Code читает CLAUDE.md, в Cursor — свои правила проекта. У этого блога правила лежат в AGENTS.md, а CLAUDE.md просто ссылается на него. В правилах, например, написано: дизайн не менять без моего согласия, перед каждой доработкой запускать проверки, на сервер выкладывать только после зелёных тестов.

Промпт · Для любого ИИ-помощника
Создай файл AGENTS.md с правилами этого проекта. Я не программист, поэтому:
- объясняй, что делаешь, простыми словами;
- перед большими изменениями показывай план и жди моего «да»;
- не меняй дизайн прототипа без моего согласия;
- после каждого изменения проверяй, что сайт открывается;
- пиши понятные описания изменений на русском.
Дополняй этот файл, когда мы договариваемся о новых правилах.

Как ставить задачи

Хорошая задача для ИИ похожа на хорошую задачу для человека. В ней есть:

  • что сделать и зачем — ИИ лучше решает, когда понимает цель;
  • одна задача за раз — десять правок в одном сообщении дают семь сделанных и три испорченных;
  • как понять, что готово — что вы увидите, когда задача решена;
  • что не трогать — дизайн, тексты, другие страницы;
  • пример или скриншот, если словами описать трудно.

Плохо: «Сделай меню лучше». Хорошо: «На телефоне меню закрывает половину экрана и не закрывается по нажатию на ссылку. Сделай, чтобы оно закрывалось после выбора пункта. Дизайн меню не меняй. Проверь на ширине экрана телефона».

Промпт · Шаблон задачи
Задача: [что сделать].
Зачем: [какую проблему это решает].
Готово, когда: [что я увижу].
Не трогай: [что менять нельзя].
Сначала коротко опиши, как будешь делать, потом делай. После — проверь результат и расскажи, что изменилось.

Проверяйте, а не верьте на слово

ИИ иногда уверенно сообщает, что всё готово, хотя это не так. Защита простая: после каждой задачи открывайте сайт и смотрите сами, а у ИИ просите проверку — открыть страницу, прогнать тесты, показать результат.

Если что-то пошло не так

Ошибки будут, это нормально. Не пытайтесь чинить сами. Опишите, что видите, — и пусть ИИ разбирается:

Промпт · Когда что-то сломалось
Что-то пошло не так: [что вы видите — например, страница белая, или кнопка не нажимается, или текст ошибки].
Ожидал: [что должно было быть].
Найди причину, объясни её простыми словами и исправь. После исправления проверь, что всё работает.

Скриншот тоже можно вставить прямо в сообщение — ИИ его увидит.

Сохраните работу в GitHub

GitHub — сервис, где хранится код и вся история его изменений. Это ваша страховка: если что-то сломается, всегда можно вернуться к рабочей версии. Позже отсюда же сайт будет попадать на сервер.

  1. Зарегистрируйтесь на github.com — бесплатно.

  2. Попросите ИИ: «Подключи проект к GitHub и сохрани текущую версию. Репозиторий сделай приватным».

  3. Он подскажет, как дать доступ к вашему аккаунту, и сам загрузит проект.

  4. Дальше после каждого законченного куска работы просите: «Сохрани изменения в GitHub».

Навыки: как сделать ИИ опытнее

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

Какие навыки я использовал, когда делал этот блог, и как подключить их или написать свой — в отдельной статье «Навыки для ИИ-помощника».

Что дальше

Сайт работает у вас на компьютере. Дальше решим, нужна ли ему админка — чтобы менять тексты, цены, услуги или статьи без кода.