⚡ Por que este modulo e diferente
Todos os modulos anteriores ensinaram vocabulario de design - cores, tipografia, layout, componentes. Agora voce vai aprender a usar esse vocabulario para se comunicar com IAs.
Um prompt bem escrito e a diferenca entre receber um site generico e receber exatamente o que voce imaginou. Este modulo ensina a estrutura, as tecnicas e os padroes que profissionais usam.
💡 O que e:
A estrutura de um prompt e o formato organizado que voce usa para comunicar com a IA. Um prompt bem estruturado tem: contexto, objetivo, especificacoes tecnicas e restricoes.
Formula basica de prompt:
🎯 Por que aprender:
- • Prompts vagos geram resultados genericos e imprevisiveis
- • Estrutura clara reduz idas e voltas com a IA
- • Economiza tempo ao receber resultados mais proximos do desejado
- • Profissionais usam templates estruturados para consistencia
🔑 Conceitos-chave:
Prompt RUIM:
"Faz um site bonito pra mim"
Problema: Vago, sem contexto, sem especificacoes
Prompt BOM:
"Crie uma landing page para uma cafeteria artesanal chamada 'Grao Nobre'. Use paleta de cores terrosas (marrom, bege, verde oliva). Layout com hero section full-width, secao de produtos em grid 3 colunas, depoimentos em carousel. Tipografia serif elegante para titulos, sans-serif para corpo. Mobile-first, dark mode opcional. NAO use imagens de banco generico - deixe placeholders."
Sucesso: Contexto claro, especificacoes tecnicas, restricoes definidas
Seja Especifico
"Hero com 100vh" e melhor que "hero grande"
Use Numeros
"Grid 4 colunas, gap-6" e preciso e claro
Defina Restricoes
"NAO use JavaScript" evita surpresas
De Contexto
"Para um publico jovem" muda o resultado
💡 O que e:
Vocabulario tecnico sao os termos especificos de design e desenvolvimento que a IA reconhece e interpreta com precisao. Usar "hero section" em vez de "parte de cima grande" gera resultados drasticamente melhores.
Linguagem Leiga
- "Parte de cima bonita"
- "Caixinhas lado a lado"
- "Letra grande e bonita"
- "Cores legais"
Vocabulario Tecnico
- "Hero section full-width"
- "Grid 3 colunas com gap-6"
- "Tipografia display 48px bold"
- "Paleta analogica azul-ciano"
🎯 Por que aprender:
- • IAs foram treinadas em documentacao tecnica e codigo
- • Termos especificos eliminam ambiguidade na comunicacao
- • "Flexbox justify-between" e uma instrucao exata
- • Voce soa profissional e a IA responde na mesma altura
🔑 Conceitos-chave:
Prompt com vocabulario tecnico:
"Crie um card component com aspect-ratio 16:9, border-radius-xl, box-shadow-lg no hover com transition 300ms ease. Imagem object-cover no topo, padding-6 para conteudo. Titulo em font-semibold text-lg, paragrafo em text-neutral-400 line-clamp-2. Badge com background gradient de purple-500 para pink-500."
Termos de Layout
flexbox, grid, container, wrapper, sidebar, main content
Termos de Espacamento
padding, margin, gap, spacing, whitespace, breathing room
Termos de Tipografia
font-weight, line-height, letter-spacing, text-transform
Termos de Cor
palette, hue, saturation, opacity, gradient, accent color
💡 O que e:
Contexto e toda informacao de fundo que ajuda a IA entender seu projeto: o tipo de negocio, publico-alvo, tom da marca, referencias visuais. Especificidade e o nivel de detalhe tecnico que voce fornece.
Niveis de contexto:
🎯 Por que aprender:
- • A IA nao le mentes - ela so sabe o que voce escreve
- • "Site de advocacia" vs "site de loja de skate" sao mundos diferentes
- • Publico-alvo determina cores, linguagem e complexidade
- • Tom da marca (serio, divertido, premium) muda tudo
🔑 Conceitos-chave:
Prompt com contexto completo:
"Estou criando o site da 'Verde Vivo', uma startup de delivery de organicos em SP. Publico: profissionais urbanos 28-45, preocupados com saude e sustentabilidade. Tom: moderno mas acolhedor, confiavel mas nao corporativo. Concorrentes: Liv Up, Jumbinho. Quero me diferenciar com um visual mais 'fazenda urbana' - ilustracoes, tons verdes e terrosos, tipografia humanista. Preciso de: landing page com hero, como funciona (3 steps), produtos em destaque, depoimentos e CTA final. Mobile-first, Tailwind CSS."
Contexto de Negocio
Tipo de empresa, setor, proposta de valor, diferenciais
Contexto de Publico
Idade, profissao, interesses, nivel tecnico
Contexto Visual
Referencias, concorrentes, estilos admirados
Contexto Tecnico
Framework, restricoes, integracao necessaria
💡 O que e:
Referencias sao sites, componentes ou estilos existentes que voce usa como inspiracao. Podem ser URLs de sites que voce admira, nomes de design systems conhecidos (Material Design, Apple HIG), ou descricoes de padroes visuais reconheciveis.
Tipos de referencias:
🎯 Por que aprender:
- • "Como o Airbnb" comunica mais que 1000 palavras
- • IAs conhecem sites famosos e podem replicar estilos
- • Combinar referencias: "Layout do Linear + cores do Notion"
- • Referencias negativas tambem funcionam: "NAO como sites anos 90"
🔑 Conceitos-chave:
Prompt com referencias:
"Crie uma dashboard de analytics. Referencias: limpeza visual do Linear.app, cards arredondados do Stripe Dashboard, graficos estilo Vercel Analytics. Sidebar fixa a esquerda como no Notion. Cores: dark mode com accent em azul-eletrico. NAO quero visual carregado tipo dashboards enterprise tradicionais."
Referencias Positivas
"Inspirado em X", "estilo de Y", "layout como Z"
Referencias Negativas
"NAO como X", "evitar estilo Y", "sem parecer Z"
Referencias Parciais
"Tipografia do site A, cores do site B"
Referencias de Estilo
"Glassmorphism", "Neomorphism", "Brutalist"
Sites que IAs conhecem bem:
💡 O que e:
Iteracao e o processo de refinamento progressivo. Voce raramente acerta de primeira - e isso e normal. O segredo e saber como pedir ajustes especificos, construindo sobre o que ja foi criado em vez de comecar do zero.
Fluxo de iteracao:
🎯 Por que aprender:
- • Ninguem acerta de primeira - iteracao e parte do processo
- • Ajustes cirurgicos sao mais eficientes que refazer tudo
- • A IA mantem contexto da conversa - use isso a seu favor
- • Saber iterar e mais importante que o prompt inicial perfeito
🔑 Conceitos-chave:
Prompt 1 - Inicial:
"Crie um hero section para uma fintech"
Prompt 2 - Ajuste de cor:
"Mude o gradiente para azul-escuro para roxo, menos saturado"
Prompt 3 - Ajuste de layout:
"Coloque o CTA button a esquerda, com mais padding vertical"
Prompt 4 - Ajuste fino:
"Reduza o tamanho do titulo de 6xl para 5xl, aumente line-height"
Seja Especifico no Ajuste
"Mude X para Y" em vez de "nao gostei, melhora"
Um Ajuste por Vez
Facilita identificar o que funcionou ou nao
Mantenha o que Funciona
"Mantenha o layout, mude apenas as cores"
Documente Sucessos
Salve prompts que funcionaram para reusar
💡 O que e:
Combinar conceitos e usar tudo que voce aprendeu no curso em um unico prompt: vocabulario de design (trilha 1 e 2), estrutura de prompt, vocabulario tecnico, contexto, referencias e mentalidade de iteracao. E a sintese de todo o curso.
🎯 Por que aprender:
- • Conceitos isolados tem poder limitado
- • Combinados, multiplicam a efetividade exponencialmente
- • Profissionais usam templates que combinam tudo
- • Este e o nivel que separa amadores de especialistas
🔑 Conceitos-chave:
Prompt Profissional Completo:
[CONTEXTO]
"Crie uma landing page para 'FitFlow', um app de treino personalizado por IA. Publico: jovens 18-35, fitness enthusiasts, tech-savvy. Tom: energetico, moderno, motivacional. Concorrentes: Freeletics, Nike Training. Diferencial: IA que adapta treinos em tempo real."
[ESPECIFICACOES TECNICAS]
"Stack: HTML + Tailwind CSS. Mobile-first. Dark mode como padrao. Paleta: gradiente purple-600 para pink-500 como accent, dark-900 como background, text-neutral-100. Tipografia: Inter para corpo, font-bold display para titulos."
[ESTRUTURA]
"Secoes: 1) Hero com headline impactante + mockup do app + CTA 'Comece Gratis'. 2) Features em grid 3 colunas com icones. 3) Como funciona em 3 steps horizontal timeline. 4) Depoimentos em cards carousel. 5) Pricing em 3 tiers. 6) CTA final + footer."
[REFERENCIAS]
"Visual: limpeza do Linear.app, energia do site da Peloton, gradientes do Stripe. NAO quero: visual generico de template, stock photos obvias, muito texto."
[RESTRICOES]
"Sem JavaScript complexo - apenas toggle de dark mode. Sem frameworks. Imagens como placeholders (use bg-gradient). Acessivel: contraste WCAG AA, focus visible."
Template de Secoes
CONTEXTO + SPECS + ESTRUTURA + REFS + RESTRICOES
Nivel de Detalhe
Mais detalhes = mais controle sobre o resultado
Equilibrio
Detalhado mas nao engessado - deixe espaco criativo
Documente e Reuse
Crie sua biblioteca de prompts que funcionam
🎯 Vocabulario para Prompts
Termos e frases poderosas para usar em seus prompts de criacao de sites:
Estrutura de Prompt
Crie um/uma [componente]
para [tipo de negocio]
com [especificacoes]
usando [tecnologia]
NAO inclua [restricao]
Descricao Visual
visual limpo e minimalista
estetica moderna/premium
muito whitespace
visual bold e impactante
sofisticado mas acessivel
Especificacoes Tecnicas
mobile-first responsive
grid [n] colunas gap-[n]
flexbox justify-between
max-width container
aspect-ratio 16:9
Cores e Gradientes
paleta [tipo]: [cores]
gradiente de X para Y
accent color em [cor]
dark mode com bg-[cor]
opacidade [n]% no hover
Tipografia
titulo em [fonte] bold
corpo text-base/relaxed
hierarquia h1-h6 clara
line-clamp-[n] para truncar
tracking-wide/tight
Iteracao e Ajustes
mantenha X, mude Y
aumente/reduza [propriedade]
substitua X por Y
adicione [elemento] em [local]
remova [elemento]
Prompt de Iteracao Exemplo:
"Mantenha a estrutura do hero, mas: 1) Mude o gradiente de purple para blue-600 to cyan-400, 2) Reduza o titulo de text-6xl para text-5xl, 3) Adicione um badge 'Novo' acima do titulo em bg-yellow-500/20 text-yellow-400, 4) Aumente o padding vertical do CTA button para py-4."
📝 Resumo do Modulo
Dica Final:
Crie uma biblioteca pessoal de prompts que funcionaram. Cada projeto e uma oportunidade de refinar seus templates. Em pouco tempo, voce tera um arsenal que produz resultados incriveis em segundos.