🏛️ Os 3 Pilares do Prompt
A base do metodo Vibe Coding e escrever um prompt unico, estruturado e detalhado que serve como blueprint completo do site. Este prompt possui tres pilares fundamentais que garantem resultados consistentes.
🎯 Os 3 Pilares Fundamentais
1. Estrutura
O esqueleto do site: Header, Hero, Sobre, Servicos, CTA, Footer
2. Branding
Identidade visual: tipografia, cores, formas, materiais, motion
3. Conteudo
Textos, elementos e estilos detalhados por secao
💡 Por que funciona
Quando voce combina pensamento estruturado, instrucoes visuais especificas e linguagem clara, a IA consegue gerar interfaces prontas para producao com um unico prompt. Isso elimina a aleatoriedade e garante consistencia.
🗂️ Estrutura da Pagina (Skeleton)
Antes da IA gerar qualquer coisa, ela precisa de um mapa claro do site. A estrutura funciona como o esqueleto onde todo o design sera aplicado.
Estrutura Universal Recomendada
🔄 Fluxo Natural
Esta estrutura cria um fluxo natural de conversao: Apresentacao → Credibilidade → Oferta → Conversao
🎨 Branding e Identidade Visual
Aqui voce define como o site deve parecer e se comportar visualmente. Esses detalhes evitam resultados genericos e garantem um visual premium.
✏️ Tipografia
- • Fonte principal e secundaria
- • Peso e tamanho (56-72px headlines)
- • Contraste e legibilidade
- • Ex: Inter, SF Pro Display
🎨 Cores
- • Cor de fundo (ex: #0d0d0d)
- • Cores de texto (ex: #f5f5f7)
- • Gradientes e destaques
- • Acentos de cor
◼️ Formas e Materiais
- • Cantos arredondados (squircles)
- • Glassmorphism (blur 16-20px)
- • Bordas translucidas (1px)
- • Profundidade e camadas
📱 Experiencia Mobile
- • Sensacao de app nativo
- • Areas de toque grandes
- • Imagens em largura total
- • Navegacao simplificada
📄 Conteudo Detalhado por Secao
Cada secao do site deve ser claramente rotulada no prompt. Para cada secao, sempre inclua tres tipos de instrucao para evitar que a IA invente conteudo.
1. Content Inputs (Textos)
Textos exatos que devem aparecer no site:
2. Content Elements (Layout e UI)
Como os elementos sao organizados:
3. Styling e Visual
O visual da secao:
🔗 Referencias Visuais
Citar referencias reais melhora drasticamente o resultado. Isso reduz aleatoriedade e ancora a IA em um estilo especifico.
✓ Boas Referencias
- ✓ Apple TV screensavers
- ✓ macOS Sonoma wallpapers
- ✓ iOS glass effects
- ✓ Apple.com navigation
✗ Evitar
- ✗ Referencias vagas ("bonito")
- ✗ Sem referencias visuais
- ✗ Misturar estilos conflitantes
- ✗ Deixar a IA decidir sozinha
💡 Dica Pro
Para mais inspiracao de design systems modernos, confira: Design System Examples e Best Modern Website Designs.
✅ Template do Prompt Final
Aqui esta o modelo completo de prompt com todos os elementos organizados e prontos para usar. Este template acelera drasticamente a criacao de novos sites.
📋 Estrutura do Prompt
# [NOME DO PROJETO]
## 1. PAGE STRUCTURE
- HEADER
- HERO
- ABOUT
- SERVICES
- CTA
- FOOTER
## 2. BRANDING GUIDELINES
### Visual Identity
- Typography: [fonte, tamanhos]
- Color Palette: [cores hex]
- Shapes: [cantos, materiais]
- Materials: [glassmorphism, blur]
### Motion
- [tipo de animacoes]
- [curvas e timing]
### Mobile
- [experiencia mobile]
## 3. CONTENT INSTRUCTIONS
### HEADER
Content Inputs: [textos]
Content Elements: [layout]
Styling: [visual]
### HERO
Content Inputs: [textos]
Content Elements: [layout]
Styling: [visual]
[... continua para cada secao]
"Quanto mais clara e especifica for essa estrutura, mais consistente, premium e intencional sera o site gerado pela IA."
— Principio do One Prompt Website
📋 Resumo do Modulo
Proximo Modulo:
1.3 - Executando no Firebase Studio