Что вы получите в итоге
После этого руководства у вас будет:
- 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 получает доступ к нескольким инструментам:
Инструмент Что возвращает get_design_context Структура слоёв, стили, подсказки для кода get_metadata Точные значения: отступы, размеры, цвета get_variable_defs Переменные Figma → таблица токенов get_screenshot PNG конкретного узла для визуальной проверки search_design_system Поиск по подключённой библиотеке
Важное отличие от скриншота: 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 добавьте это как правило.
Итог: что у вас теперь есть
Что Где Компоненты из Figma src/components/ Токены tailwind.config.ts + tokens.css Правила и стек CLAUDE.md Песочница src/app/sandbox/ Прототипы src/app/ Деплой Vercel или VPS
CLAUDE.md — это то, что делает работу с проектом предсказуемой. Claude не угадывает ваш стек и не спрашивает о соглашениях — он просто читает файл и следует ему. Чем подробнее описаны правила — тем меньше расхождений в результате.
Что делать дальше
Если хотите углубиться:
- DESIGN.md — как упаковать визуальный стиль в файл для AI
- MCP — как подключать другие инструменты к Claude Code
- Claude Code — полное руководство по агентной разработке
Источник и полная версия: VibeCode Wiki