Claude Code está se tornando, discretamente, uma plataforma de design

O tweet que finalmente me fisgou foi uma captura de tela. Alguém digitou cinco palavras no Claude Code — "build me a site like Stripe" — e apertou enter. Quarenta segundos depois, uma landing page. Tipografia limpa. Um hero com exatamente o tipo de gradiente sutil que a Stripe realmente usa. Cartões de recursos com a hierarquia certa. Nada de sopa de gradientes roxos e blobs. Nada de "design de IA". Parecia algo que um designer de verdade entregaria numa tarde de terça-feira.

Eu já tinha visto uma centena desses demos este ano. Ignorei a maioria. Mas esse tinha algo que os outros não tinham — o resultado não vinha de um prompt. Vinha de um arquivo DESIGN.md do repositório awesome-design-md, adicionado ao projeto como um simples documento markdown. A skill codificava os princípios de design da Stripe — a escala tipográfica, o ritmo de espaçamento, a disciplina de cores, as grades de layout — e o Claude Code simplesmente usava tudo isso.

É isso que está acontecendo silenciosamente em abril de 2026 enquanto todo mundo discute Figma Make versus Canva Magic Studio. O Claude Code deixou de ser uma ferramenta de programação. Está se tornando uma plataforma de design. Não um substituto do Figma no sentido de "desenhar caixas numa tela". Algo mais estranho e poderoso: um sistema onde princípios de marca são codificados em skills, depois replicados em qualquer formato que você quiser — landing pages, pitch decks, relatórios de marca, sistemas de identidade, data viz.

Passei o último fim de semana reconstruindo minha stack de design em torno disso. Eis o que aprendi — o que funciona, o que ainda quebra, e o processo exato em cinco etapas que agora uso para entregar trabalhos de design que não parecem ter sido gerados por um modelo.

A crítica do “Design de IA é Genérico” — E Por Que Ela Está Prestes a Morrer

Veja bem, a crítica era justa. Até recentemente, ela estava quase sempre correta.

Você já viu os sinais. A mesma seção hero com um título centralizado, um botão em degradê e três cartões de recursos logo abaixo. Degradê de roxo para rosa. Ilustração de blob abstrato. Um carrossel de depoimentos com três citações genéricas. Todo site gerado por IA parecia ter sido desenhado pelo mesmo estagiário um pouco confuso que só tinha visto um shot do Dribbble na vida.

O motivo é simples. Modelos fazem médias. Se você pede para um modelo “desenhar uma landing page de SaaS”, ele produz a média estatística de todas as landing pages de SaaS do seu conjunto de treinamento. Que, por acaso, é um degradê roxo. Ninguém tem culpa. É só matemática.

Aqui está o que mudou. Agentes de codificação ficaram bons o suficiente em front-end para que o gargalo se movesse para cima — para as instruções. E alguém percebeu que, se você der ao agente uma especificação rica do que é bom dentro da sua linguagem de marca, o problema da média desaparece. O resultado deixa de ser “a média de todo design” e passa a ser “uma aplicação competente do seu sistema específico”.

É isso que são os arquivos DESIGN.md. Documentos Markdown que capturam um sistema de design — tema visual, paleta de cores com nomes semânticos, hierarquia tipográfica, estados de componentes, princípios de layout, regras de elevação, escalas de espaçamento. O repositório VoltAgent foi lançado em 31 de março de 2026. Alcançou cerca de 50.000 estrelas no GitHub em menos de duas semanas. Mais de cinquenta e cinco sistemas de marca incluídos — Claude, Stripe, GitHub, Notion, Vercel, Apple, Figma, Spotify e muitos outros, de modo que você quase sempre encontra algo próximo do que está construindo.

Coloque o DESIGN.md no seu projeto. Referencie-o em uma skill. O Claude Code agora tem um vocabulário de design coerente e opinativo para trabalhar. O problema da estética genérica de IA — em grande parte — desaparece.

