方案级设计，七维质量评分
稳定输出高质量、完整的前端方案级规格。不输出风格拼贴式随机设计，不以单纯视觉表达替代可实施方案。面向 React/Vue 项目，双模式治理确保设计质量收敛到可发布标准。纯 Markdown 参考文档，无运行时脚本。
FEATURES
创意探索、方向发散、方案对比。允许多方案并行和不同视觉语言尝试，但不得直接给出"可发布"结论。
收敛为唯一主方案。备选方案不超过 2 个，必须说明拒绝原因。强制七维评分与阻断规则。
目标一致性、信息架构完整性、交互完整性、视觉系统一致性、工程可实施性、可访问性与性能、安全与可观测性。
DesignGoalSpec、UXArchitectureSpec、UIBlueprintSpec、EngineeringHandoffSpec、QualityGateReport、ReleaseDecision。
最终交付必须包含状态完整性表、组件树与状态边界、可访问性检查点、性能预算、风险等级。
每维 0-4 分，通过线 ≥ 85 分。任一维 < 2 分或存在 P0/P1 问题时阻断发布。
对 Agent 说"帮我设计订单列表页"，Agent 自动进入 Explore → Production 流程：
> "设计一个订单列表页"
Agent 执行:
1. Explore 模式 — 提出 2-3 个方案方向，对比信息架构
2. 用户选择方向后进入 Production 模式
3. 收敛为唯一主方案 + ≤2 个备选
4. 执行七维评分，生成 QualityGateReport
5. 输出 EngineeringHandoffSpec（可直接交付开发）如果方向已经明确："按这个 wireframe 出 Production 级的设计规格"
Agent 跳过 Explore，直接输出主方案 + 七维评分 + 工程交接文档。
Agent 根据项目技术栈自动选择对应的 playbook：
react-handoff-playbook.mdvue-handoff-playbook.md交接文档中的组件结构、状态管理方案、路由设计将匹配对应框架。
| 维度 | 评分要素 |
|---|---|
| 目标一致性 | 设计目标与用户需求的吻合度，功能覆盖完整性 |
| 信息架构完整性 | 层级清晰度、导航效率、内容组织合理性 |
| 交互完整性 | 状态完整性（loading/empty/error/success/permission）、动效目的性 |
| 视觉系统一致性 | Token 系统覆盖率、间距规律性、色彩和谐度、字体层级 |
| 工程可实施性 | 组件粒度、状态管理清晰度、API 契约完备性 |
| 可访问性与性能 | WCAG 合规、键盘导航、首屏策略、骨架屏覆盖 |
| 安全与可观测性 | 边界 case 覆盖、数据安全、监控点位、回退方案 |
| 模板 | 说明 |
|---|---|
| DesignGoalSpec | 设计目标与约束定义 |
| UXArchitectureSpec | 信息架构与导航结构 |
| UIBlueprintSpec | 视觉系统与组件规格 |
| EngineeringHandoffSpec | 开发交接文档（组件树、状态、API） |
| QualityGateReport | 七维评分报告 |
| ReleaseDecision | 发布决策与风险评估 |
每维 0-4 分，总分折算为 100。通过线 ≥ 85。任一维 < 2 或存在 P0/P1 时阻断发布。
INSTALL