OP
figma Реализация дизайна
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions
Что делает навык
Навык обеспечивает структурированный рабочий процесс для перевода дизайнов Figma в готовый к продакшену код с точным визуальным соответствием (1:1). Он гарантирует согласованную интеграцию с Figma MCP server, правильное использование design tokens и визуальное паритетное соответствие дизайнам.
Когда применять
- Когда результат работы должен быть кодом в репозитории пользователя.
- Когда пользователь просит преобразовать дизайн из Figma в UI-код.
- Когда требуется обеспечить точное визуальное соответствие (pixel-perfect) между макетом и кодом.
- Когда необходимо использовать design tokens из Figma в коде.
Как работает
- Использовать Figma MCP server для взаимодействия с дизайном.
- Извлекать design tokens из Figma.
- Генерировать код, обеспечивающий визуальное соответствие 1:1.
- Внедрять сгенерированный код в репозиторий пользователя.
Примеры запросов агенту
Сделай UI-код для этого экрана из Figma.
Преобразуй этот макет Figma в готовый код приложения.
Реализуй дизайн из Figma с точным визуальным соответствием.
Что понадобится
- Figma MCP server
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «figma-implement-design» из репозитория:
# https://github.com/openai/skills
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r figma-implement-design/ ~/.claude/skills/figma-implement-design/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.