Как я пытаюсь выстроить связку Figma + Claude (часть 1)

Мечта любой команды разработки сейчас — автоматизировать сборку дизайна с помощью LLM, чтобы ускорить delivery-процесс. Я видел несколько разных подходов, но в итоге пришёл к чему-то, что, как мне кажется, должно сработать удобно Рассказываю на примере проекта, где я на фрилансе (oversecured.com) Дано: - legacy-архитектура фронта, которую сложно масштабировать с LLM-кой - отсутствие части макетов в Figma + неактуальность макетов Что хотим: - заиметь макеты в Figma, которые выступают как источник правды - можно дать ссылку на макет, и LLM (Codex/Claude) его соберёт - UI-kit/дизайн-система, которая полностью совпадает в Figma/code Как мы решили это сделать: 1. Подключаем для кода open-source библиотеку компонентов shadcn (https://ui.shadcn.com/create). Компонентов там достаточно много + они гибкие (можно внутрь прокидывать много свойств). Это наша база, из которой мы будем собирать весь фронт 2. Берём для этой же библиотеки какой-то из Figma-файлов (вот здесь (https://ui.shadcn.com/docs/figma) есть несколько ссылок на файлы community, на них ссылается сам shadcn). Это наша вторая база, из которой мы будем собирать все макеты в Figma Мы пока не придумываем дизайн и не собираем компоненты с нуля, чтобы ускориться на старте, — просто берём готовое решение. 3. Начинаем собирать макеты в Figma из компонентов, которые мы взяли в community. На скрине — дизайн 4. Дальше через Figma MCP мы можем отдавать нашему AI-агенту ссылку на макет и просить собрать дизайн с помощью компонентов shadcn (можно также использовать shadcn MCP (https://ui.shadcn.com/docs/mcp)) Для тех, кто еще не знает: MCP — это протокол, через который LLM общается с внешними тулами вроде Figma. Важно здесь отловить одну вещь: AI-агент должен вытаскивать из Figma не скриншот макета, а структуру страницы (для этого используются разные методы). И всё — это работает. Простые страницы уже собираются верно на 95–100%, страницы посложнее пока тестируем Первая задача — актуализировать весь фронт на новых гибких компонентах. Во второй части (когда я к ней подойду) я хочу иметь возможность стилизовать компонент в Figma и стащить дизайн на фронт, чтобы в коде он тоже стилизовался В теории, проблемы тут быть не должно, потому что мы взяли в коде и в Figma одинаковую семантику токенов (и там и там shadcn) — то есть цвет в коде и цвет в Figma называются одинаково, например surface-default-100 Я уже предвижу некоторую сложность со стилизацией и со сборкой сложных экранов, так как в Figma компонент не всегда соответствует по пропсам тому, что есть на фронте в библиотеке shadcn (часть свойств может отсутствовать, часть — называться иначе). Тут потребуется немного ручной настройки и тюнинга компонентов в Figma Часть 2 напишу, когда подойду к ней!