Путь от дизайна к программированию с помощью ИИ сложен и не полностью реализован, что часто вводит в заблуждение в упрощённых демонстрациях. Эта сложность связана с несколькими слоями, которые должны работать вместе для перевода дизайнов в функциональный код. Первый слой, Протокол контекста модели (MCP), выступает в роли стандартизированного соединения, позволяя моделям ИИ, таким как Claude, получать доступ и понимать файлы дизайна напрямую, а не только изображения. Это исправляет неспособность ИИ видеть детали проектирования, но не даёт ему доступа к существующим компонентам кода.Второй уровень включает файлы markdown (md), которые служат памятью для ИИ, храня правила проектирования, рассуждения и рекомендации, которые не отображаются в самом файле дизайна. Эти простые текстовые файлы предоставляют контекст для ИИ, определяя его решения и обеспечивая согласованность. Однако файлы с уценкой — это консультативные, не подлежащие исполнению правил, и они могут устареть или стать слишком большими, чтобы быть эффективными.Третий уровень вводит навыки — это конкретные наборы инструкций или кода, которые указывают ИИ, как выполнять конкретную задачу последовательно, как рецепт. Навыки активируются только при необходимости, что гарантирует равномерное выполнение повторяющихся задач. Хотя навыки автоматизируют процессы, они всё равно требуют ручного создания и обновления и не связываются с существующими компонентами кода дизайна.Последний слой — отображение — это ключевой этап, соединяющий мир дизайна и кода, требующий участия разработчиков. Этот слой формально связывает конкретные элементы проектирования в программном обеспечении, таком как Figma, с соответствующими реальными компонентами кода в кодовой базе. Такие инструменты, как Code Connect, позволяют это сделать, обеспечивая использование ИИ уже существующих функциональных компонентов, а не генерации дубликатов. Такое отображение устанавливает единый источник истины, но требует постоянного обслуживания со стороны разработчиков, что делает процесс ресурсоёмким.