Vercel вынесла дизайн-правила в design.md: три слоя вместо одного промпта

Агент вне репозитория не видит skill product-design рядом с компонентами — Vercel собрала для отчётов и разовых лендингов трёхслойную схему: публичный design.md по URL, общий CSS и прогоны на семи зафиксированных сценариях. Одного промпта не хватало: модели по-разному понимали «чистую» вёрстку и каждый раз собирали страницу заново.

Почему одного промпта мало

Первый заход — свернуть skill в один публичный prompt. Описание стиля модели читали, но без живых примеров и компонентов каждый запуск давал другую композицию.

На сценарии renewal proposal без design.md выходил типовой SaaS-дашборд. С файлом страница начиналась с рекомендации по продлению, коммерческие цифры шли в одной сетке, а сравнение конкурентов — на одной шкале.

Три слоя

• design.md — структура доказательств, тексты с конкретными утверждениями, иерархия и список того, что не генерировать (именованные антипаттерны).
• Общий CSS по URL — фиксированный набор классов и токенов; в контекст модели стили не попадают, браузер подгружает их при рендере.
• Цикл проверок — автоматика ловит механику вроде ширины таблиц, люди смотрят иерархию и композицию; исправления уходят в текст правил, CSS или код проверок.

Семь сценариев с mock-данными — от отчёта по usage до security governance brief. Полный прогон гоняют на Claude Opus 4.8 и Codex с GPT-5.5. При одной типографике Vercel planning page и renewal proposal собираются под разные задачи читателя.

Что показал контрольный тест

На файл ушло более 200 прогонов. В узком тесте — три десктоп-сценария, Codex с GPT-5.5, по две генерации без перезапуска — с design.md нашли 39 известных сбоев, без файла 91. Это −57%, но выборка всего шесть страниц, а проверки видят только уже описанные ошибки.

В Slack тот же подход закрывает @design-agent на базе eve: для запроса на сайт подтягивает актуальный design.md, верстает на общем CSS и кидает в тред скриншот с ссылкой на деплой.

Источник: How our agents build on-brand pages with design.md.