Как исправить догадки 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
👀 Смотрите также
Как я опроверг свой собственный баг-репорт: отладка OpenClaw Telegram через прокси apiRoot
apiRoot в OpenClaw для Telegram можно указать на локальный прокси, чтобы видеть реальные передаваемые данные. Разработчик отозвал свой баг-репорт, узнав, что скопированный текст был отрисован, а не вставлен.

Мультимодельная маршрутизация сокращает затраты на API OpenClaw на 50%.
Разработчик сократил расходы на API OpenClaw на 50%, направляя различные задачи через разные модели: Claude для сложных рассуждений, DeepSeek для операций с файлами и генерации тестов, а Gemini или GPT для задач средней сложности.

Аудит токенов Claude Code выявил скрытые расходы из-за загрузки инструментов по умолчанию.
Разработчик проанализировал 926 сессий Claude Code и обнаружил, что при запуске загружается 45 000 токенов, из которых 20 000 приходятся на определения схем системных инструментов. Включение настройки ENABLE_TOOL_SEARCH сократило начальный контекст с 45 000 до 20 000 токенов, экономя 14 000 токенов за каждый ход.

5 неочевидных навыков агента для фронтенд-разработчиков, использующих Claude AI
Фронтенд-разработчик делится 5 специфическими навыками для агентов Claude AI, которые повышают продуктивность и качество кода: Playwright, продвинутые типы для TypeScript, LyteNyte Grid, шаблоны Tailwind CSS и навыки PNPM.