A Formula do Site Criado com um Unico Prompt
Visao geral das 3 etapas: Etapa 1: Estrutura - como organizar as secoes do site. Etapa 2: Orientacao de Marca - identidade visual e tipografia. Etapa 3: Conteudo - textos e detalhes de cada secao.
Formula Completa - Visao Detalhada
Mapeamento completo de todas as secoes: Header, Sobre, Servicos, CTA, Destaque, Footer. Cada coluna detalha Estrutura da Pagina, Orientacao de Marca e Conteudo (Navegacao).
Etapa 1: Estrutura da Pagina
Uma estrutura clara ajuda a IA a entender quais secoes gerar. Use este layout universal como base: Header, Hero, Sobre, Servicos, CTA, Footer.
Etapa 2: Diretrizes da Marca - Identidade Visual
1. Identidade Visual: Tipografia (SF Pro Display), paleta de cores (Cinza Espacial, Off-White), formas (cantos Squircle), materiais (backdrop-filter com blur e bordas finas).
Etapa 2: Diretrizes da Marca - Sensacao
Diga a IA como exatamente o site deve ser levado. Use linguagem visual precisa para que o modelo entenda a identidade da sua marca. Descreva a sensacao da sua marca de forma clara, visual e intencional.
Etapa 2: Movimento, Scroll e Mobile
2. Movimento: Fisica de fluidos, curvas ease-out distintas, parallax suave. Scrollytelling: Elementos devem florescer ou desaparecer com fade. 3. Mobile & Qualidade: Experiencia nativa, imagens em largura total.
Etapa 3: Conteudo - Separar Secoes
Escreva seu prompt com cabecalhos de secao claros: 1. Header, 2. Secao Hero, 3. Secao Sobre, 4. Secao Servicos, 5. Secao CTA, 6. Footer.
Secao HERO - Detalhamento
Referencias de Estilo: Barra de navegacao Apple.com, efeito vidro do iOS Control Center. Conteudo: Headline, subtitulo, CTA. Elementos: Botao de video com animacao pulsante, cor Cinza Espacial escura.
Etapa 3: Tres Tipos de Instrucoes
A. Entradas de Conteudo: Titulos, dados, textos. B. Elementos de Conteudo: Botao de vidro, layout Bento grid, barra de navegacao. C. Instrucoes de Estilo & Visual: Video desfocado, base cinza escura, icones finos Apple-like.
Modelo Final de Estrutura do Prompt
Exemplo completo de como estruturar o Header e Secao Hero: conteudo da secao, elementos de conteudo, fundo, elementos extras e referencias de estilo. Use como template para todas as secoes do seu site.