🎯 O que e um Prompt Parametrico
Um prompt parametrico e um modelo estruturado onde voce pode trocar valores especificos (parametros) sem reescrever todo o prompt. E a base de um framework reutilizavel.
🧩 Estrutura Parametrica
# PARAMETROS
ESTRUTURA: [S1-S5]
PRESET: [0-7]
DENSIDADE: [minimal/equilibrado/informativo]
DISPOSITIVO: [mobile/desktop/touch]
TOM: [tecnico/premium/criativo/humano]
Troque os valores entre colchetes para gerar sites completamente diferentes com a mesma base.
Velocidade
Crie sites em minutos, nao horas
Reutilizavel
Use o mesmo template para projetos diferentes
Previsivel
Resultados consistentes e de qualidade
🏗️ Os 3 Pilares do Prompt
Todo prompt do framework AI WCF e dividido em 3 blocos principais. Cada bloco tem uma funcao especifica.
ESTRUTURA
O esqueleto do site
Define a ordem e o fluxo das secoes. Qual modelo arquitetural sera usado (S1-S5).
DIRETRIZES DE MARCA
A personalidade visual
Define como o site parece, sente e se move. Preset, cores, motion, densidade, tom.
CONTEUDO
O que sera comunicado
Define textos, imagens e informacoes de cada secao. Separado e organizado.
"Um prompt bem estruturado e como uma planta arquitetonica: qualquer construtor (IA) consegue entender e executar."
📐 Bloco 1: Estrutura
O bloco de estrutura define quais secoes o site tera e em que ordem.
📝 Template de Estrutura
# ESTRUTURA DO SITE
## Modelo: [S1/S2/S3/S4/S5]
## Secoes:
1. HEADER
2. HERO
3. [SECAO_ESPECIFICA_DO_MODELO]
4. SERVICES / FEATURES
5. CTA
6. FOOTER
Exemplo: S2 (Authority)
1. HEADER - Logo + Navegacao
2. HERO - Headline + Subheadline + CTA
3. AUTHORITY PROOF - Stats, logos, social proof
4. ABOUT - Historia + Visao
5. SERVICES - Lista de servicos
6. CTA - Chamada final
7. FOOTER - Links + Contato
🎨 Bloco 2: Diretrizes de Marca
O bloco de diretrizes define toda a experiencia sensorial do site.
📝 Template de Diretrizes
# DIRETRIZES DE MARCA
## Preset Visual: [0-7]
## Identidade:
- Estilo: [glassmorphism/brutalismo/minimal/neo-futurista/editorial]
- Cores: [paleta principal + acentos]
- Tipografia: [fonte principal + secundaria]
## Motion:
- Intensidade: [muito baixa/media/alta/muito alta]
- Entrada: [fade/slide/scale/morph]
- Scroll: [neutro/parallax/snap/reveal]
## Experiencia:
- Densidade: [minimal/equilibrado/informativo]
- Dispositivo-primeiro: [mobile/desktop/touch]
- Tom: [tecnico/premium/criativo/humano]
Exemplo: Preset 1 (Youth Energy)
Preset Visual: 1 - Youth Energy
Estilo: Gradientes vivos, moderno
Cores: Azul, roxo, ciano + accents vibrantes
Motion: Media intensidade, entrada scale+fade
Background: Gradientes animados, blobs lentos
Densidade: Equilibrado
Tom: Inspirador e proximo
📄 Bloco 3: Conteudo
O bloco de conteudo define o que vai em cada secao. Cada secao recebe 3 tipos de instrucoes.
O que entra
Textos, imagens, dados reais que vao na secao
Como se organiza
Layout, grid, disposicao dos elementos
Como deve parecer
Estilo visual especifico da secao
📝 Template de Secao
## HERO SECTION
### Conteudo:
- Headline: "Transforme ideias em sites com IA"
- Subheadline: "Framework profissional para Vibe Coding"
- CTA primario: "Comecar Agora"
- CTA secundario: "Ver Demo"
### Layout:
- Texto a esquerda, visual a direita
- Botoes alinhados a esquerda, stacked em mobile
### Visual:
- Background com gradiente animado
- Headline com destaque em cor accent
- CTA primario com glow hover
💡 Dica Importante
Quanto mais detalhado o bloco de conteudo, mais preciso sera o resultado. A IA funciona melhor com instrucoes claras e especificas.
🚀 Template Completo
Aqui esta o template completo do prompt parametrico, pronto para voce usar e adaptar.
📋 Prompt Parametrico Completo
TEMPLATE# PROMPT AI WCF - ONE PROMPT WEBSITE
---
# 1. ESTRUTURA
Modelo: S1 - One Page Classico
Secoes: HEADER → HERO → ABOUT → SERVICES → CTA → FOOTER
---
# 2. DIRETRIZES DE MARCA
Preset: 0 - Premium Calm
Estilo: Dark base, glassmorphism sutil
Cores: #111827 (dark), #10B981 (accent emerald)
Tipografia: Inter (principal)
Motion: Intensidade baixa, fade suave
Densidade: Equilibrado
Dispositivo: Mobile-first
Tom: Profissional e confiante
---
# 3. CONTEUDO
## HERO
Headline: [Sua headline aqui]
Subheadline: [Sua subheadline aqui]
CTA: [Texto do botao]
## ABOUT
Titulo: [Titulo da secao]
Texto: [Descricao]
## SERVICES
Servico 1: [Nome] - [Descricao]
Servico 2: [Nome] - [Descricao]
Servico 3: [Nome] - [Descricao]
## CTA FINAL
Headline: [Chamada final]
Botao: [Texto do CTA]
---
# INSTRUCOES TECNICAS
- Responsivo (mobile-first)
- HTML semantico
- CSS moderno (Tailwind ou vanilla)
- Acessibilidade basica
🎉 Parabens! Trilha 1 Completa!
Voce completou todos os modulos de Fundamentos do Vibe Coding. Agora voce sabe:
Proxima Trilha:
Trilha 2 - Animacao & Motion (Em breve)