SKILL

design-system

从现有代码库生成设计系统，或审计其视觉一致性：提取颜色、字体、间距和阴影等设计变量，写入 design-tokens.json 和 CSS 自定义属性，提供 DESIGN.md 中的设计理由及交互式 HTML 预览，按 10 个维度评估 UI，并标出模板化 AI 设计痕迹。适用于建立设计系统、改版前审计视觉一致性，或审查涉及样式的 PR。

译文已校对

查看英文原文

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.

适用对象：设计与内容创作。自动收录 · 待核查。

原作者说明节选

从固定版本的 SKILL.md 提取，保留原文语言。以下内容属于作者说明，本站尚未验证安装、兼容或运行结果。

查看英文原文

原文涵盖的主题

Design System — Generate & Audit Visual Systems
When to Use
How It Works
Mode 1: Generate Design System
Mode 2: Visual Audit
Mode 3: AI Slop Detection
Examples

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 Analyzes your codebase and generates a cohesive design system: Output: DESIGN.md + design-tokens.json + design-preview.html Scores your UI across 10 dimensions (0-10 each): Each dimension gets a score, specific examples, and a fix with exact file:line. Identifies generic AI-generated design patterns: Generate for a SaaS app: Audit existing UI: Check for AI slop:

来源仓库: affaan-m/ECC
源文件: pi/core/skills/design-system/SKILL.md
固定版本: d2ef2680594f9a17526a6e1a2e18b3d242c5d17b

阅读完整原作者说明 ↗