Хватит вручную исправлять сломанный UI, созданный ИИ

Ваши инструменты для написания кода с ИИ часто пасуют перед дизайном.

Вы просите кнопку. ИИ выдает один оттенок синего. Вы просите другой компонент. ИИ выдает другой оттенок синего. Это происходит потому, что у ИИ нет строгой дизайн-системы.

Google Labs выпустила design.md, чтобы решить эту проблему.

Это спецификация, которая позволяет таким инструментам, как Cursor, Claude Code и GitHub Copilot, считывать ваши правила дизайна. Это предотвращает несогласованность отступов, неправильные шрифты и различие в оттенках.

Как это работает:

design.md — это Markdown-файл, состоящий из двух частей.

  • YAML Front Matter: содержит точные дизайн-токены. Здесь вы определяете цвета, типографику, отступы и радиусы скругления углов.
  • Markdown Body: содержит обоснование дизайна (design rationale). В нем объясняется, почему используется тот или иной цвет и когда его следует избегать.

Такая структура помогает ИИ понимать как данные, так и логику. Он не просто видит hex-код, а понимает, что определенный цвет предназначен для заголовков и его не следует использовать для основного текста.

Ключевые возможности CLI design.md:

  • Linting: проверяет правильность ваших токенов. Он даже проверяет контрастность на соответствие стандарту доступности WCAG AA.
  • Diffing: показывает, какие именно токены изменились при обновлении вашего дизайна.
  • Exporting: конвертирует ваш файл дизайна в Tailwind CSS, JSON или W3C Design Tokens.
  • Spec: генерирует руководство, которое можно передать вашему ИИ, чтобы научить его читать ваш файл.

Почему это важно:

Большинство разработчиков используют CLAUDE.md или AGENTS.md для общих правил. Хотя они и полезны, эти файлы в основном написаны на естественном языке. ИИ все равно приходится угадывать конкретные значения.

design.md превращает вашу дизайн-систему в машиночитаемые данные.

Как использовать:

  1. Поместите DESIGN.md в корень вашего проекта.
  2. В ваш CLAUDE.md или правила Cursor добавьте следующую строку: "For UI tasks, read DESIGN.md first and strictly follow the tokens and rationale."

Хватит повторять своему ИИ «не тот цвет». Дайте ему единый источник истины.

Source: https://dev.to/isray_notarray/designmd-if-your-ai-generated-ui-keeps-drifting-youre-missing-googles-designmd-4abh

Optional learning community: https://t.me/GyaanSetuAi