Design Tokenpor Owl-Listener

Design Token Skill.

Dê às decisões visuais nomes e relações que os componentes possam reutilizar.

Design Systems
Especificações

Revisão da fonte · Design TokenSKILL.md

Tarefa Design Systems Produz • Uma categorização de tokens e um esquema de nomenclatura • Relações entre tokens globais, aliases e tokens de componente • Orientações de uso e versionamento Antes de começar Forneça os valores visuais existentes, exemplos de componentes e restrições de nomenclatura. A skill define nomes e relações de tokens; ferramentas de exportação e integração com frameworks exigem configuração separada.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Design Token: Defina uma Fundação Semântica

Categorias de tokens de design, relações em três camadas, nomenclatura, uso e orientações de versionamento.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Design Token define a fundação por baixo de um design system. Abrange cor, espaçamento, tipografia, elevação, bordas e movimento, com regras de nomenclatura e uso que ligam valores brutos ao significado semântico.

A estrutura em três camadas separa valores globais, aliases semânticos e tokens específicos de componente. Essa distinção ajuda uma equipe a alterar um valor sem perder o motivo de seu uso. A auditoria do uso existente e o mapeamento multimarca são explicitamente tarefas separadas.

Entregas esperadas

Uma categorização de tokens e um esquema de nomenclatura
Relações entre tokens globais, aliases e tokens de componente
Orientações de uso e versionamento

Ver o briefing de exemplo

Do briefing à revisão

01
Inventarie as fundações
Liste os valores de que o produto precisa para cor, layout, tipografia, elevação e movimento.
02
Defina as camadas
Separe escalas brutas de papéis semânticos e adicione nomes específicos de componente apenas onde forem úteis.
03
Documente o consumo
Explique onde os aliases se aplicam e como os componentes devem se referir a eles em vez de usar valores fixos no código.

02 Quando usar

Quando usar

Forneça os valores visuais existentes, exemplos de componentes e restrições de nomenclatura. A skill define nomes e relações de tokens; ferramentas de exportação e integração com frameworks exigem configuração separada.

Bom encaixe

Uma nova camada de tokensUse quando os valores visuais existem, mas seus nomes e papéis compartilhados não.
Fundações inconsistentesDê um vocabulário comum a decisões repetidas de espaçamento ou cor.

Limites a verificar

Não é uma auditoria automatizadaA fonte encaminha a auditoria do uso existente para outra skill.
Não é um pipeline de buildDescreve a arquitetura de tokens, não uma exportação ou integração com framework garantida.

Traga estas entradas

Valores atuaisForneça as decisões de paleta, tipografia, espaçamento e elevação.
Necessidades dos componentesMostre usos e estados representativos.
Restrições de nomenclaturaIdentifique convenções da plataforma e expectativas de versionamento.

03 Decisões importantes

Decisões que importam

Nomes preservam a intenção
Aliases semânticos preservam a intenção quando os valores brutos mudam.
Camadas evitam confusão
Uma cor global e a cor de um estado de botão não devem ser tratadas como nomes intercambiáveis.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Carregue o SKILL.md desta tarefa a partir do repositório designer-skills no local de skills compatível com seu agente. O arquivo de entrada não estabelece nenhum comando de instalação universal.

Arquivo-fonte original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/design-token/SKILL.md

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use design-token para definir uma camada de tokens para este pequeno sistema de produto. Separe escalas brutas, aliases semânticos e os tokens de componente necessários. Mapeie os exemplos de botão e card fornecidos, documente as regras de nomenclatura e evite afirmar um pipeline de exportação que não implementamos.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Os aliases resolvem para valores definidos.
Os nomes comunicam o uso, e não uma aparência acidental.
Os componentes referenciam a camada de tokens pretendida.

OpenDesign oferece um workspace de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixa da fonte indicada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: Owl-Listener
Repositório: Owl-Listener/designer-skills
Arquivo da skill: design-systems/skills/design-token/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · 9a6930cf84a8

Resumo editorial da fonte

Categorias de tokens de design, relações em três camadas, nomenclatura, uso e orientações de versionamento.

Resumo original de OpenDesign, baseado na fonte indicada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Tokens são apenas cores?

Não. A fonte inclui espaçamento, tipografia, elevação, bordas e movimento.

Todo componente deve usar valores brutos?

A fonte recomenda referências semânticas em vez de valores brutos diretos.

Isso lida com várias marcas?

A entrada distingue a arquitetura básica de tokens de uma tarefa separada de sistema de temas.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, material de origem e trabalho de design juntos em um workspace local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design