Перейти к содержимому
Экосистема AI Vibe
← Назад к AI Vibe News

Редакция 4 августа 2026 г.

Разборы

Агент не дизайнит картинки — зато пишет HTML

Агент не дизайнит картинки — зато пишет HTML

Соло на Cursor или Claude Code вы это уже видели: агент собирает вёрстку, но без шага рендера результат остаётся в чате — «извините, показать не могу». Узкое место не в генерации картинок через диффузию, а в отсутствии шага рендера через MCP: модель и так пишет HTML/CSS, остаётся дать ей инструмент, который превращает разметку в PNG или PDF и возвращает превью для самопроверки.

Почему диффузия проигрывает вёрстку, а кодовый агент — нет

Картинка из диффузионной модели — лотерея: мягкие градиенты, кривая типографика, текст, который модель не фиксирует в пикселях. HTML/CSS с рендерером даёт детерминированный результат: точные размеры, версионируемый код, повторяемый вывод. Для соло-разработчика без дизайнера это практичнее, чем гонять промпты к image-модели ради OG-карточки или обложки поста.

Автор материала accreditly формулирует контраст жёстко: диффузия не держит токены бренда и не воспроизводит макет дважды, тогда как модель «с удовольствием» задаёт, например, Inter 800 на 96px с кернингом. Слабое место агента — не способность писать разметку, а отсутствие шага рендера: он генерирует HTML и CSS, но без MCP-сервера некуда отдать файл на визуальную проверку.

MCP в Cursor и Claude Code: html2img как мост к картинке

Сервис HTML to Image предлагает удалённый MCP-сервер по адресу https://app.html2img.com/mcp — Streamable HTTP, аутентификация Bearer API key, ничего не хостить локально. Нужен клиент с поддержкой MCP и ключ на paid plan.

В Claude Code достаточно одной команды:

claude mcp add --transport http html2img https://app.html2img.com/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

В Cursor тот же сервер прописывается в ~/.cursor/mcp.json или в .cursor/mcp.json проекта:

{
  "mcpServers": {
    "html2img": {
      "url": "https://app.html2img.com/mcp",
      "headers": { "Authorization": "Bearer YOUR_API_KEY" }
    }
  }
}

После подключения доступны два инструмента: generate-image-from-html (полный HTML → PNG или PDF) и screenshot-url (скриншот живой страницы с опциональной инъекцией CSS и селектором элемента). Каждый вызов — один credit на одно изображение.

Для соло-workflow это значит: настроил MCP один раз — и агент в IDE может рендерить ассеты прямо в разговоре, без Chromium, Puppeteer и отдельного дизайн-инструмента. Пост — сжатая версия полного гайда, где те же шаги расписаны и для VS Code, Windsurf и других клиентов.

Цикл самопроверки: превью вместо «выстрелил и забыл»

Одноразовая генерация — «выстрелил и забыл». Рабочий паттерн — итерация с визуальной обратной связью:

  1. Агент пишет HTML/CSS и вызывает инструмент.
  2. Инструмент возвращает URL полноразмерного рендера и уменьшенное превью.
  3. Модель «видит» превью и замечает переполнение подзаголовка, обрезку длинного названия и прочие огрехи.
  4. Агент правит разметку и рендерит снова; можно направлять обычным языком («уплотни отступы…») или просить критику перед показом.
  5. Каждый проход — ещё один credit: три доработки — три credits.

В примере из поста агент собирает launch card «Relay 2.0» (1200×630): тёмный фон #0B1220, акцент #10B981, pill «Now shipping», заголовок и подзаголовок «Webhooks that retry themselves.» — и через пару секунд получает permanent CDN URL. Без превью агент слеп; с превью — тот же цикл, что при ручном code review, только внутри IDE.

Rules один раз — бренд в каждой следующей картинке

MCP решает рендер, но не память о стиле. Высокоценный приём — файл постоянных инструкций в runtime агента: CLAUDE.md, Cursor rules или Copilot instructions. Туда один раз кладётся visual system:

When generating images with the html2img MCP server:
- Canvas 1200x630 for OG images, 1080x1080 for Instagram
- Fonts: Inter for UI, weights 500 and 800 only
- Background #0B1220, text #FFFFFF, muted #94A3B8, accent #10B981
- Embed any image as a base64 data URI, never a remote URL
- Complete, self-contained HTML with styles in one <style> block

Рендерер по задумке пропускает удалённые <img> — ассеты inline; исключение — Google Fonts через @import, который подгружается на стороне сервера. После фиксации rules каждая следующая картинка агента попадает в бренд без повторения палитры в промпте.

MCP и REST API HTML to Image — один движок, разный вызывающий: MCP для дизайна и скриншотов в цикле, REST — для продакшен-пайплайнов (OG на билде, инвойс на заказ). Типичная композиция: шаблон в чате → итерации → финальный HTML в кодовую базу → API с реальными данными. Сессия MCP — фаза дизайна, вызов API — продакшен.

Источники