Figma + Claude Code + React: дизайн-система своими руками — без платных курсов

## Что вы получите в итоге

После этого руководства у вас будет:

• Next.js-приложение с компонентами из вашей дизайн-системы
• Figma подключена к Claude через MCP — он читает токены напрямую
• Claude может рисовать в Figme за вас: создавать компоненты, добавлять варианты, писать документацию
• Песочница для сборки прототипов из готовых компонентов
• Файл CLAUDE.md с правилами и соглашениями проекта — Claude читает его в начале каждой сессии
• Деплой на сервер или Vercel

## Что понадобится

Инструменты:

• Claude Pro ($20/мес) — включает Claude Code, но токены оплачиваются отдельно по факту использования. Для активной работы удобнее Max ($100/мес) с включёнными токенами.
• Figma Pro ($20/мес) — для MCP-сервера
• Node.js 20+ — установить с nodejs.org
• Git — установить с git-scm.com

Figma MCP работает на любом плане, но с ограничениями: стартовый план даёт только 6 вызовов инструментов в месяц — этого хватит попробовать, но не для регулярной работы. Для нормальной работы нужен Dev или Full seat на платном плане.

## Часть 1. Установка окружения

### Шаг 1. Установить Claude Code

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

npm install -g @anthropic-ai/claude-code

Проверяете, что установился:

claude --version

Должно вывести версию. Если ошибка прав доступа — добавьте sudo перед командой.

После этого запустите claude в любой папке и пройдите авторизацию через браузер. Claude откроет страницу входа — войдите в свой аккаунт Anthropic.

### Шаг 2. Создать Next.js-проект

Можно сделать руками — или попросить Claude Code:

Создай Next.js-проект с TypeScript, Tailwind CSS и App Router.
Назови папку my-design-system.

Если делаете сами:

npx create-next-app@latest my-design-system --typescript --tailwind --app
cd my-design-system

Команда создаст проект с TypeScript, Tailwind CSS и App Router. Это стандартная база для всего, что делаем дальше.

Проверьте, что всё работает:

npm run dev

Откройте http://localhost:3000 — должна открыться стартовая страница Next.js.

### Шаг 3. Инициализировать Git

Claude Code тоже умеет это делать. Промпт:

Инициализируй Git в проекте, сделай первый коммит
и запушь на GitHub в новый репозиторий my-design-system.

Или руками:

git init
git add .
git commit -m "init"

Создайте репозиторий на GitHub: зайдите на github.com → New repository → скопируйте URL.

git remote add origin https://github.com/ваш-юзернейм/my-design-system.git
git push -u origin main

Git нужен для деплоя и для отката если что-то пойдёт не так.

## Часть 2. Подключить Figma к Claude

### Шаг 4. Подключить Figma MCP к Claude Code

Официальный способ — установить плагин Figma одной командой в терминале:

claude plugin install figma@claude-plugins-official

Плагин установит MCP-сервер и добавит Agent Skills — готовые инструкции для Claude по работе с дизайн-системой. После установки запустите новую сессию Claude Code и введите /mcp — должен появиться figma в списке серверов.

Нажмите Authenticate и пройдите авторизацию через браузер — Figma попросит разрешить доступ. Токен вручную копировать не нужно.

### Шаг 5. Альтернативный способ — ручная настройка

Если плагин не установился, можно добавить MCP вручную:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Флаг --scope user делает сервер доступным во всех проектах, а не только в текущем. После этого снова введите /mcp в Claude Code и пройдите авторизацию.

### Шаг 6. Что умеет Claude через Figma MCP

После подключения Claude получает доступ к нескольким инструментам:

Важное отличие от скриншота: Claude получает настоящие значения, а не пиксели. get_metadata на кнопке вернёт paddingLeft: 12, а не «выглядит как 12 пикселей».

## Часть 3. Перенести дизайн-систему из Figma в React

### Шаг 7. Запустить Claude Code в проекте

cd my-design-system
claude

Теперь вы в среде Claude Code. Он уже видит файлы проекта и подключённый Figma MCP.

### Шаг 8. Создать CLAUDE.md — сначала правила, потом код

CLAUDE.md — это файл, который Claude читает в начале каждой сессии. Здесь описан стек, соглашения по именованию, структура папок и ограничения. Один файл заменяет объяснения в каждом промпте.

Важно создать его до того как начнёте генерировать компоненты — иначе первые компоненты делаются без ваших правил.

