Как исправить догадки 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, чтобы не вставлять её каждый сеанс.
📖 Read the full source: r/ClaudeAI
👀 Смотрите также

Диагностика сниженной производительности Claude: первопричины и исправления
Практический разбор того, почему результаты кодирования Claude со временем ухудшаются, и действенные решения, включая управление контекстом и гигиену промптов.

Используйте CLAUDE.md для сохранения проектных конвенций в сеансах Claude AI
Поместите файл CLAUDE.md в корень проекта, и Claude будет читать его в начале каждого сеанса, запоминая правила TypeScript, отсутствие экспортов по умолчанию, соглашения по тестированию и контекст архитектуры без повторных объяснений.

Запуск полностью локального ИИ-агента на ноутбуке с 6 ГБ видеопамяти: пошаговое руководство для студентов
Изучите, как студенты могут использовать ноутбуки с 6 ГБ видеопамяти для запуска AI-агентов локально, не полагаясь на дорогие API. Наше руководство разбивает важные шаги и инструменты.

Использование Cron Jobs в OpenClaw для запланированных задач вместо мониторинга Heartbeat
В посте на Reddit объясняется, как использовать функцию cron-заданий OpenClaw для планирования задач, таких как утренние брифинги и сортировка писем, с критически важным флагом --session isolated для предотвращения утечки контекста, а также предупреждается о возможных ошибках в изолированных сессиях в разных версиях.