design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
O que ela faz
Esta ferramenta ajuda a criar ou verificar um sistema de design para um site ou aplicativo. Ela extrai as regras visuais (cores, fontes, espaçamentos) do seu código e as organiza, ou avalia a consistência visual do que já existe.
Quando usar
- ✓Ao iniciar um novo projeto e precisar definir as regras visuais.
- ✓Ao querer verificar se um site ou app está visualmente consistente.
- ✓Antes de redesenhar, para entender o que já foi feito.
Exemplo do que pedir para a IA
“Gere um sistema de design para meu site, usando cores mais naturais e um estilo simples.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta analisa seu código para encontrar cores, fontes e espaçamentos. Ela organiza essas informações em um arquivo de regras (design tokens) e cria um exemplo visual para você ver.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add affaan-m/ECC --skill design-systemOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/pi/core/skills/design-system/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Design System — Gere e Audite Sistemas Visuais
Quando Usar
- Iniciando um novo projeto que precisa de um design system
- Auditando um codebase existente para consistência visual
- Antes de um redesenho — entenda o que você tem
- Quando a UI parece "estranha" mas você não consegue identificar o motivo
- Revisando Pull Requests que afetam o estilo
Como Funciona
Modo 1: Gerar Design System
Analisa seu codebase e gera um design system coeso:
1. Scan CSS/Tailwind/styled-components for existing patterns
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
3. Research 3 competitor sites for inspiration (via browser MCP)
4. Propose a design token set (JSON + CSS custom properties)
5. Generate DESIGN.md with rationale for each decision
6. Create an interactive HTML preview page (self-contained, no deps)
Saída: DESIGN.md + design-tokens.json + design-preview.html
Modo 2: Auditoria Visual
Pontua sua UI em 10 dimensões (0-10 cada):
1. Color consistency — are you using your palette or random hex values?
2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?
3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?
4. Component consistency — do similar elements look similar?
5. Responsive behavior — fluid or broken at breakpoints?
6. Dark mode — complete or half-done?
7. Animation — purposeful or gratuitous?
8. Accessibility — contrast ratios, focus states, touch targets
9. Information density — cluttered or clean?
10. Polish — hover states, transitions, loading states, empty states
Cada dimensão recebe uma pontuação, exemplos específicos e uma correção com arquivo:linha exatos.
Modo 3: Detecção de "Slop" de IA
Identifica padrões de design genéricos gerados por IA:
- Gratuitous gradients on everything
- Purple-to-blue defaults
- "Glass morphism" cards with no purpose
- Rounded corners on things that shouldn't be rounded
- Excessive animations on scroll
- Generic hero with centered text over stock gradient
- Sans-serif font stack with no personality
Exemplos
Gerar para um aplicativo SaaS:
/design-system generate --style minimal --palette earth-tones
Auditar UI existente:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
Verificar "slop" de IA:
/design-system slop-check
Perguntas frequentes
O que são 'design tokens'?
São os blocos de construção básicos do design, como as cores exatas, os tamanhos de fonte e os espaçamentos usados no seu projeto.
O que significa 'auditar a consistência visual'?
Significa verificar se todos os elementos visuais do seu site ou app seguem as mesmas regras, para que tudo pareça harmonioso e profissional.
O que é 'AI slop'?
São padrões de design genéricos e sem propósito que às vezes aparecem quando se usa inteligência artificial para criar interfaces, como gradientes exagerados ou cantos muito arredondados.
Detalhes
Descrição original do autor
Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or rev
repo: affaan-m/ECC
Popularidade
- Estrelas no GitHub
- 280 mil
- Posição no ranking
- #41
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
agent-architecture-audit
Faz seu agente verificar se tudo está funcionando corretamente. Ele encontra e conserta problemas em sistemas de IA, garantindo que funcionem como esperado.
affaan-m/ECC
agent-eval
Ajuda seu agente a comparar diferentes ferramentas de programação de IA. Ele mede qual é mais rápido, barato e confiável para realizar tarefas específicas.
affaan-m/ECC
agent-harness-construction
Faz seu agente entender melhor como realizar tarefas. Ele otimiza as ferramentas e instruções que o agente usa para aumentar suas chances de sucesso.
affaan-m/ECC
Skills parecidas
frontend-design
Orienta seu agente na criação de interfaces visuais únicas e intencionais. Ajuda a definir a direção estética e a escolher tipografia.
anthropics/skills
paperclip-capsules
Ajuda seu agente a criar visuais para 'cápsulas'. Isso inclui arte para agentes, status e identificação visual.
paperclipai/paperclip
wireframe
Faz seu agente desenhar telas de forma simples. É útil para planejar o visual de aplicativos antes de criá-los.
paperclipai/paperclip