Можно попросить Claude создать его за вас:

Создай файл CLAUDE.md в корне проекта.
Стек: Next.js App Router, TypeScript strict mode, Tailwind CSS.
Правила: только токены из tailwind.config.ts, компоненты из src/components/,
PascalCase для компонентов, kebab-case для файлов.
Добавь раздел под эстетику — я заполню его сам.

Или создайте вручную — шаблон:

# Проект: [название]

## Стек
- Next.js App Router, TypeScript strict mode
- Tailwind CSS — только через наши токены из tailwind.config.ts
- Компоненты из src/components/

## Правила
- Никаких произвольных цветов в коде — только токены
- Все компоненты функциональные, с TypeScript-интерфейсами
- Именование: PascalCase для компонентов, kebab-case для файлов
- Не создавать новый компонент, если похожий уже есть в src/components/

## Структура
- src/components/ — переиспользуемые компоненты
- src/app/ — страницы и роуты
- src/styles/ — токены и глобальные стили

## Эстетика
[опишите визуальный язык вашего проекта: тональность, от чего уходите,
на что ориентируетесь]

## Дизайн-система в Figma
[ссылка на ваш Figma-файл]

Чем подробнее CLAUDE.md — тем точнее Claude следует вашим правилам без дополнительных объяснений в каждом промпте.

### Шаг 9. Извлечь токены из Figma

Откройте ваш дизайн-файл в Figma. Выделите любой фрейм или компонент, нажмите правой кнопкой → Copy link to selection — это даст ссылку на конкретный узел, а не весь файл. Claude работает точнее именно с такими ссылками.

Дайте Claude первый промпт:

Открой мой Figma-файл по ссылке: [ссылка на фрейм или компонент]

Извлеки все переменные и токены из дизайн-системы.
Создай на их основе:
1. tailwind.config.ts с кастомными цветами, шрифтами и отступами
2. Файл src/styles/tokens.css с CSS-переменными

Называй цвета семантически: primary, secondary, neutral, accent —
не по hex-значению.

Claude сам выберет нужные инструменты для чтения Figma. Не нужно указывать ему какой метод использовать.

### Шаг 10. Перенести компоненты

Для каждого компонента давайте отдельный промпт. Выделите компонент в Figma, скопируйте ссылку на него. Например, для кнопки:

Открой компонент Button по ссылке: [ссылка на компонент Button в Figma]

Создай React-компонент src/components/Button.tsx:
- Точное соответствие стилям из Figma
- Tailwind CSS, только наши токены из tailwind.config.ts
- TypeScript с типизированными пропсами
- Все варианты из Figma: primary, secondary, ghost
- Состояния hover и focus из дизайна
- Атрибуты доступности: aria-label, правильный тег button

Повторите для каждого компонента: Card, Input, Badge, Typography, Icon и так далее.

Совет: давайте по одному компоненту за промпт, а не все сразу — так проще проверять каждый результат и вылавливать расхождения с дизайном.

## Часть 4. Собрать прототип в коде

### Шаг 11. Создать песочницу компонентов

Песочница — это страница, где все ваши компоненты собраны вместе. Удобно для проверки и демонстрации.

Создай страницу src/app/sandbox/page.tsx.

На ней покажи все компоненты из src/components/:
- Каждый компонент в отдельной секции с заголовком
- Все варианты и состояния
- Используй реалистичный контент, не Lorem ipsum

Страница должна выглядеть как документация компонентов.

### Шаг 12. Собрать прототип лендинга или интерфейса

Теперь из ваших компонентов можно собирать реальные экраны:

Собери лендинг для [описание продукта].

Используй только компоненты из src/components/.
Структура: Hero, Features (3 карточки), CTA.
Реальный текст, не заглушки.
Адаптивная вёрстка: mobile-first.

Claude соберёт экран из ваших компонентов — не выдумает новые стили, а использует то, что уже есть в системе.

## Часть 5. Claude рисует в Figma за вас

Figma MCP поддерживает запись в канвас — Claude может не только читать ваш файл, но и рисовать в нём. Сейчас это бета, бесплатная, но Figma планирует сделать её платной. Пользуйтесь пока есть возможность.

Для write-to-canvas нужны Figma Skills из плагина — они уже установились вместе с ним на шаге 4.

### Добавить вариант компонента

Выделите нужный компонент в Figma, скопируйте ссылку на него:

Вот компонент Button: [ссылка]

Добавь к нему вариант Disabled — визуально такой же как Primary,
но с пониженной непрозрачностью (40%) и курсором not-allowed.

### Написать документацию прямо в Figma

Пройдись по всем компонентам в нашей библиотеке Figma: [ссылка на файл]

Для каждого компонента добавь аннотацию:
- Когда использовать этот компонент
- Когда не использовать
- Краткое описание каждого варианта

Пиши коротко и конкретно, без воды.

### Аудит расхождений между Figma и кодом

Посмотри на компоненты в Figma: [ссылка]
и сравни с тем, что есть в src/components/.

Составь таблицу:
1. Есть в Figma, нет в коде
2. Есть в коде, нет в Figma
3. Компоненты, где визуально что-то расходится

## Часть 6. Задеплоить на сервер

### Вариант А. Vercel — быстро и бесплатно

Самый простой способ. Зайдите на vercel.com, войдите через GitHub, нажмите Import, выберите ваш репозиторий. Vercel сам определит Next.js и задеплоит за пару минут.

Каждый push в main → автоматически новый деплой.

### Вариант Б. Свой VPS

Если нужен выделенный сервер — купите VPS на Timeweb, Selectel или DigitalOcean (от 300 руб/мес). Деплой тоже делает Claude Code — это один из самых наглядных примеров того, что агент делает сам. Промпт:

Мой VPS: IP [адрес], пользователь root, пароль [пароль].
Задеплой Next.js-приложение:
- Установи Node.js, nginx, PM2
- Склонируй репозиторий [ссылка на GitHub]
- Настрой nginx как reverse proxy на порт 3000
- Запусти через PM2 с автозапуском
- Настрой SSL через Let's Encrypt для домена [домен]

Claude выполнит все шаги через терминал. Через 10–15 минут приложение будет доступно по вашему домену с HTTPS.

## Часть 7. Обновлять дизайн-систему через промпты

### Обновить токен во всём проекте

Дизайнер изменил primary-цвет в Figma. Раньше это был ручной обход всех компонентов. Теперь:

В нашем Figma-файле [ссылка] обновился primary-цвет.
Прочитай актуальное значение из Figma и обнови его
в tailwind.config.ts и src/styles/tokens.css.
Проверь, нет ли в компонентах захардкоженных старых значений.

### Изменить масштаб типографики

Увеличь все размеры шрифтов на один шаг вверх по шкале.
Сейчас: base 14px, lg 16px, xl 20px, 2xl 24px.
Нужно: base 16px, lg 18px, xl 22px, 2xl 28px.
Обнови tailwind.config.ts и все места где используется фиксированный размер.

### Еженедельный отчёт об изменениях

Проверь git log за последние 7 дней.
Составь отчёт:
- Какие компоненты добавились
- Какие токены изменились
- Есть ли компоненты без TypeScript-типов
- Есть ли компоненты без aria-атрибутов

## Типичные проблемы и как их решать

Claude генерирует произвольные цвета вместо токенов. Добавьте в CLAUDE.md явный запрет: «Никогда не используй произвольные hex-значения. Только токены из tailwind.config.ts». Чем жёстче правило в CLAUDE.md — тем точнее соблюдается.

Figma MCP не подключается. Проверьте: введите /mcp в Claude Code и посмотрите статус сервера figma. Если написано «не авторизован» — пройдите авторизацию заново через Authenticate. Если сервер вообще не появляется — переустановите плагин: claude plugin install figma@claude-plugins-official.

Компонент в коде не совпадает с Figma. Используйте get_screenshot для визуального сравнения: попросите Claude получить скриншот компонента из Figma и сравнить с тем, что рендерится в браузере. Он сам найдёт расхождения.

Claude создаёт новые компоненты вместо использования существующих. В промпте явно укажите: «Используй только компоненты из src/components/. Не создавай новые». В CLAUDE.md добавьте это как правило.

## Итог: что у вас теперь есть

CLAUDE.md — это то, что делает работу с проектом предсказуемой. Claude не угадывает ваш стек и не спрашивает о соглашениях — он просто читает файл и следует ему. Чем подробнее описаны правила — тем меньше расхождений в результате.

## Что делать дальше

Если хотите углубиться:

• DESIGN.md — как упаковать визуальный стиль в файл для AI
• MCP — как подключать другие инструменты к Claude Code
• Claude Code — полное руководство по агентной разработке