Claude Code: единый дизайн приложения без правок

Claude Code генерирует компоненты так, что каждый выглядит по-своему — разные отступы, шрифты, цвета. Полгода я, Арина Михална, била агента палкой за это, пока не поняла: ему нужен не промпт на каждый компонент, а один файл с правилами. Дальше он сам держит стиль.

Почему Claude Code не держит стиль без инструкций

Claude Code видит только текущий файл и контекст проекта. Если вы не дали ему дизайн-систему явно, он придумывает стили на лету — берёт цвета из головы, отступы округляет до удобных чисел, шрифты подбирает на глаз. Результат работает, но выглядит как собранное из пяти разных приложений.

Проблема не в модели, а в отсутствии инструкции. Claude Code умеет держать стиль, если ему дать образец — но образец должен быть в формате, который он прочитает при старте сессии. Таким форматом в Claude Code стал design skill.

Что такое design skill и где он живёт

Design skill — это файл в корне проекта, который Claude Code читает при каждом запуске. Формат: обычный markdown или JSON с токенами дизайн-системы, примерами компонентов и правилами использования. Агент применяет эти правила ко всем файлам, которые он создаёт или правит.

Структура простая: токены (цвета, шрифты, отступы), шаблоны компонентов (кнопка, карточка, инпут), правила (когда использовать primary-кнопку, когда secondary). Вы пишете это один раз, дальше агент сам подставляет правильные значения.

Что положить в design skill	Зачем это нужно
Токены из Figma (цвета, шрифты, размеры)	Агент подставит их вместо хардкода
Примеры готовых компонентов	Покажут структуру, агент повторит на новых
Правила использования	Объяснят, когда какой вариант применять

Файл называйте DESIGN.md или design-system.md — главное, чтобы имя было понятным. Кладите в корень проекта, рядом с CLAUDE.md. Оба файла агент читает автоматически.

Как перенести токены из Figma в skill

Самый быстрый путь — плагин Tokens Studio (бывший Figma Tokens). Он экспортирует все токены макета в JSON или CSS-переменные. Вы копируете этот файл в проект, прописываете импорт в design skill — готово.

Если плагина нет, делайте руками: откройте макет, выпишите все цвета, шрифты и отступы в таблицу. Переведите их в формат CSS-переменных:

--color-primary: #3B82F6;
--color-secondary: #64748B;
--font-heading: 'Inter', sans-serif;
--spacing-small: 8px;
--spacing-medium: 16px;

Положите переменные в tokens.css или прямо в DESIGN.md. Claude Code подставит их автоматически, когда будет генерировать компоненты.

Пример design skill на практике

Покажу на кнопке. У вас есть три варианта: primary (синяя), secondary (серая), ghost (прозрачная). Вы описываете их в skill один раз:

## Кнопка

Primary: синий фон (--color-primary), белый текст, высота
40px, скругление 8px.
Используется для главных действий (отправить, сохранить,
купить).

Secondary: серый фон (--color-secondary), тёмный текст, те
же размеры.
Для второстепенных действий (отмена, назад).

Ghost: прозрачный фон, синяя обводка, синий текст.
Для третичных действий (узнать больше, настройки).

Все кнопки используют шрифт --font-ui, размер 14px, вес 500.

Дальше вы говорите агенту «создай кнопку для отправки формы» — он генерирует primary-кнопку с правильными токенами. Говорите «добавь кнопку отмены» — получаете secondary. Править ничего не нужно, агент сам выбирает вариант по контексту.

Как обновлять компоненты при изменении макета

Дизайнер поменял цвет или размер — обновляете токены в tokens.css, запускаете Claude Code с командой «обнови все кнопки по новым токенам». Агент пройдётся по файлам, подставит новые значения, покажет diff. Вы проверяете, коммитите — готово.

Это работает, потому что агент помнит структуру компонентов из design skill. Он не переписывает кнопку с нуля, а меняет только значения переменных. Логика остаётся той же, меняется только визуал.

Что изменилось	Как обновить
Цвет, размер, шрифт токена	Правите tokens.css, команда «обнови компоненты»
Новый вариант кнопки (например, danger)	Добавляете описание в skill, команда «создай danger-кнопку»
Изменилась логика (hover, disabled)	Правите шаблон в skill, команда «обнови все кнопки»

Где design skill не сработает

Skill помогает держать стиль, но не заменяет ревью кода. Агент может неправильно выбрать вариант компонента (поставить primary вместо secondary), пропустить edge case (кнопка disabled без стилей) или сгенерировать компонент с лишними вложениями.

Проблемы возникают, когда:

• В skill нет примера компонента, который вы просите создать. Агент придумает структуру сам, и она может не совпасть с вашей дизайн-системой.
• Вы даёте расплывчатую команду («сделай красиво»). Агент не понимает, какой вариант применить, и выбирает наугад.
• В макете используются кастомные эффекты (градиенты, тени, анимации), которых нет в токенах. Агент их пропустит или упростит до стандартных CSS-свойств.

Skill работает как подстраховка, а не как замена здравого смысла. Вы всё равно смотрите на результат и поправляете то, что агент понял не так. Но править приходится детали, а не переписывать весь компонент.

Примеры для других фреймворков

Та же логика работает с React, Vue, Svelte — меняется только синтаксис шаблонов. В React вы описываете JSX-структуру компонента, в Vue — <template> и <style scoped>, в Svelte — разметку с CSS-переменными. Токены и правила остаются теми же.

Пример для React:

## Кнопка (React)

Primary:
<button className="btn btn-primary" style={{
backgroundColor: 'var(--color-primary)' }}>
  {children}
</button>

CSS:
.btn { height: 40px; border-radius: 8px; font:
var(--font-ui); }
.btn-primary { background: var(--color-primary); color:
white; }

Агент подставит этот шаблон, когда вы попросите создать кнопку. Если вы работаете с Tailwind CSS, опишите утилитные классы вместо CSS-переменных — логика та же.

Как проверить, что skill работает

Запустите Claude Code, попросите создать компонент из вашей дизайн-системы (кнопку, карточку, инпут). Посмотрите на сгенерированный код: если агент подставил токены из skill и структура совпадает с шаблоном — работает. Если хардкодит цвета и придумывает отступы — skill не подхватился.

Проверка в три команды:

1. Claude code — запустите агент в корне проекта.
2. «Создай primary-кнопку» — попросите компонент из skill.
3. Откройте файл, проверьте токены — должны быть var(--color-primary), а не #3B82F6.

Если агент игнорирует skill, проверьте:

• Файл лежит в корне проекта, а не в подпапке.
• Имя файла понятное (DESIGN.md, design-system.md).
• В файле есть примеры компонентов, а не только токены.

По материалам: How to Build Consistent Designs with Claude Code, официальная документация Claude Code.

Читайте также

• Claude Code Skills в 2026: как скиллы работают внутри Claude Code
• Claude Code skills: перенос между моделями — разбор Microsoft 2026
• Claude Code /design: как рисовать интерфейсы в терминале 2026
• На портале «Мастерская нейросетей»: Нейросети для дизайнера в 2026: что взять в работу, а что — маркетинговый шум

Design skill убирает рутину — вы настраиваете дизайн-систему один раз, дальше агент держит стиль сам. Работает с любым фреймворком и макетами из Figma. Забирайте готовые шаблоны и примеры в канале: https://t.me/+jDf7-o-nDPw2ZGUy