Дизайн-система задним числом

Сайт уже был на mmkeewa.ru, когда я поняла, что у меня нет нормальной дизайн-системы. Цвета прописаны хексами в трёх местах, отступы — каждый раз заново. Когда я просила Claude добавить новый блок, он каждый раз изобретал палитру: pink становился бордовым, charcoal превращался в black, отступ 28 становился 32.

Через две итерации сайт перестал выглядеть консистентным. Стало понятно: либо сейчас сделать систему, либо через месяц переделать будет дороже, чем сделать заново.

До дизайн-системы — italic-pink слово вшито в один компонент, остальные не знают про него

Попытка 1 — Claude Design

Пошла в Claude Design, накидала скриншоты сайта, попросила собрать систему по референсу. Получился аккуратный документ — токены, шкалы, компоненты.

Когда захотела перенести его в Figma — оказалось, что десктопная версия Claude Design не подключена к Figma MCP. MCP-коннектор работает только из Claude Code, не из дизайн-инструмента. Тупик.

Дизайн получился — а способа перенести его в Figma нет

Попытка 2 — JSON через Tokens Studio

Claude Design предложил экспорт токенов в формат W3C / Tokens Studio JSON. План: импортируешь в плагин Tokens Studio внутри Figma — и переменные сами создаются.

Сделала JSON, открыла Tokens Studio. Полноценный импорт оказался в платной версии за $9/мес. На принципе платить за инструмент-посредник не хотелось.

JSON работает, плагин-импортёр платный

Попытка 3 — собственный плагин Figma

Попросила Claude Code написать плагин: читает tokens.json + спеку компонентов и собирает дизайн-систему в Figma за один прогон. Плагин Claude Code написал, скомпилировал.

Когда я загрузила его в Figma — упали ошибки. Что-то с типами шрифтов, что-то с порядком создания вариантов. Без знания Figma Plugin API я не понимала, какую строчку править.

Что сработало — Claude Code + Figma MCP

Финальный путь: попросила Claude Code запустить плагин напрямую через Figma MCP, не загружая через UI. MCP даёт прямой доступ к Figma Plugin API из внешнего процесса — Claude Code пишет JS и сразу выполняет в файле, видит ошибки и сам их чинит, без круга «скомпилировал → импортировал → упало → расковыривай».

const core = figma.variables.createVariableCollection('core');
const inkVar = figma.variables.createVariable(
  'color/text/ink',
  core,
  'COLOR',
);
inkVar.setValueForMode(core.defaultModeId, {
  r: 0.144, g: 0.131, b: 0.110,
});

За один сеанс собралось:

• 128 переменных в двух коллекциях — core (raw values) + semantic (aliases на core)
• 9 text styles, 2 effect styles
• 7 страниц с эмодзи-префиксами для визуального разделения
• 11 primitive-компонентов — Button (12 вариантов), Eyebrow, Badge, Logo, Input, InstallBlock, SideNavItem, FloatingNavItem, NavLink, CaseIcon ×7, SkillIcon ×3
• 5 composite-компонентов — Card/Work, Card/SkillEmbed, Card/Template, Block/TimeCompression, Modal/Subscribe
• 3 шаблона страниц T1/T2/T3 — собранные из инстансов

Файл дизайн-системы в Figma — Cover-страница

Колл цветовых токенов с привязкой к переменным

7 case-иконок — каждая 64×64, 1.5px stroke, один pink-акцент

Плюс Claude Code сразу обозначил canonical-страницы (🧱 Components, 🧩 Composite, 📄 Templates) — те, что плагин перезаписывает при каждом Sync & Build, — и personal-страницы (🛠 Drafts, 🖼 Mockups), где я могу свободно рисовать, не боясь, что мою работу затрёт следующим прогоном.

Anti-patterns как часть системы — то, чего не делать, важнее правил

Что я унесла

Дизайн-система — не отдельный проект на месяц. Это два канонических файла (tokens.json + components.spec.json) и бот, который синхронизирует Figma с ними. React-код потребляет CSS-переменные, Figma строится плагином, Claude получает контекст из DESIGN.md + WORKFLOW.md — всё держится на этих двух файлах.

Время от старта эксперимента до рабочей системы — ~6 часов. Хотела сделать «за неделю», получилось за вечер благодаря тому, что MCP убирает шаг «скомпилировал плагин — импортировал — упало — разбирайся».

Главный вывод не про инструменты. Дизайн-система задним числом всегда дороже, чем сразу. Но если уже задним числом — пусть будет вечер, а не месяц.