TemPad Dev — плагин
tempad-dev
Соединяет Figma, разработчиков и агентов: инспектор дизайна в браузере, код JSX/Vue с Tailwind и токенами, MCP и скиллы. Нужен Node.js 22+
- 510 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Нужен Node.js 22 или новее
- Агент читает дизайн и пишет код в проект
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/tempad-devОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Нужен Node.js 22 или новее
- Агент читает дизайн и пишет код в проект
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
TemPad Dev — открытая связка между Figma, разработчиками и их агентами. В браузере это инспектор дизайна с настраиваемым кодом на выходе (JSX или Vue с Tailwind и токенами), а агент с MCP и скиллами читает дизайн, создает и правит нативные объекты Figma и реализует интерфейс в проекте. Работает с Codex, Claude Code, Cursor и VS Code. Нужен Node.js 22+, для правки нужны права редактирования файла. Расширение для Chrome ставится из магазина, плагины для кода: `npm install -D @tempad-dev/plugins`. Лицензия MIT.
Для кого. Для разработчиков и дизайнеров, которые переносят макеты Figma в код и хотят, чтобы агент делал это в их проекте с токенами и Tailwind.
Подходит, если
- Нужно переносить макеты Figma в JSX или Vue с Tailwind
- Нужен инспектор дизайна с настраиваемым кодом
- Нужно, чтобы агент читал и правил файлы Figma
Не подходит, если
- Нет Node.js 22 или новее
- Нет прав редактирования файла Figma, а нужна правка
Пример запроса к агенту
Реализуй выбранный во Figma экран как компонент на React и Tailwind с токенами проектаОграничения
Нужен Node.js 22 или новее. Для правки макетов агенту нужны права редактирования файла Figma. Агент читает ваш дизайн и пишет код в проект, поэтому доступ расширенный.
Как отключить. Удалите скилл из каталога агента или плагин через менеджер плагинов.
Частые вопросы
Что делает TemPad Dev?
Показывает код по макету Figma в браузере и дает агентам читать и править дизайн и писать интерфейс в проекте.
Какие агенты поддерживаются?
Codex, Claude Code, Cursor и VS Code.
Что нужно для запуска?
Node.js 22 или новее и права редактирования файла Figma для правок.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныБесплатный двусторонний MCP-сервер для Figma: превращает дизайн в код с учетом фреймворка и возвращает код обратно на холст
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
MCP-мост между агентом (Cursor, Claude Code, Codex) и Figma: чтение макетов и правки прямо на холсте
Генератор DESIGN.md для Figma
DESIGN.md generator for Figma
Плагин Figma от TypeUI: собирает стили файла и генерирует DESIGN.md и SKILL.md для Claude Code, Codex и Cursor
MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту
Figma Console MCP
figma-console-mcp
MCP-сервер Figma для дизайн-систем в обе стороны: читает и записывает переменные, компоненты и стили, синхронизирует токены с кодом
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| TemPad Dev (эта запись) | нет | 510 | ||
| Figma MCP Bridge | нет | не нужна | 741 | чтение Figma через плагин без лимитов REST API |
| figma-use | нет | 609 | запись в Figma из CLI и JSX, неофициальный путь |
Коротко о README
README описывает связку Figma, разработчиков и агентов с инспектором, MCP и скиллами. Лицензия MIT.