Figma Make + Claude Code: LP em 1h sem designer

“Design e código são fases separadas.” Eu tratava isso quase como lei física. Designer monta no Figma, engenheiro implementa olhando o arquivo. Fluxo de mão única, ordem obrigatória. Em 2026 essa ordem deixou de ser obrigatória, e eu só percebi isso quando tentei fazer uma landing page sozinho, sem designer no time.

A boa notícia é que o truque não é meu. Ele já estava publicado. Em 8 de fevereiro de 2026, @Hisashi_dn descreveu num post no X um fluxo em quatro passos — Claude gera o HTML, Figma Make copia como design, você edita no Figma, Claude Code publica — e estimou que o ciclo todo cabe em cerca de uma hora. Eu reproduzi o roteiro do meu lado para ver o que sobrevive na prática, e é sobre isso que este post trata. Nada aqui é meu “achado original”: é um relato público remontado por quem está do lado do código, não do design.

Por que o loop reverso virou possível

O que mudou foi a direção da seta entre design e código. No fluxo clássico, só existia “design → código”. O Figma Make inverteu metade dessa frase: você entrega HTML ou um protótipo em código, e ele devolve dados de design editáveis dentro do Figma. A outra metade a própria Figma formalizou em 17 de fevereiro de 2026, quando publicou a feature “Claude Code to Figma” — ela captura uma UI que está rodando no navegador (produção, staging ou localhost) e converte em frames editáveis na canvas. Agora o caminho “código em execução → dados de design” é oficial, não hack.

O resultado é que a hierarquia “upstream = design, downstream = código” deixou de ser imposta pela ferramenta. Dá para começar pelo código e refinar no Figma. Dá para começar no Figma Make e deixar o Claude Code implementar. Qualquer ponto de entrada chega ao mesmo ponto de saída, desde que o par de ferramentas esteja fechado.

Opus 4.6 melhorou a saída — mas já está em modo legado

A outra variável que destravou isso foi o modelo por trás do Figma Make. A Figma habilitou o Claude Opus 4.6 como opção experimental no Make em fevereiro de 2026, com uma descrição direta da Loredana Crisan: implementa designs com precisão, revisa o próprio trabalho e é bastante criativo em prompts “zero-to-one”. A diferença em relação ao modelo padrão aparece em prompts simples do tipo “monte um clone do Slack” — layout mais inteiro, interações que de fato respondem.

Dois pontos de atenção para quem for reproduzir hoje:

• O Opus 4.6 foi reclassificado como modelo legado pela Anthropic, com recomendação de migrar para o Opus 5.5. Dentro do Figma Make a opção ainda aparece em “Settings → Experimental models” no momento em que escrevo, mas é uma janela que pode fechar. Se o seu teste de hoje for diferente do que o post do @Hisashi_dn mostrava, confira primeiro qual modelo está selecionado — essa é a variável mais provável.
• O Figma Make saiu do beta em 2025, mas várias capacidades novas (publicação, edição direta, PR creation) continuam em beta limitado — e os modelos experimentais mudam de lugar com frequência. Isso não é um defeito do post original, é só o cenário em que você vai cair quando testar: comportamentos mudam, botões se movem, a configuração que valia em fevereiro pode não ser a de outubro.

Os 4 passos do post original

A espinha do fluxo descrito pelo @Hisashi_dn é curta de propósito. Mantive a divisão original em quatro passos para facilitar comparar com o post:

1. Gerar HTML de alta qualidade com Claude — chat normal, prompt descritivo da LP (hero, features, pricing, CTA, footer).
2. Entregar o código ao Figma Make — pedir para ele “imitar” o resultado, convertendo em dados de design editáveis.
3. Colar na canvas do Figma e editar — aqui entra o olho humano: paleta, tipografia, espaçamento, mobile.
4. Conectar com Claude Code e publicar — a estimativa dele é “em menos de 5 minutos para a web”.

