Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Figma Implement Design skill
Você cola o link do Figma e o Claude escreve a tela no seu projeto igual ao desenho, reaproveitando os componentes que já existem.
- instalações
- 6.700
- estrelas no GitHub
- 28,3 mil
- No skills.sh desde
- fevereiro de 2026
- Licença
- Sem licença declarada
Atualizada no GitHub em 8 de setembro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
Dá ao Claude um passo a passo fixo pra transformar um frame do Figma em código no seu repositório. Ele tira a chave do arquivo e o id do elemento do link (ou usa o que está selecionado no Figma Desktop), puxa pelo MCP do Figma layout, fontes, cores, espaçamentos e variantes, e tira um print do desenho.
O print vira a referência pra conferir o resultado. Ícones e imagens vêm do próprio Figma, sem pacote novo nem imagem provisória. O código que o Figma devolve, em geral React com Tailwind, é traduzido pro jeito do seu projeto, com seus componentes, cores e espaçamentos.
No fim, compara com o print: espaçamento, alinhamento, fonte, cor, estados de hover e desativado, comportamento em tela menor e acessibilidade. Quando a tela é grande demais pra uma resposta só, busca o mapa da página e pega cada parte separada.
Nas palavras de quem fez
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions…
Quando usar
- Transformar a landing page que o designer fez no Figma em página de verdade
- Criar no projeto um botão ou cartão igual ao do design system no Figma
- Montar um painel inteiro a partir de um frame do Figma
- Conferir se a tela pronta está igual ao desenho
Depois de instalar, é só pedir assim
- Implementa essa tela no projeto: https://figma.com/design/abc123/Site?node-id=42-15
- Pega o componente selecionado no meu Figma Desktop e cria ele usando os botões que já temos
- Monta a página de preços com estes dois frames do Figma, o do celular e o do computador: https://figma.com/design/abc123/Site?node-id=10-5 e https://figma.com/design/abc123/Site?node-id=10-6
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 Implement 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 Implement 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 precisa pra funcionar?
O servidor MCP do Figma conectado no agente, acesso ao arquivo na sua conta do Figma e o link do frame com o node-id. No plano grátis do Figma, o MCP aceita só 20 chamadas por mês e cada tela gasta várias; pra usar no dia a dia, precisa de assento Dev ou Full num plano pago. O MCP do Figma Desktop, que pega o elemento selecionado no app, também só funciona nesses planos pagos.
Ela edita o arquivo no Figma?
Não. Ela só lê o Figma e escreve código no seu projeto. Pra criar ou mudar coisas dentro do Figma, a própria skill indica outras da coleção, como a figma-use e a figma-generate-design.
Roda no Codex e no Antigravity?
Sim, desde que o MCP do Figma esteja ligado no agente. A skill vem do repositório de skills da OpenAI, mas é texto comum e funciona no Claude Code e no Antigravity também.
Levar essa skill
1x figma-implement-designR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/openai/skills
Aprenda a usar
- Codex no app do ChatGPT: instalar no Mac e Windows
Onde achar e como usar o Codex no aplicativo do ChatGPT para Windows e Mac. Veja qual plano libera o agente, como abrir pastas locais e rodar skills.
Na mesma prateleira
Ver as 1.414 skills do corredorwondelai
ios-
O Claude desenha e revisa telas de app de iPhone e iPad do jeito que a Apple recomenda, com nota até 10 e o que falta pra chegar lá.Auditada8.200 instalações, grátishig- design secondsky
tailwind-
O Claude configura o Tailwind v4 com shadcn/ui na ordem certa e evita os erros conhecidos de cor, de tema e de build.Auditada8.100 instalações, grátisv4- shadcn miqdadbadjuber
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 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átisFigma
figma-
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.OficialAuditada5.900 instalações, grátisgenerate- design affaan-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
Mais da loja OpenAI
Ver a loja OpenAIOpenAI
pdf
Lê, cria e revisa PDFs conferindo o layout ao renderizar as páginasOficial13,4 mil instalações, grátisgh-
Corrige checks que falham em PRs do GitHub Actions: lê os logs com gh, resume o erro e propõe o consertoOficial11,5 mil instalações, grátisfix- ci security-
Revisa o código segundo as boas práticas de segurança da linguagem e do framework e sugere melhoriasOficialAuditada11,2 mil instalações, grátisbest- practices linear
Você pede em português e o agente organiza o Linear: abre tickets, move bugs, monta o sprint e resume o que ficou pra trás.Oficial10,5 mil instalações, grátisplaywright
O agente abre o site, clica, preenche e tira print sozinho, pra testar um fluxo, achar onde ele quebra ou puxar informação de uma página.Oficial8.600 instalações, grátissecurity-
Faz o modelo de ameaças de um repositório: fronteiras de confiança, ativos, caminhos de abuso e mitigaçõesOficialAuditada8.200 instalações, grátisthreat- model openai-
Respostas sobre a API da OpenAI e o Codex tiradas da documentação atual, com a página citada, em vez da memória do modelo.Oficial6.100 instalações, grátisdocs screenshot
Tira capturas de tela do desktop: tela cheia, app ou janela específica, ou uma região de pixelsOficialAuditada6.100 instalações, grátisfigma
Busca contexto, capturas, variáveis e assets do Figma pelo MCP e transforma nós do Figma em códigoOficial5.800 instalações, grátisimagegen
Você descreve a imagem do site, do anúncio ou do jogo e ela chega na pasta do projeto, com o prompt usado pra gerar.OficialAuditada5.700 instalações, grátisjupyter-
O Claude monta o notebook já organizado em passos curtos, com explicação entre as células, pra você ou outra pessoa rodar de cima a baixo.OficialAuditada5.600 instalações, grátisnotebook playwright-
O agente abre seu app num navegador que continua aberto entre as mudanças, clica como um usuário e tira print pra provar que a tela ficou certa.OficialAuditada5.500 instalações, grátisinteractive