Você programou a funcionalidade no vibe coding, mas a tela ficou sem graça, com cara de "feita por IA". O Claude Design (beta) é a ferramenta de design da Anthropic que cuida da parte de *deixar bonito*: descreva o que você quer, o Claude monta um rascunho, você refina com cliques e controles deslizantes e depois exporta para HTML ou repassa para o Vercel / Claude Code para publicar um site de verdade.

O que você precisa

  • Um plano Pro / Max / Team do Claude (o Enterprise vem desativado por padrão — um administrador precisa habilitar em Organization settings)
  • Um navegador

Passo 1 — Abra o Claude Design

  1. Acesse claude.ai/design (ou clique em Start designing na página do produto)
  2. Faça login e você chega ao canvas de design.

Passo 2 — Descreva e receba um rascunho

Seja específico. Copie, cole e edite isto:

> Crie uma landing page para uma startup de fintech. Seções: hero, três funcionalidades principais, depoimentos, planos e um CTA no final. Tom: confiável e minimalista. Cor principal: azul escuro (#1E3A8A).

O Claude monta uma primeira versão; você reage a ela e vai iterando a partir daí.

Passo 3 — Traga sua marca (opcional)

Tem um design system da empresa? Importe de um repositório do GitHub, de arquivos de design ou de um código local. Aí o Claude constrói com os seus componentes reais e compara o resultado com o seu design system, corrigindo as inconsistências antes mesmo de você ver.

Passo 4 — Refine (a parte importante)

Ajuste direto no rascunho:

  • Clique em um elemento e deixe um comentário ("deixe este botão maior")
  • Dê dois cliques no texto para editar na hora
  • Use os controles deslizantes que o Claude gera para ajustar espaçamento e cor
  • Arraste os elementos para mover, redimensionar e alinhar

Dica: peça logo de cara "três propostas para comparar" e trave cedo as cores e fontes da sua marca — o resultado sai bem mais consistente.

Passo 5 — Exporte / publique

  • Exporte para HTML / PDF / PPTX
  • Envie para ferramentas conectadas: Vercel, Wix, Canva e outras
  • Para continuar construindo em código, repasse para o Claude Code com /design-sync ou /design

Bom saber

  • O Claude Design está em beta e não é um serviço de hospedagem em si — publique exportando o HTML ou pelas integrações com Vercel/Wix.
  • No Enterprise ele fica oculto até um administrador habilitar em Organization settings.