Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Design System skill
Audita, documenta ou amplia seu design system: nomes inconsistentes, valores fixos e docs de componentes
- instalações
- 4.200
- estrelas no GitHub
- 33 mil
- No skills.sh desde
- março de 2026
- Licença
- Apache-2.0
Atualizada no GitHub em 24 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
Nas palavras de quem fez
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a…
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 Design System 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 Design System, 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 design-systemR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/anthropics/knowledge-work-plugins
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 corredoraffaan-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 agents365-ai
tldraw-
Você descreve um processo ou um sistema e recebe o diagrama em imagem, com traço de quadro branco, pronto pra explicar pro time, pro cliente ou num post.Auditada3.700 instalações, grátisskill hairyf
tailwindcss
O Claude estiliza suas páginas com o Tailwind v4 do jeito atual, com o tema da sua marca, versão de celular e modo escuro, sem cair na sintaxe da versão 3.Auditada3.600 instalações, grátisfigma-
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 hamen
material-
As telas do seu app Android, Flutter ou web saem com cores, fontes, cantos e componentes no padrão do Google, e com nota de conformidade se você pedir.3.300 instalações, grátis3
Mais da loja Anthropic
Ver a loja AnthropicAnthropic
frontend-
Sua landing page ou seu app sai com identidade própria, tirada do assunto do seu negócio, e não com aquela cara de site gerado por IA.OficialAuditada1 milhão de instalações, grátisdesign skill-
Aquele jeito de trabalhar que você explica toda semana vira uma skill testada, com a descrição afinada pro Claude usar na hora certa.Oficial415,3 mil instalações, grátiscreator pptx
Você pede o deck e recebe um arquivo .pptx que abre no PowerPoint, com design pensado e cada slide conferido antes da entrega.Oficial242,3 mil instalações, grátispdf
Manda o PDF e pede: o Claude tira a tabela pra planilha, junta arquivos, preenche o formulário ou monta um relatório novo.Oficial216,9 mil instalações, grátisdocx
Relatório, contrato ou proposta sai em .docx de verdade, com sumário, tabelas e numeração, e dá pra revisar com alterações controladas e comentários.Oficial207,1 mil instalações, grátiswebapp-
O Claude abre o seu site num navegador, clica, confere se cada parte funciona e devolve print e os erros do console.Oficial188,3 mil instalações, grátistesting xlsx
A planilha sai do Claude com fórmula no lugar de número digitado, sem #REF! nem #NOME?, e respeitando o jeito que o seu arquivo já estava montado.Oficial187,9 mil instalações, grátismcp-
Você aponta o serviço que quer ligar à IA e sai com um servidor MCP pronto, testado no MCP Inspector e com perguntas de avaliação.Oficial131,8 mil instalações, grátisbuilder canvas-
Uma peça visual de uma página, pôster ou arte, com composição pensada e pouco texto, entregue em PNG ou PDF junto com a filosofia que a guiou.OficialAuditada122,2 mil instalações, grátisdesign web-
O Claude cria uma interface com vários componentes, estado e navegação e entrega tudo num arquivo HTML só, sem servidor pra configurar.Oficial112,6 mil instalações, grátisartifacts- builder brand-
O Claude deixa seus slides, documentos e páginas com a cara da Anthropic: as cores certas, Poppins nos títulos e Lora no texto.OficialAuditada109,9 mil instalações, grátisguidelines theme-
Você escolhe um tema num catálogo visual e o Claude aplica as mesmas cores e fontes em todo o material, cuidando do contraste e da leitura.OficialAuditada95,3 mil instalações, grátisfactory