Skills/Вёрстка по макету Figma

Вёрстка по макету Figma

30 марта 2026

Скилл OpenAI для Codex: переносит макет из Figma в код с точностью до пикселя, используя компоненты и токены проекта.

Описание

ДизайнБесплатно

Скилл OpenAI для Codex: переносит макет из Figma в код с точностью до пикселя, используя компоненты и токены проекта.

Название
Вёрстка по макету Figma
Категория
Дизайн
Что умеет
  • читает макет через Figma
  • переиспользует компоненты проекта
  • соблюдает токены дизайн-системы
  • сверяет результат с макетом
Источник
openai/skills
Где работает
Claude Code и другие агенты, которые читают .claude/skillsКак устроены навыки
Куда ставить
Навык работает только в текущем проекте.
Как установить
  1. 1Скопируйте команду из блока «Установка» ниже и выполните её в терминале.
  2. 2Навык появится в папке .claude/skills/figma-implement-design/
  3. 3Откройте новую сессию Claude Code — навык подхватится автоматически.

Что внутри

npx degit openai/skills/skills/.curated/figma-implement-design .claude/skills/figma-implement-design
.claude/skills/
└── figma-implement-design/
    └── SKILL.md

Действия

Открыть на GitHubДокументация
НазадВеб-приложение как нативноеДалееБиблиотека компонентов в Figma из кода
.claude/skills/figma-implement-design/SKILL.md
  1. 1---
  2. 2name: figma-implement-design
  3. 3description: "Скилл OpenAI для Codex: переносит макет из Figma в код с точностью до пикселя, используя компоненты и токены проекта."
  4. 4---
  5. 5​
  6. 6# Вёрстка по макету Figma
  7. 7​
  8. 8Скилл OpenAI для Codex: переносит макет из Figma в код с точностью до пикселя, используя компоненты и токены проекта.
  9. 9​
  10. 10## Что делает
  11. 11​
  12. 12- Читает макет через Figma
  13. 13- Переиспользует компоненты проекта
  14. 14- Соблюдает токены дизайн-системы
  15. 15- Сверяет результат с макетом
  16. 16​
  17. 17## Где работает
  18. 18​
  19. 19Claude Code и другие агенты, которые читают .claude/skills.
  20. 20​
  21. 21## Установка
  22. 22​
  23. 231. Выполните: npx degit openai/skills/skills/.curated/figma-implement-design .claude/skills/figma-implement-design
  24. 242. Откройте новую сессию Claude Code — навык подхватится сам.