Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Figma Code Connect Components skill
Liga componentes do Figma aos componentes de código com o Code Connect
- instalações
- 2.800
- estrelas no GitHub
- 28,3 mil
- No skills.sh desde
- março 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.
Nas palavras de quem fez
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map…
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 Code Connect Components 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 Code Connect Components, 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.
Levar essa skill
1x figma-code-connect-componentsR$ 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
- 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 corredormindrally
framer-
O Claude anima o seu site React do jeito que roda liso: movimento que não engasga, molas naturais e respeito a quem prefere menos movimento.Auditada3.000 instalações, grátismotion paulrberg
tailwind-
Mexe no visual do site pelo Tailwind sem inventar moda: usa as cores e os componentes que já existem e olha a tela de verdade antes de dizer que acabou.Auditada3.000 instalações, grátiscss nexu-io
swiftui-
Telas de app iOS e macOS com estilo próprio: cores e fontes definidas antes do código, três direções pra escolher e revisão antes de entregar.Auditada2.900 instalações, grátisdesign OpenAI
figma-
O Claude estuda o seu código e escreve no CLAUDE.md as regras pra toda tela vinda do Figma sair com os componentes e as cores do projeto.OficialAuditada2.900 instalações, grátiscreate- design- system- rules zate
godot-
O Claude monta menus, HUD, inventário e caixas de diálogo no Godot com a estrutura certa, tema reaproveitável e navegação por controle.Auditada2.700 instalações, grátisui iart-ai
lottie-
A animação que o designer fez no After Effects roda leve no site ou no app, acompanha a rolagem da página e troca de cor sem exportar de novo.Auditada2.200 instalações, grátisanimation jiji262
claude-
Você pede uma página, um deck ou um protótipo e recebe opções em HTML com sistema visual definido, sem degradê gritante, emoji e cara de template.2.200 instalações, grátisdesign sfkislev
illustrator
O Claude lê pranchetas, camadas e seleção do arquivo aberto no Illustrator e faz edições pequenas, passo a passo, com você no comando.Auditada2.100 instalações, grátis
Mais da loja OpenAI
Ver a loja OpenAIpdf
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 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 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