Нейросеть для HTML и CSS: верстка по описанию и по скриншоту

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

Что просить: описание или скриншот

Есть два рабочих входа, и они решают разные задачи.

Текстовое описание подходит, когда структура проста или у вас уже есть дизайн-система. Вы перечисляете блоки, поведение и ограничения, модель собирает разметку. Для такого запроса можно начать с недорогой текстовой модели.

Скриншот макета нужен, когда дизайн уже нарисован. Модель с поддержкой картинок на входе видит расположение блоков, пропорции, иерархию заголовков и примерные цвета. Из таблицы моделей Zukko картинки принимают, например, claude-sonnet-5-5, claude-opus-5-5, gpt-6.1-sol и deepseek-v4-pro. А вот deepseek-v4.1-flash и glm-5.3-flash картинки на вход не принимают: для них годится только текстовое описание. Актуальный список моделей и их возможности смотрите в GET https://api.zukko.pro/v1/models или на странице «Модели» в кабинете.

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

Промпт, который даёт аккуратную верстку

Модель следует тому, что вы явно запретили и разрешили. Рабочий шаблон:

Сверстай блок по макету на изображении.

Требования:
- Семантические теги: header, main, section, nav, footer, button вместо div там, где это уместно.
- Один файл index.html с блоком <style>. Без фреймворков и внешних шрифтов.
- Mobile-first: базовые стили для 360px, дальше медиазапросы min-width.
- Размеры в rem и %, цвета и отступы вынеси в CSS-переменные в :root.
- Картинкам задай alt и width/height, чтобы не прыгал layout.
- Классы называй по BEM: block__element--modifier.
- Не добавляй JavaScript, если он не нужен.
- Верни только код, одним блоком кода с пометкой html.

Каждая строка закрывает типичную проблему. Без «mobile-first» вы получите десктопную сетку с одним медиазапросом для телефона. Без «только код» в ответе будет полстраницы пояснений, которые придётся вырезать скриптом.

Если у проекта есть свои классы, приложите фрагмент существующей разметки и напишите «используй классы отсюда, новые не придумывай». Так выдуманных названий становится меньше.

Скрипт: макет на входе, файл на выходе

Пример на Python с официальным SDK openai. Адрес для OpenAI-формата — https://api.zukko.pro/v1:

import base64, re, sys
from openai import OpenAI

client = OpenAI(base_url="https://api.zukko.pro/v1", api_key="fetch_ваш_ключ")

PROMPT = open("prompt.txt", encoding="utf-8").read()
FENCE = "`" * 3  # граница блока кода в ответе модели

def layout_from_screenshot(path: str, model: str = "claude-sonnet-5-5") -> str:
    with open(path, "rb") as f:
        b64 = base64.b64encode(f.read()).decode()
    resp = client.chat.completions.create(
        model=model,
        max_tokens=6000,

Строка с usage нужна, чтобы увидеть реальное число токенов: картинка занимает их по правилам конкретной модели, и заранее точную цифру назвать нельзя. Формат сообщений с картинкой и остальные параметры смотрите в справочнике chat completions↗. Если модель отвечает ошибкой при загрузке картинки, смотрите разбор в статье про ограничения на размер и формат изображений↗.

Адаптивность: что проверять руками и что автоматически

Сгенерированная адаптивность чаще всего ломается в трёх местах:

1. Горизонтальный скролл на узком экране. Причина: фиксированная ширина в пикселях у таблицы, изображения или flex-контейнера без flex-wrap. Проверка: откройте страницу в режиме устройства в DevTools на ширине 360px и попробуйте промотать вправо.
2. Текст налезает на текст. Заголовки с большим размером шрифта без clamp() или медиазапроса. Попросите модель задать размеры через clamp(min, fluid, max).
3. Картинки растягиваются. Не хватает max-width: 100% и height: auto.

Хороший приём — второй проход. Отправьте модели уже готовый код и список найденных проблем: «исправь только перечисленное, остальное не трогай». Это дешевле и надёжнее, чем просить переписать всё заново.

Автоматическая проверка: валидатор и линтер

Модель может выдать невалидный HTML, при этом браузер молча «починит» его, и вы ничего не заметите до первой странной ошибки в другом браузере. Поэтому добавьте проверку в скрипт:

• Валидатор W3C (Nu Html Checker). Проверяет вложенность тегов, незакрытые элементы, неверные атрибуты. Есть онлайн-версия и консольная; точные флаги запуска смотрите в документации валидатора.
• Линтер CSS (например, stylelint). Ловит опечатки в свойствах и дубли. Правила настраивайте под свой проект.
• Проверка доступности. Хотя бы один прогон средством вроде встроенной панели Lighthouse в браузере: контраст, подписи у полей форм, alt у картинок.

Если валидатор нашёл ошибки, отправьте их текст обратно модели вместе с кодом. Часто хватает одной-двух итераций.

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

Расчёт по ценам Zukko на 18 октября 2026. Допущение для примера: на вход идёт скриншот и промпт, в сумме 2 500 токенов (реальное число смотрите в usage), на выходе страница на 3 000 токенов.

Формула: вход × цена входа + выход × цена выхода.

Текстовый запрос без картинки к deepseek-v4.1-flash (600 токенов на входе, 3 000 на выходе): 600 × $0,013 / 1M + 3 000 × $0,038 / 1M ≈ $0,00012. Это для случаев, когда достаточно описания, а макета нет.

Даже с двумя-тремя итерациями исправлений вёрстка страницы стоит копейки; главная статья расходов здесь — ваше время на проверку. Если вы гоняете много запросов подряд, ориентируйтесь на советы из статьи как сократить расход токенов↗.

Подберите модель под задачу, проверив её на двух-трёх своих макетах: заранее предсказать, какая лучше справится именно с вашим стилем, нельзя. Ключ создаётся в кабинете↗, пополнение доступно по СБП, картой MasterCard или криптой.

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

Какая нейросеть лучше для HTML и CSS?

Универсального ответа нет. Для сравнения ориентируйтесь на цену, размер контекста и индекс силы из таблицы моделей и проверьте две-три модели на одном и том же макете. Если нужен скриншот на входе, выбирайте только модели, принимающие картинки.

Можно ли получить верстку без скриншота, только по тексту?

Да. Опишите блоки, их порядок, поведение на мобильном экране и ограничения (без фреймворков, BEM, CSS-переменные). Результат будет менее предсказуемым по виду, зато запрос дешевле, и подойдут модели без поддержки картинок.

Как избежать мусорной разметки?

Явно запретите лишнее: вложенные div без смысла, инлайн-стили, внешние библиотеки. Требуйте семантические теги и прогоняйте результат через валидатор. Если есть проектные классы, показывайте их в запросе.

Нужно ли проверять код после модели?

Обязательно. Откройте страницу на ширине 360px, прогоните валидатор и проверьте клавиатурную навигацию. Модель может уверенно выдать разметку, которая не проходит валидацию или ломается на нестандартной ширине.