Design Review

🎨 视觉质量门禁 · 设计预检系统

一套强制性的视觉质量门禁系统,确保UI/组件/页面符合设计原则,通过预检清单和自动化脚本拦截常见问题,适合团队协作与交付验收。

收藏
2.9k
安装
1.3k
版本
1.1.0
CLS 安全扫描中
预计需要 3 分钟...

使用说明

核心用法

design-review 是一个始终激活的核心技能包,作为视觉与前端工作的质量门禁存在。它不依赖特定触发条件,任何涉及UI、组件、页面、布局的任务都应自动应用。

工作流程三阶段

1. 预研阶段 —— 动手前必读

  • 优先查阅项目 guidelines.md 或设计系统文档
  • 研究同类工具(如Linear、Vercel Dashboard、UX Tools等标杆产品)的解决方案
  • 读取 memory/channels/{channel}.md 历史决策,避免重复踩坑

2. 参考文件按需加载

  • 排版工作 → typography.md + spacing.md
  • 色彩/主题 → color.md + anti-patterns.md
  • 交互动效 → motion.md + anti-patterns.md
  • 不确定时 → 至少阅读 spacing + anti-patterns

3. 预飞检查清单(强制)

  • 视觉验证:截图对比参考、使用目标视口
  • 设计审计:间距、色彩克制、排版层级、现有组件复用、交互状态完整性
  • 诚实检查:是否真正完成、是否匹配需求、是否经得起冷评审
  • 自动化脚本:运行 anti-pattern-check.py、state-check.py、accessibility-check.py
  • 证据化交付:截图+参考来源+已知问题+在线演示链接

核心设计哲学

  • "克制即设计" / "间距是第一信号"
  • 排版层级优先于色彩做信息架构
  • 像素级复刻参考后再加入个人想法
  • 现有模式 > 新模式
  • 基础错误无法用抛光弥补

显著优点

| 维度 | 优势 |
|------|------|
| **强制性** | "Always Active" 设计消除遗漏,子代理必须执行后才可标记完成 |
| **系统化** | 从研读到交付的完整闭环,避免碎片化检查 |
| **可扩展** | 模块化参考文件+项目记忆通道,支持团队知识沉淀 |
| **自动化兜底** | 三套Python脚本+CI模板,低成本拦截80%常见错误 |
| **证据驱动** | "诚实检查"和"证据化交付"培养职业习惯 |

局限性与风险

执行层面:高度依赖代理的"自我诚实",Checklist无强制技术约束;若代理跳过诚实检查,质量门禁形同虚设。

规模层面:缺乏设计令牌(Design Token)的代码级集成说明,大型系统需额外工程化。

主观性残留:最终仍需人工评审("Aaron's judgment calls"),无法完全自动化。

适合人群

  • 设计工程师/前端开发者:需建立个人交付标准
  • AI代理工作流设计师:构建多代理协作的质量关卡
  • 设计系统维护者:沉淀团队 anti-patterns 和决策历史
  • 技术负责人:需要低成本CI集成方案保障产出下限

常规风险

  • 形式主义风险:代理勾选Checklist但未真正对比参考
  • 记忆膨胀anti-patterns.md 和 channel memory 缺乏版本管理,可能过度积累
  • 标杆固化:过度依赖Linear/Vercel等特定参考,可能抑制领域创新
  • 脚本误报/漏报:Python脚本基于规则检测,无法覆盖视觉品味类问题

安全提示:本技能本身无代码执行风险,但依赖的 *.py 脚本需人工审计,避免供应链攻击。

Design Review 内容

references文件夹
scripts文件夹
手动下载zip · 33.6 kB
alignment.mdtext/markdown
请选择文件