E não, não posso verificar a estatística de que “sites de qualidade convertem 91% melhor” que está circulando nos pitches por aí — procurei e a fonte não se sustenta. O que posso verificar: a pesquisa da Baymard ao longo de 200.000 horas de estudos de UX, e um achado amplamente citado de que usuários formam uma opinião visual de um site em cerca de 50 milissegundos. Design não é mais cosmético — é o primeiro pilar da conversão. Você não precisa de um percentual inventado para saber disso.

Por que o “Design Code-First” É Uma Ideia Maior do Que Parece

Fique comigo aqui, porque levei um tempo para enxergar toda a dimensão disso.

A indústria do design passou quinze anos presa ao paradigma do canvas visual. Você abre o Figma. Desenha retângulos. Ajusta-os no lugar. Aplica estilos. O arquivo é o artefato, e o código é algo que os engenheiros extraem dele depois — geralmente mal, com muito retrabalho.

O design code-first inverte essa lógica. O sistema de design é código (tokens, componentes, padrões — já estruturados). O agente lê esse código, lê suas regras de marca no DESIGN.md, e gera um novo artefato no mesmo idioma. Quando você precisa de um mockup no Figma, exporta. Quando precisa de uma landing page, publica. Quando precisa de um pitch deck, gera slides em HTML. Quando precisa de um relatório PDF com a marca, mesma fonte de verdade. O artefato passa a ser uma projeção do sistema, não o contrário.

Essa é a proposta, pelo menos. O que me convenceu de que era mais do que um discurso foi a variedade de formatos. Eis o que já vi o Claude Code produzir, de forma limpa, a partir da mesma habilidade de marca codificada:

Landing pages completas no idioma visual da Spotify, Stripe ou Nike — um prompt, servidor local rodando em minutos
Apresentações em HTML com tipografia consistente, grids de layout e cores de marca em vinte slides
Relatórios e propostas com branding que parecem ter sido criados por uma agência de design
Visualizações de dados que herdam automaticamente o sistema de cores da marca — sem paletas de gráficos fora do padrão
Sistemas de identidade parciais — marcas, tokens de cor, escalas tipográficas, espaçamentos — tudo reunido em uma pasta de entrega

Vou mostrar um fluxo completo disso na seção de implementação. Antes, o processo — porque essa é a parte que a maioria dos conteúdos sobre “design com IA” ignora.

O Processo de 5 Passos Que Uso Agora (E Por Que Cada Passo Importa)

Eu continuava errando isso nos primeiros dias. Pulava direto para “gerar uma landing page” e depois passava uma hora tentando corrigir o que estava errado. O processo abaixo não é sofisticado. É simplesmente o que acontece quando você para de pular etapas.

Passo 1 — Escolha primeiro o formato de saída

Não “me desenhe algo”. Não “um site”. Especificamente: landing page, pitch deck, relatório de uma página, kit de identidade, dashboard de dados, template de e-mail. O formato determina as restrições, e as restrições determinam o que importa. Um pitch deck se preocupa com tipografia legível a dois metros de distância; uma landing page se preocupa com hierarquia de conversão; um kit de identidade se preocupa com a adaptabilidade do logo.

Escrever o formato primeiro também fixa o modelo mental. Você para de projetar “uma coisa” e começa a projetar aquele tipo específico de coisa.

Passo 2 — Integre os conectores que você realmente vai usar

É aqui que o Claude Code se destaca de qualquer ferramenta visual, porque as integrações são apenas servidores MCP e plugins que você adiciona ao projeto. Os que uso em quase todo trabalho de design agora:

Firecrawl para scraping de marca. O formato branding deles extrai as cores, tipografia, espaçamento, logo e componentes de UI de um site-alvo em dados estruturados que você pode referenciar. Leva cerca de três segundos. Substitui o que costumava ser uma hora de “copiar os hex codes do site do concorrente manualmente”.
NanoBanana 2 via Kie API para geração de imagens. O preço real é $0,045 para 0,5K, $0,067 para 1K, $0,101 para 2K e $0,151 para 4K — cerca de metade da tarifa direta do Google. Ouvi “$0,06 por imagem” no Twitter; isso está aproximadamente certo para resolução 1K, mas você paga por faixa de resolução, não um preço fixo. Vale saber antes de criar cem ativos.
Conectores do Gmail e Google Calendar — para fluxos de trabalho de design isso pode soar estranho, mas é como envio provas, agendo chamadas de revisão na mesma sessão e puxo notas de marca do cliente de PDFs enviados por e-mail.
Figma MCP — ainda útil para puxar contexto de arquivos existentes quando o cliente já tem um sistema Figma que preciso respeitar.

