Автор и репозиторий
Автор — nexu-io / open-design. Репозиторий собрал 67k звёзд на GitHub. Распространяется под лицензией Apache-2.0. Файл figma-implement-design.md открыт: прочитать его можно до установки.
Открыть репозиторий
Скилл · Инструменты
Figma Implement Design
Читает Figma-файл и переносит дизайн в боевой код.
О скилле
Что делает
Закрывает разрыв между макетом и кодом: скилл читает структуру Figma-файла через API и генерирует точный HTML/CSS, React или Tailwind — с правильными отступами, типографикой и цветами. Разработчик перестаёт вручную переносить пиксельные значения в стили, дизайнер получает реализацию ближе к замыслу без третьего круга правок.
Источник
Откуда скилл и как поставить
Установка в Claude Code
Склонируйте репозиторий в ~/.claude/skills/ и перезапустите Claude Code — скилл подхватится сам. Дальше просто попросите ассистента использовать «Figma Implement Design».
Cursor и другие редакторы
Скопируйте содержимое SKILL.md в системные правила проекта. Скиллы не запускают код — это текстовые инструкции, которые меняют поведение модели.
Хотите внедрить, но некогда разбираться?
Подберу скиллы под вашу задачу, поставлю и покажу на живом примере — быстрее, чем читать документацию.
Получить консультацию
Рядом на полке
Похожие скиллы
image-to-code.md★ 69k
Image to Code
Скриншот или макет на входе — рабочий HTML или React на выходе
nexu-io · Apache-2.0
shadcn-ui.md★ 67k
Shadcn UI
Быстрая сборка интерфейсов на компонентах shadcn/ui
nexu-io (Google Labs / Stitch) · Apache-2.0
figma-design-react.md★ 114
Figma Design React
Ссылка на макет — готовые компоненты с точными стилями
Bitovi · MIT
tailwind-v4-shadcn.md
Tailwind V4 Shadcn
Связка утилитарных стилей и библиотеки компонентов после смены архитектуры
midudev · MIT
motion-ui.md★ 220k
Motion UI
Полная система анимации интерфейса одним набором
Affaan M. · MIT
web-artifacts-builder.md★ 150k
Web Artifacts Builder
Интерактивные приложения прямо в чате, без развёртывания
Anthropic · NOASSERTION
Дальше
Куда идти дальше
Категория «Инструменты»
Скиллы, которые прокачивают сам процесс работы с Claude Code и Cursor: память и контекст, планирование, оркестрация агентов, связки с GitHub, Notion и почтой.
Ко всем скиллам категорииСловарь терминов
Промпт, токен, MCP, агент — 44 понятия простыми словами, если что-то на этой странице звучит незнакомо.
Открыть словарьГайды
Пошаговые разборы: от первого промпта до своих агентов и автоматизации.
К каталогу гайдов
Вопросы
Частые вопросы
Что делает скилл Figma Implement Design?
Читает Figma-файл и переносит дизайн в боевой код. Это Agent Skill — текстовое расширение для Claude Code и Cursor: подключается файлом SKILL.md и меняет поведение ассистента, кода внутри нет. Темы скилла: figma, design-to-code, react, tailwind, ui.
Как установить Figma Implement Design?
Склонируйте репозиторий автора в папку скиллов: git clone https://github.com/nexu-io/open-design ~/.claude/skills/figma-implement-design — и перезапустите Claude Code, он подхватит скилл сам. В Cursor и похожих редакторах скопируйте содержимое SKILL.md в правила проекта. Перед установкой файл стоит прочитать: это обычный текст.
Это бесплатно?
Да. Скилл «Figma Implement Design» открыт: автор — nexu-io / open-design, скачивается из официального репозитория без регистрации. Распространяется под лицензией Apache-2.0. На этой странице ничего покупать не нужно — каталог часть моего раздела «Обучение».
Нужен такой результат в вашей работе?
Напишите, чем занимаетесь, — скажу, закроет ли задачу этот скилл или собрать решение под вас.
Получить консультациюПн–Вс, 10:00–20:00. Отвечаю лично.