Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
Установка
npm install
npm run buildСборка из исходников. Затем в Figma Desktop: Plugins, Development, Import plugin from manifest и выбрать manifest.json.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин читает из открытого файла Figma локальные стили и переменные: цвета, типографику, отступы, радиусы, эффекты, сетки и семейства компонентов. На их основе он собирает DESIGN.md со всеми токенами и SKILL.md с правилами для агента: основы стиля, доступность по WCAG 2.2 AA, что делать и чего избегать, требования к состояниям компонентов и проверки качества. Оба файла можно отредактировать в окне плагина и сохранить. Формат опирается на открытую спецификацию TypeUI DESIGN.md.
Для кого. Для дизайнеров и фронтенд-разработчиков, которые хотят, чтобы агент верстал в рамках дизайн-системы из Figma.
Подходит, если
- Нужно передать агенту токены и правила дизайн-системы из Figma
- Агент верстает интерфейсы, которые расходятся с макетами по цветам и шрифтам
- Нужен стартовый DESIGN.md для нового проекта
Не подходит, если
- В файле Figma нет локальных стилей и переменных
- Токены уже экспортируются из кода или отдельного пакета
Пример запроса к агенту
Сверстай страницу тарифов, следуя правилам из DESIGN.md и SKILL.md в корне проектаОграничения
Работает в Figma Desktop, для загрузки из исходников нужны Node.js и сборка. Качество результата зависит от того, насколько аккуратно оформлены стили в файле. Сгенерированный SKILL.md нужно проверить и дописать вручную. Доступность Figma из России ограничена.
Как отключить. Удалите плагин из списка плагинов Figma. Сгенерированные файлы удаляются из проекта вручную.
Проверка безопасности
- Плагин только читает стили файла Figma и генерирует текст
Коротко о README
README объясняет назначение плагина и показывает загрузку в Figma Desktop: установить зависимости, собрать и импортировать manifest.json. Таблицы описывают доступные действия и разделы обоих генерируемых файлов. Плагин также опубликован в сообществе Figma, лицензия MIT.
Частые вопросы
Чем DESIGN.md отличается от SKILL.md?
DESIGN.md перечисляет токены из файла, а SKILL.md превращает их в правила и порядок работы для агента.
Похожие
Скиллы Next.js
Next.js skills
Официальный плагин Claude Code из репозитория Next.js: переход на Cache Components, Partial Prefetching и проверка изменений на живом dev-сервере
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой