Pular para o conteúdo principal

Lance um Site Lindo e de Ponta Rapidamente com o Claude

Intermediário

Você pode ir de uma ideia de uma linha a um site publicado e genuinamente bonito em uma única sessão. O truque não é mais prompts — é o andaime de prompt certo somado a uma stack rápida e a um ciclo de acabamento enxuto. Esta página é a receita.

What you'll learn
  • Escolha a superfície certa: Artifacts para apps instantâneos vs. Claude Code para um repositório real e publicável
  • Supere o padrão de 'AI slop' com o system prompt de estética de frontend da Anthropic
  • Execute um fluxo da-ideia-ao-publicado com os Steps abaixo
  • Roube prompts de build e refinamento prontos para copiar e colar que parecem briefados por um designer de produto sênior
  • Refine tipografia, movimento e responsividade — depois publique na Vercel, na Netlify ou no GitHub Pages

Escolha sua superfície primeiro​

Dois caminhos rápidos bem diferentes, dependendo do que você quer no final:

  • Claude Artifacts — descreva um app e o Claude renderiza um artifact React/HTML ao vivo e autocontido dentro do chat. Zero configuração, link compartilhável, perfeito para protótipos, ferramentas internas, calculadoras e mockups de landing page. Por padrão, um artifact executa uma lógica autocontida; ele pode acessar serviços externos via MCP, mas não é um repositório que você possui.
  • Claude Code + um framework — o Claude estrutura e edita uma base de código real (Next.js / Astro / Tailwind / shadcn/ui) na sua máquina, em paralelo, que você comita e publica. Este é o caminho quando você quer possuir, estender e lançar a coisa.
Pro tip
  • Prototipe a aparência em um Artifact em 60 segundos, depois peça ao Claude Code para reconstruí-lo como um repositório real de Next.js + Tailwind. Você obtém feedback instantâneo E uma base de código publicável.
  • O Claude Design (Anthropic Labs, prévia de pesquisa) adiciona um canvas visual e um design system persistente, com uma transição para o Claude Code — útil se você vive dentro de uma ferramenta de design.

A única coisa que separa o ótimo do genérico​

Deixado em seus padrões, o Claude converge para o que a comunidade chama de "AI slop": fonte Inter, um gradiente roxo sobre branco, três cards com cantos uniformemente arredondados. O próprio cookbook de estética de frontend da Anthropic é direto sobre o porquê — e a solução é explicitamente nomear as dimensões que importam para você e os padrões a evitar.

Colinha anti-slop
Pressione Enter ou Espaço para virar o cartão. Use as setas esquerda e direita para navegar entre os cartões.Termo exibido.
1 / 4

A jogada de maior alavancagem é colar o bloco <frontend_aesthetics> da Anthropic (ou o seu próprio DESIGN.md) no início de um build, para que o modelo saiba o que evitar antes de escrever uma linha de CSS.

Bloco de sistema anti-slop (cole antes de qualquer build de UI)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

Da ideia ao site publicado​

Guided walkthrough1 of 6
  1. Em uma única mensagem, dê ao Claude: o que é o site, as seções, o público e UMA direção estética nomeada (ex.: 'editorial acolhedor, como o Notion encontrando uma revista impressa'). Briefs vagos produzem sites vagos.

Prompts de build que parecem ter sido briefados por um designer sênior​

Abrir com um papel profissional específico eleva mensuravelmente a qualidade do resultado e reduz a variância. Seja concreto sobre a estética, a stack e os estados.

Build em uma tacada: um site real de Next.js + Tailwind + shadcn

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

Protótipo instantâneo em Artifact (chat, sem configuração)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

Refine: elimine a sensação genérica

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

Acabamento que faz parecer caro​

Pro tip
  • A tipografia é o upgrade mais barato: uma Google Font distintiva + um salto de tamanho de 3x+ entre o display e o corpo do texto já transmite 'projetado' instantaneamente.
  • Movimento: invista em UM grande momento (um carregamento orquestrado com animation-delay) em vez de dez micro-hovers minúsculos.
  • Responsividade: peça explicitamente ao Claude para lidar com os estados mobile, texto longo, vazio, carregando e erro — ele os pula por padrão.
  • Profundidade: gradientes CSS empilhados ou uma textura/padrão sutil sempre superam um fundo plano.
  • Lembre-se de que o Claude não consegue ver o próprio resultado — cole um print ou descreva o que está errado para que o ciclo de refinamento convirja.
Watch out
  • 'Faça bonito' sozinho rende pouco — é o equivalente em prompt do padrão. Em vez disso, nomeie a estética, a política de fontes e os padrões a evitar.
  • Não deixe um único prompt gigante construir tudo de uma vez para um site real; seção por seção com um DESIGN.md é mais controlável e usa tokens de forma melhor.
  • Trate as afirmações de marketing, estatísticas e textos prontos gerados por IA como rascunhos — verifique antes de publicar.

Publique em minutos​

  • Vercel — melhor encaixe para Next.js. Conecte o repositório do GitHub; cada push faz build e deploy automático com URLs de prévia por branch.
  • Netlify — agnóstico a framework, o mesmo fluxo de git-push-para-deploy, hospedagem estática generosa.
  • GitHub Pages — hospedagem estática gratuita direto do repositório; combine-a com uma exportação estática (Next.js output: "export", ou um build do Astro) para um site ao vivo de custo zero. (Este próprio site é publicado dessa forma.)

Configurar a publicação

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

Teste a si mesmo​

Teste a si mesmo

0/4
  1. Você quer um protótipo ao vivo e compartilhável em 60 segundos, com zero configuração. Qual superfície?
  2. Segundo a orientação de estética de frontend da Anthropic, qual é um padrão revelador de 'AI slop' a evitar?
  3. Qual é a forma recomendada de manter a aparência de um site consistente entre muitos prompts/sessões?
  4. Onde a Anthropic sugere gastar seu orçamento de movimento para o máximo de encantamento?
Key takeaways
  • Escolha a superfície: Artifacts para protótipos instantâneos, Claude Code + framework para um site próprio e publicável.
  • Supere o 'AI slop' nomeando a estética, a política de fontes e os padrões a evitar — cole o bloco frontend_aesthetics da Anthropic.
  • Persista um DESIGN.md para que a aparência permaneça consistente entre sessões, assim como o CLAUDE.md faz pelo código.
  • Faça o role-prompt como um designer sênior, construa seção por seção e exija os estados pulados (mobile, carregando, vazio, erro).
  • Gaste o orçamento de movimento em um único carregamento orquestrado; publique via git-push para Vercel/Netlify ou uma exportação estática para o GitHub Pages.

Fontes e leitura adicional​