Дизайнер создала плагин для переноса проектов из Claude Design в Figma
Habr AI · оригинал
Материал подготовлен автоматизированной редакционной системой. Факты можно сверить по указанному первоисточнику.
Дизайнер разработала бесплатный плагин, который автоматизирует импорт standalone-экспорта из Claude Design в Figma. Инструмент позволяет получить редактируемые макеты с сохранением структуры, шрифтов и реальных данных проекта.
Плагин устраняет ручной труд при конвертации AI-сгенерированных интерфейсов в профессиональные дизайн-файлы, демонстрируя практическое применение LLM-инструментов в рабочем процессе дизайнеров.
В условиях стремительного развития искусственного интеллекта многие дизайнеры сталкиваются с разрывом между генерацией интерфейсов и их дальнейшей доработкой. Автор материала, работающая в продуктовых командах, описывает свой опыт взаимодействия с Claude Design. Изначально инструмент показался неудобным из-за неочевидного понимания запросов, однако со временем автор заметила его сильные стороны: Claude Design эффективно собирает сложные системные интерфейсы, такие как CRM или личные кабинеты, с большим количеством состояний и данных.
Главной проблемой оставался этап интеграции результата в Figma. Существующие решения, включая подключение через MCP или сторонние конвертеры HTML, либо требовали значительных затрат ресурсов на токены, либо работали нестабильно при переносе больших проектов. Автор решила отказаться от подхода, при котором AI повторно собирает макеты, и предложила альтернативу: использовать готовый standalone-файл проекта как источник данных.
Разработка плагина началась с создания прототипа, который работал через браузер и MCP, но быстро исчерпывал лимиты ресурсов. Новый подход заключался в создании локального инструмента внутри Figma, который напрямую разбирает HTML-бандл. Плагин обучили находить границы отдельных экранов, извлекать реальные данные проекта вместо заглушек вроде Lorem Ipsum и восстанавливать структуру интерфейса.
Процесс отладки занял около месяца. Автор методично тестировала инструмент на различных проектах, исправляя ошибки не точечно, а путем создания общих правил обработки. Это позволило превратить разовое решение в универсальный инструмент. Дизайн интерфейса плагина был улучшен только после того, как основная механика стала стабильной, что подчеркивает приоритет функциональности над эстетикой на ранних этапах разработки.
Финальная версия плагина Claude Design → Figma Import позволяет загрузить standalone-файл и получить в Figma редактируемые слои с auto-layout, векторами, градиентами и тенями. Инструмент уже опубликован в Figma Community и доступен бесплатно. Автор подчеркивает, что ключевым навыком здесь стало не программирование, а системный подход: выявление проблемы, поиск ограничений существующих решений и итеративное дорабатывание прототипа.
Этот кейс демонстрирует, как дизайнеры могут использовать AI-инструменты не только для генерации контента, но и для создания собственных утилит, оптимизирующих рабочий процесс. Плагин устраняет рутинный этап переноса данных, позволяя сосредоточиться на проектировании. Источник: web:Habr AI — https://habr.com/ru/articles/1087976/