/ Diretório / Playground / Claude Code Design Skills
← Todos os servidores ↗ GitHub
● Comunidade scoobynko ⚡ Instantâneo

Claude Code Design Skills

por scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js da maneira certa - reutilização do componente primeiro, variantes do Figma mapeadas para adereços, TypeScript estrito, a11y por padrão.

scoobynko/claude-code-design-skills é um pacote de habilidades do Claude Code para fluxos de trabalho de design para código. A principal habilidade 'Figma to Code' converte designs Figma em código React/Next.js pronto para produção com regras explícitas: prefira reutilizar componentes existentes, mapear variantes Figma para adereços digitados, impor limites de frontend/backend e conectar tudo desde o início. Pares com o Figma MCP; concentra-se menos na perfeição dos pixels do que na produção de código que sua equipe irá realmente mesclar.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por que usar

Principais recursos

Demo ao vivo

Como fica na prática

claude-code-design-skills.replay ▶ pronto
0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json
{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Claude Code Design Skills

Crie uma nova página a partir de um quadro Figma

👤 Engenheiros front-end convertendo designs em código ⏱ ~45 min intermediate

Quando usar: Você tem um quadro Figma pronto e deseja um código React/Next.js que se ajuste à sua base de código.

Pré-requisitos
  • Configuração do Figma MCP — Instale o Figma MCP e forneça um PAT
  • Habilidade instalada — git clone em ~/.claude-code/skills/
Fluxo
  1. Aponte para o quadro
    Converta este quadro Figma em uma página Next.js: <URL figma>. Reutilize componentes de src/components/.✓ Copiado
    → O agente inventaria os componentes existentes antes de escrever novos
  2. Variantes do mapa de suporte
    Mapeie as variantes do Figma para adereços digitados (tamanho, intenção, desativado).✓ Copiado
    → Tipos de TS gerados; nada
  3. Dados simulados
    Use dados simulados; não invente chamadas de API. Mantenha o back-end de fora.✓ Copiado
    → Limpe o componente fetch-less com um arquivo simulado

Resultado: Uma página Next.js real mesclada em um PR - sem reescrita do revisor.

Armadilhas
  • Gerando uma biblioteca de componentes paralela ao lado da existente — Comece com 'listar componentes existentes' para que o agente reutilize o que está lá
Combine com: figma · magic-ui-mcp

Sincronize os acessórios de um componente com as variantes do Figma

👤 Equipes mantendo um sistema de design ⏱ ~25 min intermediate

Quando usar: O Designer adicionou uma nova variante no Figma e o código precisa ser atualizado.

Fluxo
  1. Diff Figma contra o componente
    Compare as variantes do Button (Figma) com os adereços src/components/Button.tsx.✓ Copiado
    → Limpar lista de delta: nova variante, variante renomeada, etc.
  2. Aplique a diferença
    Atualize Button.tsx para incluir a nova variante ‘fantasma’; preservar a API.✓ Copiado
    → Atualização digitada com um padrão que não interrompe os chamadores

Resultado: Desvio do sistema de design fechado sem quebrar os consumidores.

Converta um fluxo Figma com semântica correta e gerenciamento de foco

👤 Engenheiros de front-end preocupados com acessibilidade ⏱ ~45 min intermediate

Quando usar: Você precisa de uma caixa de diálogo/menu/formulário que passe na revisão do leitor de tela.

Fluxo
  1. Peça o fluxo no código
    Crie a caixa de diálogo de checkout a partir do Figma - respeite a armadilha de foco, Escape, movimento reduzido.✓ Copiado
    → Funções adequadas, rotulagem, gerenciamento de foco, Esc para fechar
  2. Execute o auditor
    Execute a habilidade claude-design-auditor no resultado.✓ Copiado
    → Pontuação A11y ≥ 85

Resultado: Implementação acessível sem segurar cada componente.

Combine com: claude-design-auditor-skill

Combinações

Combine com outros MCPs para 10× de alavancagem

claude-code-design-skills + figma

Puxar quadros Figma via MCP; converter através desta habilidade

Busque o quadro Figma X; use a habilidade para converter com reutilização de componentes existentes.✓ Copiado
claude-code-design-skills + magic-ui-mcp

Mapeie padrões Figma em componentes Magic UI onde eles existirem

Onde Figma usa um herói de desfoque, use o desfoque do Magic UI em vez de escrever um.✓ Copiado
claude-code-design-skills + claude-design-auditor-skill

Verifique se o código gerado passa na auditoria de 18 regras

Após a conversão, execute o auditor de projeto e corrija quaisquer descobertas ALTAS.✓ Copiado

Ferramentas

O que este MCP expõe

FerramentaEntradasQuando chamarCusto
figma-to-code (SKILL) Figma frame URL + repo conventions Transformando um design em código que se adapta à sua base de código 0

Custo e limites

O que custa rodar

Cota de API
Nenhum pela habilidade; Figma MCP tem cota própria
Tokens por chamada
Quadro Figma + código existente + saída - pode ser grande; alcance o quadro com precisão
Monetário
Livre
Dica
Converta um quadro por vez; seleções gigantescas desperdiçam contexto e energia de revisão.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Figma PAT pertence ao Figma MCP, não a esta habilidade
Saída de dados: Nenhum da habilidade; chamadas de rede acontecem no Figma MCP

Solução de problemas

Erros comuns e correções

O agente escreve um novo botão em vez de reutilizar o existente

Liste explicitamente o diretório de componentes do repositório no prompt.

Verificar: Include 'check src/components/ first' in the request
Adereços ausentes para uma variante mais recente do Figma

Peça uma comparação de variantes antes de converter; atualize o componente em vez de bifurcar.

Verificar: Agent output includes a 'variants' section
Tipos muito soltos (qualquer lugar)

Não exija nenhum; falhar em voz alta se uma variante não puder ser digitada'.

Verificar: Search the diff for ': any'

Alternativas

Claude Code Design Skills vs. outros

AlternativaQuando usarTroca
magic-ui-mcpVocê quer componentes animados pré-construídos, não um conversor FigmaBiblioteca em primeiro lugar, não design em primeiro lugar
claude-design-auditor-skillVocê deseja avaliar a qualidade do design, não gerar códigoAuditar, não produzir
hue-brand-skillVocê precisa de uma linguagem de design, não de conversão de quadrosPrimeiro o sistema, não o primeiro quadro

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills