使用场景
启动需要设计系统的新项目 审查现有代码库的视觉一致性 在重新设计前——了解现有状况 当界面看起来"不对劲"但无法定位原因时 审查涉及样式修改的PR
启动需要设计系统的新项目审查现有代码库的视觉一致性在重新设计前——了解现有状况
affaan-m/ECC
design-system
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
54CollectingNetwork access
See source evidenceView GitHub source
npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/design-system"Source profileDocumentationCatalog only
Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Limited to facts supported by the pinned source
What the pinned source establishes about design-system
使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/design-system"The pinned source contains about 65 English words and 6 usable sections. That evidence supports a source profile, not a complete guide.
65 source words · 6 usable sections
What the source actually contains
3 verifiable source sections for design-system
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
SKILL.md · 使用场景
工作原理
输出：DESIGN.md + design-tokens.json + design-preview.html
输出：DESIGN.md + design-tokens.json + design-preview.html每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。
模式1：生成设计系统
输出：DESIGN.md + design-tokens.json + design-preview.html
输出：DESIGN.md + design-tokens.json + design-preview.html
Static permission evidence
Inspect the exact source lines that triggered a signal
These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.
Choose a different workflow
When another Skill is the better fit
design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.
Open source detaildesign-system
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
A separate implementation from affaan-m/ECC; compare its source, maintenance signals, and permission requirements.
Open source detailab-testing
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
How do I install design-system?
The source record exposes this install command: npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/design-system". Inspect the command and pinned source before running it.
Which permission-related actions were detected?
Static rules flagged network in the source; the page lists the matching lines and excerpts.
Repository stars
234,327
Repository forks
35,711
Quality
54/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation15/30
Specificity8/25
Maintenance20/20
Trust signals11/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
design-system by affaan-m
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
design-system by affaan-m
Use it for design tasks; the detail page covers purpose, installation, and practical steps.
ab-testing by coreyhaines31
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
churn-prevention by coreyhaines31
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
design-intelligence by event4u-app
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min
设计系统 — 生成与审查视觉系统
使用场景
- 启动需要设计系统的新项目
- 审查现有代码库的视觉一致性
- 在重新设计前——了解现有状况
- 当界面看起来"不对劲"但无法定位原因时
- 审查涉及样式修改的PR
工作原理
模式1：生成设计系统
分析代码库并生成统一的设计系统：
1. 扫描 CSS/Tailwind/styled-components 以查找现有模式
2. 提取：颜色、排版、间距、边框圆角、阴影、断点
3. 研究 3 个竞品网站以获取灵感（通过浏览器 MCP）
4. 提出一套设计令牌（JSON + CSS 自定义属性）
5. 生成 DESIGN.md，说明每个决策的理由
6. 创建一个交互式 HTML 预览页面（自包含，无依赖）
输出：DESIGN.md + design-tokens.json + design-preview.html
模式2：视觉审查
从10个维度对界面进行评分（每项0-10分）：
1. 色彩一致性 — 你使用的是自己的调色板还是随机的十六进制值？
2. 排版层级 — 清晰的 h1 > h2 > h3 > 正文 > 说明文字？
3. 间距节奏 — 一致的尺度（4px/8px/16px）还是随意设置？
4. 组件一致性 — 相似的元素看起来是否相似？
5. 响应式行为 — 在断点处流畅还是混乱？
6. 深色模式 — 完整实现还是半途而废？
7. 动画 — 有目的性还是多余？
8. 无障碍性 — 对比度、焦点状态、触摸目标
9. 信息密度 — 杂乱还是整洁？
10. 细节打磨 — 悬停状态、过渡效果、加载状态、空状态
每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。
模式3：AI生成内容检测
识别通用的AI生成设计模式：
- 到处滥用渐变效果
- 默认采用紫蓝配色
- 毫无意义的"玻璃拟态"卡片
- 不该圆角的地方强行圆角
- 滚动时过度动画效果
- 居中文字搭配默认渐变的通用英雄区
- 毫无个性的无衬线字体堆叠
示例
为SaaS应用生成设计系统：
/design-system generate --style minimal --palette earth-tones
审查现有界面：
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
检测AI生成内容：
/design-system slop-check
- Source repo
- affaan-m/ECC
- Skill path
- docs/zh-CN/skills/design-system/SKILL.md
- Commit SHA
- 4e973d3eaf92
- Repository license
- MIT
- Data collected