Se você usa IA no Cursor (ou qualquer editor com copilots) para criar interfaces, já deve ter percebido um problema clássico: a IA até descreve a tela… mas mistura explicação com estrutura, perde consistência e vira um “texto bonito” difícil de implementar.
Para criar os exemplos de interfaces você pode usar o Google Stitch - Design with AI.
A solução é simples e poderosa: escrever um prompt que força uma análise de UI/UX como um handoff real de designer → dev, com saída em JSONC (estrutura previsível, fácil de evoluir e versionar).
🎯 O objetivo
- “Reverse-engineering” do dashboard a partir de um screenshot
- Descrever layout, componentes, hierarquia e interação
- Cobrir light mode e dark mode
- Definir responsividade com breakpoints padrão do Tailwind
- Extrair paletas e design tokens sem exagerar nos detalhes
- Gerar um brief final para implementação (sem entrar em “stack”)
✅ Resultado: você ganha um “contrato de UI” que pode ser iterado, comparado no Git, reaproveitado como base de design system e usado para gerar componentes com muito menos retrabalho.
🧠 Por que JSONC é melhor do que só Markdown?
Markdown é ótimo para explicar, mas ruim para estruturar. Quando o objetivo é construir UI com precisão, você quer uma saída que seja:
- Previsível (sempre no mesmo formato)
- Parsável (dá pra transformar em config, schema, DSL, etc.)
- Iterável (diferenças aparecem claramente em diff no Git)
O ideal é o formato híbrido: Markdown para instruções + JSONC como saída + um prompt final em bloco de código.
🧩 O prompt (no Gist)
Eu deixei o prompt completo pronto para copiar e colar no Cursor. Basta acessar o Gist pelo link abaixo:
🔗 Abrir o prompt no GitHub Gist
💡 Dica: no Cursor, cole o prompt e peça: “analise esta imagem e gere a saída em JSONC”. Depois, reaproveite os tokens para criar uma base de design system.
🚀 Como usar (fluxo recomendado)
- Anexe o screenshot do dashboard para a IA
- Rode o prompt e gere o JSONC
- Revise tokens/paletas e normalize nomes (primary/secondary/grays)
- Use o “prompt final para dev” (gerado pela IA) para guiar a implementação
- Itere: peça alterações específicas e compare mudanças no diff
✨ Bônus: evoluindo para uma DSL de UI
Se você criar muitos dashboards parecidos, vale considerar uma DSL de UI (uma linguagem declarativa para descrever telas). O JSONC que esse prompt produz já pode ser o primeiro passo: um contrato estruturado que vira “config de tela” e pode alimentar um renderizador, um builder visual ou templates padronizados.
Nenhum comentário:
Postar um comentário