Configure tudo isso uma vez no seu projeto. Eles estarão disponíveis em todas as sessões futuras.

Passo 3 — Material de referência como input de primeira classe

É aqui que a maioria das pessoas para cedo demais. “Material de referência” não é um mood board de inspirações. É input estruturado:

O arquivo DESIGN.md para a estética de marca que você está construindo
Arquivos de fonte específicos ou URLs do Google Fonts (o Claude carrega nas HTMLs geradas)
Ativos de logo ou marcas existentes que o trabalho precisa respeitar
Duas ou três referências visuais — um board do MidJourney, um template do Canva que você gostou, um site concorrente que quer ecoar sem copiar

Coloque tudo isso em uma pasta /design-input/ no projeto. Peça para o Claude ler antes de gerar. Esse único hábito mudou mais a qualidade do meu output do que qualquer truque de prompt.

Passo 4 — Gere o design inicial

Agora, e só agora, peça pelo artefato. Um parágrafo, específico:

“Crie uma landing page para uma fintech Série A chamada Folio. Use o DESIGN.md em /brand/stripe.md como linguagem visual. Inclua um hero, um grid de recursos em três colunas, uma seção de preços com três tiers, prova social com quatro placeholders de logo e um footer com CTA. Use o logo em /design-input/logo.svg. Puxe imagens de apoio pelo NanoBanana 2 — sem URLs de banco de imagens.”

Você receberá uma primeira versão que está genuinamente 70–80% pronta. Não perfeita. Nunca perfeita na primeira rodada. Mas boa o suficiente para que seu próximo passo seja refinar, não resgatar.

Passo 5 — Codifique o resultado como uma skill reutilizável

Esse é o passo que se multiplica. Depois que você iterou até algo que gostou — a tipografia está certa, o espaçamento é o seu, os padrões de componentes combinam com a personalidade da sua marca — você não joga esse trabalho fora quando a sessão termina.

Você salva como uma skill. Uma pasta com o DESIGN.md, seus ajustes, seus padrões de prompt, os conectores usados e os exemplos de saída que você aprovou. Da próxima vez que precisar de qualquer coisa naquele tom de marca — deck, página, relatório, extensão de identidade — você referencia a skill e o padrão de qualidade já está lá.

Essa é a parte que o Figma não consegue copiar. Não porque o Figma seja ruim. Mas porque o Figma armazena arquivos, e o Claude Code armazena sistemas. Substrato diferente, multiplicação diferente.

Dica de especialista: use sub-agentes para checar fatos em qualquer design que tenha afirmações reais. Peguei três estatísticas inventadas em um pitch deck semana passada rodando um sub-agente de pesquisa sobre o HTML final antes de exportar. Leva trinta segundos. Salva o relacionamento com o cliente.

O Que Eu Realmente Testei — Três Execuções, Resultados Honestos

Processo abstrato é barato. Veja o que aconteceu quando executei tarefas reais com isso no último fim de semana.

Execução 1: Landing page one-shot no estilo Lovable

Objetivo: uma landing page para um produto fictício de IA no visual do Lovable (degradês suaves, espaços generosos, sans-serif amigável). Coloquei design-md/lovable.md no projeto, descrevi o produto em um parágrafo, pedi um site de marketing de página única com hero, três blocos de benefícios, uma linha de depoimentos e uma seção de preços.

O que recebi: uma página Next.js funcional em cerca de quatro minutos. Tipografia: perfeita. Ritmo dos espaçamentos: correto, sem seções apertadas. O degradê foi usado uma vez, no hero, que é exatamente a disciplina Lovable — nada de “degradê em tudo” como as ferramentas de IA costumam fazer por padrão. Os avatares dos depoimentos vieram como retratos gerados pelo NanoBanana que pareciam humanos de verdade, em vez dos renders estranhos que eu recebia há seis meses.

