ui-design-pipeline

UI Design Pipeline

本 skill 把复杂 UI 需求变成可执行、可评估、可回流的设计链路。它不替代项目 UI 规范、位图生图流程或前端实现；它负责在这些流程前锁定“做什么、为什么这样做、按什么验收”。

使用场景

使用本 skill：

• 新建或重做复杂页面、dashboard、游戏 Board、核心面板或主界面。
• 用户要求设计稿、视觉方向、多方案、先规划 UI、商业级或成熟产品级体验。
• UI 反复出现同类问题：状态缺失、对象职责混乱、模板味、素材没用、布局不可理解。
• 实现前需要沉淀视觉规格、信息架构、交互状态和验收标准。

不单独使用：

• 单个按钮、间距、文案或小样式修复。
• 用户只要求修 bug，且 UI 设计合同已锁定。
• 用户明确要求直接实现，且已有批准设计合同。

交付形态裁定

先裁定用户要的交付物：

• Open Design artifact：可编辑 HTML/CSS/JS 设计稿；导出截图只是验收证据，不是图片模型生成结果。
• 位图 / 生图设计稿：用户明确要生图、视觉稿、图片模型，或项目规则默认位图稿时使用。
• 前端实现：用户已批准设计并明确进入实现时才做。
• 文字 UI 设计：用户要求“先出 UI 设计，我看过再出设计稿/实现”时使用。

用户要“设计稿 / 视觉稿 / Open Design 稿 / 先看图”时，当前停在设计稿候选；未获人工批准前，不启动真实页面、不写前端、不跑实现 E2E，也不用运行页截图反推设计通过。

用户明确说“使用 Open Design / OD / opendesign，不要生图”时，走 Open Design artifact；不得调用 media generate，也不得把 media provider 问题当 artifact 阻塞。

开始前锁定

任何出图、写 brief、做 HTML 预览或实现前，先锁四项：

1. 问题对象：哪个页面、组件、游戏、路由或设计稿。
2. 真相来源：用户素材、规则、数据、截图、Figma、设计系统、现有页面或项目规范。
3. 目标入口 / 环境：设计稿、真实页面、桌面端、移动端、项目 workflow 或通用 skill。
4. 验收口径：用户批准、evaluator、截图复看、真实页面 E2E 或项目门禁。

缺任一项，只能补证据或问最小问题。

设计前置包

UI 依赖规则书、业务数据、用户素材、地图、棋盘、卡牌、物理配件、产品截图或其它领域真相源时，设计本身也受前置门禁约束。

前置包至少包含：

• 本轮读过的真相源和读取证据。
• 三条以上会改变画面的结论。
• 对象职责表：对象是什么、规则职责、何时操作/检视、隐藏信息边界、是否只是参考来源。
• 规则/数据/素材结论 -> 影响的主体 -> 设计决策 / 禁止项。
• 素材账本：来源、路径或输入文件、状态、画面职责、允许替代方式。
• 当前玩家任务：现在要解决什么、下一次点击什么、点击后发生什么、取消/放弃路径是什么。
• 饱和状态预算：主舞台、候选集合、资源读数、结果反馈、溢出策略和让位顺序。

不能只做素材检索。只找到文件名、变量名、atlas frame、截图相似物或 CardID，不算领域理解完成。

设计不变量

• 真实素材必须进入图像输入、拼接基底、reference sheet、atlas crop 或运行时渲染来源，并在画面承担对应职责。只写路径、prompt 点名或把素材缩成角标，不算使用素材。
• reference-only 素材只帮助推导比例、颜色、规则或细节，不得在最终主界面作为常驻主体复现。
• 动态读数可用 approved-programmatic-runtime-ui，但必须说明规则来源、对象语义和不替代物理主体。
• 可直接点击的真实对象，应优先由对象本体承接动作：进入模式、合法候选高亮、玩家直选对象、结算或有依据的确认。
• 代理面板、目标摘要、文字按钮、编号点和问号占位只在对象不可见、对象过多、无障碍入口或规则需要二次确认时出现。
• 当前结算主体必须靠近来源、目标或动作链；不能默认降到边栏、日志、工具栏或摘要区。
• 背景底图不是布局排斥体。先区分必须保护的规则热区与可被 overlay 覆盖的低权重纹理区。
• 当前可支配对象必须可读。候选卡、单位、物品、资源和行动入口不能缩成只能靠猜的缩略图。
• 大集合可降权为抽屉、分页、边缘入口或焦点预览，但入口必须让玩家知道还有多少可用对象、如何切换或展开。
• 公开归档默认是可回看入口，不常驻展开完整清单；隐藏信息、公开归档和当前候选必须先裁定再设计。
• 卡面或物件本体已经清楚印刷的信息，不机械复写成 UI chip；看不清时应放大、焦点预览或详情检视。
• 确认 / 取消 / 下一步按钮必须有规则或真实交互状态授权；无可撤销选择、无分支、无提交风险时，不为完整感造常驻确认按钮。