Menú
使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use after a complex task, failure, or when reviewing what was learned. Teaches how to write growth logs that extract reusable patterns — not diary entries.
Design a goal-oriented agent loop, and review it for the ways loops go wrong — spinning and burning tokens, Goodhart-gaming the verifier, or running a wrong answer to completion. Two actions: (1) WRITE a loop — gate whether to build it, define a machine-decidable goal, pick the loop type, pick a skeleton; (2) REVIEW a loop — run it past five failure modes plus decidability, boundaries, fallback, judge independence, and keep-judgment-with-the-human red lines. Use when designing an autonomous agent loop, or when you already have one and worry it will spin, cheat, or run a wrong answer to the end. Complements the mechanism-layer loop skills (autonomous-loops, continuous-agent-loop) by covering the judgment layer they don't. 中文触发：写 loop、设计 loop、做一个 loop、检查 loop 对不对、loop 体检、loop 会不会跑飞、可判定目标、五个崩法、plan build judge。English triggers: design an agent loop, write a loop, check a loop, loop review, prevent a runaway loop, goal-oriented loop, decidable goal, plan/build/judge.
Stop hook that blocks Claude from finishing until quality checks pass. Detects rationalization patterns (surface text heuristics), stale learning logs (filesystem mtime), and low disk space. Complements self-audit by mechanically enforcing learning capture habits.
React Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.
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.
Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.
| name | design-system |
| description | 使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。 |
| origin | ECC |
分析代码库并生成统一的设计系统：
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