Prompt Shape Creator
Next.js 16, TypeScript, React 19, Tailwind CSS v4, nodemailer
Problema
Fluxos de geração de imagens frequentemente carecem de uma forma estruturada para coletar briefings detalhados de prompts dos clientes. Solicitações chegam como mensagens espalhadas, sem detalhes críticos sobre cenário, personagens, estilo e preferências técnicas.
Restrições
Deve funcionar como formulário standalone sem exigir contas de usuário. O envio por e-mail deve ser confiável, com fallback para clipboard quando a API estiver indisponível. O estado do formulário deve ser protegido contra fechamento acidental da página. Deve suportar conteúdo bilíngue (EN/PT) sem renderização server-side para detecção de idioma.
Solução
Uma aplicação Next.js 16 (App Router) com formulário de briefing estruturado em seções lógicas (cenário, personagens, estilo, preferências técnicas, referências). Usa useActionState + useTransition do React 19 para envio não-bloqueante, nodemailer para SMTP, e um hook de autosave customizado que persiste o estado em sessionStorage com proteção beforeunload. Detecção de idioma client-side alterna automaticamente entre inglês e português.
Resultado
Coleta de prompts simplificada sem briefings perdidos. Fallback para clipboard garante entrega mesmo quando o e-mail falha. Autosave previne perda de dados por navegação acidental. Acessível, amigável para impressão e responsivo em todos os dispositivos.