O que quebrou: os cards de preços inicialmente tinham uma sombra que não fazia parte do sistema Lovable. Apontei para a seção de elevação do DESIGN.md e disse “use o tratamento de card da biblioteca de componentes, não uma sombra.” Corrigido em uma única rodada.

Execução 2: Página de missão no estilo SpaceX

Teste mais difícil — o visual da SpaceX é específico e implacável. Tipografia fina e condensada, disciplina rígida de dark mode, cores de destaque contidas, imagens de alto contraste. A maioria dos “designs de IA” falha tentando imitar isso porque suaviza justamente a contenção que faz a SpaceX parecer a SpaceX.

Usando o DESIGN.md correspondente: o resultado foi limpo. Não tão bom quanto o time de design real da SpaceX (não vou desrespeitá-los dizendo o contrário), mas realmente aceitável. A escala tipográfica se manteve. Os fundos pretos continuaram pretos, sem desbotar para um cinza-escuro padrão. As imagens vieram pelo NanoBanana 2 em resolução 2K e tinham o clima cinematográfico certo. Tempo total do prompt ao primeiro rascunho pronto para entrega: cerca de sete minutos, incluindo a geração das imagens.

Execução 3: Landing page de documentação de desenvolvedor no estilo Llama

Essa foi a surpresa. Eu achava que landing pages de documentação eram o caso fácil para ferramentas de design por IA — são quadradas, previsíveis, funcionais. Descobri que o caso fácil não é realmente “fácil”, e sim “implacável com detalhes”. A margem para tipografia descuidada diminui quando há tão poucos elementos visuais para disfarçar.

A abordagem DESIGN.md foi certeira aqui. Como o sistema de marca Meta/Llama é codificado — blocos de código monospace, azul específico de destaque, hierarquia de títulos disciplinada — o resultado respeitou essas regras automaticamente. Nada de roxo fora do padrão. Nada de “docs com cara de IA”. Apenas... documentação. Daquele tipo entediante que, na verdade, é o que boas docs devem ser.

Onde Tudo Ainda Quebra

Quero ser honesto aqui porque toda thread de “design com IA está resolvido” subestima as rachaduras.

Memória e contexto ainda são uma limitação. A janela de contexto do Claude Code, mesmo com a opção de 1M no Opus 4.6, se esgota se seu projeto de design tiver vinte telas, seis conectores e um DESIGN.md longo. Você começará a receber decisões inconsistentes entre telas geradas em partes diferentes da sessão. A solução é dividir as sessões por artefato e trazer apenas o contexto que aquele artefato específico precisa. Não é elegante. Apenas prático.

Sistemas de identidade de verdade precisam de um humano. Design de logotipo — o símbolo em si, não uma variação de wordmark — ainda não é algo que eu entregaria sem a mão de um designer de verdade. O Claude Code vai gerar algo. Vai parecer “ok”. Não vai parecer o trabalho de alguém que passou quinze anos pensando em marcas. Se sua marca depende do logomarca para sobreviver, contrate um humano para essa parte. Tudo ao redor do símbolo (sistema tipográfico, tokens de cor, espaçamento, regras de uso, extensões de marca) é onde esse fluxo de trabalho brilha.

A qualidade do material de referência é tudo. Alimente com referências medianas e você terá resultados medianos. Isso não surpreende ninguém, e mesmo assim as pessoas continuam tentando criar designs do zero com um prompt em branco. O gargalo agora é você — o que você coleta, o que codifica no DESIGN.md, quais restrições você passa para o agente.

O formato de branding do Firecrawl é bom, mas não faz milagres. Ele vai extrair cores e tipografia de forma confiável. Às vezes interpreta errado sistemas de espaçamento (confundindo ritmo de margem com padding arbitrário) e nem sempre captura estados de interação. Trate como um ponto de partida, não como uma auditoria de marca finalizada.

