Dá para criar um site inteiro com o Claude? O que sai pronto e o que você refaz

Fala aí, beleza? A Anthropic colocou o Claude Design no Labs e a pergunta virou sempre a mesma: dá pra pedir um site inteiro numa conversa e receber algo navegável do outro lado?

A resposta curta é "em parte", e a parte interessante é justamente saber ONDE fica a linha

Este post pega um recorte bem específico: site com home, seções internas e comportamento responsivo

Nada de "faz um componentezinho aqui", é o pacote que a maioria das pessoas tenta pedir de uma vez só

A ideia é separar o que costuma vir utilizável já na primeira resposta do que SEMPRE volta pra ajuste, e explicar por que página longa pede pedido fatiado

No fim tem uma ordem de trabalho pra você não refazer a mesma home três vezes 🙂

Os três caminhos para criar um site com o Claude

Antes de qualquer prompt, vale entender que não existe um botão único de "fazer site"

Existem três produtos diferentes, com planos e saídas diferentes

Pré-inscrição Formação Claude Code

Domine o Claude Code do básico ao avançado

Você vai aprender a criar sistemas completos com Claude Code, sem precisar ser programador. Inscreva-se para ter acesso a um desconto de lançamento e bônus especiais!

Quero minha vaga

Detalhe importante de quem trabalha em empresa: em organizações Enterprise o Claude Design vem DESLIGADO por padrão

Quem habilita é o admin, nas configurações da organização

Se você abriu e não achou, provavelmente não é bug, é permissão

Pra instalar o plugin no Claude Code:

/plugin install frontend-design@claude-plugins-official

A aba Discover do comando /plugin lista o catálogo, então dá pra fuçar o que mais tem por lá

O plugin é aberto e mora no repositório oficial de plugins da Anthropic, na pasta plugins/frontend-design

O que costuma sair utilizável já na primeira resposta

A estrutura da home:

Hero, blocos de seção, rodapé

Esse esqueleto é o que mais sai apresentável de cara, porque é padrão repetido em milhões de páginas

Você pede, olha e entende na hora se a direção tá certa ou não

Protótipo e one-pager pra validar com cliente:

Esse é, na minha visão, o melhor use case do Claude Design hoje

O produto foi feito exatamente pra trabalho visual desse tipo: design, protótipo, slide, one-pager

E aí o botão Export resolve o "e agora?", jogando o material pra ferramenta onde o trabalho vai continuar

Os destinos confirmados são Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel e Wix

Página única em HTML dentro de artifact:

Se o teu objetivo cabe numa página só, o artifact resolve com pouca fricção

Ele suporta site HTML de página única, e a publicação tá disponível em Free, Pro e Max

Ou seja: dá pra sair do zero e ter um link, sem tocar em servidor

Coerência visual quando existe design system:

Aqui tá o pulo do gato que quase ninguém usa

O Claude Design monta um design system a partir dos assets que você sobe: codebase, decks, PDFs

Ele extrai paleta, tipografia, componentes e padrões de espaçamento e grid

E o melhor: todo projeto novo da conta já herda esse sistema

O upload pode ser feito no onboarding ou depois, nas configurações da organização

A diferença é brutal: sem design system, cada tela nasce com uma cara; com design system, a segunda tela já nasce parecida com a primeira

Direção estética definida antes do código:

O plugin Frontend Design faz uma coisa muito massa: ele define uma direção de design ANTES de escrever código

Fixa propósito, público e uma direção estética específica (brutalista, maximalista, retrô-futurista, luxo, lúdica)

Parece detalhe bobo, mas é o que separa "mais uma landing genérica de IA" de algo com personalidade

Se você conhece briefing de design, é exatamente isso, só que virando instrução pro modelo

O que sempre volta para ajuste (e como evitar a segunda rodada)

Os sintomas mais comuns:

• A página trunca no meio de uma seção, e o rodapé some
• O responsivo só foi pensado no desktop, e no celular a coisa quebra
• Componentes repetidos com variações inconsistentes (três botões, três estilos de botão)
• Conteúdo genérico de placeholder que ninguém publicaria de verdade

Se você já pediu site inteiro de uma vez, apostou e viu pelo menos dois desses acontecerem, né? haha

A causa técnica principal:

Tem uma confusão MUITO comum aqui: as pessoas acham que janela de contexto gigante significa saída gigante

Não significa

O Claude Opus 4.7 tem janela de contexto de 1 milhão de tokens na API do Claude, na Amazon Bedrock, no Google Cloud e no Microsoft Foundry

Mas na API, uma única requisição pra modelos com janela de 1M tokens gera no máximo 128 mil tokens de saída

"Que diferença faz?" faz toda

Contexto é o quanto ele consegue LER de uma vez; saída é o quanto ele consegue ESCREVER numa resposta

Uma home longa, com seções internas e responsivo, é muito texto de código pra uma tirada só

E aí a página trunca, ou vem enxugada, ou o modelo simplifica seção pra caber

Tome cuidado com um detalhe: esse número de 128 mil é da API

O limite prático por mensagem no Claude.ai e no Claude Code não é o mesmo assunto, então não saia por aí repetindo esse número como se fosse regra da interface

Como prevenir, na prática:

• Peça POR PARTES, seção por seção, em vez da página inteira de uma vez
• Fixe o design system antes de pedir tela, subindo os assets, pra ele não reinventar paleta e tipografia a cada resposta
• Quando o alvo for artifact de arquivo único, use a skill web-artifacts-builder: ela deixa o Claude usar componentes do shadcn/ui e o grid responsivo do Tailwind dentro de artifacts, empacotando tudo num arquivo só com o Parcel, justamente pra respeitar a exigência de um HTML único
• Trate responsivo como pedido explícito, não como consequência automática

Esse ponto do grid responsivo do Tailwind é o que mais economiza retrabalho: você deixa de descrever breakpoint no braço e passa a usar um padrão que o modelo já conhece muito bem

Ordem de trabalho para não refazer o site três vezes

A sequência abaixo é a que faz sentido pela mecânica das ferramentas, não fórmula mágica

A ideia é simples: cada passo fecha uma decisão pra ela não voltar depois

1. Suba os assets e deixe o design system pronto antes de pedir qualquer tela. Codebase, decks, PDFs: o Claude Design extrai daí paleta, tipografia, componentes e padrões de espaçamento e grid, e todo projeto novo da conta herda isso. O erro comum deste passo é pedir a home primeiro e subir a identidade depois, aí você reescreve tela que já tinha aprovado

2. Defina propósito, público e direção estética. É o framework que o plugin Frontend Design aplica antes de escrever código, e funciona igualmente bem escrito na mão no seu prompt. O erro comum aqui é pular direto pro "faz uma landing bonita": bonito sem público definido vira aquele visual de template que todo mundo já viu

3. Peça a home por seções, uma de cada vez. Hero, depois prova, depois oferta, depois rodapé. O erro comum é mandar a página inteira num pedido só e receber algo truncado, pelo motivo de saída que expliquei ali em cima

4. Revise o responsivo em CADA seção antes de seguir. Fechou o hero no desktop e no mobile? Então segue. O erro comum é deixar o responsivo pro fim: aí o ajuste de uma seção empurra todas as outras e você volta ao começo

5. Só então monte as páginas internas, reaproveitando os componentes já aprovados. Card, botão e cabeçalho de seção já existem, referencie eles. O erro comum é pedir cada página do zero, e é assim que nascem os três botões diferentes no mesmo site

6. Leve o resultado pro destino final. No Claude Design, o botão Export no canto superior direito manda o trabalho pra ferramentas externas como Vercel, Wix, Replit, Lovable e companhia. Se o caminho for código, o plugin Frontend Design no Claude Code já ativa sozinho quando você pede uma interface frontend, e vale entender antes o fluxo do primeiro projeto até o deploy. O erro comum é achar que exportar é publicar: exportar entrega o material pra outra ferramenta, quem coloca no ar é ela

E se você for parar numa máquina sua em vez de uma plataforma pronta, olhe a conta antes: existem custos escondidos de uma VPS que ninguém conta no dia do deploy

O que eu vi na prática usando o Claude para interface

Quando testei o Remote Control do Claude Code, pedi uma landing page pra divulgar uma formação minha

Mandei o prompt pelo CELULAR, numa sessão remota, e fiquei acompanhando a construção acontecer em tempo real

E aqui já tem o primeiro aprendizado: ele não começou pela página

Começou criando arquivos de configuração, e só depois foi pra tela em si

Outra coisa que chamou atenção: eu não pedi framework NENHUM no prompt, e a página veio feita em Next.js por decisão dele

Aceitei o resultado, mas deixo claro que não era aquilo que eu tinha pedido

É exatamente o tipo de decisão que você quer amarrar ANTES, no briefing, junto com propósito, público e direção estética

O fluxo foi truncado e chato em um ponto: precisei aprovar manualmente cada comando durante a construção

Entendo perfeitamente que é questão de segurança, mas trabalhar assim cansa

E não foi instantâneo, viu? Eu acelerei a gravação enquanto o projeto era construído

No fim, o aviso de conclusão e a instrução pra abrir o localhost chegaram pelo canal remoto, não na tela onde eu estava trabalhando

Abri o localhost e a landing page estava lá, bonita e legal, sem ajuste meu

Moral da história: uma página, com escopo claro, sai pronta e apresentável do zero

O custo foi aprovar comando por comando e engolir uma escolha técnica que eu não pedi

Agora imagina esse mesmo pedido multiplicado por home + cinco seções internas + responsivo, num bloco só… é aí que ciclo curto de pedido e revisão ganha de pedido gigante, disparado

Acompanhar a execução também muda a cabeça: você corrige rota no meio, em vez de descobrir o desvio só no bloco final

No vídeo acima eu mostro o passo a passo desse pedido saindo do celular e a página nascendo do outro lado, com as aprovações e tudo mais

Vale a pena desenhar um site inteiro com o Claude?

Vale, com um asterisco honesto

Vale MUITO pra chegar rápido num layout navegável e pra validar direção visual antes de gastar hora de designer ou de dev

O Claude Design com design system extraído dos seus assets resolve consistência de um jeito que prompt solto nunca resolveu

E o plugin Frontend Design no Claude Code encaixa bem quando o site já é um projeto de código

Não substitui a rodada de ajuste humana, principalmente em responsivo, conteúdo e consistência de componentes

Compensa pra quem já tem identidade visual pronta e quer velocidade, e pra quem prototipa pra cliente e precisa mostrar algo na reunião de amanhã

Não compensa (ainda) pra quem espera abrir a ferramenta, escrever um parágrafo e receber site final publicável sem revisar nada

E lembra do contexto: o Claude Design segue em research preview

Produto em research preview é produto que muda, então trate o que você monta hoje como base de trabalho, não como pedra

Conclusão

Se você levar uma única regra deste post, leve esta: peça por partes

A janela de contexto grande não significa resposta grande, e é isso que quebra a home pedida de uma tirada só

O próximo passo concreto é escolher o caminho pelo objetivo: Claude Design pra visual e exportação, artifact pra página única publicável, plugin Frontend Design no Claude Code pra site que vive em código

Depois, suba os assets pra formar o design system e comece pela home, seção por seção

Dá o play no vídeo pra ver o pedido rodando na prática, e passa nos outros conteúdos do blog que eu tô soltando sobre o ecossistema do Claude

até o próximo post! 😀