Windsurf • Implementação das Telas Prioritárias
Gera prompt para implementar as principais telas da interface com base no protótipo aprovado.
Dev
frontend
telas
windsurf
implementacao
intermediario
Preencha as variáveis
0/6 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{produto}{telas}{componentes}{regras_visuais}{rotas}{stack}Prompt (prévia ao vivo)
Atue como Senior Front-end Engineer. Gere um prompt para o Windsurf implementar as telas prioritárias da UI com foco em fidelidade visual e organização de código.
Dados:
- Produto: {produto}
- Telas prioritárias: {telas}
- Componentes disponíveis: {componentes}
- Regras visuais importantes: {regras_visuais}
- Navegação/rotas: {rotas}
- Stack: {stack}
Entregue:
1) Ordem recomendada de implementação das telas
2) Dependências entre telas e componentes
3) Cuidados de fidelidade visual
4) Boas práticas de estrutura de página
5) Prompt final para Windsurf implementar telas
Foque em execução incremental e limpa.Exemplos
Entrada
Produto: Harvory Telas prioritárias: Landing, Home logada, Detalhe de conteúdo, Pricing, Checkout Componentes disponíveis: Navbar, Hero, ContentCard, FilterChips, PricingCard, CheckoutSummary Regras visuais importantes: Spacing consistente, CTA principal destacado, cards premium com badge Rotas: /, /app, /app/content/[slug], /pricing, /checkout Stack: Next.js + Tailwind + TypeScript
Saída esperada
🚀 Ordem de implementação: 1. Landing 2. Home logada 3. Detalhe de conteúdo 4. Pricing 5. Checkout 🔗 Dependências: Landing e Home usam Navbar; Pricing e Checkout dependem de PricingCard/CheckoutSummary. 🎨 Fidelidade visual: Respeitar hierarquia, espaçamentos, peso de fontes e destaque de CTA. 📄 Boas práticas: Páginas finas, composição por sections, dados mock separados. 🎯 Prompt Windsurf: Implemente as telas Landing, Home logada, Detalhe de conteúdo, Pricing e Checkout em Next.js + Tailwind + TypeScript usando componentes reutilizáveis já definidos. Mantenha fidelidade visual ao protótipo, estrutura limpa por sections e dados mock centralizados.