Figma
Claude Code
Vercel
VS CodeTransforme designs em produtos reais, automatizando 50% do trabalho com Claude Code, do Figma ao Deploy.
FigmaClaude CodeVercelVS Codeo problema
Designer que precisa de dev pra publicar qualquer coisa. Pedido que demora dias. Projeto que chega diferente do que você imaginou.
Ficou esperando um dev pra mudar um botão de lugar
O site ficou "parecendo feito por IA" mesmo com um design lindo
Tentou aprender código mas travou no primeiro erro
Tem ideias incríveis que nunca saem do Figma
novo stack
Claude conecta suas ferramentas num fluxo único — do conceito ao código, sem sair do processo criativo.
o que você vai construir
Você vai aprender a transformar decisões de design em código real — cores, tipografia, espaçamento e componentes funcionando no browser.
conteúdo
Aulas de 10 a 20 minutos, diretas ao ponto. Você aprende fazendo — com seu projeto, do jeito certo.
Boas-vindas, ambiente e primeiro projeto com Claude Code.
Ambiente prontoOrganização de arquivos, anatomia do HTML e boas práticas.
Projeto estruturadoVariáveis CSS, Flexbox, tipografia e espaçamento fiel ao design.
Design fiel ao FigmaMedia queries na prática e testes em diferentes dispositivos.
Funciona em qualquer telaExportando assets e traduzindo o design para HTML e CSS com precisão.
Pixel perfect no browserPrimeiro deploy, domínio próprio e configurações essenciais.
Site no ar com domínioDeploy do seu projeto real, checklist e próximos passos.
Zero ao deploy. Concluído.aula bônus · ~20 min
O que separa um resultado mediano de um resultado impressionante no Claude Code não é sorte — é o prompt. Você vai aprender a estrutura por trás dos prompts que realmente funcionam.
Incluída no curso. Sem custo adicional.
# Contexto
Sou designer de produto trabalhando num SaaS B2B.
O projeto usa React + Tailwind. O design system já existe no Figma.
# Tarefa
Cria o componente `PricingCard` com base no frame "Pricing / Card" do Figma.
O card precisa ter: badge de plano, preço, lista de features e um botão CTA.
# Restrições
- Usa apenas as variáveis CSS já definidas em `tokens.css`
- Não cria novos componentes — reutiliza `Button` e `Badge` existentes
- Sem inline styles
# Formato esperado
Um único arquivo `PricingCard.tsx` com tipagem TypeScript.
Exporta o componente como default.quem ensina
Design Engineer · Founder, Raiser Trainings
Nos últimos anos, atuei na ponte entre design, engenharia e estratégia para escalar produtos, sistemas e times em ambientes de alta complexidade.
depoimentos
Designers que deixaram de depender de dev e passaram a construir sozinhos.
"Lancei meu primeiro projeto em 3 dias. Nunca imaginei que ia conseguir fazer deploy sozinha, sempre dependia de alguém."
"O Robb ensina de um jeito que faz sentido pra quem pensa visualmente. Pela primeira vez o código não parece um bicho de sete cabeças."
"Meu portfólio ficou do jeito que eu queria. Não aquele template genérico — é o meu estilo, do Figma ao ar."
"Comecei o curso sem saber nada de terminal. Terminei com meu site publicado e um cliente novo que contratou pela landing page."
"Finalmente entendo o que acontece no código. Não só copio e colo — consigo adaptar, corrigir e evoluir o projeto."
"Valeu cada centavo. A autonomia que ganhei já pagou o curso várias vezes. Agora entrego projetos completos sozinho."
"Fiz minha landing page de serviços em dois dias. Minha taxa de conversão triplicou porque o design é fiel ao que eu criei."
"Lancei meu primeiro projeto em 3 dias. Nunca imaginei que ia conseguir fazer deploy sozinha, sempre dependia de alguém."
"O Robb ensina de um jeito que faz sentido pra quem pensa visualmente. Pela primeira vez o código não parece um bicho de sete cabeças."
"Meu portfólio ficou do jeito que eu queria. Não aquele template genérico — é o meu estilo, do Figma ao ar."
"Comecei o curso sem saber nada de terminal. Terminei com meu site publicado e um cliente novo que contratou pela landing page."
"Finalmente entendo o que acontece no código. Não só copio e colo — consigo adaptar, corrigir e evoluir o projeto."
"Valeu cada centavo. A autonomia que ganhei já pagou o curso várias vezes. Agora entrego projetos completos sozinho."
"Fiz minha landing page de serviços em dois dias. Minha taxa de conversão triplicou porque o design é fiel ao que eu criei."
dúvidas frequentes
Tudo que você precisa saber antes de entrar.
Não. O curso foi feito exatamente para quem não tem base técnica. Você vai aprender a usar o Claude Code como ferramenta, não a virar dev.
Sim — UI, UX, brand, motion. Se você trabalha com visual e quer publicar seus próprios projetos, o curso é pra você.
Sim, o Figma é a ferramenta base do curso. É necessário o plano Pro para usar a integração via MCP — que é como o Claude Code lê e interpreta seu design diretamente.
Sim, o curso usa o Claude Pro (~$20/mês) para a integração via MCP com o Figma. Esse é o único custo recorrente além do curso.
A maioria dos alunos publica o primeiro projeto ainda nos primeiros módulos. Com dedicação, em 1 fim de semana já dá pra ter algo no ar.
Não. Você tem acesso vitalício e todas as atualizações futuras estão incluídas sem custo adicional.
Ambos. O Claude Code roda em Windows, Mac e Linux.
Sim, alunos têm acesso a uma comunidade exclusiva e suporte direto para dúvidas do curso.
hora de decidir
8 horas que mudam a forma como você trabalha. Para sempre.
7 dias de garantia Pagamento seguro via Hotmart