A geração de imagens ainda faz escolhas estranhas. O NanoBanana 2 em 4K é realmente impressionante, mas ocasionalmente vai produzir uma imagem principal que ignora uma instrução de estilo e volta para sua estética preferida. Reserve uma segunda rodada para QA de imagens em qualquer projeto comercial.

Onde Isso Deixa o Figma e o Canva

Pergunta delicada. Vou responder com honestidade, sem rodeios.

O Canva tem 260 milhões de usuários ativos mensais e uma avaliação de US$ 42 bilhões conforme a venda de ações para funcionários em agosto de 2025. Eles não vão a lugar nenhum. O uso do Magic Studio está crescendo — só entre universitários, houve um aumento de 42% ano a ano. O fosso do Canva está na distribuição e na variedade de templates, não no primitivo de design em si. Vai continuar dominando o mercado de “quem não é designer e precisa de um post social em quatro minutos”.

O Figma é mais difícil de prever. Para equipes profissionais de produto trabalhando em interfaces dinâmicas com handoff para desenvolvedores, o modelo de componentes e o modo dev do Figma ainda são as melhores ferramentas disponíveis. Mas para boa parte do trabalho que eu costumava fazer no Figma — explorações de marca, primeiros layouts, páginas de marketing, pitch decks, relatórios pontuais — agora recorro primeiro ao Claude Code. Não porque ele seja melhor em desenhar retângulos (não é). Mas porque é melhor em gerar o artefato final diretamente na mesma linguagem de que preciso.

Uma pesquisa recente do setor mostrou que 53% dos profissionais já reconhecem o impacto significativo da IA na produção de design. Não é uma estatística para o futuro. É agora. As ferramentas de design que serão adotadas nos próximos dezoito meses serão aquelas que se encaixarem melhor no fluxo de trabalho de sistemas codificados — seja o Claude Code com skills, o Figma integrando agentes de forma mais profunda ou algo que ainda nem tem nome.

Minha previsão para este ano: o Figma continua dominante para design de produto em escala de equipe. O Canva segue dominante para velocidade entre não-designers. Mas surge uma nova categoria — “design code-first” — e o Claude Code é atualmente a ferramenta mais forte nela.

O Que Realmente Mudou do Meu Lado

Concretamente, após três semanas assim:

Páginas de marketing que antes levavam quatro horas no Figma mais quatro horas no código agora levam cerca de noventa minutos do início ao fim, e eu estou entregando o código, não apenas um mockup.
Apresentações para clientes passaram de meio dia lutando com templates para uma geração + refinamento em quarenta minutos.
Rodadas de exploração de marca — o pedido de “me dê três direções para uma nova identidade” — agora são realmente um exercício de uma hora, em vez de um sprint de dois dias, porque cada direção é uma variação de habilidade, não um arquivo criado do zero.
O trabalho da minha designer júnior mudou. Ela não está mais produzindo comps de primeira rodada; agora ela está selecionando material de referência, ajustando arquivos DESIGN.md e revisando o output gerado. Mais impacto, melhor aproveitamento do olhar dela.

Não estou afirmando um número universal de produtividade porque o meu é meu e o seu será o seu. Mas o padrão — menos horas em ferramentas de canvas, mais horas em prompt e revisão — vai ser quase universal para quem faz esse tipo de trabalho.

A Verdadeira Mudança

Aqui está o ponto para o qual a demo do Jack Roberts, o repositório DESIGN.md e as integrações do NanoBanana estão apontando, mesmo quando ninguém diz isso em voz alta.

Design está deixando de ser sobre ferramentas e passando a ser sobre gosto aliado à alfabetização de sistemas. Se você consegue articular como é o bom design de forma estruturada — cores, tipografias, espaçamento, regras de componentes, exemplos de uso — a máquina pode projetar isso em qualquer formato que você precisar. O que a máquina não consegue fazer é ter o gosto em primeiro lugar. Ela não pode te dizer que a contenção da Lovable é toda a sua personalidade, ou que o preto da SpaceX não é um “dark mode”, mas sim um argumento visual, ou que a tipografia do Claude parece mais acolhedora que a do Stripe, mesmo que as diferenças sejam microscópicas.

