Нейросеть для написания кода сайта: от макета до рабочей страницы

Сайт-визитка, лендинг или страница с калькулятором — задачи, которые удобно отдавать модели, если не просить её «сделай красиво» и уйти. Нейросеть для написания кода для сайта работает как исполнитель: вы формулируете задачу, она создаёт файлы, вы открываете результат в браузере и возвращаете замечания. Ниже — рабочий процесс на HTML, CSS и JavaScript, пример постановки задачи и расчёт стоимости по API.

Что подойдёт: чат или агент

Есть два способа, и выбор зависит от размера задачи.

• Чат. Вы просите код, копируете его в файлы, запускаете. Для одной страницы и одного скрипта этого хватает, но копировать приходится вручную, а модель не видит остальные файлы.
• Агент в редакторе или терминале. Claude Code↗ или Cursor↗ сами создают и правят файлы в папке проекта, запускают команды и читают ошибки. Для сайта из нескольких файлов это удобнее.

Если сомневаетесь, что выбрать, начните с привычной среды: работаете в терминале — берите Claude Code, в редакторе — Cursor. Обоим инструментам достаточно указать адрес шлюза и ключ по инструкции из документации.

Шаг 1. Подготовьте проект

Создайте пустую папку и опишите в ней контекст. Минимальная структура статического сайта:

my-site/
  index.html
  styles.css
  script.js
  assets/

Для статического сайта не нужны ни сборщики, ни фреймворки: HTML, CSS и немного JS откроются двойным щелчком. Если позже понадобится Next.js или Astro, попросите агента перенести страницу, когда структура уже ясна.

Положите в корень короткий файл с правилами (для Claude Code это CLAUDE.md, подробнее — как писать CLAUDE.md↗):

Проект: одностраничный сайт студии йоги.
Стек: чистые HTML, CSS, JavaScript без библиотек.
Правила: семантическая вёрстка, адаптивность от 360px, шрифты системные,
палитра в переменных :root, без внешних скриптов.
Не добавляй новые файлы без необходимости.

Шаг 2. Поставьте задачу так, чтобы её можно было проверить

Плохая постановка: «Сделай сайт для студии йоги». Хорошая — перечисляет разделы, содержимое и критерии:

Сделай главную страницу студии йоги "Лотос".
Разделы: шапка с меню-якорями, первый экран с заголовком и кнопкой записи,
блок "Направления" (3 карточки), расписание таблицей, форма заявки (имя, телефон, согласие).
Тексты придумай реалистичные, но без выдуманных адресов, цен и телефонов: подставь заглушки в квадратных скобках.
Форма пока только проверяет поля в script.js и показывает сообщение, ничего не отправляет.
Критерии: нет горизонтальной прокрутки на ширине 360px, все кнопки доступны с клавиатуры,
у картинок есть alt.

Три приёма, которые экономят итерации:

• Заглушки вместо выдумок. Модель легко придумает цену или адрес, который попадёт на сайт.
• Критерии приёмки. По ним вы проверите результат за минуту.
• Один раздел за раз для больших страниц. После первого экрана просите следующий блок: контекст остаётся коротким.

Шаг 3. Проверьте в браузере

Статический сайт можно открыть файлом, но удобнее поднять локальный сервер:

cd my-site
python3 -m http.server 8000

Откройте http://localhost:8000. Проверьте руками три вещи:

1. Ширина окна 360 px и 1280 px: нет ли горизонтальной прокрутки и наезжающих блоков.
2. Клавиша Tab: фокус проходит по ссылкам и кнопкам в разумном порядке.
3. Консоль браузера: нет ли красных ошибок и ненайденных файлов.

Вернуть замечания агенту лучше конкретно: «На 360 px карточки в блоке "Направления" вылезают за экран, поправь grid в styles.css». Скриншот проблемного места можно приложить, если модель принимает картинки: из таблицы на 18 октября 2026 это, например, claude-sonnet-5-5 и gpt-6.1-sol, а deepseek-v4.1-flash и glm-5.3-flash картинки на вход не принимают.

Шаг 4. Закрепите результат

• Сохраните рабочую версию в git до следующих правок: откатить удачный вариант проще, чем объяснять модели, что вернуть.
• Попросите агента прогнать проверку: валидный HTML, отсутствие неиспользуемых классов, заголовки по порядку (h1, затем h2).
• Тексты, цены и контакты замените на настоящие сами. Юридические тексты (политика обработки данных, оферта) нейросеть не заменит: показывайте их юристу.

Сколько это стоит по API

Расчёт зависит от длины сессии. Допущения для примера: агент сделал 15 запросов; суммарно 45 000 токенов свежего входа, 45 000 токенов записи в кэш, 375 000 токенов чтения из кэша и 22 500 токенов выхода. Цены на 18 октября 2026, claude-sonnet-5-5: вход $0.4, выход $2, чтение кэша $0.05, запись $0.5 за 1M. Кэш для Claude виден шлюзу в Anthropic-формате, то есть в Claude Code.

• Свежий вход: 45 000 × 0.4 / 1 000 000 = $0.018.
• Запись в кэш: 45 000 × 0.5 / 1 000 000 = $0.0225.
• Чтение кэша: 375 000 × 0.05 / 1 000 000 = $0.01875.
• Выход: 22 500 × 2 / 1 000 000 = $0.045.
• Итого: около $0.10 за сессию.

Для сравнения, та же сессия на deepseek-v4.1-flash (вход $0.013, кэш чтение $0.013, выход $0.038): (45 000 + 45 000 + 375 000) × 0.013 / 1 000 000 + 22 500 × 0.038 / 1 000 000 = $0.006045 + $0.000855 = около $0.0069. Запись в кэш для DeepSeek отдельно не списывается: эти 45 000 токенов идут по обычной цене входа. Сильнее или слабее будет результат, заранее сказать нельзя: по индексу силы из таблицы это 48 у Sonnet 5.5 и 39 у V4.1 Flash, но на вашей странице разница может быть иной. Прогоните одно и то же задание на двух моделях и сравните.

Реальные цифры смотрите на странице «Использование» в кабинете. Как прикинуть расход на более длинных сессиях — в статье сколько стоит час работы с агентом↗.

Частые вопросы

Нужно ли уметь программировать?

Для простой статической страницы достаточно уметь открыть файл, запустить локальный сервер и описать, что не так. Но читать код, который вы публикуете, всё равно стоит: хотя бы убедиться, что нет лишних внешних скриптов.

Какая модель лучше для сайта?

Заранее не скажем. Сравнивайте цену и индекс силы в таблице моделей и проверьте две модели на одном задании. Список и цены — GET https://api.zukko.pro/v1/models.

Можно ли сгенерировать сайт целиком в чате?

Для небольшой страницы да: попросите три отдельных блока кода для index.html, styles.css и script.js. Для более крупного проекта удобнее агент, который работает с файлами сам.

Как начать?

Создайте ключ в кабинете Zukko↗, подключите Claude Code или Cursor и начните с небольшой страницы по плану выше.