Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Create Design System Rules skill
Gera regras de design system sob medida pro seu código, pros agentes de IA produzirem interfaces consistentes
- instalações
- 1.300
- estrelas no GitHub
- 2.112
- No skills.sh desde
- janeiro 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.
Nas palavras de quem fez
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design…
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
- SnykAlerta
Perguntas
Como instalar a Create Design System Rules 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 Create Design System Rules, 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 create-design-system-rulesR$ 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 corredorsfkislev
photoshop
O Claude olha o documento aberto no Photoshop, as camadas e a seleção, e faz edições curtas lá dentro, uma de cada vez, com você no comando.Auditada2.100 instalações, grátisbergside
roku
O Claude desenha telas de painel com a mesma paleta roxa, tipografia e espaçamento do começo ao fim, em vez de inventar um estilo a cada tela.Auditada2.000 instalações, grátisMastra
tailwind-
O Claude estiliza as telas do Playground do Mastra só com os componentes e tokens do design system, sem inventar cor, tamanho ou componente novo.OficialAuditada2.000 instalações, grátisbest- practices secondsky
aceternity-
O Claude monta topo com fundo animado, cards 3D, rolagem com parallax e texto que se digita na sua página em Next.js, sem tropeçar na instalação.Auditada1.500 instalações, grátisui magicuidesign
magic-
Sua página ganha movimento no topo, na prova social e no botão de compra sem perder leitura, acessibilidade nem o layout no celular.Auditada1.200 instalações, grátisui davila7
mui
As telas do seu app em Material UI saem com o tema da marca, espaçamento consistente e layout que se ajusta do celular ao monitor.Auditada1.100 instalações, grátisGitHub
anti-
O Claude parte do seu produto e dos seus componentes pra montar telas web e iOS com identidade própria, com todos os estados e uma conferência final.Oficial975 instalações, grátisui- slop heyman333
apple-
O Claude redesenha as telas do seu app pra parecerem feitas pela Apple: limpas, calmas, com fonte do sistema e componentes que quem usa iPhone já conhece.Auditada865 instalações, grátisui- designer
Mais da loja Figma
Ver a loja FigmaFigma
figma-
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 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 implement-
Transforma designs do Figma em código pronto pra produção, com fidelidade visual 1:1Oficial5.900 instalações, grátisdesign 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 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 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