Essa é a habilidade pela qual os designers da próxima década serão pagos. Não por empurrar pixels. Por codificar julgamento. Todo o resto — renderização, replicação, tradução de formatos — agora é um problema resolvido que um CLI de $20/mês pode lidar.

Então hoje à noite, ou neste fim de semana, faça uma coisa: escolha uma marca que você admira. Escreva o DESIGN.md dela você mesmo, do zero, em um arquivo markdown simples. Não baixe a versão do VoltAgent. Pense de verdade na hierarquia tipográfica, na semântica das cores, no ritmo do espaçamento, na disciplina dos componentes. Escreva tudo em palavras.

Quando terminar, você saberá algo que a maioria dos designers ainda não sabe: como é ver o seu próprio gosto virar software.

Perguntas Frequentes

O que é um arquivo DESIGN.md e como ele funciona com o Claude Code?

Um arquivo DESIGN.md é uma especificação em markdown simples do sistema de design de uma marca — tokens de cor, escala tipográfica, regras de espaçamento, estados de componentes e princípios de layout — escrita em um formato que LLMs conseguem interpretar nativamente. Você o adiciona ao projeto e o Claude Code o lê ao gerar a interface, mantendo o resultado alinhado à linguagem visual daquela marca específica, em vez de tender para uma estética genérica de IA. O repositório awesome-design-md possui mais de 55 exemplos prontos para uso.

O Claude Code realmente pode substituir o Figma para trabalhos de design?

Para um recorte específico — páginas de marketing, pitch decks, exploração de marca, relatórios, primeira versão de UI — sim, especialmente se você se sente confortável trabalhando com código. Para design de produto em equipe, com handoff para desenvolvedores e bibliotecas de componentes dinâmicas, o Figma ainda é a ferramenta certa. A resposta realista é: “O Claude Code substitui talvez 40% do que eu usava o Figma”, e essa fatia cresce mês a mês.

Quanto custa de fato cada imagem gerada pelo NanoBanana 2 via a API Kie?

O preço real varia por resolução: US$ 0,045 para 0.5K, US$ 0,067 para 1K, US$ 0,101 para 2K e US$ 0,151 para 4K, com desconto de 50% na API em lote. Isso é aproximadamente metade do valor cobrado pelo Gemini 3.1 Flash Image do Google. O número de “US$ 0,06 por imagem” que circula no Twitter está correto apenas para saída em 1K — veja a página de preços da Kie para o detalhamento atualizado.

Como o formato de branding do Firecrawl extrai a identidade de uma marca?

O formato branding do Firecrawl faz o scraping de uma URL alvo e retorna dados estruturados da marca: paleta de cores, pilha tipográfica, observações de espaçamento, ativos de logo e padrões recorrentes de componentes de UI. Você o chama como firecrawl_scrape com formats: ["branding"] e recebe uma resposta JSON que seu agente pode usar como referência. É rápido e geralmente preciso em cores e tipografia — menos confiável em sistemas de espaçamento e estados de interação.

O Claude Code é indicado para designers que não são desenvolvedores?

Sinceramente, ainda não. O fluxo de trabalho pressupõe familiaridade com terminal, pastas e leitura de código gerado o suficiente para identificar problemas. Um designer sem nenhuma base em código vai encontrar obstáculos. Um designer que já brincou com HTML/CSS por um ano vai sentir o encaixe em um fim de semana. Canva e Figma AI ainda são as melhores portas de entrada para quem não programa. Para um olhar mais aprofundado sobre esse lado estruturado, veja meu guia do workflow de sistemas de design com IA sobre o mesmo tema.

Vamos Trabalhar Juntos

Quer construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Eu posso ajudar.

Fiverr (soluções e integrações personalizadas): fiverr.com/s/EgxYmWD
Portfólio: mejba.me
Ramlit Limited (soluções corporativas): ramlit.com
ColorPark (design & branding): colorpark.io
xCyberSecurity (serviços de segurança): xcybersecurity.io