design-systempor nextlevelbuilder

Design System Skill.

Um skill de Claude Code e Codex para trabalho de marca e sistema de design: tokens de design em três níveis, especificações de componentes e geração de slides.

Marca e Sistemas de Design
Sistema de design

Baixar OpenDesign Ver guia de uso

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/design-system/SKILL.mdSKILL.md

--- name: design-system description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. --- ## When to Use ## Token Architecture ## Script Paths ## Quick Start ## Component Spec Pattern ## Scripts

Metadados iniciais e títulos de seção lidos do arquivo original em 14/09/2026 · 7.414 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

Gera arquiteturas de design tokens em três camadas (primitiva → semântica → componente), especificações de componentes e slides de apresentação em conformidade com a marca. Tokens primitivos definem valores brutos como --color-blue-600. Tokens semânticos os referenciam por propósito (--color-primary). Tokens de componente especificam o uso por componente (--button-bg).

A skill fornece scripts de geração e validação para variáveis CSS, integração com o tema do Tailwind e um sistema contextual de slides que usa busca BM25 em 15 estruturas de deck, 25 layouts e arcos de emoção sparkline de Duarte. Todos os slides devem importar design-tokens.css e usar exclusivamente variáveis CSS. O Chart.js é necessário para visualização de dados. Suporta busca de imagens no Pexels e no Unsplash.

O que ele produz

Relatório de validação de tokens identificando valores fixos (hardcoded) no código-fonte que deveriam referenciar tokens

Veja o exemplo de prompt ↗

Como funciona

01
Carregar Referência de Arquitetura de Tokens
A skill carrega references/token-architecture.md para estabelecer a estrutura de tokens em três camadas antes de gerar ou validar tokens.
02
Gerar CSS a partir de Configuração JSON
Execute generate-tokens.cjs com um arquivo de configuração JSON para gerar um arquivo CSS com a estrutura de tokens em três camadas como variáveis CSS.
03
Buscar estratégias de slides por objetivo
Use a busca BM25 via search-slides.py para encontrar estruturas de deck, arcos emocionais e beats de sparkline correspondentes em slide-strategies.csv, opcionalmente filtrando por domínio (copy ou chart) e posição contextual.
04
Aplicar fluxo de decisão contextual
Analise o objetivo, consulte slide-layout-logic.csv para layout e flag break_pattern, slide-typography.csv para escala tipográfica, slide-color-logic.csv para tratamento de cor e slide-backgrounds.csv para categoria de imagem.
05
Gerar HTML com design tokens
Crie o HTML do slide importando assets/design-tokens.css, usando var() para toda a estilização, incluindo Chart.js para gráficos e adicionando classes de navegação e animação de slide-animations.css.
06
Validar conformidade com tokens
Execute slide-token-validator.py para verificar que o HTML do slide gerado usa exclusivamente variáveis CSS e não contém valores fixos de cor, fonte ou espaçamento.

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

Criação de sistemas de design tokens com arquitetura de três camadas para alternância de tema e personalização de componentes
Definição de especificações de estado de componentes com variantes hover, active e disabled
Geração de slides de apresentação em conformidade com a marca, com seleção contextual de layout e planejamento de arco emocional
Conversão de especificações de design em configuração de tema Tailwind usando tokens de componentes
Handoff de design para código com escalas sistemáticas de espaçamento e tipografia

Conheça os Limites

Valores fixos de cor, fonte ou espaçamento não são permitidos; toda a estilização deve usar variáveis CSS de design-tokens.css

O Que Fornecer

Documento de diretrizes de marcadocs/brand-guidelines.md fornece identidade de marca, tom de voz e definições de cor que orientam a extração de tokens primitivos.
Diretório de origem para validaçãoUm caminho de diretório do projeto para o validate-tokens.cjs escanear em busca de valores fixos que deveriam usar tokens.

03 Dentro da skill

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

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

