Back to Details

design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

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
  • 启动需要设计系统的新项目
  • 审核现有代码库的视觉一致性
  • 重设计前——梳理现有设计资产
  • 当UI看起来“不对劲”但无法明确原因时
  • 审查涉及样式的PR

How It Works

工作原理

Mode 1: Generate Design System

模式1：生成设计系统

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
分析你的代码库并生成一套连贯的设计系统：
1. 扫描CSS/Tailwind/styled-components中的现有模式
2. 提取：颜色、排版、间距、边框圆角、阴影、断点
3. 通过浏览器MCP研究3个竞品网站获取灵感
4. 提出设计令牌集合（JSON + CSS自定义属性）
5. 生成包含各决策依据的DESIGN.md文档
6. 创建独立的交互式HTML预览页面（无依赖）
输出：
DESIGN.md
+ 
design-tokens.json
+ 
design-preview.html

Mode 2: Visual Audit

模式2：视觉审核

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.
从10个维度为你的UI打分（每项0-10分）：
1. 颜色一致性——是否使用统一调色板还是随机十六进制值？
2. 排版层级——是否清晰区分h1 > h2 > h3 > 正文 > 说明文字？
3. 间距节奏——是否采用统一比例（4px/8px/16px）还是随意设置？
4. 组件一致性——相似元素的外观是否统一？
5. 响应式表现——断点处布局流畅还是错乱？
6. 深色模式——是否完整实现还是半完成状态？
7. 动画效果——是否有明确用途还是多余花哨？
8. 可访问性——对比度、焦点状态、触摸目标是否合规？
9. 信息密度——界面是杂乱还是简洁？
10. 细节打磨——悬停状态、过渡效果、加载状态、空状态是否完善？
每个维度都会给出分数、具体示例，以及包含精确文件:行号的修复方案。

Mode 3: AI Slop Detection

模式3：AI冗余设计检测

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
识别通用AI生成的设计模式：
- 所有元素都添加多余渐变
- 默认使用紫蓝配色
- 无实际用途的“玻璃态”卡片
- 不该圆角的元素添加圆角
- 滚动时的过度动画
- 通用英雄区：居中文字叠加渐变背景图
- 无特色的无衬线字体栈

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
为SaaS应用生成设计系统：
/design-system generate --style minimal --palette earth-tones
审核现有UI：
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
检测AI冗余设计：
/design-system slop-check