design-system

提供三种模式：从现有代码库扫描 CSS、Tailwind 或样式组件中的颜色、字体、间距、圆角、阴影等模式，输出 DESIGN.md、design-tokens.json 和自包含的交互式 HTML 预览；对现有界面按颜色一致性、字体层级、间距节奏等 10 个维度打分，并给出定位到文件行的修复建议；识别渐变滥用、紫蓝默认色等通用 AI 生成风格套路。

affaan-m

热度 0.00

最近更新 2026-10-18 16:18:19

分类：创作依赖：读写文件 / 联网浏览搜索 / MCP 服务应用场景：UI 原型 / 品牌素材 / 代码审查 / 报告撰写

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add affaan-m/ecc/design-system

Metadata

name: design-system
description: 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 reviewing a PR that touches styling.
metadata: {"origin":"ECC"}

Design System — Generate & Audit Visual Systems

When to Use

Starting a new project that needs a design system
Auditing an existing codebase for visual consistency
Before a redesign — understand what you have
When the UI looks "off" but you can't pinpoint why
Reviewing PRs that touch styling

How It Works

Mode 1: Generate Design System

Analyzes your codebase and generates a cohesive design system:

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)

Output: DESIGN.md + design-tokens.json + design-preview.html

Mode 2: Visual Audit

Scores your UI across 10 dimensions (0-10 each):

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

Each dimension gets a score, specific examples, and a fix with exact file:line.

Mode 3: AI Slop Detection

Identifies generic AI-generated design patterns:

- 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

Examples

Generate for a SaaS app:

/design-system generate --style minimal --palette earth-tones

Audit existing UI:

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

Check for AI slop:

/design-system slop-check