Montar o design system no Figma antes e deixar a IA gerar os componentes a partir dos tokens
Designer de interface compara a tela que a IA gerou sozinha com a que saiu do processo dele: Figma, design system e tokens primeiro, depois o Claude gerando o código.
Prompt
Exporte os tokens do Figma em JSON e cole junto com a descrição da tela:
```
Você vai gerar componentes em [Next.js / React] usando só os tokens abaixo.
Tokens (cor, espaçamento, tipografia): [COLE O JSON]
Tela: [DESCRIÇÃO DA TELA E DOS ESTADOS: vazio, carregando, erro, preenchido]
Regras:
1. Não use nenhum valor de cor, espaçamento ou fonte que não esteja nos tokens.
2. Se precisar de um valor que não existe, pare e me pergunte qual token usar.
3. Cubra todos os estados listados.
Entregue o código e uma lista dos tokens usados em cada componente.
```Como fazer
- O autor mostra duas telas do mesmo briefing: a que a IA entregou sozinha e a que virou produto depois do processo.
- O processo: Figma, design system, tokens e, só então, o Claude gerando os componentes em Next.js.
- A base tinha 79 primitivas de cor, 39 tokens semânticos, 16 de espaçamento e 22 estilos de tipografia.
- Com isso, a IA consumiu o sistema em vez de inventar valores.
Atenção
- Não há número de tempo poupado; o ganho mostrado é de qualidade, nas imagens do post. - Serve mais a designer de produto e interface do que a designer gráfico. - Cargo não conferido; o perfil não foi aberto (o LinkedIn bloqueou). - Código gerado precisa de revisão de quem desenvolve antes de ir para produção.
Fonte: LinkedIn, 3 de agosto de 2026
Mais casos de software e dev
Software e dev
Sócio contador constrói à noite as ferramentas internas do escritório com o Claude Code
CEO e contador de firma de 19 pessoas, sem ser programador, fez com o Claude Code um importador de lançamentos, um plugin de Excel que puxa relatórios e um chat de agentes para a equipe.
ver prompt: Sócio contador constrói à noite as ferramentas internas do escritório com o Claude Code
Software e dev
Ortodontista sem saber programar monta com Claude o sistema de agenda da própria clínica
Dono de duas clínicas usa o Claude para planejar e o Claude Code para construir agenda, pré-consulta, lembretes e backup. Regra dele: o "terminei" da IA só vale depois de testado.
ver prompt: Ortodontista sem saber programar monta com Claude o sistema de agenda da própria clínica
Software e dev
Ir da pesquisa de UX ao arquivo organizado no Figma com um fluxo de IA, ficando com a curadoria
Designer de UX encadeia n8n, Claude Code e plugins do Figma: a pesquisa vira um arquivo de texto, o texto vira protótipo e o protótipo vai ao Figma com auto layout e tokens.