AIKraft/AI/Войти
AIKraft/Skills/figma

figma

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

OPOpenAI official Дизайн

Что делает навык

Использует Figma MCP server для получения контекста дизайна, скриншотов, переменных и активов из Figma, а также для преобразования узлов Figma в production-код. Применяется для реализации design-to-code, работы с Figma URLs, node IDs и отладки Figma MCP.

Когда применять

  • Реализация UI-компонентов на основе предоставленных ссылок или ID узлов Figma.
  • Получение визуальных справочных материалов (скриншотов) для точной верстки.
  • Скачивание необходимых активов (assets) из Figma для интеграции в проект.
  • Отладка и настройка подключения Figma MCP сервера.

Как работает

  1. Выполнить get_design_context для получения структурированного представления нужных узлов.
  2. При необходимости обрезать ответ: использовать get_metadata для карты узлов, затем повторно вызвать get_design_context для конкретных узлов.
  3. Выполнить get_screenshot для получения визуальной справки по варианту узла.
  4. Скачать необходимые assets только после получения контекста и скриншота.
  5. Транслировать вывод (обычно React + Tailwind) в конвенции проекта, повторно используя токены цветов, компоненты и типографику.
  6. Провести валидацию 1:1 с дизайном Figma по внешнему виду и поведению перед завершением.

Примеры запросов агенту

Реализуй компонент кнопки по ссылке Figma, используя дизайн-токены проекта.
Получи контекст дизайна и скриншот узла с ID 12345, затем переведи его в код.
Настрой и проверь подключение Figma MCP сервера для работы с активами.

Что понадобится

  • Настроенный Figma MCP server (env vars, config, verification см. references/figma-mcp-config.md)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «figma» из репозитория: # https://github.com/openai/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r figma/ ~/.claude/skills/figma/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.