design-to-code
Converter Designs do Figma para Código React
Transforme designs do Figma em componentes React TypeScript prontos para produção com precisão pixel a pixel. Esta skill automatiza o fluxo de trabalho de design para código usando IA para gerar código limpo e estruturado.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "design-to-code". node scripts/coderio-skill.mjs fetch-figma https://figma.com/file/xxx figd_xxx
Resultado esperado:
Figma data processed. Thumbnail saved to process/thumbnail.png
A utilizar "design-to-code". node scripts/coderio-skill.mjs structure-prompt > structure.md
Resultado esperado:
Gera um prompt detalhado para a IA analisar a miniatura e produzir JSON de hierarquia de componentes
A utilizar "design-to-code". AI analyzes thumbnail.png and generates component structure
Resultado esperado:
Estrutura JSON com frames, grupos e hierarquia de componentes pronta para extração de props
Auditoria de Segurança
SeguroAll 121 static findings are false positives. The skill is a legitimate Figma-to-React conversion tool that uses network (Figma API), filesystem (read/write project files), and external commands (Node.js scripts) as expected for its purpose. No credential exfiltration, no malicious code, no prompt injection attempts detected.
Problemas de Alto Risco (5)
Fatores de risco
🌐 Acesso à rede (3)
⚙️ Comandos externos (48)
📁 Acesso ao sistema de arquivos (19)
Pontuação de qualidade
O Que Você Pode Construir
Fluxo de Trabalho do Desenvolvedor Frontend
Converta rapidamente mockups do Figma em componentes React funcionais para prototipagem ou uso em produção.
Prototipagem Rápida
Gere código React boilerplate a partir de arquivos de design para acelerar o desenvolvimento de MVPs.
Implementação de Sistema de Design
Extraia componentes individuais de sistemas de design do Figma em código React reutilizável.
Tente Estes Prompts
Use the design-to-code skill to fetch my Figma design. The Figma file URL is [FIGMA_URL] and my access token is [TOKEN].
Run the structure-prompt command, then analyze the attached thumbnail.png to generate the component structure JSON. Save the result to scripts/structure-output.json.
Run list-components to see available components. Then for each component, run props-prompt [COMPONENT_NAME], analyze the thumbnail, and save the props to scripts/[COMPONENT_NAME]-props.json.
Execute the full design-to-code pipeline: 1) fetch-figma with my token, 2) generate structure and process, 3) extract props for all components, 4) generate code for each task using code-prompt and save-code.
Melhores Práticas
- Sempre anexe a miniatura.png do Figma ao solicitar que a IA analise ou gere código
- Execute as fases em ordem sequencial: Setup → Protocol → Code
- Verifique se os arquivos de checkpoint existem (processed.json, protocol.json) antes de prosseguir para a próxima fase
Evitar
- Pular o anexo da miniatura durante as etapas de análise da IA
- Executar geração de código antes da extração de props estar completa
- Usar tokens da API do Figma inválidos ou expirados