Nunca use hex bruto em componentes
Os componentes devem sempre referenciar tokens via variáveis CSS, nunca fixar valores de cor diretamente.
Todos os slides devem importar design-tokens.css
Todo arquivo HTML de slide deve importar assets/design-tokens.css como fonte única da verdade e usar var() para todas as propriedades de estilização.
Use Chart.js para visualização de dados
Os gráficos devem ser renderizados com Chart.js (versão 4.4.1 ou posterior), não com barras somente em CSS ou outras abordagens.
Caminhos de scripts relativos ao diretório do SKILL.md
Caminhos de scripts como scripts/generate-tokens.cjs são relativos ao diretório que contém o SKILL.md, não à raiz do projeto.
Use o Formato HSL para Controle de Opacidade
Os valores de token devem usar o formato de cor HSL para permitir ajustes de opacidade sem duplicar definições de token.
Quebras de Padrão nas Posições 1/3 e 2/3
Decks premium alternam entre as emoções 'O Que É' (frustração) e 'O Que Poderia Ser' (esperança), com quebras de padrão calculadas em 1/3 e 2/3 das posições do deck, seguindo o método sparkline de Duarte.
Os Slides Devem Focar em Persuasão
Todos os slides gerados devem incluir navegação (setas do teclado, clique, barra de progresso), centralizar o conteúdo e focar em objetivos de persuasão ou conversão.
Documente o Propósito de Cada Token
Cada definição de token deve incluir documentação explicando seu propósito pretendido no sistema.

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/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Formulário genérico da CLI de skills para .claude/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

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

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

Confirme que a tag de script do Chart.js está presente e que os gráficos usam o construtor do Chart.js, e não renderização apenas com CSS
Verifique se as especificações de componentes seguem o padrão de tabela de estados com colunas default, hover, active e disabled
Revise a implementação de referência em assets/designs/slides/claudekit-pitch-251223.html quanto à completude dos recursos

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: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Arquivo da skill: .claude/skills/design-system/SKILL.md Checksum do conteúdo registrado na verificação; commit 7f69fed
License: MIT De LICENSE; SKILL.md indica "MIT".
Estrelas do repositório: 127.450 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório nextlevelbuilder/ui-ux-pro-max-skill, que contém 7 skills neste catálogo. Não é uma classificaçã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

Quando UsarDesign tokens, especificações de componentes, variáveis CSS, escalas de espaçamento, handoff de design para código, configuração do Tailwind, geração de slides
Arquitetura de TokensEstrutura de três camadas: valores brutos primitivos, aliases de propósito semântico, tokens específicos de componente com exemplos de variáveis CSS
Caminhos de ScriptCaminhos de script relativos ao diretório do SKILL.md; diretório de trabalho na raiz do projeto para acesso a arquivos
Início RápidoComandos para gerar tokens a partir de configuração JSON e validar o uso de tokens em diretórios de origem
ReferênciasSete arquivos de referência cobrindo arquitetura, tokens primitivos/semânticos/de componente, especificações, estados, variantes, integração com Tailwind
Padrão de Especificação de ComponenteEstrutura de tabela para definir propriedades de componentes nos estados default, hover, active e disabled
ScriptsCinco scripts: geração de tokens, validação, busca de slides BM25, validação de tokens de slide, busca de imagens
TemplatesTemplate JSON inicial com estrutura de tokens em três camadas
IntegraçãoExtrai primitivos da marca, alimenta tokens de componente para o Tailwind; depende das skills de brand e ui-styling
Sistema de SlidesApresentações em conformidade com a marca usando design tokens, Chart.js, CSVs de decisão contextuais, busca BM25
Fonte da verdadeDiretrizes de marca, design-tokens.json e .css, slide-animations.css definem todo o estilo dos slides
Busca de Slides (BM25)Pesquisa templates de slide por objetivo com filtros de domínio e parâmetros contextuais (posição, total, emoção anterior)

A Descrição da Própria Skill

Arquitetura de tokens, especificações de componentes e geração de slides. Tokens em três camadas (primitivo→semântico→componente), variáveis CSS, escalas de espaçamento/tipografia, especificações de componentes, criação estratégica de slides. Use para tokens de design, design sistemático, apresentações compatíveis com marca.

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 7.414 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.

Quais agentes devem usar essa skill?

A skill especifica ui-ux-designer e frontend-developer como agentes principais. Ela se integra à skill brand (para extrair primitivas de cores e tipografia da marca) e à skill ui-styling (para alimentar tokens de componentes na configuração do Tailwind).

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

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

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

Nos termos do próprio skill

Como funciona

Quando usar a Skill design-system

Boa Combinação

Conheça os Limites

O Que Fornecer

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

Nunca use hex bruto em componentes

Todos os slides devem importar design-tokens.css

Use Chart.js para visualização de dados

Caminhos de scripts relativos ao diretório do SKILL.md

Use o Formato HSL para Controle de Opacidade

Quebras de Padrão nas Posições 1/3 e 2/3

Os Slides Devem Focar em Persuasão

Documente o Propósito de Cada Token