affaan-m/design-system
docs/zh-CN/skills/design-system/SKILL.md
使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
$ install --global
skillsauthnpx skillsauth add affaan-m/everything-claude-code design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 3:53 AM138.7s1 file scanned
SKILL.md
- name:
- design-system
- description:
- 使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
- origin:
- ECC
设计系统 — 生成与审查视觉系统
使用场景
- 启动需要设计系统的新项目
- 审查现有代码库的视觉一致性
- 在重新设计前——了解现有状况
- 当界面看起来"不对劲"但无法定位原因时
- 审查涉及样式修改的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
Related Skills
affaan-m/unified-memory
development
VerifiedTrustedCommunity
Share durable, inspectable context and handoffs between Claude, Codex, Hermes, Cursor, OpenCode, and other agents through the local ECC Memory Vault. Use when an agent must save work state, transfer context, resume another agent's task, or search shared project knowledge.
234,238SKILL.mdUpdated Jul 28, 2026
affaan-m/contract-first
development
VerifiedTrustedCommunity
Use when multiple consumers and providers must evolve an API or event schema without field drift, integration surprises, or one side silently redefining the interface.
234,238SKILL.mdUpdated Jul 28, 2026
affaan-m/ito-compute
tools
VerifiedTrustedCommunity
Query live GPU inventory, submit an authenticated Itô fixed-rate RFQ, inspect RFQ or procurement status, and run explicitly gated node qualification through the separately installed canonical CLI. Use when a user asks to find H100/H200 capacity, request a fixed compute rate, check Itô compute status, or validate GPU nodes.
234,238SKILL.mdUpdated Jul 24, 2026
affaan-m/continuous-learning-v2
data-ai
VerifiedTrustedCommunity
Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents. v2.1 adds project-scoped instincts to prevent cross-project contamination.
234,238SKILL.mdUpdated Mar 27, 2026