Laboratório TDC: do Figma ao código sem handoff

Laboratório pós-workshop do TDC Florianópolis 2026. Você conecta Figma, Claude e MCP na sua máquina, faz a IA ler um frame real e gera um componente a partir do design. Cinco missões guiadas, gratuito, no seu ritmo.

A ponte roda na sua máquina: precisa de Figma Desktop, Claude Desktop e Node instalados. O figma.com e o claude.ai abertos no navegador não se enxergam.

As cinco missões

1. Prepare a máquina (10 a 20 min). Ambiente pronto: Figma Desktop, Claude Desktop e Node instalados, contas ativas e o arquivo do exercício escolhido.
2. Conecte Figma, Claude e MCP (cerca de 15 min). O Claude respondendo com o nome do seu arquivo do Figma: a prova de que a ponte está de pé.
3. Prove que a IA enxerga o design (cerca de 8 min). A confirmação de que o agente lê estrutura, textos, medidas, componentes e tokens do seu frame, não uma descrição genérica.
4. Gere o componente (cerca de 6 min). Um componente funcional gerado a partir do frame, com cada valor rastreável até o token do Figma.
5. Valide, corrija e limpe (cerca de 8 min). Componente conferido contra o design, divergências corrigidas com fonte, e nenhum token vivo esquecido na máquina.

Nada nesta página detecta instalação sozinho: navegador não tem como saber o que está na sua máquina, então cada item é confirmação manual ou teste por comando. O token do Figma que você digita aqui vive só na memória desta aba, não é transmitido, não entra em URL e some ao fechar.

As missões abrem uma a uma quando o JavaScript carrega. Com o JavaScript desligado, o roteiro acima é o conteúdo completo do laboratório em forma de resumo.