design-systempor Anthropic

Design System Skill.

Um skill para Claude Code e Codex voltado a marca e sistemas de design: audita, documenta ou estende um sistema de design existente.

Marca e Sistemas de Design
Sistema de design

Baixar OpenDesign Ver guia de uso

anthropics/knowledge-work-plugins · design/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system. --- ## Usage ## Components of a Design System ## Principles ## Output — Audit ## Design System Audit ## Output — Document

Metadados e cabeçalhos de seção lidos do arquivo original em 14/09/2026 · 5.552 caracteres no total

01 O que faz

O que o Skill design-system faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um skill de comando de barra para trabalhar em um design system existente em três modos: audit, document ou extend. A passagem de audit reporta a consistência de nomenclatura, a cobertura de tokens e a completude dos componentes, e atribui uma nota de 0 a 100 ao sistema. O modo document produz uma especificação de componente com descrição, variantes, props, estados, acessibilidade e recomendações de uso.

O modo extend propõe um novo componente ou padrão em relação aos já existentes no sistema, listando os tokens que utilizaria e as questões abertas que levanta. Abrange design tokens, componentes e padrões, e pode acessar uma ferramenta de design ou base de conhecimento quando estas estiverem conectadas. Os leitores são designers e desenvolvedores que mantêm um sistema coerente.

O que ele produz

Um relatório de auditoria de design system que termina em ações prioritárias classificadas
Documentação de componente com uma tabela de props contendo propriedade, tipo, valor padrão e descrição
Uma proposta de novo componente que começa pelo problema que ele resolve

Veja o exemplo de prompt ↗

Como funciona

01
Escolha o Modo a Partir do Argumento
O comando recebe um modo mais um destino: auditar o sistema completo, ou passar um único componente ou padrão pelo document ou extend.
02
Execute a Auditoria em Três Eixos
A auditoria verifica a consistência de nomenclatura, a cobertura de tokens em relação a valores fixos no código e o quão completo está cada componente, apontando então as ações prioritárias.
03
Escreva a Especificação do Componente
O modo document preenche um modelo com descrição, variantes, props com tipos e valores padrão, estados, acessibilidade e uma tabela de recomendações de uso.
04
Proponha a Extensão em Relação ao que Já Existe
O modo extend compara a nova ideia com componentes relacionados e, então, propõe uma API, variantes, estados e os tokens exatos que o componente consumiria.
05
Extraia de Ferramentas Conectadas Quando Disponíveis
Com uma ferramenta de design conectada, o skill pode extrair propriedades de componentes e a estrutura de camadas para documentação, além de verificar nomenclatura, variantes e uso de tokens no Figma.

02 Encontre o ideal para você

Quando usar a Skill design-system

Use a skill design-system no Claude Code ou Codex quando o trabalho for de marca e sistema de design deste tipo. Adequação e limites abaixo são retirados do arquivo da própria skill.

Boa Combinação

Você suspeita que inconsistências de nomenclatura ou valores fixos no código se infiltraram em seus componentes.
Você precisa de documentação para um componente, cobrindo suas variantes, estados e notas de acessibilidade.
Você está projetando um novo componente ou padrão e quer que ele se encaixe no sistema que já existe.
Você quer que a skill verifique o que já está documentado antes de escrever mais, usando uma base de conhecimento conectada.

Conheça os Limites

Componentes isolados que duplicam o que o sistema já oferece anulam o propósito de ter o sistema.
Uma proposta de extensão não resolve as decisões difíceis: pode terminar com decisões que ainda precisam de revisão de design.
Ler componentes diretamente do Figma só acontece quando um conector de ferramenta de design está disponível.

O Que Fornecer

O modo e seu alvoDê ao comando um modo e o componente, padrão ou sistema ao qual ele se aplica, para que a skill saiba qual modelo preencher.
Seus componentes existentes para comparaçãoUma proposta de extensão compara componentes relacionados quanto ao que eles têm em comum e por que isso não é suficiente, então esses vizinhos precisam ser conhecidos.

03 Dentro da skill

