Как исправить догадки CSS в Claude Code с помощью дизайн-системы

Разработчик, создающий дашборд для анализа акций с помощью Claude Code, столкнулся с распространённой проблемой: ИИ постоянно генерировал сломанный CSS для одного и того же невыровненного div. За шесть итераций попытки исправить отступы, переключиться с flex на grid и добавить overflow: hidden либо не срабатывали, либо усугубляли проблему.

Проблема: ИИ проектирует вслепую

Разработчик понял, что у Claude Code нет визуальной обратной связи — он не видит результат в браузере. Он сопоставляет шаблоны из описаний и угадывает стили, часто создавая «технически корректный CSS, который выглядит так, будто его разработал человек, никогда не пользовавшийся компьютером».

Решение: ограничить системой дизайна

Вместо того чтобы давать отдельные токены, предоставьте полную спецификацию системы дизайна. Разработчик использовал:

/* отступы */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;

/* цвета */
--bg-primary: #0f1117;
--bg-card: #1a1d27;
--accent: #3b82f6;
--text-primary: #e2e8f0;
--text-muted: #64748b;
/* типографика */
--text-sm: 12px;
--text-base: 14px;
--text-lg: 18px;
--text-xl: 24px;

Затем дайте указание: «Используйте только эти значения. Никаких жёстко заданных чисел». Это даёт Claude основу для рассуждений, а не чистый холст для произвольных решений.

Разделите промпты для структуры и стилей

Никогда не просите Claude писать HTML и CSS одновременно. Разработчик разделил процесс:

• Первый промпт: «Сгенерируйте только HTML-структуру для этого дашборда. Без атрибутов стиля, без CSS, пока без классов. Только семантическая структура.»
• Второй промпт: «Теперь напишите CSS для этой структуры, используя только указанную выше систему дизайна.»

Это заставляет Claude рассматривать HTML как фиксированный контракт перед применением стилей, предотвращая потерю предположений о собственном выводе.

Результат: следующий компонент потребовал не шесть итераций, а одну. Разработчик также поднял вопрос о том, можно ли эту систему дизайна закрепить через файл CLAUDE.md, чтобы не вставлять её каждый сеанс.