Source profileQuality 54/100

affaan-m/ECC/docs/zh-CN/skills/design-system/SKILL.md

design-system

Use it for design tasks; the detail page covers purpose, installation, and practical steps.

Source repository stars
234,327
Declared platforms
0
Static risk flags
1
Last source update
2026-07-27
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/affaan-m/ECC --skill "docs/zh-CN/skills/design-system"
    Safe inspection promptEditorial

    Inspect the Agent Skill "design-system" from https://github.com/affaan-m/ECC/blob/4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38/docs/zh-CN/skills/design-system/SKILL.md at commit 4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      使用场景

      启动需要设计系统的新项目 审查现有代码库的视觉一致性 在重新设计前——了解现有状况 当界面看起来"不对劲"但无法定位原因时 审查涉及样式修改的PR

      启动需要设计系统的新项目审查现有代码库的视觉一致性在重新设计前——了解现有状况
    2. 02

      工作原理

      输出：DESIGN.md + design-tokens.json + design-preview.html

      输出：DESIGN.md + design-tokens.json + design-preview.html每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。
    3. 03

      模式1：生成设计系统

      输出：DESIGN.md + design-tokens.json + design-preview.html

      输出：DESIGN.md + design-tokens.json + design-preview.html

    Permission review

    Static risk signals and limitations

    Network access

    medium · line 72

    The documentation includes network, browsing, or remote request actions.

    /design-system audit --url http://localhost:3000 --pages / /pricing /docs

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score54/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars234,327SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guidecatalog recordEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    affaan-m/ECC
    Skill path
    docs/zh-CN/skills/design-system/SKILL.md
    Commit
    4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38
    License
    MIT
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

    设计系统 — 生成与审查视觉系统

    使用场景

    • 启动需要设计系统的新项目
    • 审查现有代码库的视觉一致性
    • 在重新设计前——了解现有状况
    • 当界面看起来"不对劲"但无法定位原因时
    • 审查涉及样式修改的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

    Alternatives

    Compare before choosing

    Computed 74234,327

    affaan-m/ECC

    design-system

    Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.

    2026-07-270 platforms
    Computed 53234,327

    affaan-m/ECC

    design-system

    Use it for design tasks; the detail page covers purpose, installation, and practical steps.

    2026-07-270 platforms
    Computed 10042,015

    coreyhaines31/marketingskills

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

    2026-07-270 platforms
    Computed 10042,015

    coreyhaines31/marketingskills

    churn-prevention

    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

    2026-07-270 platforms