Você já sabe criar, versionar e publicar. Este é um extra, fora da trilha: duas formas de deixar suas páginas realmente bonitas, sem entender de design.
Um aviso de expectativa: isto não é um capítulo da trilha — é um extra, pra quando você já domina o básico e quer subir o nível do visual. São duas técnicas, da mais simples pra mais poderosa.
Descrever com palavras o visual que você quer é difícil ("moderno", "clean"... a IA chuta). É bem mais fácil pedir pra ela gerar vários estilos de uma vez e escolher olhando. O prompt é simples:
Ela monta uma página só com as 10 prévias. Você abre, olha, e diz "gostei do 3" — aí ela aplica esse estilo na sua página de verdade. Dois exemplos reais, feitos a partir de páginas do próprio Projeto IA:
Dez climas de cor diferentes na mesma página, pra comparar de relance.
Cinco conceitos caprichados, cada um com layout e personalidade própria.
A Anthropic (a mesma do Claude) fez um plugin oficial chamado frontend-design. Com ele instalado, a IA muda o jeito de trabalhar o visual: antes de escrever qualquer código, ela para pra pensar no design (paleta, tipografia, uma "assinatura" visual) e foge do look genérico de "página de IA". Na prática, suas páginas saem mais bonitas sem você pedir nada de especial.
Como instalar. só na 1ª vez No Claude Code (a aba "Code"), cole estes dois comandos, um de cada vez:
Como usar. Depois de instalado, não precisa fazer nada de diferente: quando você pedir uma página, a IA já aplica o cuidado extra. Pra ver a diferença numa página que você já fez, peça um redesenho:
Use a técnica 1 (pedir estilos e escolher) sempre que quiser explorar direções pra uma página específica. E instale o frontend-design pra levantar o nível de tudo que você criar daqui pra frente. Uma é pontual (escolher um look), a outra é permanente (a IA capricha sempre).
frontend-design (autoria Anthropic): injeta orientação de design (paleta, tipografia, "assinatura") e evita o visual genérico de IA. Instalação via marketplace de plugins do Claude Code: code.claude.com/docs.