Aula 02 - Prompts Avançados e Identidade Visual
Estilos de mercado, componentes web, hierarquia e identidade visual - criação de um landing page
O que é uma Interface
Antes de criar, eu preciso entender o que é uma interface - porque quando eu crio um site, estou criando uma interface.
A analogia humana
Quando eu falo com alguém, minha boca é a interface de saída - por onde a informação sai. Os ouvidos da outra pessoa são a interface de entrada - por onde a informação entra. Eu não preciso saber como o cérebro dela processa a informação - só preciso que ela entendeu.
Interface é o ponto onde eu me comunico com algo - sem precisar entender como funciona por dentro.
tipos de interface na tecnologia
Demo: Tipos de interface
GUI - Visual
Sites, apps, celular
Eu clico em botões, janelas e ícones. A máquina entende imagens e posições. É a interface do dia a dia.
API - Programática
Apps que consultam preços
Uma máquina conversa com outra enviando dados estruturados (JSON, XML). Sem mensagem bonita na tela - só dados.
TUI - Terminal
Terminal do computador
Eu digito comandos em texto e recebo texto de volta. Zero botões, zero figuras.
Estilos de Mercado
Cada negócio tem uma personalidade. Uma padaria artesanal é diferente de uma consultoria financeira, que é diferente de uma loja de skate. O estilo visual do site precisa combinar com essa personalidade.
É como roupa: eu não vou de terno pra praia nem de bermuda pra uma entrevista de emprego. O estilo precisa combinar com a ocasião.
Os 5 estilos principais
| Estilo | Como descrever no prompt | Cores típicas | Fonte típica | Sensação |
|---|---|---|---|---|
| Artesanal | “Estilo artesanal, cores quentes, fonte arredondada, sensação caseira” | Laranja, bege, marrom, terracota | Arredondada, manuscrita | caseiro, acolhedor, honesto |
| Minimalista | “Estilo minimalista, bastante espaço em branco, fontes finas, apenas 2 cores” | Branco, preto, cinza, um destaque | Fina, sans-serif | limpo, sofisticado, focado |
| Profissional | “Estilo profissional, azul escuro e branco, fonte limpa, organizado” | Azul, cinza, branco | Sans-serif limpa | sério, confiável, corporativo |
| Divertido | “Estilo divertido, cores vibrantes, fonte bold, energético” | Rosa, amarelo, verde, laranja | Bold, expressiva | alegre, energético, jovem |
| Elegante | “Estilo elegante, preto e dourado, fonte serifada, sofisticado” | Preto, dourado, vinho, roxo | Serifada, fina | sofisticado, caro, exclusivo |
Estilos além dos 5 principais
Ver tabela dos estilos extras
| Estilo | Descrição | Quando usar |
|---|---|---|
| Rústico | Madeira, texturas naturais, cores terrosas | Negócios no campo, sítios, turismo rural |
| Moderno | Geométrico, gradientes, animações sutis | Tech startups, apps, serviços digitais |
| Retrô | Cores dessaturadas, fontes vintage, texturas | Lojas de vinil, barbearias, cafeterias |
| Natural | Verde, bege, texturas orgânicas | Produtos sustentáveis, orgânicos, yoga |
| Urbano | Concreto, grafite, cores fortes | Grafite, skate, cultura urbana |
Como escolher o estilo certo
A pergunta não é “qual estilo eu gosto?” - é “qual estilo combina com o público e o serviço?”
| Negócio | Estilo ideal | Por quê |
|---|---|---|
| Padaria artesanal | Artesanal | Passa honestidade, caseiro, acolhedor |
| Consultoria de TI | Profissional | Passa confiabilidade, sério, competente |
| Escola de dança | Divertido | Passa energia, alegre, motivador |
| Restaurante italiano | Elegante | Passa sofisticação, tradição, qualidade |
| Loja de roupas streetwear | Minimalista | Passa modernidade, foco no produto |
Se eu tenho uma loja de roupas artesanais no Mercado Municipal, o estilo “artesanal” combina: cores quentes, fonte arredondada, fotos de mãos fazendo as peças. Se eu usar estilo “minimalista” (fundo branco, texto preto, zero decoração), o site fica bonito - mas não combina com a personalidade do negócio.
Pesquise antes de escolher: abra os sites de 3 a 5 negócios do mesmo segmento e repare em cores, fontes e tom de voz. Eles mostram o que o público já espera. Depois é só descrever essa referência no prompt.
É possível misturar estilos: “artesanal com toques modernos” ou “elegante com texturas rústicas”. A IA respeita combinações - desde que eu seja específico.
Blocos de Componentes Web
Assim como existem estilos visuais, existem blocos de componentes - peças reutilizáveis que formam um site. Cada componente tem uma função, e eu combino eles pra construir qualquer página.
É como LEGO: cada bloco tem um formato e uma função. Eu misturo os blocos pra construir o que quero - uma casa, um carro, um castelo. Na web, a mesma lógica.
Wireframe visual: onde cada peça mora
Demo: anatomia de uma página
Componentes UI
São os “blocos visuais” que o visitante enxerga e interage:
| Componente | O que é | Quando usar |
|---|---|---|
| Hero | Seção de destaque no topo - o primeiro impacto | Toda página que quer causar impressão inicial |
| Card | Retângulo com informação - foto + texto + ação | Catálogos, listas de produtos, galerias, preços |
| Depoimento | Fala de cliente satisfeito - foto + nome + texto | Landing pages, e-commerce, serviços |
| CTA | Botão de ação - o elemento mais importante | Qualquer página que quer que o visitante faça algo |
| FAQ | Lista de perguntas e respostas | Páginas de produto, serviço, curso |
| Pricing | Tabela ou card de preços | SaaS, cursos, serviços com planos |
| Galeria | Grade ou carrossel de imagens | Portfólios, restaurantes, hotéis |
| Contato | Formulário + dados de contato | Toda página que quer receber mensagens |
| Header | Cabeçalho - logo + navegação | Toda página |
| Footer | Rodapé - copyright + links + contato | Toda página |
Layouts - a estrutura que organiza as peças
Enquanto os componentes são as “peças”, os layouts são a estrutura que organiza essas peças na tela:
| Layout | Como funciona | Exemplo |
|---|---|---|
| Grid | Colunas e linhas - tudo alinhado | Instagram, Pinterest |
| Flex | Distribuição flexível - um eixo | Navbar com logo à esquerda e menu à direita |
| Sidebar | Barra lateral + conteúdo principal | YouTube, WordPress admin |
| Split | Divisão ao meio - dois blocos lado a lado | Apple (produto à esquerda, texto à direita) |
| Full-width | Largura total - sem restrições | Banners, sites de moda, hotéis |
Como pedir componentes no prompt
“Crie uma landing page para um curso de confeitaria. Componentes: 1. Hero com imagem de bolo decorado, título ‘Aprenda a Decorar Bolos’, botão ‘Inscreva-se’ 2. Depoimentos - 3 cards com foto, nome e fala de alunas 3. Pricing - 2 planos lado a lado 4. FAQ - accordion com 5 perguntas 5. Rodapé com WhatsApp e Instagram”
Dica: quanto mais eu especificar os componentes, menos a IA “inventa” - e mais o resultado fica parecido com o que eu imagino.
Tipos de Sites
Assim como existem tipos de loja (boutique, supermercado, feira), existem tipos de site. Cada tipo tem uma estrutura, um objetivo e um estilo visual que combina.
Eu não construo uma padaria igual a uma loja de roupas. Cada negócio pede uma “casa” diferente na web.
Demo: as “receitas” dos tipos de site
Cada tipo de site tem blocos que aparecem sempre - uma receita própria. Veja como duas receitas são diferentes.
Landing Page
- Hero
- Benefícios
- Como funciona
- Depoimentos
- Preço
- CTA final
- Rodapé
Evento
- Hero com data e local
- Programação
- Inscrição
- Localização (mapa)
- FAQ
Os principais tipos de site
| Tipo | Proposta | Estrutura típica | Exemplo |
|---|---|---|---|
| Landing Page | Converter visitantes em clientes - um objetivo único | Hero + benefícios + prova social + CTA | apple.com/iphone |
| One Page | Tudo numa única página - sem navegação interna | Seções empilhadas: sobre, serviços, contato | airbnb.com (home) |
| Institucional | Passar credibilidade e apresentar a empresa | Sobre, Equipe, Serviços, Clientes, Contato | bradesco.com.br |
| E-commerce | Vender produtos online | Catálogo, Carrinho, Checkout, Minha Conta | amazon.com.br |
| Catálogo | Mostrar produtos sem venda direta - para encomendar | Grid de cards + WhatsApp | sites de artesanato |
| Blog | Publicar artigos e conteúdo educacional | Posts, categorias, busca, comentários | medium.com |
| Portfólio | Mostrar trabalhos e habilidades criativas | Galeria, projetos, sobre, contato | behance.net |
| SaaS/App | Vender software por assinatura | Features, pricing, FAQ, demo, login | notion.so |
| Marketplace | Conectar compradores e vendedores | Categorias, busca, avaliações, perfil | mercadolivre.com.br |
| Evento | Divulgar evento com data e local | Data + local + programação + inscrição | eventbrite.com.br |
| Restaurante | Mostrar cardápio, horário e fazer reservas | Cardápio, fotos, localização, reservas | ifood.com.br (restaurantes) |
| Escola/Curso | Vender cursos ou divulgar programa | Cursos, grade horária, professores, inscrição | alura.com.br |
Regra prática: antes de criar o site, eu pergunto: “qual o objetivo principal?” O objetivo define o tipo, o tipo define a estrutura, e a estrutura define quais blocos eu peço pra IA.
Dica: pra muitos casos, uma landing page resolve. É o tipo mais versátil - serve pra vender, divulgar, apresentar e converter. Se eu não sei qual escolher, começo por ela.
Hierarquia de Informações
Hierarquia é a ordem em que o olho lê os elementos da página. Se eu não definir uma hierarquia, o visitante fica perdido.
Demo: a escada da hierarquia
Da maior pra menor importância - o olho desce a escada naturalmente.
Nível 1 · maior
Título principal
Nível 2
Subtítulo
Nível 3
Texto de descrição
Nível 4 · menor
Rodapé com contato
Como definir hierarquia no prompt
Eu preciso dizer à IA qual elemento é mais importante:
- Nível 1 - o mais importante: “Título principal grande e colorido, no topo da página”
- Nível 2 - importante, mas menos que o título: “Subtítulo menor, logo abaixo do título”
- Nível 3 - detalhes: “Texto de descrição em tamanho normal”
- Nível 4 - complementar: “Rodapé com informações de contato em texto pequeno”
“Crie um landing page para um evento de música ao vivo. Hierarquia: 1. Título: ‘SOM DA TERRA’ - maior elemento, fonte bold, cor laranja 2. Subtítulo: ‘Música ao vivo no Bar do Zé’ - menor, cor branca 3. Detalhes: ‘Sábado, 20h, entrada grátis’ - tamanho médio, destaque 4. Botão: ‘Confirmar presença’ - grande, arredondado, cor de destaque 5. Rodapé: ‘@bardoze’ - pequeno, canto inferior”
Criando um Landing Page
Agora é a parte prática. Vamos usar tudo que aprendemos pra criar um landing page - uma página única pra divulgar um evento ou serviço local. Uma landing page é uma página web única que funciona como um flyer online. Diferente do Linktree (que é só links), a landing page tem:
- Título chamativo
- Informações do evento/serviço (data, local, preço)
- Foto ou imagem em destaque
- Botão de ação (WhatsApp, ingresso, confirmação)
- Identidade visual coerente
É como um cartão de visitas, mas mais completo - e com botão de ação.
A estrutura da landing page
Demo: os blocos de uma landing page
Da ordem em que aparecem na página, de cima pra baixo.
Prompt pronto pra landing page
Ver o template pronto pra copiar
Template do prompt
"Crie uma landing page para [NOME DO EVENTO/SERVIÇO]
Hierarquia:
1. Título: '[TÍTULO]' - maior elemento, fonte bold, cor [COR]
2. Subtítulo: '[DESCRIÇÃO]' - menor, cor [COR]
3. Imagem: [DESCRIÇÃO] em destaque
4. Detalhes: Data, Horário, Local, Preço
5. Botão: '[TEXTO]' - grande, arredondado, cor [COR]
6. Rodapé: [REDES] em texto pequeno
Estilo: [ESTILO]
Cores: [CORES]
Fundo: [COR]"Passo a passo no Replit
- Passo 1: abrir o Replit e criar novo projeto HTML/CSS/JS
- Passo 2: colar o prompt no chat da IA
- Passo 3: a IA gera o código - visualizar no painel ao lado
- Passo 4: ajustar o que precisar: “Troque o fundo pra azul escuro” “Deixe o botão maior” “Adicione o endereço completo” “Mude a fonte do título pra algo mais moderno”
- Passo 5: publicar via botão Publish
Prompts de Ajuste Avançado
Além dos ajustes básicos (trocar cores, mudar texto), existem ajustes mais sofisticados:
| Tipo de ajuste | Prompt de exemplo |
|---|---|
| Mudar estilo | “Troque o estilo de artesanal para minimalista” |
| Adicionar seção | “Adicione uma seção de depoimentos abaixo dos detalhes” |
| Mudar hierarquia | “Coloque o botão de WhatsApp acima dos detalhes” |
| Adicionar animação | “Adicione uma animação sutil no título ao carregar a página” |
| Mudar tipografia | “Use fonte serifada para o título e sans-serif pro resto” |
| Ajustar espaçamento | “Adicione mais espaço entre o título e o subtítulo” |
| Adicionar gradiente | “Use um gradiente de laranja pra marrom no fundo” |
Dica: quando eu peço um ajuste, sempre explico por quê. “Mude a cor do botão pra vermelho porque quero criar urgência” é melhor que “mude a cor do botão”.
Checklist de Identidade Visual
Antes de publicar minha landing page, eu verifico cada item:
✅ Demo: checklist interativa
Próxima Aula:
Material de apoio
Links e recursos para acessar depois da aula:
- Demos desta aula - exemplos interativos dos conceitos vistos hoje:
- O mesmo site, 5 estilos - como cada estilo de mercado muda a landing SOM DA TERRA
- Anatomia de uma página - onde cada peça mora no layout
- Receitas dos tipos de site - os blocos que aparecem em cada tipo
- Ferramentas de paleta - Coolors, Adobe Color
- Galerias de inspiração - Dribbble, Mobbin, Awwwards
- MDN Web Docs - referência de HTML, CSS e JavaScript