SkillDesignSíntese
Padrões de Design System
Constrói design systems de produção: design tokens, componentes, primitivos, governança e estratégia de adoção. Use ao criar ou auditar um design system.
Ações
PerfilDesigner
ProfundidadeAlta
IdiomaInglês (skill original)
Objetivo
Em uma frase.
Estruturar um design system de produção a partir de design tokens, com componentes em camadas, modelo de governança claro e uma estratégia realista de adoção, evitando a deriva (drift) e a explosão de tokens que tornam o sistema inútil.
Aplicação
Quando
faz sentido.
Usar
- Construir um design system do zero ou evoluir um kit de componentes artesanal para um sistema de verdade.
- Auditar um sistema existente que sofreu drift (tokens duplicados, governança confusa, adoção estagnada).
- Decidir investir em tokens, primitivos ou governança antes que o roadmap dependa disso.
- Integrar um novo time a um sistema existente, fornecendo o modelo canônico em camadas.
Não usar
- Um único produto, um único squad, com menos de 6 meses — o overhead supera o benefício; use uma pequena biblioteca de componentes.
- Atualização puramente visual, sem trabalho de componente ou governança — use uma skill de brand guidelines.
- Ajuda de implementação de um componente específico — use uma skill de build de componente.
Prompt
Instruções
para a IA.
### Tokens como fundação
Comece pelos design tokens. Use tokens de cor semânticos (success, danger), não literais (red, green); tokens de tipografia (tamanhos, pesos, line heights); tokens de espaçamento (4/8/12/16/24/32); e tokens de raio, sombra e motion. Organize em camadas: valores brutos (white, #FFF) → tokens de referência (color-neutral-0) → tokens semânticos (color-bg-base) → componentes. Componentes referenciam o semântico, nunca o valor cru.
### Componentes e governança
Estruture os componentes em primitivos (Button, Input, Stack, Box), composições (Form, Card, Modal) e padrões (fluxo de login, página de configurações). Na governança, um time é dono do sistema e os demais consomem; contribuições externas são propostas e curadas pelo time-dono, com versionamento semver por pacote.
### Adoção e tooling
Não force migração da noite para o dia: dê um guia claro de migração, defina data de aposentadoria para padrões antigos e meça o percentual de UI construída com o sistema. Apoie-se em bibliotecas do Figma (lado do design), Storybook (desenvolvimento), pipeline de tokens (Style Dictionary, Theo) e regressão visual (Chromatic, Percy).
### Anti-padrões
Evite tokens granulares demais (mais de 1000, que ninguém usa) ou literais demais ("blue-300" em vez de "color-info"), preferências de um único designer hardcoded como sistema, ausência de governança (que gera drift em um trimestre) e construir o sistema à frente do produto, sem consumidor real.
Comece pelos design tokens. Use tokens de cor semânticos (success, danger), não literais (red, green); tokens de tipografia (tamanhos, pesos, line heights); tokens de espaçamento (4/8/12/16/24/32); e tokens de raio, sombra e motion. Organize em camadas: valores brutos (white, #FFF) → tokens de referência (color-neutral-0) → tokens semânticos (color-bg-base) → componentes. Componentes referenciam o semântico, nunca o valor cru.
### Componentes e governança
Estruture os componentes em primitivos (Button, Input, Stack, Box), composições (Form, Card, Modal) e padrões (fluxo de login, página de configurações). Na governança, um time é dono do sistema e os demais consomem; contribuições externas são propostas e curadas pelo time-dono, com versionamento semver por pacote.
### Adoção e tooling
Não force migração da noite para o dia: dê um guia claro de migração, defina data de aposentadoria para padrões antigos e meça o percentual de UI construída com o sistema. Apoie-se em bibliotecas do Figma (lado do design), Storybook (desenvolvimento), pipeline de tokens (Style Dictionary, Theo) e regressão visual (Chromatic, Percy).
### Anti-padrões
Evite tokens granulares demais (mais de 1000, que ninguém usa) ou literais demais ("blue-300" em vez de "color-info"), preferências de um único designer hardcoded como sistema, ausência de governança (que gera drift em um trimestre) e construir o sistema à frente do produto, sem consumidor real.
Constelação
Onde
ela vive.
Bundles que incluem
Execução
Como usar
com IA.
- 01Copie a skill (botão "Copiar skill para IA", no topo): o texto copiado já é a skill completa, não um resumo.
- 02Abra o Claude ou Claude Code e cole — a IA recebe todas as instruções e fica pronta para a tarefa.
- 03Prefere usar como arquivo reutilizável? Baixe o .zip e coloque o
SKILL.mdem.claude/skills/(Claude Code) ou anexe o arquivo no Claude (claude.ai).