Transformar um fluxo em um protótipo codificado clicável
Mockups estáticos não respondem "como isso realmente parece na prática?". O AI in Design Report 2026 constatou que a geração de código foi o maior salto ano a ano, e cerca de metade dos designers diz já ter enviado código gerado por IA para produção. Descrever um fluxo e obter um protótipo funcional em um único arquivo permite testar interações reais em um dia, em vez de um sprint.
Você é um prototipador front-end. Construa um protótipo clicável autocontido em um único arquivo, para que eu possa testar como um fluxo se sente na prática. Fluxo: {{flow_description}}. Restrições de design (cores, escala tipográfica, espaçamento, componentes principais): {{design_constraints}}. Estados a incluir: {{states}}. Requisitos: - Um único arquivo: HTML com CSS inline e JavaScript vanilla mínimo, sem dependências externas, executável apenas abrindo em um navegador. - Acessibilidade embutida: HTML semântico, controles de formulário rotulados, ordem lógica de headings, total operabilidade via teclado, estados de foco visíveis e contraste de texto de pelo menos 4,5:1. - Conteúdo de placeholder realista, mas claramente fictício — nunca dados reais de usuário ou nomes reais. - Deixe o caminho principal clicável do início ao fim; sinalize ações secundárias com uma nota visível de "não implementado no protótipo". Restrições: construa apenas as telas e campos que descrevi — não invente funcionalidades, fluxos ou textos adicionais. Este é um protótipo descartável para teste de usabilidade, não código de produção, então priorize clareza em vez de sofisticação. Depois do código, liste as escolhas de acessibilidade que você fez e quaisquer pontos que eu deva checar manualmente antes de testar.
Preencha seus dados e o prompt se atualiza na hora — depois é só copiar.
Entregue um único index.html com um checkout em três etapas (carrinho, frete, confirmação), navegável por teclado, com anéis de foco visíveis e uma paleta com contraste de 4,5:1 alinhada aos seus tokens. Inclui os estados de carrinho vazio, carregando e cartão recusado; a ação "aplicar cupom promocional" está sinalizada com uma nota de "não implementado no protótipo". **Escolhas de acessibilidade:** elementos semânticos de formulário e label em cada campo, uma região aria-live para o erro, headings em ordem correta. **Checar antes de testar:** ordem de tabulação no dropdown customizado, e se o estado de erro carrega uma pista que não depende só de cor (usa um ícone além do texto em vermelho).
O fluxo de trabalho completo
- Descreva o fluxo, as restrições de design e os estados que você quer testar.
- Gere o protótipo e abra-o em um navegador.
- Faça uma checagem de acessibilidade (teclado, contraste, leitor de tela) e corrija lacunas antes de testar.
- Teste com usuários e depois refine o prompt para ajustar o fluxo.
- Entregue especificações verificadas à engenharia — não envie código de protótipo descartável para produção sem revisão.
Fique de olho
Interfaces geradas por IA costumam falhar no WCAG — contraste ruim, texto alternativo vago, marcação não semântica — e ferramentas de IA não são ferramentas de acessibilidade. A responsabilidade legal sob a ADA, a Section 508 e o WCAG continua sendo sua, então revise cada tela gerada.
Código de protótipo é descartável, para fins de aprendizado, não uma build de produção; enviá-lo sem revisão de engenharia convida problemas de segurança, desempenho e manutenibilidade.
Nunca cole designs confidenciais ou não lançados, ou dados reais de usuário, em ferramentas de IA de consumo — use conteúdo de placeholder fictício nos protótipos.
De onde isso vem
Cada caso de uso deste site se baseia em relatos reais que os designers de UX em atividade compartilham — nada foi inventado por nós.
Mais casos de uso de IA para os designers de UX
Transformar transcrições de entrevistas em temas de pesquisa
redaçãoMicrocopy e mensagens de erro que mantêm sua voz
planejamentoPlanos de teste de usabilidade e roteiros de discussão não indutivos
comunicaçãoExplicar decisões de design para stakeholders céticos
criativoQuebrar a fixação de design com conceitos divergentes
← Todos os 6 casos de uso: como os designers de UX usam a IA