UX Collective: как сделать дизайн-систему читаемой для AI

О чём материал

Дизайнер Олександра Хуба описывает типичную проблему в AI-assisted рабочих процессах дизайн-в-код: когда вы промптите LLM через скриншот своего дизайна, AI не понимает структуру, связи между компонентами и логику именования, которые лежат в основе дизайн-системы. Результат — код, выглядящий примерно правильно, но игнорирующий существующие компоненты, изобретающий новые или нарушающий соглашения об именовании. Статья — это структурированное руководство по устранению проблемы в источнике: нужно сделать дизайн-систему саму по себе читаемой для AI.

Контекст

Материал написан для дизайнеров, работающих с AI-инструментами для написания кода — Claude Code, Cursor или GitHub Copilot — и сталкивающихся с ситуацией, когда AI либо заново генерирует уже существующий код, либо строит предположения о том, как работают компоненты. Ключевой инсайт: проблема не в возможностях AI, а в отсутствии чистых структурированных данных на входе.

Ключевой вывод

Статья предлагает четыре конкретных вмешательства. Первое — именование и файловая структура в Figma: семантические названия вроде CreateProjectModal вместо Frame 74, плоская иерархия слоёв и Auto Layout по умолчанию. AI читает дерево слоёв, чтобы понять структуру дизайна, поэтому запутанное дерево даёт запутанный DOM.

Второе — связывание компонентов Figma с реальной кодовой базой через Code Connect, что создаёт единый источник истины вместо параллельных реализаций уже существующих компонентов. Когда Figma-компонент связан с реальным, AI использует существующую реализацию как цель, а не генерирует новую.

Третье — набор из трёх файлов правил в отдельной папке: README с описанием стека и базовых решений, design-system-rules.md с документацией использования компонентов, и figma-mcp-rules.md со спецификой Figma-to-code workflow. Эти файлы дают AI устойчивый контекст через запросы, не заставляя дизайнера каждый раз заново объяснять систему.

Четвёртое — структура промпта: AI должен работать с одним компонентом за раз, а не генерировать весь интерфейс сразу, что снижает риск потери контекста и несогласованных решений.

Кому читать

Дизайнерам и лидам дизайн-систем, которые интегрируют AI-инструменты для написания кода и обнаруживают, что генерируемый результат не соответствует существующей компонентной библиотеке. Конкретные техники актуальны для команд, использующих Figma с любым MCP-совместимым AI-агентом.