ui-design-systempor Alireza Rezvani

UI Design System Skill.

Uma skill de Claude Code e Codex para trabalho de marca e design system: tokens de design, documentação de componentes, cálculos responsivos e handoff para desenvolvedores.

Marca e Sistemas de Design
Sistema de design

Baixar OpenDesign Ver guia de uso

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Front matter e títulos de seção lidos do arquivo upstream em 14/09/2026 · 10.759 caracteres no total

01 O que faz

O Que o Skill ui-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 kit de ferramentas de design system para transformar uma cor de marca em um conjunto completo de tokens. O design_token_generator.py recebe uma cor hex mais um preset moderno, clássico ou descontraído, e retorna cores, tipografia, espaçamento de 8pt, dimensionamento, bordas, sombras, animação, breakpoints e camadas de z-index em json, css, scss ou um resumo.

Quatro workflows cobrem, então, a arquitetura de componentes de átomos a templates, breakpoints responsivos com tipografia fluida via clamp(), validação de contraste WCAG e o handoff para desenvolvedores em variáveis CSS do React, configuração do Tailwind ou styled-components, além da sincronização com o Figma via Tokens Studio. É voltado para designers de UI seniores que precisam documentar tokens e componentes para uma equipe de desenvolvimento.

O que ele produz

Documentação da API de componentes cobrindo props, opções de variante, estados e requisitos de acessibilidade.
Trechos de integração para React com variáveis CSS, uma configuração de tema do Tailwind e styled-components.
Tokens de cor semânticos que trazem suas próprias cores de contraste.

Veja o exemplo de prompt ↗

Como funciona

01
Corrija a Cor da Marca
O workflow começa identificando a cor primária da marca, que o arquivo exige em formato hex, já que toda categoria gerada é derivada dela.
02
Execute o Gerador de Tokens
Uma única chamada de script produz o sistema completo: cor, preset de estilo e formato de saída são os três argumentos que ela aceita.
03
Mapear Tokens para uma Hierarquia de Componentes
Os componentes são organizados em átomos, moléculas, organismos e templates, e cada um é vinculado aos grupos de tokens que consome.
04
Definir Breakpoints e Tipografia Fluida
Seis breakpoints vão de xs a 2xl, e a tipografia fluida é expressa com uma fórmula clamp entre um tamanho mínimo e máximo.
05
Conectar os Tokens à Base de Código
O workflow de handoff mostra o arquivo de tokens importado diretamente, um tema Tailwind construído a partir do JSON e um tema styled-components lendo as chaves dos tokens.
06
Sincronizar com o Figma e Aprovar
Os tokens entram no Figma através do plugin Tokens Studio, e o checklist de handoff confirma que o pipeline, a biblioteca de componentes e a documentação estão prontos.

02 Encontre o ideal para você

Quando usar a Skill ui-design-system

Use a skill ui-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 próprio arquivo da skill.

Boa Combinação

Você tem uma única cor de marca e precisa de um sistema completo de tokens derivado dela.
Você está estruturando uma biblioteca de componentes e quer tokens mapeados em átomos, moléculas, organismos e templates.
Você precisa de breakpoints, escalas de tipografia fluida ou valores de espaçamento responsivo calculados para você.
Você está se preparando para entregar um conjunto de tokens finalizado para a equipe de desenvolvimento.

Conheça os Limites

Os presets de estilo não são uma reformulação visual profunda: a escolha do tema muda principalmente as famílias de fonte, o raio padrão e o caráter das sombras, por exemplo, cantos arredondados de 8px no modern contra 4px no classic.

O Que Fornecer

Um preset de estiloEscolha uma de três direções, modern, classic ou playful, já que o preset muda as famílias de tipo, o raio dos cantos e o tratamento de sombras em todo o conjunto gerado.
O formato de saídaInforme qual formato o projeto receptor consome: json, css, scss ou a visualização resumida, pois isso determina o que o handoff produz.

03 Dentro da skill

Regras que a Skill ui-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.

