Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
.claude/skills/affaan-m-design-system/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 10% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 1211% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 22% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 61% | 0% |
| case-13 | ✗→✓ | ▲ Improved | -7% | 0% |
分析代码库并生成统一的设计系统：
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
从10个维度对界面进行评分（每项0-10分）：
1. 色彩一致性 — 你使用的是自己的调色板还是随机的十六进制值？
2. 排版层级 — 清晰的 h1 > h2 > h3 > 正文 > 说明文字？
3. 间距节奏 — 一致的尺度（4px/8px/16px）还是随意设置？
4. 组件一致性 — 相似的元素看起来是否相似？
5. 响应式行为 — 在断点处流畅还是混乱？
6. 深色模式 — 完整实现还是半途而废？
7. 动画 — 有目的性还是多余？
8. 无障碍性 — 对比度、焦点状态、触摸目标
9. 信息密度 — 杂乱还是整洁？
10. 细节打磨 — 悬停状态、过渡效果、加载状态、空状态每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。
识别通用的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| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 27,852 | 27,846 | -0% | 1 | 1 | 0% | 6,200 | 6,846 | +10% | 0 | 0 | — |
case-02 | fail→pass | 7,718 | 15,926 | +106% | 1 | 1 | 0% | 281 | 3,685 | +1211% | 0 | 0 | — |
case-03 | fail→pass | 8,702 | 6,911 | -21% | 1 | 1 | 0% | 1,505 | 1,843 | +22% | 0 | 0 | — |
case-04 | pass→pass | 9,428 | 11,122 | +18% | 1 | 1 | 0% | 1,576 | 2,470 | +57% | 0 | 0 | — |
case-05 | pass→pass | 13,454 | 26,577 | +98% | 1 | 1 | 0% | 2,251 | 2,816 | +25% | 0 | 0 | — |
case-06 | fail→pass | 4,744 | 2,731 | -42% | 1 | 1 | 0% | 686 | 1,103 | +61% | 0 | 0 | — |
case-07 | pass→pass | 17,645 | 15,418 | -13% | 1 | 1 | 0% | 2,573 | 2,961 | +15% | 0 | 0 | — |
case-08 | pass→pass | 15,599 | 18,596 | +19% | 1 | 1 | 0% | 2,470 | 3,889 | +57% | 0 | 0 | — |
case-09 | pass→pass | 17,500 | 15,993 | -9% | 1 | 1 | 0% | 2,837 | 3,408 | +20% | 0 | 0 | — |
case-10 | pass→pass | 14,520 | 9,824 | -32% | 1 | 1 | 0% | 2,298 | 1,783 | -22% | 0 | 0 | — |
case-15 | pass→pass | 10,772 | 4,084 | -62% | 1 | 1 | 0% | 1,553 | 1,256 | -19% | 0 | 0 | — |
case-11 | pass→pass | 10,419 | 12,390 | +19% | 1 | 1 | 0% | 1,514 | 2,528 | +67% | 0 | 0 | — |
case-12 | pass→pass | 13,434 | 13,382 | -0% | 1 | 1 | 0% | 2,057 | 2,694 | +31% | 0 | 0 | — |
case-13 | fail→pass | 13,658 | 8,794 | -36% | 1 | 1 | 0% | 2,134 | 1,974 | -7% | 0 | 0 | — |
case-14 | pass→pass | 13,558 | 12,335 | -9% | 1 | 1 | 0% | 1,969 | 2,490 | +26% | 0 | 0 | — |
case-16 | fail→pass | 10,452 | 1,817 | -83% | 1 | 1 | 0% | 1,516 | 873 | -42% | 0 | 0 | — |
case-17 | fail→pass | 10,098 | 5,884 | -42% | 1 | 1 | 0% | 1,988 | 895 | -55% | 0 | 0 | — |
case-18 | fail→pass | 7,302 | 1,903 | -74% | 1 | 1 | 0% | 1,199 | 906 | -24% | 0 | 0 | — |
case-19 | fail→pass | 18,145 | 16,250 | -10% | 1 | 1 | 0% | 2,817 | 3,292 | +17% | 0 | 0 | — |
case-20 | pass→pass | 13,840 | 13,970 | +1% | 1 | 1 | 0% | 2,858 | 3,292 | +15% | 0 | 0 | — |
case-21 | pass→pass | 8,591 | 6,682 | -22% | 1 | 1 | 0% | 1,451 | 1,655 | +14% | 0 | 0 | — |
case-22 | pass→pass | 3,607 | 3,332 | -8% | 1 | 1 | 0% | 669 | 1,291 | +93% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +41 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.