design-system-patternspor Seth Hobson

Design System Patterns Skill.

Uma skill do Claude Code e Codex para trabalho de marca e design system: design systems escaláveis: tokens, infraestrutura de temas, arquitetura de componentes.

Marca e Sistemas de Design
Sistema de design

Baixar OpenDesign Ver guia de uso

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 4.003 caracteres no total

01 O que faz

O que o Skill design-system-patterns 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

Este skill constrói design systems escaláveis com design tokens, infraestrutura de temas e padrões de arquitetura de componentes. Ele cria hierarquias de tokens em três camadas — tokens primitivos para valores brutos, tokens semânticos para significado contextual e tokens de componente para uso específico — e então implementa a troca de temas com CSS custom properties e provedores de contexto do React.

O skill lida com a geração de tokens multiplataforma para CSS, iOS e Android, estabelece workflows de Figma para código com Style Dictionary, e projeta bibliotecas de componentes usando compound components, polymorphic components, variantes, slots e padrões de UI headless. Ele detecta preferências do sistema, como prefers-color-scheme e modos de movimento reduzido.

O que ele produz

Arquivos de tokens multiplataforma gerados para CSS, iOS e Android
Bibliotecas de componentes com sistemas de variantes e tamanhos
Documentação e diretrizes do design system

Veja o exemplo de prompt ↗

Como funciona

01
Definir Tokens Primitivos
Crie tokens de valores brutos para cores, tamanhos e fontes que sirvam como camada de base. São valores literais, como códigos hexadecimais e medidas em pixels.
02
Construir a Camada de Tokens Semânticos
Referencie tokens primitivos para criar tokens contextuais como text-primary, surface-elevated e border-default, que carregam significado em vez de descrição visual.
03
Criar Tokens Específicos de Componente
Defina tokens para uso específico de componentes, como button-bg e card-border, que referenciam tokens semânticos.

02 Encontre o ideal para você

Quando usar a Skill design-system-patterns

Use a skill design-system-patterns 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

Criar tokens de design para cores, tipografia, espaçamento e sombras
Implementar alternância de tema claro/escuro com propriedades personalizadas CSS
Construção de sistemas de tematização multimarca
Arquitetar bibliotecas de componentes com APIs consistentes
Estabelecer fluxos de trabalho de design para código com tokens Figma

Conheça os Limites

Lacunas de plataforma em que os tokens existem para web, mas não para mobile, ou vice-versa

03 Dentro da skill

Regras que a Skill design-system-patterns Dá ao Claude Code e ao Codex

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

Versionar Tokens com Semver
Trate mudanças de token como mudanças de API e use versionamento semântico. Modificações de token afetam as aplicações consumidoras da mesma forma que mudanças de API.

04 Coloque em prática

Instale design-system-patterns no Claude Code ou Codex

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

Adicione design-system-patterns 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/wshobson/agents --skill design-system-patterns

Forma genérica da CLI skills para plugins/ui-design/skills/design-system-patterns/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

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

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

Verifique o Primeiro Resultado

Antes de aceitar o resultado, procure por estes itens na transcrição e nos arquivos:

O resultado é entregue como Design system, conforme a lista do catálogo para este skill.
O agente menciona a skill design-system-patterns em seu plano ou transcrição antes de produzir o resultado.
Seu próprio conteúdo, nomes e números aparecem inalterados na saída.

No OpenDesign, importe design-system-patterns a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-a 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: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Arquivo da skill: plugins/ui-design/skills/design-system-patterns/SKILL.md Checksum de conteúdo registrado na verificação; commit 4236bb9
License: MIT Do LICENSE.
Estrelas do repositório: 39.635 Snapshot do GitHub feito em 2026-09-14 para todo o repositório wshobson/agents, que contém 18 skills neste catálogo. Não é uma avaliação ou contagem de uso de design-system-patterns.
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

Quando Usar Esta SkillLista cenários para design tokens, theming, sistemas multimarca, bibliotecas de componentes e workflows do Figma
Capacidades PrincipaisDetalha design tokens, infraestrutura de theming, arquitetura de componentes e capacidades do pipeline de tokens
Design TokensDefine as camadas de tokens primitivos, semânticos e de componentes, com convenções de nomenclatura e geração multiplataforma
Infraestrutura de ThemingAborda propriedades personalizadas de CSS, contexto React, alternância dinâmica, preferências do sistema e modos de acessibilidade
Arquitetura de ComponentesDescreve componentes compostos, padrões polimórficos, variantes, slots, UI headless e style props
Pipeline de TokensExplica a sincronização com o Figma, a configuração do Style Dictionary, transformações e integração com CI/CD
Início RápidoFornece um exemplo em TypeScript de estrutura de tokens primitivos e semânticos com propriedades personalizadas de CSS
Boas PráticasLista sete regras: nomenclatura semântica, hierarquia, documentação, versionamento, testes, automação, migração
Problemas ComunsAlerta contra a proliferação de tokens, inconsistência de nomenclatura, ausência de dark mode, valores fixos no código, referências circulares e lacunas entre plataformas

A Descrição da Própria Skill

"Construa sistemas de design escaláveis com tokens de design, infraestrutura de temas e padrões de arquitetura de componentes. Use ao criar tokens de design, implementar alternância de temas, construir bibliotecas de componentes ou estabelecer fundações de sistemas de design."

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

Design System Patterns

Execute design-system-patterns em uma Tarefa real de Marca e design-system.

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

Baixar OpenDesign Ver todas as skills