Claude Code Design Skills

Коллекция скиллов для Claude Code, упрощающих рабочие процессы конвертации дизайна в код.

О проекте

Репозиторий содержит пользовательские скиллы для Claude Code, которые помогают автоматизировать и улучшить процесс преобразования дизайнов в готовый к продакшену код.

Доступные скиллы

Figma to Code

Генерация готового к продакшену кода на React/Next.js из дизайнов Figma с систематизированными рабочими процессами, стратегиями повторного использования компонентов и маппингом вариантов.

Возможности:

• Систематизированный рабочий процесс с инструментами Figma MCP
• Приоритизация повторного использования компонентов
• Автоматический маппинг вариантов Figma на пропсы кода
• Разграничение зон ответственности фронтенда и бэкенда
• Типобезопасность TypeScript
• Поддержка доступности (accessibility)
• Паттерны для мок-данных

Смотреть документацию →

Установка

Предварительные требования

• Установленный Claude Code CLI
• Для скилла Figma to Code: установленный Figma MCP Server

Установка скиллов

Для Claude Code CLI:

1. Клонируйте репозиторий:

   git clone https://github.com/scoobynko/claude-code-design-skills.git

2. Скопируйте скиллы в директорию скиллов Claude Code:

   bashКопировать

   # macOS/Linux
   cp -r claude-code-design-skills/figma-to-code ~/.claude-code/skills/
   
   # Windows
   xcopy claude-code-design-skills\figma-to-code %USERPROFILE%\.claude-code\skills\figma-to-code\ /E /I

3. Настройте скилл согласно его документации

4. Перезапустите Claude Code

Для Claude Desktop:

1. Скачайте или клонируйте репозиторий

2. Выполните настройку согласно документации

3. Создайте .zip-архив из настроенной папки figma-to-code

4. Откройте Claude Desktop → Settings → Capabilities → Skills → Upload skill

5. Выберите файл figma-to-code.zip — скилл будет проверен и активирован

Использование

Каждый скилл содержит подробную документацию в соответствующей директории. После установки скиллы автоматически становятся доступны в Claude Code и вызываются при необходимости в контексте задачи.

Конфигурация

Каждый скилл требует настройки под конкретный проект. Обратитесь к README отдельного скилла, чтобы узнать о необходимых плейсхолдерах конфигурации.

Участие в разработке

Вклад приветствуется! Если вы хотите добавить новые скиллы или улучшить существующие:

1. Сделайте форк репозитория
2. Создайте ветку для новой функциональности
3. Внесите изменения (для создания новых скиллов см. документацию Claude Skills)
4. Отправьте pull request

При создании нового скилла убедитесь, что он обобщён с использованием плейсхолдеров, чтобы другие могли легко адаптировать его под свои проекты.

Лицензия

MIT License — подробности в файле LICENSE

Автор

Создано @scoobynko

Поддержка

По вопросам и проблемам:

• Откройте issue в этом репозитории
• Ознакомьтесь с документацией Claude Code
• По вопросам, связанным с Figma, см. документацию Figma MCP