Вёрстка по макету: картинки, браузер, визуальная проверка

Вёрстка — задача, где агент чаще всего «уверенно промахивается». Код компилируется, тесты зелёные, а кнопка на 360 px уехала за край экрана. Причина простая: агент не видит страницу, если вы ему это не устроили. В этом уроке — как дать Codex макет, как сформулировать задачу на вёрстку и как замкнуть цикл «сверстал → посмотрел → поправил» без вас в роли живого скриншотера.

Картинка — это ориентир, а не задание

Codex принимает изображения: в CLI — вставкой в поле ввода или флагом при запуске, в расширении для IDE и в ChatGPT desktop — перетаскиванием с зажатым Shift (без Shift редактор сам заберёт файл).

codex -i specs/header-desktop.png "Сверстай шапку по макету"
codex --image specs/card-360.png,specs/card-1280.png "Сравни два состояния карточки"

Документация Codex прямо предупреждает: не полагайтесь на то, что картинка сама всё объяснит. Скриншот показывает одно состояние на одной ширине. Он ничего не говорит о наведении, фокусе, ошибке валидации, длинном заголовке в три строки, пустом списке и о том, что происходит между 768 и 1280 px. Всё это нужно написать текстом.

Ещё одна ловушка — числа «на глаз». По растровой картинке модель оценивает отступы и размеры шрифта приблизительно. Если вам важно попасть в 24 px, а не в 22, берите значения из Figma, а не из PNG.

Figma через MCP

Для командной работы скриншоты быстро становятся узким местом: дизайнер поменял макет, а у агента старая картинка. У Figma есть MCP-сервер, через который агент читает сам файл — структуру фреймов, размеры, переменные и стили, а при необходимости получает и изображение фрейма. Удалённый сервер подключается одной командой, при первом использовании Codex откроет браузер для входа в аккаунт Figma:

codex mcp add figma --url https://mcp.figma.com/mcp

После этого в промпте достаточно дать ссылку на фрейм. Список инструментов сервера и вариант с локальным сервером из Figma desktop описаны в документации Figma. Подробнее о подключении MCP-серверов — в уроке MCP на практике.

Важная оговорка: MCP-сервер отдаёт данные дизайна, но не знает ваших соглашений. Он с радостью предложит абсолютное позиционирование и цвета в hex, если вы не сказали, что в проекте BEM, SCSS-переменные и готовые миксины для брейкпоинтов. Эти правила — в AGENTS.md проекта, а не в каждом промпте.

Промпт на вёрстку

Хорошая задача на вёрстку отвечает на четыре вопроса: что верстаем, по каким правилам, что не трогаем и как проверяем. Пример для блока на сайте на OctoberCMS:

Сверстай блок «Этапы работы» по фрейму Figma: <ссылка на фрейм>.

Где: новый partial в themes/site/partials/blocks/stages.htm,
стили — resources/scss/blocks/_stages.scss, подключить в бандл страницы services.

Правила: BEM, цвета и отступы только из переменных _tokens.scss,
брейкпоинты — миксином respond-to. Новых зависимостей не добавлять.

Состояния, которых нет в макете: заголовок этапа до 3 строк,
от 3 до 7 этапов, на мобильном — вертикальный список.

Не трогай: общие стили шапки и подвала, другие блоки страницы.

Готово, когда: npm run build проходит, сделаны скриншоты страницы
на ширинах 360, 768, 1280, 1920 и 2560, и ты сам сравнил их с макетом
и перечислил расхождения, которые остались.

Последний пункт — главный. Без него агент закончит на «стили добавлены».

Агент должен видеть результат

Способ зависит от того, где вы работаете.

ChatGPT desktop. В режиме Codex есть встроенный браузер: откройте в нём localhost, и агент сможет сам кликать, прокручивать, делать скриншоты и проверять страницу через Computer Use. На элемент можно оставить комментарий в режиме Annotate, а через Adjust — показать, какой отступ или цвет вы хотите, прямо на странице. Обратиться к браузеру в промпте можно через @Browser. В CLI и расширении для IDE встроенного браузера нет. Подробно возможности браузера разобраны в уроке Браузер в руках агента.

CLI и IDE. Дайте агенту инструмент, которым он сам снимет страницу. Вариант первый — MCP-сервер браузера, например Playwright MCP:

codex mcp add playwright -- npx @playwright/mcp@latest

Вариант второй, часто более экономный по контексту, — маленький скрипт в репозитории, который агент запускает сам, а потом открывает получившиеся PNG:

import { mkdirSync } from 'node:fs';
import { chromium } from 'playwright';

const url = process.argv[2] ?? 'http://localhost:8001/';
const widths = [360, 768, 1280, 1920, 2560];

mkdirSync('shots', { recursive: true });
const browser = await chromium.launch();
for (const width of widths) {
  const page = await browser.newPage({ viewport: { width, height: 900 } });
  await page.goto(url, { waitUntil: 'networkidle' });
  await page.screenshot({ path: `shots/${width}.png`, fullPage: true });
  await page.close();
}
await browser.close();

Запуск — npx tsx scripts/shots.mts http://localhost:8001/services. Расширение .mts нужно, чтобы файл выполнялся как ES-модуль: в скрипте используется await на верхнем уровне. Пропишите эту команду в AGENTS.md в раздел про проверку вёрстки, и агент будет пользоваться ей без напоминаний. Учтите песочницу: обращение к локальному серверу и запуск браузера могут потребовать вашего одобрения — это нормально (см. Песочница и одобрения).

Итерации маленькими шагами

Документация Codex советует для живой доработки интерфейса тот же ритм, что и для кода: короткие точечные запросы вместо одного большого. «Измени только шапку: больше воздуха, заголовок крупнее, на мобильном не ломать» лучше, чем «сделай красивее».

Два правила, которые экономят нервы:

• Удачное состояние сразу коммитьте. Откатиться к нему проще, чем объяснять агенту, «как было два шага назад».
• Если вы сами поправили или откатили правку агента, скажите ему об этом. Иначе на следующем шаге он вернёт свою версию.

Где агент ошибается в вёрстке

Список для самопроверки перед ревью:

• Глобальные стили. Правка «для этого блока» в общем файле ломает соседние страницы. Просите показать, какие селекторы затронуты за пределами блока.
• Магические числа. margin-top: 37px вместо переменной из токенов. Ищите в диффе числа в px.
• Только две ширины. Проверено на 360 и 1440, а на 2560 фон блока обрывается. Для блоков на всю ширину и бегущих строк ultra-wide обязателен.
• Шрифты и картинки. На скриншоте агента системный шрифт, потому что веб-шрифт не загрузился в песочнице. Сравнение «похоже на макет» в такой ситуации бессмысленно.
• Доступность. Кнопка-иконка без подписи, контраст ниже нормы, порядок фокуса. Попросите отдельной строкой проверить это.

С выбором модели под визуальные задачи всё быстро меняется. На октябрь 2026 документация отмечает GPT-6 Astra как модель с более сильной визуальной оценкой, например при сверке страницы со скриншотом. Принцип выбора от этого не зависит: для сверки с макетом берите самую сильную доступную модель, для механических правок стилей хватит быстрой.