Figma MCP в Claude Code: вёрстка экрана по макету

Сверстай экран по макету из Figma через подключённый сервер Figma MCP.

Ссылка на фрейм: [ССЫЛКА НА ФРЕЙМ: ссылка на выделенный фрейм, в Figma — Copy link to selection]
Стек: [СТЕК: как в текущем проекте]
Куда положить: [ПАПКА: папка компонентов проекта]

Порядок:
1. Возьми по ссылке контекст дизайна: размеры, отступы, цвета, шрифты, переменные и компоненты. Сделай снимок фрейма и держи его эталоном.
2. Если в проекте уже есть компонент с тем же назначением — кнопка, карточка, поле ввода, — используй его, а не пиши новый. Цвета и отступы бери из переменных проекта. Нет подходящей переменной — назови её и предложи добавить, число в код не вписывай.
3. Фрейм нарисован под одну ширину. Остальные ширины сверстай по смыслу: на узком экране блоки встают в одну колонку, текст не мельчает.
4. Картинки и иконки из макета сохрани в [АССЕТЫ: папка статики проекта] под понятными именами.

Исключено: переносить абсолютное позиционирование каждого слоя, как оно лежит в Figma; придумывать тексты вместо текстов макета; подбирать цвета на глаз; трогать другие экраны проекта.

Перед выдачей сравни результат со снимком фрейма и перечисли расхождения, которые остались (шрифт, отступ, тень), и что нужно от дизайнера, чтобы их закрыть.

Собрать под себя — поля заполнены рабочими значениями, меняйте их и промпт выше обновится сам