Regras que a skill design-system dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Reportar Desvios de Nomenclatura em Relação a um Padrão
Inconsistências de nomenclatura não são apenas sinalizadas: cada linha nomeia os componentes envolvidos e o padrão a ser adotado.
Conte Valores Fixos no Código, Não Estime por Olhar
A cobertura de tokens compara uma contagem definida com o número de instâncias encontradas, como valores hexadecimais fixos, valores de espaçamento arbitrários ou fontes e tamanhos personalizados.
Documente Tudo
Se um componente, variante ou regra não estiver documentado, a skill trata isso como inexistente.
Mantenha-se Flexível Dentro das Restrições
Os componentes devem ser componíveis em vez de rígidos, então o conjunto de padrões se adapta sem ser abandonado.
Versione Mudanças Que Quebram Compatibilidade
Qualquer mudança que quebre compatibilidade precisa vir com um caminho de migração, não apenas um componente substituto.
Comece com uma Auditoria
O ponto de entrada padrão é uma auditoria de onde o sistema está antes de documentar ou estender qualquer coisa.
Cobertura Vale Mais Que Perfeição
Oitenta por cento dos componentes documentados é tratado como melhor do que fazer 10 componentes perfeitamente.

04 Coloque em prática

Instalar design-system no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar design-system ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

Forma genérica da CLI skills para design/skills/design-system/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma primeira tarefa de marca e design-system

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Run a full audit of our [product] design system and score it. Flag inconsistent naming across the [Button, Input, Modal] components and count every hardcoded hex, arbitrary spacing value and custom font size you find, then tell me the three most impactful fixes to make first.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Leia o resumo da auditoria: componentes revisados, problemas encontrados e uma nota de até 100.
Verifique a tabela de completude por componente, já que estados, variantes e documentação são marcados separadamente e pontuados.
Confirme se o bloco de acessibilidade está preenchido para o componente documentado.
Em uma extensão, verifique se a tabela de estados cobre o comportamento padrão, hover e desabilitado antes de enviar para revisão.

No OpenDesign, importe o design-system pelo link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Arquivo da skill: design/skills/design-system/SKILL.md Checksum do conteúdo registrado na verificação; commit 8f877b6
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 24.012 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório anthropics/knowledge-work-plugins, que contém 7 skills neste catálogo. Não é uma avaliação ou contagem de uso para design-system.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

UsoAs três formas de invocação: auditar o sistema, documentar um componente, estender um padrão.
Componentes de um Design SystemDefine tokens de design, componentes e padrões com suas subpartes, estados e questões de ARIA.
PrincípiosConsistência acima de criatividade, flexibilidade dentro de restrições, documente tudo, versione e migre.
Saída — AuditoriaModelo de auditoria: pontuação resumida, consistência de nomenclatura, cobertura de tokens, completude, ações prioritárias.
Saída — DocumentarModelo de componente: descrição, variantes, props, estados, acessibilidade, recomendações e restrições, exemplo de código.
Saída — EstenderModelo de novo componente: problema, padrões relacionados, API, variantes, estados, tokens, questões abertas.
Se Houver Conectores DisponíveisEtapas opcionais de ferramenta de design e base de conhecimento para auditar, documentar e publicar.
DicasComece com uma auditoria, documente enquanto constrói, priorize cobertura em vez de perfeição.

A Descrição da Própria Skill

"Audite, documente ou expanda seu design system. Use ao verificar inconsistências de nomenclatura ou valores fixos em componentes, escrever documentação para variantes, estados e notas de acessibilidade de um componente, ou projetar um novo padrão que se encaixe no sistema existente."

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 5.552 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre o skill design-system

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Onde a documentação realmente termina?

O trabalho retorna como modelos em markdown na conversa. Se uma base de conhecimento estiver conectada, o skill também pode publicar a documentação atualizada na sua wiki.

Posso usar isso para projetar algo completamente novo?

O modo Extend serve para um novo componente ou padrão que se encaixe no sistema que você já possui. Ele parte do problema e da lacuna nos padrões existentes, propõe API, variantes, estados e tokens, e termina com as decisões e casos extremos que ainda precisam de revisão de design.

Como invoco os diferentes modos?

Digite o comando de barra com um modo e um alvo. O modo Audit é executado em todo o sistema, enquanto document e extend recebem um componente ou padrão específico, por exemplo o formato extend para um padrão que você deseja adicionar.

Design System

Execute design-system em uma marca real e uma tarefa de trabalho com design-system.

Baixe o OpenDesign, importe design-system a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills