$ ~/registry/skill/affaan-m-design-system

SKILL

design-system

Name: design-system
Author: affaan-m

帮助生成或审查设计系统，检查视觉一致性并评审样式相关改动。

星标

★ 231,607

来源

GitHub

更新于

2026-07-21

// 安全评估低风险

仅提示词，不执行代码
开源可审计
社区验证· 210.5k

总评

该技能材料显示其本质为 prompt-only 的设计系统/视觉审计说明，无需密钥、未声明远程端点，也未体现自身可直接执行代码或外发数据的机制。结合 GitHub 开源且社区采用度很高，整体属低风险，但仓库许可证与维护状态未明确，供应链透明度仍可继续核验。

凭证密钥低风险

材料明确标注“需要的密钥/环境变量：无”；未见要求 API key、OAuth token 或其他敏感凭证的描述，凭证泄露与滥用面较低。

网络外发低风险

系统检查项与元数据均标注“远程端点 host：无”且为 prompt-only；README 虽提到“via browser MCP”研究竞品，但未声明该技能自身连接任何固定第三方端点或主动外发用户数据。

代码执行低风险

作为 prompt-only 技能，材料未显示其自带本机起进程、执行脚本、安装依赖或调用系统命令的实现；README 中的“scan/generate/review”更像任务说明而非可执行组件本身。

数据访问低风险

描述中涉及扫描代码库、审查 PR、生成 DESIGN.md 与 tokens 文件，但这是预期工作流说明；材料未体现该技能自身拥有独立的文件读写权限或过度授权请求。

来源供应链低风险

来源为 GitHub 开源仓库，且社区采用度极高（约 210k star），这些都是显著的降风险因素；未声明许可证且维护状态未知，会降低治理透明度，但基于现有事实不足以上升为高风险。

安全建议

在实际接入前核验仓库许可证、最近提交时间与 issue/PR 活跃度。
若运行于可访问私有代码库的环境，限制其仅在必要目录和最小权限范围内使用。
如依赖外部 browser MCP 执行竞品研究，单独审计该 MCP 的联网与数据处理行为。
对生成的 DESIGN.md、tokens 和审计结论做人工复核，避免误审或错误修改建议。

审计模型: gpt-5.4 · 2026-06-17

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "design-system" 技能：
1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/design-system/SKILL.md
2. 保存为 ~/.claude/skills/design-system/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 用法示例

生成设计系统规范

输入

请为一个 B2B SaaS 管理后台生成设计系统初稿，包含颜色、字体、间距、按钮、表单、表格、提示组件和暗黑模式建议，并说明每项使用规则。

预期产出

一份结构化的设计系统规范草案，覆盖基础视觉令牌与常用组件规则。

检查界面视觉一致性

输入

请审查以下产品页面设计说明，找出颜色、间距、圆角、字体层级和按钮样式中的不一致之处，并按严重程度排序给出修复建议。

预期产出

一份视觉一致性审查结果，列出问题、影响范围、优先级与修复建议。

评审样式相关 PR

输入

请评审这个前端 PR 中涉及样式的改动，重点检查是否符合现有设计系统、是否引入重复 token、是否破坏响应式布局，并给出可执行的修改建议。

预期产出

一份针对样式改动的 PR 审查意见，包含风险点、不符合规范之处和改进方案。

// 文档

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

affaan-m装→

// 功能相似

MCP 工具

the-designer

输入

请为一个 B2B SaaS 管理后台生成设计系统初稿，包含颜色、字体、间距、按钮、表单、表格、提示组件和暗黑模式建议，并说明每项使用规则。

预期产出

一份结构化的设计系统规范草案，覆盖基础视觉令牌与常用组件规则。

检查界面视觉一致性

输入

请审查以下产品页面设计说明，找出颜色、间距、圆角、字体层级和按钮样式中的不一致之处，并按严重程度排序给出修复建议。

预期产出

一份视觉一致性审查结果，列出问题、影响范围、优先级与修复建议。

评审样式相关 PR

输入

请评审这个前端 PR 中涉及样式的改动，重点检查是否符合现有设计系统、是否引入重复 token、是否破坏响应式布局，并给出可执行的修改建议。

预期产出

一份针对样式改动的 PR 审查意见，包含风险点、不符合规范之处和改进方案。

// 文档

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