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

Você precisa de uma caixa de diálogo/menu/formulário que passe na revisão do leitor de tela. Implementação acessível sem segurar cada componente.

Claude Code Design Skills — Instalar & Demo ao vivo

Por que usar

Principais recursos

Habilidade Figma-to-Next.js com prioridade de reutilização de componentes
Variante Figma → mapeamento de prop
Tipos rígidos de TypeScript prontos para uso
Padrões de acessibilidade integrados
Padrões de dados simulados para higiene de limites de front-end/back-end

Demo ao vivo

Como fica na prática

claude-code-design-skills.replay ▶ pronto

0/0

Instalação

Repositório do autor · Documentação oficial de Skills do Claude

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.

Fluxo

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
Variantes do mapa de suporte

Mapeie as variantes do Figma para adereços digitados (tamanho, intenção, desativado).✓ Copiado

→ Tipos de TS gerados; nada
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

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.
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.

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

Ferramenta	Entradas	Quando chamar	Custo
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

O código gerado ainda precisa de revisão. 'Tipos de passes' não significa 'funciona corretamente em tempo de execução'.
Não aceite cegamente importações de componentes que não estejam na sua lista de permissões; a habilidade prefere reutilização, mas você ainda possui revisão.

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

Alternativa	Quando usar	Troca
magic-ui-mcp	Você quer componentes animados pré-construídos, não um conversor Figma	Biblioteca em primeiro lugar, não design em primeiro lugar
claude-design-auditor-skill	Você deseja avaliar a qualidade do design, não gerar código	Auditar, não produzir
hue-brand-skill	Você precisa de uma linguagem de design, não de conversão de quadros	Primeiro 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