Windsurf • Setup de Projeto e Estrutura Base
Cria prompt para estruturar projeto front-end com stack, rotas e organização inicial limpa.
Produto
frontend
setup
windsurf
arquitetura
iniciante
Preencha as variáveis
0/7 preenchidas
Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!
{produto}{plataforma}{stack}{rotas}{modulos}{padrao}{responsividade}Prompt (prévia ao vivo)
Atue como Tech Lead front-end. Gere um prompt para o Windsurf estruturar a base do projeto de interface com organização profissional.
Dados:
- Produto: {produto}
- Plataforma: {plataforma}
- Stack: {stack}
- Rotas principais: {rotas}
- Módulos principais: {modulos}
- Padrão desejado de organização: {padrao}
- Necessidades de responsividade: {responsividade}
Entregue:
1) Estrutura de pastas recomendada
2) Convenção de componentes/páginas
3) Rotas iniciais do projeto
4) Regras de organização e escalabilidade
5) Prompt final para Windsurf criar setup
Foque em base limpa, escalável e pronta para UI.Exemplos
Entrada
Produto: Harvory Plataforma: Web Stack: Next.js + Tailwind + TypeScript Rotas principais: /, /login, /onboarding, /app, /app/content/[slug], /pricing, /checkout Módulos principais: Auth, Dashboard, Content, Billing, Profile Padrão de organização: Componentes reutilizáveis e features por módulo Necessidades de responsividade: Desktop e mobile
Saída esperada
📁 Estrutura sugerida: /app, /components, /features, /lib, /types, /mocks, /styles 🧩 Convenção: - components/ui (genéricos) - features/content, features/billing... - pages/rotas com composição de features 🛣️ Rotas: /, /login, /onboarding, /app, /app/content/[slug], /pricing, /checkout 📌 Regras: Separar componentes puros de componentes de tela; usar mocks centralizados. 🎯 Prompt Windsurf: Crie a estrutura base de um projeto Next.js + Tailwind + TypeScript para um SaaS, com rotas públicas e logadas, organização por features, componentes reutilizáveis, mocks e base responsiva pronta para implementação de UI.