Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
- 156 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Плагин Figma выполняет свой код в Figma Desktop и читает стили и переменные открытого файла
- Сохраняет сгенерированные DESIGN.md и SKILL.md на диск
Установка
- Работает в
Ручная установка
npm install
npm run buildСборка из исходников. Затем в Figma Desktop: Plugins, Development, Import plugin from manifest и выбрать manifest.json.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Плагин Figma выполняет свой код в Figma Desktop и читает стили и переменные открытого файла
- Сохраняет сгенерированные DESIGN.md и SKILL.md на диск
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Плагин читает из открытого файла 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. Сгенерированные файлы удаляются из проекта вручную.
Частые вопросы
Чем DESIGN.md отличается от SKILL.md?
DESIGN.md перечисляет токены из файла, а SKILL.md превращает их в правила и порядок работы для агента.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныПлагин и npx CLI, которые создают DESIGN.md по спецификации google-labs-code/design.md из официальных шаблонов
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
DESIGN.md от Google Labs
DESIGN.md
Формат DESIGN.md для агентов и CLI: проверка контраста и ссылок, сравнение версий, экспорт токенов в Tailwind и DTCG
Figma To Code MCP — макет Figma в код
Figma To Code MCP
Figma в код через MCP: сервер отдает агенту макет в виде компактного YAML с именами свойств как в CSS, раскрытыми переменными и вынесенными в файл SVG
Скилл-движок дизайна для локальных агентов: мокапы, прототипы, лендинги, дашборды и слайды в виде самодостаточного HTML прямо в редакторе
Awesome Claude Design
awesome-claude-design
Подборка готовых файлов DESIGN.md, которые Claude Design разворачивает в каркас интерфейса: цвета, шрифты, компоненты. Брать как вдохновение
Из блога
Коротко о README
README объясняет назначение плагина и показывает загрузку в Figma Desktop: установить зависимости, собрать и импортировать manifest.json. Таблицы описывают доступные действия и разделы обоих генерируемых файлов. Плагин также опубликован в сообществе Figma, лицензия MIT.