Do briefing à publicação, a conta fecha em cerca de uma hora. Repare que no post original isso aparece como uma estimativa (“おそらく… 1時間でいける”), não como um cronômetro medido com rigor. Quando eu refiz o roteiro para um protótipo pessoal, o tempo bateu na mesma ordem de grandeza, mas a variação depende demais do quanto você mexe no passo 3 — e o passo 3 é justamente o que mais varia por pessoa.

O que a hora não cobre (honestidade importa)

O capítulo 9 do meu livro sobre Claude Code em português já alertava disso, e vale repetir aqui porque é a parte que a timeline costuma ignorar: para protótipos, MVPs ou páginas internas, a qualidade é mais do que suficiente. LP de produto em produção não sai literalmente em uma hora. Entram revisão de design, revisão de copy, acessibilidade, consistência com o design system da marca, QA cross-browser. Se alguém promete “qualquer LP em 1 hora” sem ressalvas, está vendendo caminhão em cima do que o fluxo realmente entrega.

Minha régua para decidir onde esse fluxo cabe tem três cortes práticos:

• Cabe bem: protótipo para validar hipótese, página interna de uma squad, LP de evento com prazo curto, mock para apresentar a um cliente.
• Cabe com cuidado: LP de produto num mercado pouco competitivo, se você já tiver tokens de design e copy prontos para colar.
• Não cabe: LP flagship de marca, página com integração complexa (checkout, auth, A/B test), qualquer coisa onde “parece templating de IA” quebra a confiança do leitor.

A fronteira entre o segundo e o terceiro item costuma ser o que separa um resultado útil de um resultado que você vai refazer na semana seguinte.

CLAUDE.md como contrato de design

Para fazer esse fluxo escalar além do “eu sozinho num sábado”, a parte que sustenta o loop no longo prazo é escrever o design system no CLAUDE.md. Tokens primários, tipografia, convenções de componente, breakpoints responsivos — tudo em texto, versionado no mesmo repositório que o código.

# CLAUDE.md — Design System

## Tokens
- Primary: #2563EB (blue-600)
- Background: #F8FAFC (slate-50)
- Text: #0F172A (slate-900)

## Componentes
- Botões: primary / secondary / ghost
- Cards: shadow-sm, rounded-lg, p-6

## Responsivo
- Mobile-first: < 640px / 640–1024px / > 1024px

Com isso no lugar, qualquer pessoa do time que pedir uma tela nova ao Claude Code converge para o mesmo visual, sem precisar lembrar de cor dos tokens. O passo 4 do fluxo acima deixa de ser “deploy à mão” e passa a ser “deploy com guarda-corpo”.

Para o leitor no Brasil

Uma honestidade final: eu moro no Japão e testei isso do lado de cá. Não sei dizer como esse fluxo se encaixa na realidade de uma startup brasileira contratando um freela de design, nem como ele conversa com os clientes que você atende por aí. O que posso afirmar é que a restrição que o post do @Hisashi_dn ataca — “não tenho designer e preciso de uma LP amanhã” — é comum em qualquer time pequeno, e as ferramentas citadas aqui funcionam em qualquer lugar com internet decente.

Se você for testar, três coisas que vão poupar o seu tempo:

1. Confirme qual modelo o Figma Make está usando no seu projeto antes de medir qualidade — o Opus 4.6 ainda é selecionável em “Experimental models”, mas a janela é instável.
2. Trate o passo 3 (editar no Figma) como o único passo humano honesto. Reservar 20 minutos para ele é mais realista que esperar que o Figma Make acerte de primeira.
3. Comece por uma página que você consegue descartar sem dor. Testar esse fluxo numa LP flagship é maximizar o custo do primeiro erro.

Design virou mão dupla. O loop reverso que o @Hisashi_dn mostrou já era possível em fevereiro e segue possível agora, com as ressalvas de modelo que listei. Reproduzir é barato — e o único jeito honesto de descobrir se cabe no seu contexto.

Esse fluxo e outras aplicações do Claude Code no dia a dia (CLAUDE.md, delegação por nível, integração com design) estão explicados em detalhe no Claude Code na prática.