Codex Design

Четыре скилла для AI-агента, которые ведут страницу от идеи до зафиксированной дизайн-системы:

design-grill  →  документ решений + прототип  →  design-cro  →  design-art  →  референсы секций  →  код (например, image-to-code)  →  design-md  →  DESIGN.md

1. design-grill — договориться, что на странице и в каком порядке.
2. design-cro — проверить, что страница ведёт посетителя к одному действию.
3. design-art — решить, как это выглядит, и получить картинки секций, по которым можно верстать.
4. design-md — снять с готовой страницы реальную дизайн-систему, убрать конфликты и записать DESIGN.md, по которому работают следующие агенты.

design-grill

Грил — допрос по вашей идее — не в терминале, а на аккуратной странице в браузере.

Агент задаёт вопросы раундами. У каждого вопроса два-четыре варианта, совет агента и короткое «почему». Вы выбираете варианты, пишете свой ответ или спрашиваете в обсуждении и отправляете всё одной кнопкой. Агент отвечает, уточняет советы и выкладывает следующий раунд, пока не решено всё.

Что получается в конце

• Документ с решениями — docs/<тема>-design.md: словарь терминов, зачем это всё, ключевые решения с таблицей оценок, остальные выборы, риски, отложенное и открытые вопросы.
• Прототип — docs/<тема>-visual.html, если нажать «Прототип»: HTML-набросок по ответам, нерешённые места помечены.
• Следующий шаг — агент предлагает запустить design-art и сделать первый визуальный референс по этому документу.

Как идёт работа

1. Пишете агенту: /design-grill лендинг курса: раскладка блоков.
2. Открывается страница: вопросы слева, текущий вопрос по центру, обсуждение справа.
3. Выбираете варианты, при желании спрашиваете «а что это?», жмёте «Отправить».
4. Агент отвечает и добавляет следующий раунд. Важные вопросы помечены «Важное решение», вопросы вкуса — «На ваш вкус».
5. «Прототип» рисует набросок, «Завершить» собирает итоговый документ.

Если агент перестал слушать страницу, она скажет об этом. Напишите агенту в чат грил — он заберёт сохранённые ответы и продолжит.

Нужен Node.js 20+, других зависимостей нет. Сервер слушает только 127.0.0.1 и ничего не отправляет наружу. Сессии хранятся в ~/.design-grill (меняется переменной GRILL_HOME).

design-cro

Проверяет конверсию страницы: понятна ли она за пять секунд, есть ли одно главное действие, стоят ли доказательства рядом с обещаниями, отвечены ли возражения, где трение. Работает в двух режимах: по раскладке блоков до визуала (например, по документу из design-grill) и по готовой странице, скриншоту или ссылке. Итог — главная проблема, быстрые правки, сильные изменения, гипотезы для теста и варианты заголовка и кнопки. Файлы не меняет, пока не попросите.

design-art

Визуальные референсы для лендинга, сайта или экрана — по одной картинке на секцию плюс склейка всей страницы. Кода не пишет: это вход для верстки.

Как идёт работа

1. Читает документ из design-grill, если он есть, и спрашивает только о внешнем виде.
2. Предлагает 3–5 визуальных направлений с объяснением, что каждое меняет. Можно дать свой референс.
3. Фиксирует выбранный стиль и генерирует каждую секцию в нём, по сетке.
4. Оценивает каждую картинку на собираемость и читаемость, слабые перегенерирует.
5. Склеивает секции в превью всей страницы и собирает пакет для реализации: картинки, стиль, порядок секций, заметки.

Сделан под Codex: нужны встроенная генерация изображений и субагенты.

design-md

Фиксирует готовый фронтенд в DESIGN.md — файл, который агенты читают перед любой правкой интерфейса. Формат — открытый DESIGN.md от Google Labs: токены в YAML плюс короткие объяснения.

Главное — сначала конфликты, потом файл. Скилл открывает страницу на ширинах 375, 768 и 1280 px, снимает то, что браузер реально рисует, и показывает несостыковки:

• контраст текста ниже WCAG AA;
• почти одинаковые размеры шрифта (15 и 16 px), дробные размеры, слишком тесный или разреженный межстрочный интервал;
• почти одинаковые цвета;
• отступы и радиусы вне сетки 4 px;
• лишние шрифты, начертания, тени; список контейнеров и брейкпоинтов.

По каждому пункту вы решаете: объединить, оставить как исключение или исправить в коде. Только после этого пишется DESIGN.md: токены с ролями, компоненты с состояниями, «делай / не делай» из ваших решений, откуда взяты значения и открытые вопросы. В конце файл проверяется линтером npx @google/design.md lint.

Инструменты в design-md/scripts/: collect.js (запускается в любом браузере на странице), collect-playwright.mjs (то же через Playwright проекта, сразу на трёх ширинах), analyze.mjs (Node без зависимостей, пишет отчёт о конфликтах).

Установка

Codex:

git clone https://github.com/harnessmachine/codex-design ~/codex-design
ln -s ~/codex-design/design-grill ~/.codex/skills/design-grill
ln -s ~/codex-design/design-cro ~/.codex/skills/design-cro
ln -s ~/codex-design/design-art ~/.codex/skills/design-art
ln -s ~/codex-design/design-md ~/.codex/skills/design-md

Claude Code (design-grill, design-cro и design-md):

git clone https://github.com/harnessmachine/codex-design ~/codex-design
ln -s ~/codex-design/design-grill ~/.claude/skills/design-grill
ln -s ~/codex-design/design-cro ~/.claude/skills/design-cro
ln -s ~/codex-design/design-md ~/.claude/skills/design-md

Обновление: git -C ~/codex-design pull.

Лицензия

MIT. См. LICENSE и design-grill/LICENSE. Формат DESIGN.md — спецификация Google Labs (Apache-2.0); здесь только ссылки на неё и краткое изложение своими словами.