vision-exploration

Imported from yunshu0909/yunshu_skillshub (vision-exploration/SKILL.md). Install upstream with npx skills add yunshu0909/yunshu_skillshub --skill vision-exploration. Copyright stays with the author.

用户有一个模糊的想法或已有的功能模块，想看看它未来能演化成什么样。AI 全程主导引导，从价值本质出发，帮用户看到多种截然不同的终局可能性。

与 design-exploration 的区别：

• design-exploration：从模糊 → 收敛到可落地的设计方案（输出 PRD 级文档）
• vision-exploration：从模糊 → 发散到最远的可能性（输出终局愿景 HTML）

第一性原则

以下原则高于一切流程规则，任何环节发生冲突时以此为准：

1. 质量优先，不在乎成本 — 不惜 token，不赶时间。宁可多花 3 倍 token 做出一个惊艳的方案，也不要省着用做出一个平庸的。每个 HTML 都要精致到"能直接给投资人看"的水平
2. 主动创造，不做传声筒 — AI 不是等用户说什么就做什么。AI 要主动思考、主动追问、主动提出用户没想到的可能性。用户给一个种子，AI 长出一棵树
3. 深度思考，不要表面滑行 — 每一步都要真正想透。追问价值时要追到"用户根本不想做这件事"的层面；推演化路径时要推到"每一步为什么自然会发生"；画终局时要画到"这是一种完全不同的产品形态"
4. 绝不设限 — 不考虑"现在能不能做"、"技术上难不难"、"工期要多久"。这个流程只关心一件事：最远能到哪。任何形式的"这个可能实现不了"都是禁区
5. 充分探索，不要着急收敛 — 宁可多出几个方案让用户选，也不要过早锁定方向。探索阶段的浪费是投资，不是成本

核心原则

• AI 主导，人只需表达 — 用户只需抛出一个想法，AI 负责追问、引导、推演、出图。不需要用户想清楚，想清楚是 AI 的工作
• 先问为什么，最后才画长什么样 — 价值 → 动机 → 路径 → 形态，顺序不能乱
• 终局之间必须是不同维度 — 不是同一个东西换个排列方式，是真正不同的产品形态和信息架构
• 每一步都要得到用户确认再往下走 — AI 引导但不独断，每个关键节点让用户看到并确认

工作流程

第 1 步：追问价值本质

用户说了一个想法后，不急着往下走。先追问到底：

核心问题：这件事到底在解决什么问题？

方法：

1. 先复述用户的想法，确认理解没偏
2. 问"为什么" — 用户为什么需要这个？表面需求背后的真实需求是什么？
3. 一层不够就再追一层 — 直到找到那个"用户根本不想做这件事，但不得不做"的本质

示例：

• 表面："我想做一个 API 切换页面"
• 追一层："为什么要切换？" → 省钱、额度到了、试新的、故障
• 再追一层："用户根本不想切换，切换是不得已的。真正的需求是'帮我管好 AI 资源'"

输出： 一句话的价值定位（如："这个模块的价值不是切换，是 AI 资源管理"）

禁止： 用户说了一句话就开始画图。必须先挖到价值本质。

第 2 步：挖掘真实用户动机

价值定位是抽象的，需要用具体的用户动机来支撑。

核心问题：用户在什么情况下会来用这个东西？

方法：

1. 直接问用户：你使用这个功能最常见的场景是什么？
2. 用 AskUserQuestion 提供选项 + 允许多选 + 允许补充
3. 把用户的回答整理成结构化的动机列表

输出： 一份用户动机清单（如：省钱、额度用完、试新模型、故障切换、任务匹配、控制预算）

禁止： AI 自己猜动机。必须从用户嘴里挖出来。

第 3 步：推导自然演化路径

基于价值本质和用户动机，推导出从最简到终局的演化链路。

核心问题：从最小可用出发，每一步自然会长出什么？

方法：

1. 找到最小起点 — 用户现在最基础的需求是什么？
2. 从每个用户动机出发，问"做完这一步，用户接下来自然会想要什么？"
3. 一步步推，直到推出终局形态
4. 每一步必须解决一个真实问题，不能是"为了做功能而做"

演化路径的特征：

• 每一步都是上一步的自然延伸
• 每一步都有明确的"因为用户遇到了 X 问题，所以需要 Y"
• 不是一开始就设计好的蓝图，是用着用着自己长出来的

输出： 一条演化链路（如：手动切换 → 带信息的切换 → 系统主动提醒 → 智能自动管理）

向用户展示这条链路，确认逻辑对不对，再往下走。

禁止： 跳过这一步直接画终局。没有演化路径，终局就是空中楼阁。

第 4 步：画终局形态

基于演化路径的终点，输出多个截然不同维度的终局愿景 HTML。

核心问题：终局可能长成什么样？有哪些完全不同的可能性？

方法：

1. 先确定要探索几个维度 — 通常 4-6 个
2. 每个维度必须代表一种不同的信息架构和交互范式，不是同一个东西的布局变体
3. 为每个维度写一个 HTML 设计稿

维度差异的判断标准：

• ❌ "列表 vs 网格 vs 表格" — 这是布局变体，不是不同维度
• ✅ "事件流 vs 对话式 vs 极简状态 vs 时间线 vs 模块化卡片" — 这是不同的信息架构

每个终局 HTML 的要求：

• 单文件、自包含（inline CSS，无外部依赖）
• 使用项目的设计规范（如有），先读取 design-system
• 用真实数据填充，不用 placeholder
• 视觉精致，达到"能直接展示给人看"的水平
• 不限制外框样式 — 如果用户指定了 Mac window 等外框就用，没指定就问用户偏好，或用最适合该方案的呈现方式
• 不限制尺寸 — 根据内容和方案特点自行决定最佳宽度
• 不要省 token — 1000 行、2000 行都无所谓，只要质量到位。绝不为了省代码量而降低视觉品质

输出：

• 4-6 个终局 HTML 文件
• 一个对比表，说明每个方案的核心理念和维度差异

禁止：

• 只出 1-2 个方案
• 方案之间差异太小（换汤不换药）
• 方案只有文字描述没有 HTML

第 5 步：总结归档

当用户看完所有方案后，整理本次探索的成果：

1. 演化路径图 — 从起点到终局的完整链路
2. 终局方案对比 — 每个方案的核心理念、适用场景、信息架构差异
3. 用户偏好 — 用户对哪些方向有感觉（如果已表态）

文件归档到 设计/{探索主题}/ 目录下。目录名和文件名问用户确认。

过程中的沟通规范

AI 主导的节奏

这个流程是 AI 引导用户，不是用户指挥 AI。AI 要做到：

1. 每一步主动推进，不等用户问"下一步呢"
2. 每个关键结论都让用户确认后再往下走
3. 用户说的模糊的话，AI 负责结构化和追问
4. 用户跑偏了（比如太早关注细节），AI 负责拉回来

必须问用户的

不需要问用户的

AI 绝不应该做的

• 用户说了一个 idea 就开始画 UI（跳过价值追问和动机挖掘）
• 出一堆布局变体当作"不同方案"（没有维度差异）
• 在探索阶段就考虑"技术上能不能实现"（这是设限）
• 替用户决定哪个方案好（AI 只展示可能性，用户自己选）
• 没有演化路径就直接画终局（终局没有根基）