Você pode ir de um design no Figma para um site ativo e implantado em uma única tarde usando Claude — sem experiência em programação necessária. O fluxo de trabalho é simples: projete no Figma, exporte ou descreva o design para o Claude, gere o código e implante no Vercel ou Netlify. Toda a coisa custa $0 se você usar os níveis gratuitos.
As pessoas estão postando clipes de "site de $5.000 em 2 horas" no X, mas a maioria delas pula as etapas reais. Este guia preenche essa lacuna. Cada prompt está incluído, cada ponto de decisão é explicado e os trade-offs são honestos.
Por Que Isso Funciona Agora (E Não Funcionava um Ano Atrás)
Um ano atrás, transformar um design em código com IA significava colar uma captura de tela e obter uma aproximação aproximada que precisava de horas de limpeza. Hoje, a janela de contexto de 1M de tokens do Claude significa que você pode alimentá-lo com um sistema de design completo — cores, tipografia, espaçamento, detalhes de componentes — e obter código de qualidade produção que corresponde ao seu design de perto na primeira vez.
O insight principal: a qualidade do que você obtém depende quase inteiramente de quão bem você descreve o design. Descrições vagas produzem sites vagos. Descrições específicas e estruturadas produzem sites específicos e polidos.
O Que Você Precisa
Três ferramentas, todas com níveis gratuitos:
Figma — para seu design. O nível gratuito funciona bem. Se você não tiver um design, pegue um modelo gratuito da Figma Community e personalize-o.
Claude — para geração de código. O nível gratuito oferece Sonnet, que funciona bem para isso. Pro ($20/mês) oferece Opus 4.7 para sites mais complexos.
Vercel ou Netlify — para implantação. Ambos têm níveis gratuitos. Conecte seu repositório GitHub, envie código e o site fica ativo.
Etapa 1: Prepare Seu Design no Figma
Antes de envolver Claude, organize seu arquivo Figma. Esta etapa determina a qualidade de tudo que se segue.
Seu design deve ter páginas claramente definidas (Inicial, Sobre, Contato, etc.), espaçamento e alinhamento consistentes, uma paleta de cores visível (anote os valores hexadecimais exatos), fontes identificadas e pontos de interrupção responsivos para desktop e mobile, se possível.
Não se preocupe com perfeição de pixel. Claude lida bem com detalhes de implementação. O que importa é que seu design comunique claramente a estrutura, hierarquia e estilo visual.
Dica profissional: Nomeie suas camadas Figma significativamente. "Hero Section", "Feature Cards", "Pricing Table" são muito mais úteis para você ao escrever prompts do que "Frame 247".
Etapa 2: Exporte Suas Informações de Design
Claude não consegue ler um arquivo Figma diretamente, então você precisa traduzir seu design em informações com as quais Claude possa trabalhar. Você tem três abordagens, da mais fácil para a mais precisa:
Abordagem A: Captura de tela + descrição. Faça capturas de tela de página inteira de cada página do seu design. Carregue-as no Claude junto com uma descrição escrita do layout, cores e interações. Esta é a abordagem mais rápida e funciona surpreendentemente bem.
Abordagem B: Exportação do Figma Dev Mode. Se você tiver o plano pago do Figma, use Dev Mode para exportar valores CSS, tokens de espaçamento e especificações de componentes. Alimente isto ao Claude junto com capturas de tela para obter saída mais precisa.
Abordagem C: Especificação de design escrita. Escreva uma descrição detalhada de cada seção — cabeçalho, herói, recursos, depoimentos, rodapé — incluindo cores, fontes, tamanhos e layout. Isso leva mais tempo, mas oferece o máximo controle sobre a saída. Se você está construindo sem um design no Figma, este é seu caminho.
Etapa 3: Escreva Seu Prompt Inicial
É aqui que a maioria das pessoas erra. Eles escrevem "construa um site que pareça com essa captura de tela" e obtêm saída genérica. Aqui está a estrutura de prompt que consistentemente produz resultados de qualidade:
Construa um site de [número] páginas com as seguintes especificações:
SISTEMA DE DESIGN:
- Cor primária: [hex]
- Cor secundária: [hex]
- Fundo: [hex]
- Texto: [hex]
- Fonte: [nome da fonte] para títulos, [nome da fonte] para corpo
- Border radius: [valor]
- Escala de espaçamento: [valores]
PÁGINA 1 — INICIAL:
- Seção herói: [descrição exata — texto de manchete, subtexto, texto do botão CTA, tratamento de fundo]
- Seção de recursos: [número] cards, cada um com [ícone/imagem, título, descrição]
- Depoimentos: [descrição de layout]
- Seção CTA: [descrição]
- Rodapé: [links e layout]
PÁGINA 2 — SOBRE:
[mesmo nível de detalhe]
TÉCNICO:
- Use Next.js com Tailwind CSS
- Responsivo para mobile
- Scroll suave entre seções
- Todas as imagens como divs placeholder com cores de fundo (vou adicionar imagens reais depois)Quanto mais específico você for sobre o que o usuário vê, melhor a saída. Não descreva o código — descreva a experiência. Se você precisa ajudar a aprimorar esse prompt antes de enviá-lo, nosso otimizador de prompt gratuito pode ajudar a estruturá-lo para melhores resultados.
Etapa 4: Revise e Itere
A primeira saída do Claude geralmente captura 60–80% do seu design. Os 20–40% restantes vêm da iteração. Esta é a etapa onde a maioria dos tutoriais de "vibe coding" termina, mas é onde a qualidade real acontece.
Revise a saída verificando três coisas: o layout corresponde ao seu design? As cores e tipografia se sentem certas? Funciona bem no mobile?
Então itere com feedback específico. Não diga "torne melhor". Diga:
- "A seção herói precisa de mais preenchimento vertical — adicione 120px superior e inferior"
- "Os cards de recurso devem estar em uma grade de 3 colunas no desktop, coluna única no mobile"
- "O botão CTA deve ter um efeito hover — escureça o fundo em 10% e aumente ligeiramente"
- "Os links do rodapé devem ser organizados em 4 colunas: Produto, Empresa, Recursos, Legal"
Cada rodada de feedback deve abordar 3–5 problemas específicos. Três rodadas geralmente o levam a 95% do seu design.
Está obtendo valor disso? Publicamos um deep-dive por semana sobre fluxos de trabalho de IA, ferramentas e guias práticos. Junte-se aos leitores que recebem primeiro →
Etapa 5: Adicione Conteúdo Real e Imagens
Substitua o texto placeholder pela sua cópia real. Substitua divs de imagem placeholder por imagens reais. Se você precisa ajuda para escrever cópia do site, Claude é excelente nisso — alimente-o com sua descrição de marca e peça cópia de página inicial que corresponda ao seu tom.
Para imagens, use estoque gratuito de Unsplash ou Pexels, ou gere imagens personalizadas com uma ferramenta de imagem IA. Solte os arquivos de imagem na pasta /public do seu projeto e atualize os atributos src.
Etapa 6: Implante em Um Clique
Se você usou Next.js (recomendado), a implantação no Vercel leva 60 segundos:
- Envie seu código para um repositório GitHub
- Vá para vercel.com e entre com GitHub
- Clique em "Import Project" e selecione seu repositório
- Vercel detecta automaticamente Next.js e configura tudo
- Clique em "Deploy"
Seu site está ativo com uma URL .vercel.app. Conecte um domínio personalizado nas configurações do Vercel se tiver um.
Netlify funciona praticamente de forma idêntica — importe de GitHub, detecte automaticamente a estrutura, implante. Ambas as plataformas lidam com SSL, CDN e implantação contínua automaticamente. Toda vez que você envia para o GitHub, seu site é atualizado.
Não tem certeza qual plataforma de implantação usar? Escrevemos uma comparação completa: Onde Você Implanta Após Vibe Coding?
Erros Comuns que Causam Problemas
1. Dar ao Claude uma captura de tela sem contexto escrito. Capturas de tela ajudam, mas Claude precisa de descrições escritas de cores, fontes, espaçamento e layout para produzir código preciso. A captura de tela é uma referência — o texto é a instrução.
2. Tentar construir tudo em um prompt. Um site de 6 páginas com animações, formulários e um CMS é demais para uma única passagem. Construa página por página, seção por seção. Comece com a página inicial, acerte-a, depois vá para a próxima página.
3. Pular responsividade mobile. Se você não mencionar mobile no seu prompt, Claude construirá um layout apenas para desktop. Sempre inclua "mobile responsivo" em seus requisitos técnicos e teste a saída com largura de 375px.
4. Não testar interações. Clique em cada botão, preencha cada formulário, role cada página. O código gerado por IA geralmente parece certo mas tem links quebrados, formulários não funcionais ou estados de hover ausentes. Teste antes de implantar.
5. Perfeccionismo antes da implantação. Coloque em produção com 90% e itere. Sua primeira implantação não precisa ser perfeita — precisa estar ativa. Você pode enviar atualizações em segundos.
Construindo para clientes? Leia nosso guia sobre 5 erros de segurança que todo vibe coder comete antes de entregar.
A Conclusão
O fluxo de trabalho Figma-para-Claude-para-implantar é a maneira mais rápida de transformar um design em um site funcionando sem escrever código você mesmo. A qualidade depende da especificidade de seus prompts, não da habilidade de programação. Três rodadas de iteração geralmente levam você de rascunho inicial para pronto para produção.
Comece com um projeto simples — um portfólio ou landing page — e trabalhe através do ciclo completo uma vez. A segunda vez levará metade do tempo porque você saberá exatamente como estruturar seus prompts.
Não tem certeza qual ferramenta IA é melhor para seu fluxo de trabalho? Faça nosso Quiz Model Picker de 60 segundos para descobrir, ou veja a comparação completa do Estado dos Modelos de IA.
Isso é o que fazemos toda semana. Um deep-dive sobre ferramentas de IA, fluxos de trabalho e opiniões honestas — sem hype, sem enchimento. Junte-se a nós →
Divulgação: Alguns links neste artigo são links de afiliados. Recomendamos apenas ferramentas que testamos pessoalmente e usamos regularmente. Veja nossa política completa de divulgação.