Design to Code

Restauração de UI com alta fidelidade de designs Figma para componentes React + TypeScript prontos para produção. Esta SKILL utiliza um script auxiliar robusto para minimizar erros manuais e garantir resultados pixel-perfeitos.

Pré-requisitos

1. Token da API Figma: Obtenha em Figma → Settings → Personal Access Tokens
2. Node.js: Versão 18+
3. coderio: Instalado na pasta scripts/ (tratado na fase Setup)

Visão Geral do Workflow

Fase 0: SETUP    → Criar script auxiliar e ambiente de execução
Fase 1: PROTOCOL → Gerar protocolo de design (Estrutura e Props)
Fase 2: CODE     → Gerar componentes e assets