Construí um App Completo em 2 Horas Sem Passar pelo Figma
Duas horas. Foi o tempo que levei para ir de um terminal em branco a um aplicativo totalmente interativo com micro animações, hover states e um design system completo — tudo sem abrir o Figma uma única vez.
E depois mandei tudo de volta para o Figma como camadas editáveis.
Eu sei que essa frase provavelmente deu um curto-circuito no seu cérebro se você é designer. No meu também. O fluxo de trabalho que todos nós internalizamos — projetar no Figma, entregar para o dev, esperar três semanas, receber algo que não tem nada a ver com o mockup — acabou de ser virado completamente de cabeça para baixo. Construir primeiro, sincronizar com o Figma depois. Design a partir do código. E antes que você me diga que isso é um fluxo de desenvolvedor se passando por ferramenta de design, deixa eu mostrar o que eu realmente construí, porque o resultado enganaria qualquer diretor de design fazendo-o acreditar que saiu do arquivo Figma de um designer de produto sênior.
O segredo é a integração do Claude Code com Figma MCP combinada com um fluxo de trabalho que a maioria dos designers ainda não descobriu. Passei uma semana testando três casos de uso específicos — tradução de design systems, prototipagem rápida a partir de screenshots e conversão completa de landing pages — e os resultados me fizeram repensar o que "designer" sequer significa em 2026.
Mas tem um detalhe que ninguém menciona nos tutoriais: configurar o ambiente errado vai queimar seus créditos em uma hora. Aprendi isso da forma cara, e vou te poupar de cometer o mesmo erro.
O Erro de Configuração que a Maioria dos Designers Comete
O que confunde os designers na primeira vez que encontram o Claude Code é o seguinte: eles ouvem "Claude," abrem o claude.ai, selecionam Opus 4.6 no dropdown de modelo e começam a fazer prompts para gerar código. Trinta minutos depois, os créditos acabaram e eles têm um arquivo HTML pela metade que não serve pra nada.
Não é assim que funciona. De jeito nenhum.
Claude Code roda dentro de um ambiente — pense nele como um workspace que organiza seus arquivos, gerencia seus agentes de IA e te dá um contexto de desenvolvimento adequado. A ferramenta funciona melhor quando combinada com um editor como Cursor, embora você também possa rodá-la através do AntiGravity do Google ou plataformas similares. Eu uso Cursor porque o gerenciamento de arquivos parece natural se você já usou VS Code.
O ambiente importa porque o Claude Code precisa enxergar a estrutura do seu projeto. Precisa saber onde está o seu CSS, onde estão seus arquivos HTML, quais assets você importou. Quando você simplesmente conversa com o Claude numa janela do navegador, ele gera trechos de código isolados sem conhecimento do projeto. Quando você roda dentro de um ambiente adequado, ele gera código que se encaixa na sua estrutura de arquivos real, referencia caminhos reais e constrói sobre o que já existe.
A configuração levou cerca de 15 minutos na primeira vez. Agora consigo iniciar um projeto novo em menos de 3 minutos. Aqui está o processo:
Passo 1: Assine o plano certo. Claude Code oferece planos em níveis. O plano "Pro" funciona para experimentação e aprendizado. Se você está trabalhando em projetos reais — especialmente com múltiplos agentes rodando simultaneamente — o plano "Max" te dá créditos ilimitados e suporte a agentes paralelos. Para designers testando as águas, Pro é suficiente. Quando você viciar (e vai viciar), faça o upgrade.
Passo 2: Instale o Claude Code como extensão dentro do Cursor. Isso conecta a IA diretamente ao workspace do seu projeto. Cada prompt que você escrever tem contexto completo dos seus arquivos.
Passo 3: Comece local. Crie sua pasta de projeto, inicialize e trabalhe localmente primeiro. A integração com GitHub vem depois, quando quiser hospedar ou compartilhar. Não complique o início.
Esse último ponto importa mais do que você imagina. Eu vi três amigos designers tentarem configurar o Claude Code criando primeiro um repositório no GitHub, configurando pipelines de deploy, montando CI/CD — tudo antes de escrever uma única linha de código. Estavam seguindo tutoriais de desenvolvedores, não fluxos de trabalho de designers. Comece local. Faça sua primeira versão funcionar na sua máquina. A parte da nuvem pode esperar.
Agora, a sincronização com o Figma — essa é a parte que muda tudo para os fluxos de design, e configurar é mais simples do que você esperaria.
Conectando o Claude Code ao Figma (A Parte que Muda Tudo)
Sincronizar o Claude Code com o Figma requer um token de acesso pessoal. Veja exatamente como gerar um:
- Abra o Figma, vá para as configurações da sua conta
- Navegue até a seção "Personal Access Tokens"
- Gere um novo token com permissões completas — leitura, escrita, tudo
- Defina a expiração para 90 dias (o máximo)
- Copie esse token imediatamente — o Figma só mostra ele uma vez
De volta no Claude Code, execute o comando de autenticação com seu token. Uma vez conectado, você tem uma ponte bidirecional entre seu ambiente de código e o Figma. Os designs fluem em ambas as direções.
Por que isso importa? Porque o fluxo de trabalho tradicional é unidirecional. O design vai para o dev. O dev interpreta. Coisas se perdem no caminho. Com a integração do Figma no Claude Code, você pode:
- Puxar especificações de design diretamente do Figma para seus prompts de código
- Enviar HTML/CSS gerado de volta ao Figma como camadas vetoriais editáveis
- Manter ambos os ambientes sincronizados enquanto itera
Vou ser honesto — quando ouvi pela primeira vez "enviar código de volta pro Figma," achei que ia criar alguma screenshot rasterizada tosca. Nada disso. O pipeline de HTML to Design converte o código gerado em camadas reais do Figma. Texto editável. Frames redimensionáveis. auto-layout adequado. Não é pixel-perfect todas as vezes, mas é preciso o suficiente para continuar iterando em qualquer direção.
Esse fluxo bidirecional desbloqueia algo que eu não esperava: a capacidade de prototipar em código (onde as interações realmente funcionam) e depois refinar no Figma (onde o polimento visual é mais rápido). O melhor dos dois mundos. Mas estou me adiantando — deixa eu mostrar os três casos de uso onde essa configuração realmente brilha.
Caso de Uso 1: Traduzindo um Design System para Código de Produção
Esse foi meu primeiro experimento, e me convenceu do fluxo de trabalho inteiro.
Eu tinha um design system existente no Figma — escala tipográfica, paleta de cores, definições de sombras, variantes de botões, tokens de espaçamento. O tipo de base que todo time de produto constrói e depois tem dificuldade para traduzir em código que realmente corresponda. Já estive em projetos onde o arquivo Figma do design system e a implementação CSS divergiram em duas semanas. Acontece porque manter ambos manualmente é tedioso e propenso a erros.
Eis o que fiz: abri o arquivo do design system no Dev Mode do Figma, selecionei as páginas contendo meus tokens principais e copiei as referências dos componentes. Então entrei no Claude Code com um prompt específico descrevendo o que eu queria — uma implementação completa em CSS do design system com custom properties adequadas, tipografia responsiva e classes de componentes.
Claude Code gerou os arquivos CSS e HTML em cerca de 4 minutos.
A tipografia batia. As cores eram os valores hexadecimais exatos extraídos das especificações do Figma. As variantes de botões tinham o padding, border-radius e estilos de estado corretos. Abri o HTML gerado no Live Server (uma extensão simples de preview no navegador) e comparei lado a lado com o arquivo do Figma.
Não era perfeito — os valores de sombra precisavam de um leve ajuste, e um dos pesos de fonte ficou em 500 ao invés de 600. Mas eram correções de 30 segundos. A precisão estrutural era algo que levaria um dia inteiro para um desenvolvedor construir do zero, assumindo que ele interpretasse as especificações do Figma corretamente.
Dica profissional: Ao traduzir design systems, alimente o Claude Code uma categoria por vez. Não despeje todo o seu sistema em um único prompt. Faça tipografia primeiro, depois cores, depois sombras, depois componentes. O resultado é mais preciso quando cada prompt tem um escopo focado.
A verdadeira recompensa veio duas semanas depois quando um cliente pediu alterações no estilo do botão principal. Atualizei no Claude Code, o CSS se propagou por todas as páginas que usavam aquele componente, e enviei o design atualizado de volta ao Figma para revisão dos stakeholders. Uma mudança, ambos os ambientes atualizados. Sem confusão de "qual arquivo é a fonte da verdade?".
Só isso já justificaria o tempo de configuração. Mas o segundo caso de uso foi onde eu mais me diverti.
Caso de Uso 2: Prototipagem Rápida a Partir de Screenshots
Imagina isso. Você está navegando pelo Dribbble, ou vendo o site de um concorrente, ou olhando um screenshot que um cliente mandou com a observação "algo assim." Normalmente, você abriria o Figma, recriaria o layout do zero, aproximaria os espaçamentos, tentaria adivinhar a escala tipográfica. Uma hora depois, você tem um mockup estático.
Com o Claude Code, peguei um screenshot de um design que gostei — um dashboard SaaS com navegação lateral, cards de métricas e uma tabela de dados — arrastei para o meu prompt no Claude Code e descrevi o que queria: "Crie um único arquivo HTML com CSS embutido que recrie este layout. Inclua animações hover nos cards e um toggle suave da barra lateral."
Noventa segundos depois, eu tinha um protótipo funcional no meu navegador.
Não um mockup. Não um wireframe. Uma página funcional e interativa com hover states que realmente respondiam ao meu cursor, uma barra lateral que colapsava com uma transição CSS suave, e cards de métricas que escalavam corretamente quando eu redimensionava a janela.
Estava pronto para produção? Não. Os dados eram placeholder, os breakpoints responsivos precisavam de trabalho, e alguns espaçamentos estavam levemente desalinhados. Mas como ponto de partida para exploração — para testar se uma direção de layout funciona antes de investir horas em design de alta fidelidade — não tem comparação.
Comecei a usar esse fluxo de trabalho em calls de descoberta com clientes. Em vez de apresentar mood boards estáticos, mostro protótipos interativos que construí nos 20 minutos antes da reunião. Os clientes podem clicar, redimensionar o navegador, ver como as coisas se movem. O feedback é radicalmente melhor porque eles estão reagindo a algo que parece real.
A vantagem de velocidade é difícil de exagerar. Uma exploração de layout que me levava 2-3 horas no Figma agora leva 5-10 minutos no Claude Code. Consigo gerar quatro abordagens diferentes no tempo que antes levava para construir uma. E as que não funcionam? Apago o arquivo e sigo em frente. Sem apego emocional a um frame do Figma cuidadosamente elaborado.
Dica profissional: Para prototipagem baseada em screenshots, fique com arquivos HTML únicos com CSS embutido. Não peça ao Claude Code para configurar um framework ou arquitetura de componentes para explorações rápidas. Quanto mais simples a estrutura de arquivos, mais rápida a iteração.
É aqui que fica interessante — porque o terceiro caso de uso foi onde encontrei os maiores desafios.
Caso de Uso 3: Convertendo uma Landing Page Completa do Figma para Código
Esse foi o teste ambicioso. Eu tinha uma landing page completa desenhada no Figma — seção hero, grid de features, depoimentos, tabela de preços, footer. Ilustrações personalizadas, fundos com gradientes, a produção completa.
Peguei o link do Figma e pedi ao Claude Code para converter o design completo em HTML e CSS.
O primeiro resultado foi... misto. A estrutura estava certa — cada seção existia, o fluxo do layout correspondia ao design, a tipografia estava correta. Mas as ilustrações personalizadas não foram traduzidas (esperado — a IA não consegue recriar arte vetorial a partir de uma referência de link), e alguns ângulos de gradiente estavam errados.
Eis o que aprendi e o que salvou o projeto: não mande a página inteira de uma vez. Divida em seções.
Reiniciei o processo, mandando primeiro para o Claude Code o link da seção hero. O resultado foi significativamente mais preciso — o gradiente batia, a tipografia do título estava correta, o botão CTA tinha o padding e border-radius corretos. Aprovei, depois mandei a seção de features, depois depoimentos, construindo a página incrementalmente.
Seção por seção, a landing page tomou forma em cerca de 45 minutos. Cada prompt era focado, e o Claude Code podia dedicar toda sua atenção a acertar uma seção em vez de aproximar uma página inteira.
As ilustrações personalizadas foram a única lacuna real. Acabei exportando-as do Figma como SVGs e colocando-as manualmente na pasta do projeto. O Claude Code então as referenciava corretamente nos prompts seguintes. Não totalmente automatizado, mas um passo manual pequeno em um processo que de resto é bastante otimizado.
Para o polimento final, usei prompts iterativos: "Adicione um toggle de dark mode que faça transição suave" (levou 2 minutos), "Faça os cards de preço animarem ao entrar no scroll" (90 segundos), "Adicione um menu de navegação drawer para mobile" (3 minutos). Cada adição encaixou perfeitamente porque o Claude Code entendia a estrutura do código existente.
O produto final — uma landing page totalmente responsiva, animada e com dark mode — teria me levado 2-3 dias para codificar manualmente ou 4-5 horas de vai e volta com um desenvolvedor. Tempo total do design no Figma ao código funcional: cerca de 2 horas incluindo a falsa largada.
Papo Reto: O Que Essa Ferramenta Ainda Não Consegue Fazer
Pintei um quadro bem otimista, e é porque os resultados genuinamente me impressionaram. Mas estaria mentindo se dissesse que o fluxo de trabalho é impecável, e você merece conhecer as limitações antes de investir tempo configurando isso.
Claude Code gera código front-end. HTML, CSS, JavaScript para interações e animações. Se o seu projeto precisa de backend — autenticação de usuários, conexões com banco de dados, lógica server-side — você está entrando em território de desenvolvedor. A ferramenta não vai gerar seus API endpoints ou esquemas de banco de dados a partir de um arquivo do Figma. Para sites de marketing e protótipos interativos, isso não importa. Para aplicações de produto, você ainda vai precisar de suporte backend.
Ilustrações personalizadas são um passo manual. Como mencionei, arte vetorial complexa precisa ser exportada do Figma separadamente. O Claude Code pode referenciar arquivos de imagem no seu projeto, mas não consegue recriar ilustrações desenhadas à mão a partir de uma especificação de design. Esteja preparado para lidar com assets manualmente.
A precisão de Figma-para-código depende da organização do design. Se o seu arquivo Figma usa auto-layout adequado, camadas nomeadas e estruturas de componentes, o output do Claude Code é notavelmente fiel. Se o seu arquivo Figma é uma bagunça de frames posicionados de forma absoluta com nomes tipo "Frame 247"... o output reflete esse caos. Boa higiene de design no Figma leva a melhor output de código. Igual com desenvolvedores humanos, sinceramente.
Iteração é necessária. Nunca obtive um output perfeito no primeiro prompt para nada além de componentes simples. O fluxo é: gerar, visualizar, identificar lacunas, pedir correções, repetir. Geralmente 2-3 rodadas. Isso ainda é dramaticamente mais rápido que codificação manual tradicional, mas não espere mágica na primeira tentativa.
O consumo de créditos varia muito. Geração de componentes simples mal arranha seu orçamento. Conversão de landing page completa com refinamento iterativo pode consumir 20-30% da alocação diária do plano Pro. Se você faz isso profissionalmente, preveja o plano Max e se poupe da ansiedade de ver os créditos diminuindo no meio do projeto.
Uma previsão que faço: nos próximos seis meses, a precisão de Figma-para-código vai melhorar significativamente à medida que esses modelos ficarem melhores em entender relações espaciais e design tokens. A diferença entre "gerado" e "artesanal" já é menor do que a maioria imagina. Está diminuindo rápido.
O Que os Designers Deveriam Realmente Medir
Depois de uma semana usando esse fluxo de trabalho em projetos de clientes e experimentos pessoais, aqui estão os números.
Tradução de design systems: 15-20 minutos para um sistema de tokens completo (tipografia, cores, sombras, botões). Equivalente manual: 4-6 horas.
Prototipagem rápida a partir de screenshots: 5-10 minutos por exploração de layout. Equivalente manual: 2-3 horas por mockup.
Conversão de landing page completa: 1.5-2.5 horas incluindo iteração. Equivalente manual: 2-3 dias de colaboração designer-desenvolvedor.
Viagens de ida e volta com o Figma: Enviei código de volta ao Figma 8 vezes durante a semana. 6 delas produziram camadas limpas e editáveis com as quais meu time pôde trabalhar diretamente. 2 precisaram de ajustes manuais menores no Figma. Isso é uma taxa de sincronização limpa de 75%, que honestamente superou minhas expectativas.
Tempo de retorno do feedback dos clientes: Essa é a métrica que mais me importa. Protótipos interativos gerados no mesmo dia significaram que os clientes puderam dar feedback na primeira reunião em vez de esperar uma segunda rodada de revisão. Dois projetos passaram de descoberta para direção aprovada em uma única sessão. Isso nunca tinha acontecido comigo antes com mockups estáticos.
As vitórias rápidas são óbvias — velocidade, custo, velocidade de iteração. O ganho de longo prazo é mais sutil mas mais importante: designers que conseguem construir protótipos interativos e front-ends prontos para produção têm uma posição fundamentalmente diferente na indústria. Você não está esperando outra pessoa dar vida à sua visão. Está construindo você mesmo e provando que funciona antes que alguém possa questionar a viabilidade.
O Fluxo de Trabalho que Realmente Funciona
Depois de testar todas as combinações que pude imaginar, aqui está o fluxo de trabalho que adotei para projetos de design:
Para exploração e trabalho conceitual: Comece no Claude Code. Gere protótipos rápidos a partir de screenshots ou descrições verbais. Não toque no Figma até encontrar uma direção que pareça certa. Isso é contraintuitivo para designers treinados em fluxos Figma-primeiro, mas a velocidade da exploração baseada em código muda a matemática.
Para design systems de produção: Construa no Claude Code, sincronize com o Figma para revisão do time. Atualize em qualquer um dos ambientes conforme necessário. A sincronização bidirecional significa que nenhum fica desatualizado.
Para landing pages e sites de marketing: Projete as seções-chave no Figma para aprovação dos stakeholders, depois converta para código seção por seção no Claude Code. Adicione interações e animações em código (onde elas realmente funcionam), depois envie as versões finais de volta ao Figma para documentação.
Para apresentações a clientes: Sempre mostre a versão interativa. Mockups estáticos não fazem justiça ao seu trabalho. Uma sessão de 5 minutos no Claude Code antes de uma reunião pode transformar um design estático em um protótipo clicável que fecha negócios.
O fio condutor em tudo isso: Claude Code não está substituindo o Figma. Está dando ao Figma um parceiro com capacidade de produção. Design e código deixam de ser fases separadas de um projeto e passam a ser duas visões da mesma coisa.
Se há um ano me dissessem que eu estaria recomendando designers a aprenderem comandos de terminal, eu teria rido. Mas o terminal que estou usando não está me pedindo para escrever JavaScript do zero. Está me perguntando o que eu quero construir, e depois constrói enquanto eu tomo as decisões criativas.
Isso não é um fluxo de trabalho de desenvolvedor disfarçado de designer. Isso é o que as ferramentas de design deveriam ter sido desde o início.
🤝 Vamos Trabalhar Juntos
Procurando construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.
- 🔗 Fiverr (desenvolvimento personalizado e integrações): fiverr.com/s/EgxYmWD
- 🌐 Portfolio: mejba.me
- 🏢 Ramlit Limited (soluções empresariais): ramlit.com
- 🎨 ColorPark (design e branding): colorpark.io
- 🛡 xCyberSecurity (serviços de segurança): xcybersecurity.io
