Design System

affaan-m/ECC/pi/core/skills/design-system

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775无许可证275K 个星标收录于 2026年10月9日更新于 2026年10月9日仓库4天前更新

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.

仅含说明Design & Creative

AI 生成的概览

从代码库生成或审计设计系统，提取设计令牌并评估视觉一致性。

功能: 分析现有代码库，提取颜色、字体、间距、圆角、阴影和断点，然后以 JSON 和 CSS 自定义属性形式提出设计令牌。它会生成带决策理由的 DESIGN.md、一个自包含的交互式 HTML 预览页、包含 file:line 修复建议的十维度视觉审计，并标记通用的 AI 生成设计模式。该技能仅为说明文档，不附带脚本。
适用场景: 适用于为新项目建立设计系统、在改版前审计现有界面的视觉一致性，或审查涉及样式的拉取请求。
运行要求: 不包含脚本，依赖智能体阅读代码库。竞品调研需要浏览器 MCP，审计模式可针对正在运行的网址（如本地开发服务器）。

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 patterns2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints3. 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 decision6. Create an interactive HTML preview page (self-contained, no deps)

1. Scan CSS/Tailwind/styled-components for existing patterns2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints3. 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 decision6. 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 targets9. Information density — cluttered or clean?10. Polish — hover states, transitions, loading states, empty states

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 targets9. 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

- 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:

Audit existing UI:

Check for AI slop:

来源与署名

来源：affaan-m/ECC位于pi/core/skills/design-system提交ef648e0

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Design System

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

来源与署名

更多来自 affaan-m/ECC 的技能

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design