Completar artes das páginas internas, corrigir erros visuais (foto, logo) e entender o papel (limitado) do protótipo HTML.
Teoria — o que o vídeo pode ter passado rápido
Hierarquia visual (rápido)
Boas páginas de serviço/venda costumam seguir:
1. Hero — promessa + CTA
2. Prova / resultado — o que o visitante ganha
3. Como funciona — reduzir medo
4. Conteúdo / oferta — detalhes
5. Objeções (FAQ)
6. CTA final
Se a arte misturar tudo sem ordem, o Cursor vai programar confusão fielmente.
Desktop vs mobile na referência
Peça artes pensando em mobile-first mentalmente, mesmo que a imagem seja desktop:
- CTA alcançável com o polegar;
- textos curtos acima da dobra;
- evitar 5 colunas que quebram no celular.
No .md depois, descreva comportamento mobile explicitamente.
Foto e rosto: por que a IA erra
Modelos de imagem “inventam” pessoas. Para autoridade:
- use URL/arquivo real;
- diga “não substitua por stock”;
- regenere só as telas que usam a pessoa.
Protótipo HTML do ChatGPT: quando usar
| Usar | Evitar |
|---|---|
| Sentir navegação básica | Como verdade visual absoluta |
| Validar ordem de seções | Extrair CSS pixel-perfect |
Na gravação, o HTML ficou abaixo das artes. Lição: arte aprovada > HTML gerado. O Cursor implementa a partir das artes + .md, não do ZIP HTML fraco.
Design system mínimo (mesmo sem Figma)
Anote cedo (ou peça no .md):
- 1 cor primária + fundo + texto;
- 1 fonte display + 1 corpo (ou uma família só, como Sora);
- raio de canto padrão;
- estilo de botão primário / secundário.
Isso evita que cada página nasça com “personalidade diferente”.
Na prática
- Revisar conteúdo, método, exemplos, instrutor, FAQ
- Trocar foto real
- (Opcional) pedir HTML — sem travar se ficar ruim
Prompt — foto
Prompt
Você errou o rosto/foto de [NOME]. Use esta referência: [URL/anexo]. Pode variar pose/fundo, mas o rosto precisa ser o real. Regenere as artes afetadas.
Prompt — internas
Prompt
A home está aprovada. Gere as imagens das páginas: [lista]. Mantenha a mesma identidade visual.
Para a próxima aula
Pedir o Markdown completo — a aula mais importante da esteira.
PARA CONSULTAR QUANDO PRECISAR
Dúvidas desta aula
A imagem do layout já é o site?
Não. Ela mostra uma proposta de aparência. Links, menus, adaptação ao celular e outras funções precisam ser implementados e testados depois. A imagem ajuda a alinhar a direção antes dessa etapa.
A IA colocou uma foto ou uma frase que não é minha. Posso manter?
Confira antes. Uma imagem gerada pode conter pessoas, números ou depoimentos fictícios. Troque pelo conteúdo aprovado do seu negócio e não trate a arte como comprovação de uma informação.
E se eu gostar só de uma parte do visual?
Diga o que deve continuar e o que deve mudar. Por exemplo: mantenha as cores e o cabeçalho, mas dê mais destaque às fotos. Isso evita pedir uma nova versão inteira quando o problema está em uma seção.
Links úteis
Ferramentas e referências desta aula. Os links abrem em uma nova aba.