Cor de Marca Padrão
Quando nenhuma cor é passada, o gerador recorre a #0066CC como cor de marca primária, então a saída ainda é renderizada sem um argumento hex.
O Espaçamento É uma Grade de 8pt
Os tokens de espaçamento seguem uma escala baseada em grade de 8pt, indo de 0 a 64, com aliases semânticos sobrepostos às etapas numéricas.
Sem Valores Fixos no Código
As implementações de componentes devem referenciar apenas design tokens; valores literais em pixel ou hex em componentes são tratados como uma falha na verificação.
Toda Variante É Entregue
Espera-se que os componentes implementem o conjunto completo de variantes, primária, secundária e ghost, em vez de um subconjunto.
Variantes de Tamanho Têm Dimensões Fixas
O tamanho pequeno é definido como 32px de altura, 12px de espaçamento horizontal e 14px de tamanho de fonte, com md e lg escalando a partir daí.
O Contraste Deve Atender ao WCAG AA
As cores geradas são validadas em 4.5:1 para texto normal e 3:1 para texto grande, com as cores semânticas obrigadas a definir valores de contraste.
Os Alvos de Toque Permanecem Grandes o Suficiente
Os elementos interativos precisam atingir um alvo de toque mínimo de 44 por 44 pixels na lista de verificação de acessibilidade.

04 Coloque em prática

Instale ui-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.

Adicione ui-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/alirezarezvani/claude-skills --skill ui-design-system

Formato genérico da CLI de skills para product-team/skills/ui-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

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

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:

Confirme se todas as categorias de token foram geradas, e não apenas um conjunto parcial.
Verifique se os estados hover, active, focus e disabled realmente funcionam em cada componente.
Verifique se os indicadores de foco estão visíveis e se elementos HTML semânticos estão sendo usados.
Certifique-se de que a ferramenta de design foi sincronizada antes de considerar o handoff concluído.
Confirme se um pipeline de build está configurado para que os tokens exportados cheguem ao código.

No OpenDesign importe o ui-design-system a partir do link do seu 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: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branch main
Arquivo da skill: product-team/skills/ui-design-system/SKILL.md Checksum de conteúdo registrado na verificação; commit 19392f7
License: MIT De LICENSE.
Estrelas do repositório: 25.934 Snapshot do GitHub capturado em 14/09/2026 para todo o repositório alirezarezvani/claude-skills, que contém 5 skills neste catálogo. Não é uma classificação ou contagem de uso para ui-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

Termos de GatilhoFrases entre aspas, como generate design tokens, que devem direcionar uma solicitação para este skill.
WorkflowsQuatro workflows numerados: geração de tokens, sistema de componentes, design responsivo, handoff para desenvolvedores.
Referência de FerramentaArgumentos, valores padrão e categorias de saída para design_token_generator.py, com exemplos de chamadas.
Tabelas de Referência RápidaEtapas da escala de cores, escala tipográfica de 1.25, níveis WCAG e diferenças entre presets de estilo.
Base de ConhecimentoQuatro guias de referência: token-generation, component-architecture, responsive-calculations, developer-handoff.
Checklist de ValidaçãoListas de verificação para geração de tokens, sistema de componentes, acessibilidade e handoff para desenvolvedores.

A Descrição da Própria Skill

"Conjunto de ferramentas de sistema de design de UI para Designer de UI Sênior, incluindo geração de design tokens, documentação de componentes, cálculos de design responsivo e ferramentas de handoff para desenvolvedores. Use ao criar design systems, gerar design tokens, manter consistência visual ou facilitar a colaboração entre design e desenvolvimento e handoff para desenvolvedores."

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

06 Antes de instalar

Perguntas Sobre o Skill ui-design-system

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

O que eu preciso para executar o gerador?

Uma cor de marca em hexadecimal e uma escolha de estilo, passadas diretamente na linha de comando junto com o formato de saída. O arquivo mostra chamadas como uma paleta clássica com saída em CSS, então nada mais precisa ser configurado antes.

Quais formatos de saída posso obter?

JSON é o padrão, e o mesmo script gera propriedades customizadas CSS, variáveis SCSS ou uma visão resumida. Os exemplos redirecionam a saída SCSS para um partial, para que possa ser importado diretamente.

Como funciona a sincronização com o Figma?

Você instala o plugin Tokens Studio e importa o JSON gerado, após o que os tokens sincronizam automaticamente com os estilos do Figma. O mesmo workflow de handoff também abrange integração com React, Tailwind e styled-components.

A qual nível de contraste o trabalho é mantido?

A tabela de referência define tanto AA quanto AAA: AAA exige 7:1 para texto normal e 4.5:1 para texto grande, enquanto AA é a meta mais leve de 4.5:1 e 3:1. Texto grande significa pelo menos 18pt regular ou 14pt bold.

UI Design System

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

Baixe OpenDesign, importe ui-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