Дизайн в Figma руками агента через CLI figma-use
Автор открытого проекта figma-use сделал CLI, через который агенты для программирования создают в Figma фигуры, текст, фреймы и компоненты. Так агент может сам собирать макеты и системы компонентов.
Сделано со своим агентом
Что сделали
CLI figma-use подключается к приложению Figma для компьютера через Chrome DevTools Protocol и выполняет команды через Plugin API Figma. Агенты либо отдают команды по одной, либо передают JSX в команду render. Так можно собрать фреймы, текст, иконки, сетки, компоненты и варианты. Для агентов в комплекте есть файл SKILL.md и MCP-сервер с 90+ инструментами.
Что получилось
В демо показаны компоненты кнопок и календарь из Tailwind UI. Бенчмарков в README нет. JSX через stdin не поддерживает логику, поэтому компоненты и варианты нужно описывать в файлах .figma.tsx.
На что обратить внимание
Figma начиная с версии 126 блокирует удалённую отладку. Нужно запускать демон в режиме pipe (figma-use daemon start --pipe) или взять альтернативу OpenPencil, которую предлагает README.
Пояснение
CLI это программа для командной строки. Chrome DevTools Protocol это протокол, через который внешние программы управляют приложениями на движке Chrome, в том числе настольной Figma. JSX это синтаксис описания интерфейса из React.
Кому пригодится
Дизайнерам и разработчикам, которые хотят, чтобы агент сам собирал макеты и компоненты в Figma.
Попробуйте сами
С помощью CLI-инструмента для Figma, например figma-use, создай [тип дизайна, например макет страницы с тарифами] в моём файле Figma [ссылка на файл] с фреймами, текстом и переиспользуемыми компонентами для [кнопка, карточка и т.п.]. Придерживайся стиля [цвета, шрифты, отступы]. Готово, когда макет и компоненты лежат на новой странице, а ты описал, что сделал. Не меняй и не удаляй мои существующие страницы.
Нужна помощь с запуском? Вступайте в сообщество AI Pack ↗
Источник: github.com ·