Вайб-дизайнДругой автор

Figma и Claude Code для UI-дизайна

Разбор workflow, где Claude Code через Figma MCP генерирует UI-макеты, использует дизайн-систему и переносит результат в код.

Коротко

Видео показывает новый workflow: Claude Code работает не только с кодом, но и с Figma-файлами через MCP.

Главная ценность — использовать реальную дизайн-систему, а не генерировать случайный красивый экран.

Для Opten-аудитории это хороший пример vibe-design: человек ставит задачу, а агент собирает UI из существующих компонентов.

Что забрать

Figma MCP полезнее, когда подключена опубликованная библиотека компонентов.

Slash-команды ускоряют генерацию, но качество зависит от структуры файла и naming слоёв.

Сначала стоит получить дизайн в Figma, потом переносить его в код.

Команды и настройки

Проверить подключённые плагины

/plugins

Команда помогает убедиться, что Figma MCP доступен в Claude Code.

Запустить генерацию дизайна

/figma generate-design

Slash-команда для генерации макета в Figma.

Промпты

Анализ дизайн-системы

Analyze this design system file and explain which components, variables, and patterns should be used before generating new screens.

Запрос перед генерацией, чтобы агент опирался на реальные компоненты.

Файлы и ссылки

Figma MCP + Claude CodeofficialFigma Community SkillstoolОригинал на YouTubevideo

Подводные камни

Странное именование слоёв может ломать качество результата.

Если дизайн-система не подключена, агент будет импровизировать вместо использования компонентов.

Figma-результат всё равно требует визуального ревью перед переносом в код.