design-exploration by yunshu0909/yunshu

用户有一个模糊的想法，想做一个新功能或新模块，但还没想清楚具体要什么。通过结构化的探索流程，帮助用户从模糊想法收敛到明确的设计方案，并产出完整的设计参考文档。

核心原则

不猜，多问 — 没确认范围不出图，没设计规范就问，拿不准就让用户选
ASCII 先行 — 先对齐信息结构和布局逻辑，逻辑对了再投入 HTML
一次多方案 — 批量出 5-8 个方案让用户选方向，不要一个个试
全状态是必须的 — 正常态只是起点，异常态、边界情况、交互反馈必须穷举
决策要落纸 — 对话中确认的每个决策都写进需求总结，不能只存在对话上下文里

输出物

每次探索产出 3 个文件，归档到 设计/v{版本号}-{模块名}/ 目录下：

文件	内容	用途
`需求总结.md`	背景、目标、功能范围、关键决策、技术约束	PRD 阶段的输入，讲清楚"为什么做、做什么"
`{模块名}-设计稿.html`	主界面 HTML mockup	PRD + 前端开发的视觉参考
`{模块名}-全状态设计参考.html`	所有页面状态、Toast、边界情况、交互规则表	前端开发直接对照实现

版本号和模块名由用户决定，必须问用户确认。

工作流程

第 1 步：需求发散与收敛

用户说了模糊想法后，主动追问：

痛点是什么 — 现在遇到了什么问题？为什么想做这个？
核心场景 — 最典型的使用场景是什么？
边界在哪 — 这个版本要做什么？不做什么？

整理成结构化的需求共识：

做什么：
- xxx
- xxx

不做什么：
- xxx

载体：独立应用 / 已有应用的新 Tab / 插件 / ...

禁止：用户说了一句话就开始出图。必须先对齐需求边界。

第 2 步：技术调研（按需）

判断是否需要调研：如果功能涉及外部数据（配置文件、API、第三方系统、文件格式），必须先调研技术约束。如果是纯 UI 功能不涉及外部依赖，跳过。

调研内容：

数据存储位置和格式
现有系统的接口和限制
技术可行性验证

调研结果会直接影响设计方案（比如发现两个工具配置格式不同，决定了界面需要展示"类型"列）。

禁止：跳过调研直接画图，画出来发现技术上实现不了。

第 3 步：ASCII 批量探索

一次出 5-8 个不同思路的 ASCII 布局方案，每个方案包含：

ASCII 布局图
一句话说明核心思路

方案 A：卡片列表 + 工具勾选
┌──────────────────────────────────┐
│ ┌────────────────────────────┐   │
│ │ pencil       [✓] CC [✓] CX│   │
│ └────────────────────────────┘   │
└──────────────────────────────────┘

方案 B：表格视图，一行一个
┌──────────────────────────────────┐
│ 名称       类型   CC    CX      │
│ pencil     stdio  [✓]   [✓]    │
│ github     http   [✓]   [✓]    │
└──────────────────────────────────┘

用户可以：

直接选一个方案
组合多个方案的元素（"B 的结构 + E 的开关风格"）
全部否掉，补充新的方向

禁止：

只出 1-2 个方案（用户没有选择空间）
超过 10 个方案（选择困难）
方案之间差异太小（换汤不换药）

第 4 步：确认设计风格

问用户以下问题：

有没有已有的设计规范？（如 design-system.html）
- 有 → 读取并严格遵循 design tokens（颜色、字号、圆角、间距）
- 没有 → 问风格偏好，或直接出图让用户挑感觉
有没有要参考的已有页面？（外框、导航结构）
- 有 → 读取参考页面，对齐外框样式（如 mac-window、sidebar 布局）
- 没有 → 按独立页面处理
载体形式？
- 已有应用的新页面/Tab → 必须对齐已有页面的外框和导航
- 独立应用 → 自定义外框
- 其他 → 问清楚

禁止：没问就默认使用某个设计规范。

第 5 步：HTML 设计稿

基于选定方案 + 确认的设计风格，输出 HTML mockup：

使用真实数据填充（不用 lorem ipsum）
如有设计规范，严格使用 CSS 变量 / design tokens
如有参考页面，外框结构保持一致

输出后让用户浏览器打开查看，根据反馈微调。微调是具体的小修改（间距、配色、文案），直接执行，不需要重新走方案选择。

第 6 步：全状态覆盖

产出一个完整的全状态设计参考 HTML，固定包含以下内容：

必须覆盖的页面状态

状态	说明
正常态	有数据的标准展示
加载态	数据加载中（spinner + 禁用交互）
空态	没有数据，引导文案
搜索/筛选无结果	有数据但当前条件无匹配
错误态	数据加载失败、文件不存在、格式错误等（按场景拆多个）
部分可用	部分数据源可用、部分失败

必须覆盖的交互反馈

Toast 汇总：所有操作的成功/失败/警告 Toast，包含具体文案
Toast 规则：位置、时长（成功短、错误长）、同时最多显示几条

必须覆盖的边界情况

长文本截断（名称、路径、URL）
大量数据滚动
其他根据具体场景补充

必须包含的交互行为规则表

表格格式，列定义：

触发	用户操作	系统行为	反馈
用户/系统/异常	具体操作	详细的系统处理步骤	Toast/状态变化/界面更新

覆盖所有用户操作和系统行为的完整映射，前端开发直接对照实现。

文档结构

顶部：标题、版本、日期
目录：锚点跳转
每个状态一个 section：标签 + 标题 + 说明 + 预览截面 + 标注
底部：交互行为规则表

禁止：只做正常态就结束。全状态覆盖是本流程的核心交付物。

第 7 步：需求总结 + 归档

按模板（templates/需求总结-模板.md）生成需求总结文档。

将对话中确认的所有决策提取出来，写入"关键决策"部分。这些决策往往散落在对话各处，必须主动收集整理，不能遗漏。

三个文件归档到 设计/v{版本号}-{模块名}/ 目录下。版本号和模块名问用户确认。

设计/v0.11-MCP管理/
├── 需求总结.md
├── mcp-manager-设计稿.html
└── mcp-manager-全状态设计参考.html

过程中的沟通规范

必须问用户的

时机	问什么
第 1 步	痛点、场景、边界（做什么/不做什么）
第 3 步	选哪个方案
第 4 步	有无设计规范、参考页面、载体形式
第 5 步	mockup 效果是否满意，有无微调
第 6 步	全状态覆盖有无遗漏的场景
第 7 步	版本号和模块名

不需要问用户的

事项	直接做
全状态要不要覆盖	必须覆盖，不用问
交互规则表要不要写	必须写，不用问
需求总结要不要输出	必须输出，不用问
Toast 文案	先给出建议，用户不满意再调

AI 绝不应该做的

用户说了一句模糊想法就开始出 HTML
只出一个 ASCII 方案
只做正常态不管异常态
跳过技术调研直接画图（如果涉及外部数据）
把决策留在对话里不写进需求总结
自己编版本号和模块名
没问就默认使用某个设计规范