Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Figma Generate Design skill
A tela do seu app vira um arquivo editável no Figma, com os componentes e as cores do design system em vez de print ou caixa solta.
- instalações
- 5.900
- estrelas no GitHub
- 2.112
- No skills.sh desde
- março de 2026
- Licença
- Sem licença declarada
Atualizada no GitHub em 20 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
A skill, da própria Figma, ensina o agente a recriar no Figma uma página, modal, formulário, painel ou tabela do seu app, ou a montar uma tela nova a partir de uma descrição. Ela trabalha junto com a skill figma-use e com o servidor MCP do Figma, que escreve direto no arquivo.
Antes de desenhar, o agente procura o que já existe: arquivos de Code Connect no código, telas prontas no arquivo e a biblioteca do time. Usa os componentes, as variáveis de cor e espaçamento e os estilos de texto do design system, em vez de cor solta, e confere qual fonte o produto usa pra não cair na Inter.
A tela é montada seção por seção dentro de um quadro, com camadas editáveis: textos, componentes e ícones importados do SVG do código. Print da tela inteira nunca entra no resultado. Em app web, ela captura a página pra trazer as imagens e acertar o layout, e no fim tira uma captura pra conferir se ficou igual.
Nas palavras de quem fez
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to…
Quando usar
- Levar pro Figma uma tela que só existe no código
- Desenhar uma landing page nova no Figma com os componentes da marca
- Atualizar a tela do Figma depois que o código mudou
- Passar um modal ou formulário pro Figma pro designer revisar
Depois de instalar, é só pedir assim
- Pega a página de checkout do meu app e monta ela nesse arquivo do Figma usando o nosso design system
- Cria no Figma uma landing page pra minha mentoria com os componentes da biblioteca do time
- A tela de preços mudou no código, atualiza a versão do Figma pra ficar igual
Segurança
Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.
- Gen Agent Trust HubPassou
- SocketPassou
- SnykPassou
Perguntas
Como instalar a Figma Generate Design no Claude Code?
Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Figma Generate Design, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.
O que a figma-generate-design precisa pra funcionar?
Do servidor MCP do Figma conectado ao agente, de um arquivo de destino no Figma e de um design system publicado ou acesso à biblioteca do time. Também precisa da skill figma-use, do mesmo repositório. Na prática pede plano pago do Figma, porque no grátis o MCP libera poucas consultas por mês. Imagem de exemplo gerada pelo Figma gasta créditos de IA.
Roda no Codex e no Antigravity?
Roda em qualquer agente que leia skills e tenha o MCP do Figma conectado. O que manda é o acesso às ferramentas do Figma, como use_figma e search_design_system, e não o agente.
Ela cria o design system do zero?
Não. Ela monta telas usando um design system que já existe. Pra criar componentes, variáveis e biblioteca do zero, a própria skill indica a figma-generate-library.
Levar essa skill
1x figma-generate-designR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/figma/mcp-server-guide
Aprenda a usar
- Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.
Na mesma prateleira
Ver as 1.414 skills do corredormiqdadbadjuber
antislop
O Claude constrói sites e telas sem os vícios de IA, como gradiente roxo, card repetido e número inventado, e entrega com um relatório de checagem.7.300 instalações, grátishuntabyte
shadcn-
O Claude monta formulários, painéis e janelas no Svelte com os componentes do shadcn-svelte, do jeito que a documentação manda.Auditada6.700 instalações, grátissvelte OpenAI
figma-
Você cola o link do Figma e o Claude escreve a tela no seu projeto igual ao desenho, reaproveitando os componentes que já existem.OficialAuditada6.700 instalações, grátisimplement- design magicpathai
magicpath
O Claude acha seus designs no MagicPath, instala no projeto e deixa funcionando de verdade, ou desenha telas novas direto no canvas.6.300 instalações, grátisaffaan-m
liquid-
O Claude escreve as telas do seu app iOS com o vidro novo da Apple do jeito certo, com botões, barras e transições que se fundem.Auditada5.200 instalações, grátisglass- design jakubkrehel
oklch-
Paleta que fica uniforme do claro ao escuro, texto que passa no teste de contraste e tema pronto no Tailwind, sem acertar cor no olho.Auditada4.600 instalações, grátisskill Figma
figma-
O Claude lê o código do seu site ou app e monta no Figma as cores, espaçamentos e componentes iguais aos do código, prontos pra quem desenha usar.OficialAuditada4.400 instalações, grátisgenerate- library ibelick
create-
O Claude lê o código ou o site e registra num DESIGN.md as cores, fontes e regras visuais, pra toda tela nova sair no mesmo padrão.Auditada4.400 instalações, grátisdesign- md
Mais da loja Figma
Ver a loja Figmafigma-
O Claude cria e ajusta telas, componentes e variáveis direto no seu arquivo do Figma, seguindo o padrão que o arquivo já tem.OficialAuditada9.100 instalações, grátisuse implement-
Transforma designs do Figma em código pronto pra produção, com fidelidade visual 1:1Oficial5.900 instalações, grátisdesign figma-
Cria um arquivo novo no Figma, seja Design, FigJam ou SlidesOficialAuditada3.500 instalações, grátiscreate- new- file figma-
O Figma passa a mostrar, pra cada componente, o trecho de código do seu projeto com as propriedades certas, em vez de um código genérico.OficialAuditada3.400 instalações, grátiscode- connect figma-
A tela que sai do Figma fica igual ao desenho, usa os componentes que o seu projeto já tem e não deixa imagem faltando nem link temporário.Oficial2.500 instalações, grátisdesign- to- code figma-
Carrega as regras obrigatórias antes de qualquer chamada generate_diagram do Figma para gerar diagramasOficialAuditada2.000 instalações, grátisgenerate- diagram figma-
Ensina o agente a usar a ferramenta use_figma do MCP do Figma no contexto do FigJamOficialAuditada2.000 instalações, grátisuse- figjam figma-
Ensina o agente a usar o MCP do Figma em Slides, com a Plugin API, para criar e editar apresentaçõesOficialAuditada1.700 instalações, grátisuse- slides create-
Gera regras de design system sob medida pro seu código, pros agentes de IA produzirem interfaces consistentesOficial1.300 instalações, grátisdesign- system- rules figma-
Traduz designs do Figma em código SwiftUI e também faz o caminho contrárioOficialAuditada1.300 instalações, grátisswiftui figma-
Transforma animações e transições do Figma em código de aplicação pronto para produçãoOficialAuditada1.200 instalações, grátisimplement- motion figma-
Anima nós do Figma pela ferramenta use_figma, com keyframes, estilos de animação, easing e duraçãoOficialAuditada1.100 instalações, grátisuse- motion