Design Skill 是一个仓库本地的设计治理工作流,核心产物是根目录下的 DESIGN.md 文件。它被定位为持续维护的设计简报,而不是像素匹配循环或一次性评审。其共享的操作、委派、状态、钩子、团队、取消与验证不变量位于 templates/AGENTS.md,应遵循该来源而非在此重复。
用途
当产品、UX、前端或设计系统决策需要仓库本地的唯一可信来源时使用。当某个功能在进入设计通道或实现之前需要设计简报时使用。当已有 UI、资产、截图或约束需要可执行的设计摘要时使用。不适用于视觉参考实现匹配(应使用 $visual-ralph)、仅做截图对比,或没有面向用户设计影响的后端与基础设施工作。
与 $visual-ralph 的关系
$design 在 DESIGN.md 中负责产品目标、用户、信息架构、视觉语言、组件、无障碍、约束与开放问题。$visual-ralph 负责依据已批准的视觉参考或实时 URL 基线进行实现、给出可度量的判定与像素差异证据。两者都需要时先运行 $design;DESIGN.md 支持但不替代视觉判定目标。
工作流程
-
发现本地证据:检查并引用已有的 DESIGN.md、设计/UX/前端文档、README/规格/issue、路由/页面/布局/组件/story、主题与 token 文件、资产、截图/原型、Storybook 或 Playwright 基线,以及无障碍/响应式/i18n/平台约束。区分观察与推断,记录缺失的证据。
-
仅针对缺失上下文进行访谈:只就仓库无法解决的缺口提出简洁问题,例如用户/任务、目标/非目标、品牌个性与禁止的美学、主要流程、无障碍/设备/浏览器目标,或不可用的资产/参考。若无法获得答案,记录明确的假设与开放问题,而不是阻塞。
-
创建或刷新 DESIGN.md:保留有用内容,移除矛盾,标记未知项,保持决策可执行。根文件必须包含以下章节:Design(Source of truth、Status(Draft | Active | Needs refresh)、日期、产品界面、已审查证据);Brand(个性、信任信号、避免项);Product goals(目标、非目标、成功信号);Personas and jobs(主要用户画像、用户任务、使用情境);Information architecture(导航、路由/屏幕、内容层级);Design principles(原则与权衡);Visual language(颜色、排版、间距、形状/高度、动效、图像/图标);Components(现有/新组件、变体/状态、token 归属);Accessibility(目标标准、键盘/焦点、对比度、语义、减少动效/感官关注);Responsive behavior(断点/设备、布局适配、触摸/悬停差异);Interaction states(加载、空、错误、成功、禁用、离线/慢网络等适用情形);Content voice(语气、术语、微文案规则);Implementation constraints(框架/样式、token、性能、兼容性、测试/截图预期);Open questions([ ] 问题、负责人与影响)。
-
应用契约:在做出 UI 决策前,引用相关 DESIGN.md 章节,复用已记录的组件/token,当实现暴露矛盾时更新文件或添加开放问题。不要发明并行的设计系统层。
-
交接:对于常规前端工作,提供相关章节、仓库证据与验收标准。对于视觉参考、图像或实时 URL 匹配,将已批准的基线交接给 $visual-ralph,并说明 DESIGN.md 仅作为支持性上下文。
证据与完成条件
仅当设计文档/资产/组件/截图已被检查或记录为缺失;缺失上下文已被回答、假设或列出;根 DESIGN.md 包含所有必需章节;建议引用了它;且任何 Visual Ralph 交接与设计治理清晰分离时,才算完成。
任务:{{ARGUMENTS}}