diff --git a/.gitignore b/.gitignore index 56fba65..6a7f944 100644 --- a/.gitignore +++ b/.gitignore @@ -54,3 +54,10 @@ docs/2026-03-31-memory-view-wave1-handoff.md docs/plans/2026-03-26-claw-scope-gateway-connector-rust-module-design.md docs/plans/2026-03-26-clawx-gateway-auto-connect-mechanism-analysis.md +# Local design/import artifacts kept out of version control +/src/imports/ + +# Root-level icon exploration exports +/icon-square.png +/icon-transparent.png +/icon-zoom.png diff --git a/icon-square.png b/icon-square.png deleted file mode 100644 index 8ecefb2..0000000 Binary files a/icon-square.png and /dev/null differ diff --git a/icon-transparent.png b/icon-transparent.png deleted file mode 100644 index d7c5994..0000000 Binary files a/icon-transparent.png and /dev/null differ diff --git a/icon-zoom.png b/icon-zoom.png deleted file mode 100644 index ce9d2b9..0000000 Binary files a/icon-zoom.png and /dev/null differ diff --git a/src/imports/Prototype-NFR4-Storyboard.svg b/src/imports/Prototype-NFR4-Storyboard.svg deleted file mode 100644 index 5b90736..0000000 --- a/src/imports/Prototype-NFR4-Storyboard.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - Figma: drag onto canvas. See README.md - - - - - ClawScope - - Memory - Config - Evolve - Filter - - Table row - - - - - - Memory - - Filter chip - - - - - Detail - - - - - Config - Form - - Save - - - - - Evolve - - Conservative - - Diff - - diff --git a/src/imports/TASKLIST_figma-designer-brief.md b/src/imports/TASKLIST_figma-designer-brief.md deleted file mode 100644 index 530fabf..0000000 --- a/src/imports/TASKLIST_figma-designer-brief.md +++ /dev/null @@ -1,147 +0,0 @@ -# 给设计师的简版任务列表 - -日期: 2026-03-26 -项目: `D:\Dev\claw-scope` - -## 1. 本轮目标 - -请优先补齐当前桌面应用的交互设计合同，不需要补后台逻辑，不需要补 Tauri 宿主逻辑。 -重点是把页面状态、组件状态、动效和窄窗口布局补齐，供前端继续实现。 - -## 2. P0，先做这 4 块 - -### 2.1 Setup Wizard - -请补齐： - -- 四步流程完整状态 -- 上一步、下一步、测试连接、进入应用、立即体验按钮状态 -- URL 输入框状态 -- 认证方式切换状态 -- Token / Password 输入框状态 -- 自动检测反馈状态 -- 测试成功页 -- 测试失败页 -- 跳过后的视觉结果 -- 完成页 -- 窄窗口布局 - -### 2.2 Config 页，重点是连接配置模块 - -请补齐： - -- Config 页 Tab 切换状态 -- 当前连接状态卡片的已连接、未连接、未配置状态 -- URL、认证方式、认证秘钥输入状态 -- 测试连接按钮状态 -- 保存配置按钮状态 -- “重新运行设置向导”按钮状态 -- 高级配置展开/收起状态 -- 校验错误展示 -- 窄窗口布局 - -### 2.3 全局壳层 - -请补齐： - -- 标题栏按钮默认、hover、pressed、dark mode 状态 -- 侧边栏选中态、hover 态、焦点态 -- 移动端底部导航选中态 -- 语言菜单打开、关闭、选中状态 -- 主题切换按钮动效 -- 页面切换过渡方式 -- 窄窗口下壳层布局退化方案 - -### 2.4 Memory 页 - -请补齐： - -- 列表、足迹、图谱三视图切换方式 -- 搜索框状态 -- 筛选器展开/收起与已选条件样式 -- 表格 hover、选中、分页、排序状态 -- 图谱节点 hover、选中、连线高亮、缩放反馈 -- 空态、无匹配态、错误态、加载态 -- 长文本截断与展开方式 -- 窄窗口布局 - -## 3. P1，第二批再补 - -### 3.1 Reminder Modal - -- 打开/关闭动画 -- 三个按钮层级 -- 深浅色状态 -- 窄窗口布局 - -### 3.2 Evolution 页 - -- 模板卡片默认、选中、推荐、不可用状态 -- Diff 预览区样式 -- “应用变更”按钮反馈 -- 风险确认态 -- 空态、执行中态、完成态、失败态 - -### 3.3 Profile 页 - -- 卡片 hover、选中、可点击态 -- 节点状态展示规范 -- 统计卡正常态、异常态、空态 -- 骨架屏或空态 - -### 3.4 全局通用状态 - -- Loading skeleton -- Empty state -- Error state -- Success confirmation -- Disabled state -- Toast / inline message / banner -- Danger confirmation -- 深浅色完整覆盖 - -## 4. 每个页面的最低交付标准 - -每个关键页面至少交付： - -- 一个正常态画板 -- 一个交互态画板 -- 一个异常态或无结果态画板 -- 一个窄窗口态画板 - -如果有明显动效，请补： - -- 动效说明 -- 触发条件 -- 时长和节奏 - -## 5. 这轮不用在 Figma 里补的内容 - -下面这些继续留给项目实现，不作为本轮设计补齐范围： - -- Tauri 窗口控制行为 -- dev / prod 向导分流逻辑 -- localStorage 持久化 -- 真实连接测试 -- 后端数据结构 -- 搜索、筛选、分页、排序算法 -- 错误重试策略 -- 配置保存和权限逻辑 - -## 6. 交付顺序建议 - -1. 先补 Setup Wizard -2. 再补 Config 页 -3. 再补全局壳层 -4. 再补 Memory 页 -5. 最后处理 P1 页面和全局通用状态 - -## 7. 交付结果 - -本轮设计交付完成后，应能回答下面这些问题： - -- 这个页面正常时长什么样 -- 这个页面交互时怎么反馈 -- 失败时长什么样 -- 窗口变窄后怎么排 -- 组件 hover、active、selected、disabled、loading 时分别长什么样 diff --git a/src/imports/ux-color-themes.html b/src/imports/ux-color-themes.html deleted file mode 100644 index 620774e..0000000 --- a/src/imports/ux-color-themes.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - ClawForge / ClawScope — UX 色板与语义 Token - - - -

ClawForge（代号 ClawScope）— 语义色与对比

-

- 浅色默认主题。实现时使用 CSS 变量映射，便于后续暗色主题。 -

- -
-

语义 Token

-
-
--color-bg页面底
-
--color-surface卡片/面板
-
--color-border分割线
-
--color-text主文
-
--color-primary主操作
-
--color-success成功
-
--color-warning警告
-
--color-danger错误/删除
-
-
- -
-

组件预览

-
- - 演示数据 - 保存成功 · 已写入工作区 -
-
- - diff --git a/src/imports/ux-design-directions.html b/src/imports/ux-design-directions.html deleted file mode 100644 index 7e8c22e..0000000 --- a/src/imports/ux-design-directions.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - ClawForge / ClawScope — UX 方向示意 - - - -
- -
ClawScope — 记忆可见，进化可期
- - - -
-
- -
-

方向 A · 工作台（MVP 主界面）

-
- - - - -
- - - - - - - - -
时间类型 / 来源Agent摘要
2026-03-24 10:00MEMORY.mddefault示例记忆条目…
2026-03-24 09:30日记agent-b…
-

静态示意：与 PRD 表格视图（FR2）一致；侧栏对应 FR16 三入口。

-
-
- - diff --git a/src/imports/ux-design-specification-1.md b/src/imports/ux-design-specification-1.md deleted file mode 100644 index 31e55a4..0000000 --- a/src/imports/ux-design-specification-1.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] -inputDocuments: - - _bmad-output/planning-artifacts/main/prd.md - - _bmad-output/planning/PRODUCT_BRIEF_OpenClaw-Manager.md - - _bmad-output/brainstorming/brainstorming-session-2026-03-24.md -workflow: bmad-bmm-create-ux-design -lastStep: 14 -completedAt: '2026-03-24' ---- - -# UX Design Specification — ClawForge（代号 ClawScope） - -**Author:** （与 PRD 同步，可填 `{{user_name}}`） -**Date:** 2026-03-24 -**关联 PRD:** `_bmad-output/planning-artifacts/main/prd.md` - ---- - -## 1. 项目理解与 UX 目标 - -### 1.1 产品一句话 - -面向 OpenClaw 用户的**本地桌面**工具：让**记忆可见**、**配置可编辑**、**进化可实验**，在约 **5 分钟内**让用户找到三大核心入口并完成首次有效操作（与 FR16、NFR4 对齐）。 - -### 1.2 目标用户 - -- **主用户：** 希望「管好记忆、让 Agent 变聪明」的 OpenClaw 用户；接受图形界面，需要**低认知负担**与清晰导航。 -- **次要用户：** 需要细粒度配置与进化实验的进阶用户。 - -### 1.3 UX 差异化 - -- **深度记忆管理 + 进化实验**（与纯安装/监控类工具区分）。 -- **技术小白友好：** 向导、空状态、演示模式、错误可行动（与 Domain、FR18/FR18a 对齐）。 -- **本地优先：** 界面传达「数据在本地、不经过我们服务器」的信任感（与 NFR12、NFR13 一致）。 - ---- - -## 2. 核心体验（Core Experience） - -### 2.1 最高频动作 - -1. **浏览 / 筛选 / 搜索记忆**（记忆主区用 **同级 Tab** 切换 **表格 / 每日足迹 / 思维导图**；其中 **每日足迹** 与 **思维导图** **平齐**，见 §8.3）。 -2. **查看并编辑配置**（保存前有校验与反馈）。 -3. **选择进化模板 → 预览 diff → 确认应用**（MVP 以「保守」模板完整链路为主；**边界**见 §2.4）。 - -### 2.2 必须「零思考」的事 - -- 启动后**立即**知道去哪：记忆 / 配置 / 进化（**主导航常驻**）。 -- **保存**成功或失败：明确 toast / 行内提示，失败时指出路径或校验错误（NFR5）。 -- **工作区不可用**时：单一主 CTA + 说明，而非空白页（FR18、FR18a）。 - -### 2.3 平台与壳层 - -- **Tauri 2 + Web 视图（React）**；**Windows 自定义标题栏**已存在：保持 **40px** 高、拖拽区、`productName` 与 slogan 一致。 -- **桌面优先**：默认布局按 **≥1024×768** 设计；小窗口时侧边栏可折叠为图标条（见 §9）。 - -### 2.4 进化模块 MVP 边界（与 PRD 一致） - -与 PRD「**进化路径 — MVP 产品决策（范围边界）**」对齐，UX 约束如下： - -- **主路径（唯一默认）**：**模板选择 → diff 预览 → 确认应用**；MVP 以「**保守**」模板完整链路为主。进化视图**不提供**以「应用内接入第三方 LLM / 用户自定义 API」为核心的交互（无「模型生成方案并一键落盘」的默认路径、无「对话式调参」作为主任务流）。 -- **可选 doctor**：与配置场景一致，进化**保存成功后**可提供「运行 doctor」或合并至 **WorkspaceBanner**；CLI 不可用时的降级文案与 PRD（可点击但提示不可用）一致。 -- **价值传达**：标题、辅助说明、空状态强调 **可解释、可对比、可回退**，避免暗示「聊天即可进化」。 -- **Growth**：若未来增加「AI 仅建议、不自动应用」等能力，须单独 UX 评审（默认关、隐私提示、失败退回模板路径）。 - ---- - -## 3. 情感与调性（Emotional Response） - -| 目标情感 | 设计手段 | -|----------|----------| -| **可控、踏实** | 少动画炫技；状态可见（加载、保存、索引中等） | -| **清晰、不炫技** | 信息层级：主操作 > 筛选 > 元数据；避免霓虹色 | -| **专业可信赖** | 与 OpenClaw 术语一致（identity/soul）；错误文案含排查方向（NFR6） | - -**避免：** 过度游戏化、隐喻过重（用户要的是「管理工具」而非「玩具」）。 - ---- - -## 4. 灵感与参考（与 PRD Innovation Patterns 对齐） - -| 参考来源 | 借鉴点 | 本产品落地 | -|----------|--------|------------| -| Obsidian | 每日足迹、图谱感（Growth） | MVP：**每日足迹视图**时间轴 + 当日摘要卡片 | -| Docker Desktop | 列表 + 状态 + 日志感 | **记忆表格** + 行状态（已索引/待处理） | -| Notion | 多视图切换 | **表格 / 每日足迹 / 思维导图**视图切换同一数据集（足迹与导图为并列 Tab） | -| 1Password | 保险库式「当前上下文」 | **单工作区**上下文条：路径或别名 + 健康状态（doctor 可选） | - ---- - -## 5. 设计系统策略 - -### 5.1 技术选型 - -- **UI：** React + **CSS 变量**语义色（便于暗色后续扩展）。 -- **组件：** 优先 **可访问** 的原语（按钮、输入、表格）；复杂表可先 **HTML table + 虚拟滚动**（满足 NFR1 大量条目前提）。 -- **图标：** 与系统一致（Windows 标题栏已用 Segoe MDL2 字符）；内容区可用 **Lucide** 或 **内联 SVG**（需统一 24px 网格）。 - -### 5.2 原则 - -- **语义 token：** `color-bg`, `color-surface`, `color-border`, `color-text`, `color-primary`, `color-danger`（错误/ destructive）。 -- **8px 间距基准**；圆角 **6–8px**（面板/卡片），**4px**（按钮、输入）。 -- **动效：** 150–200ms，仅用于面板展开、toast，避免干扰阅读。 - ---- - -## 6. 视觉基础（Visual Foundation） - -### 6.1 色彩 - -- **默认主题：浅色**（与当前标题栏白底一致）。 -- **主色：** 冷色蓝青（与品牌「Scope / 可见性」一致，**避免**与错误状态混淆）。 -- **成功 / 警告 / 错误：** 绿 / 琥珀 / 红，**对比度**满足 WCAG AA 正文与按钮。 -- **详细色板与对比：** 见同目录 `ux-color-themes.html`。 - -### 6.2 字体 - -- **西文：** `system-ui`, Segoe UI, sans-serif。 -- **中文：** 继承系统 UI 字体（「微软雅黑」/「苹方」等），**不**强制 Web 字体以降低首屏成本。 -- **字号阶梯：** 12（辅助）/ 14（正文）/ 16（小标题）/ 20–24（页标题）。 - -### 6.3 布局骨架 - -``` -┌ 标题栏（40px，自定义）───────────────────────── ┐ -├ 侧栏（240px 可折） │ 主内容区（滚动） │ -│ · 记忆 │ · 工具栏 / 筛选 + **分段 Tab（表｜足迹｜导图）**│ -│ · 配置 │ · 主视图（表 / 足迹 / 思维导图 三选一） │ -│ · 进化 │ · 详情 / 抽屉 │ -└───────────────────┴────────────────────────────┘ -``` - ---- - -## 7. 设计方向（已选方向摘要） - -- **方向 A — 「工作台」**：侧栏 + 强表格，适合 power user（**首选 MVP**）。 -- **方向 B — 「向导型」**：大卡片 + 分步，适合首次启动（融入 **空状态 / FR18a**，不作为唯一主界面）。 - -**决策：** 主界面采用 **方向 A**；首次启动与空状态采用 **方向 B** 组件（大按钮、简短说明）。 - -**可视化探索：** 见 `ux-design-directions.html`（静态示意）。 - ---- - -## 8. 用户旅程与关键界面 - -### 8.1 旅程映射（对应 PRD） - -| 旅程 | 界面要点 | -|------|----------| -| J1 首次 5 分钟 | 欢迎页或主界面：**三入口**等高亮；可选「检测工作区」结果条 | -| J2 浏览记忆 | 默认 **表格**：列=时间、类型/来源、Agent、摘要；通过 **同级分段 Tab** 切换 **每日足迹** / **思维导图**（二者 **平齐**，见 §8.3）；导图按分类汇总 Agent 记忆树，节点可展开/跳转详情（FR7a） | -| J3 编辑配置 | **首屏人格优先**（见 §8.4）：当前 Agent 的 identity/soul 等 **只读摘要** +「编辑」→ 再进入 **表单分组**（全局 / Agent / 记忆）；保存 → 校验失败锚点到字段；编辑体验与 diff/进化一致：**可解释、可对比** | -| J4 进化 | **模板卡片**（MVP 强调「保守」）；**diff 预览**模态或侧栏，**确认后**再写入；**无** LLM 对话 / 模型生成为主路径；保存后可选 **doctor**（与 WorkspaceBanner 或成功态 CTA 一致）；禁用模板标「V1」（见 §2.4） | - -### 8.2 空状态与错误（FR18 / FR18a / NFR6a） - -- **优先级：** 路径不存在 → 通用提示；路径存在但空 → 引导安装/演示；沙箱阻断 → **平台专属**短链或说明文案。 -- **演示模式：** 明确徽章「演示数据」；只读或临时目录，**视觉区分**（浅黄条或边框）。 - -### 8.3 记忆主区：视图 Tab 与思维导图（FR7a） - -#### 8.3.1 信息架构（必须以「平齐」为准） - -- **推荐结构（MVP）**：记忆主区顶部使用 **分段控件（Segmented）或 Underline Tab**，三个选项 **完全同级**：**表格** | **每日足迹** | **思维导图**。 -- **平齐关系**：**每日足迹** 与 **思维导图** 为 **同一层级、同一控件组内的相邻 Tab**——**不是**「思维导图挂在每日足迹下方/子页」，**不是**「先进入每日足迹再进入思维导图」的嵌套关系；**不是**「思维导图仅为每日足迹的附属视图」。 -- **与参考截图**：仓库 `screenshots/ss4.png`（若存在）若与上述 **三 Tab 平齐** 或 **足迹/导图平齐** 不一致，**以本节与 PRD FR7a 为准**；设计稿与实现应以 **分段控件** 表达，勿依赖过时截图。 - -#### 8.3.2 工具栏与 Tab 的垂直顺序 - -| 区域 | 内容 | -|------|------| -| **上** | 搜索框、筛选（与 PRD FR4–FR6 一致）；**不改变** Tab 的同级关系。 | -| **中** | **MemoryViewTabs**：`表格 \| 每日足迹 \| 思维导图`（选中态高亮、未选中 hover）。 | -| **下** | 当前视图内容区（表格 / 日视图 / 导图区）。 | - -#### 8.3.3 思维导图视图（MemoryMindMapView）设计要点 - -| 维度 | 要求 | -|------|------| -| **布局** | 占据主内容区剩余空间；MVP 推荐 **可折叠树**（左树 + 可选右侧摘要，或单树全宽）以降低实现成本；Growth 可换力导向图等。 | -| **根与层级** | 根节点按 **Agent** 或 **分类**（与适配层一致，见 PRD FR7a）；子层为主题聚合、再下为记忆条目或摘要节点；**推断** 生成的分支在节点旁或图例区显示 **「推断」** 徽章。 | -| **交互** | 单击选中高亮；**Enter / 双击 / 主按钮** 打开与表格一致的 **详情抽屉**（同一 `MemoryDetail`）；树节点 `aria-expanded`；支持键盘方向键在树内导航（可选增强）。 | -| **与筛选/搜索** | 与表格、每日足迹 **同一数据源**；筛选/搜索条件变更后导图 **刷新**；若无匹配节点，显示 **空状态**（说明当前条件无结果，可建议清除筛选）。 | -| **加载与性能** | 骨架或树占位；节点数大时 **折叠默认 + 懒展开**（对齐 PRD NFR1 思维导图补充）。 | -| **空状态** | 无结构化记忆树时：短文案说明 + 可选「按路径/类型聚合」降级树，或引导至 **表格** 视图。 | - -#### 8.3.4 Figma / 原型画板命名 - -- 除 `Screen / 记忆-思维导图` 外，增加 **`Screen / 记忆-视图Tab-三态`** 或 **`Screen / 记忆-分段控件-默认`**，明确展示 **表格｜每日足迹｜思维导图** 三键 **平齐**。 - -### 8.4 配置主区：个性化展示优先级（identity / soul） - -本节落实 PRD「配置主路径与个性化展示优先级」与 **FR8b**：用户投入在 **人格与个性化** 上的内容须在配置体验中**被看见、被尊重**，而非淹没在抽象表单项中。 - -#### 8.4.1 信息架构（首屏） - -| 优先级 | 内容 | 要求 | -|--------|------|------| -| **P0** | **当前选中 Agent 的人格摘要区** | 展示适配层解析的 **identity、soul** 及可解析的**其它人格相关字段**（标签、口吻、角色描述等，以 OpenClaw schema 为准）。默认 **只读**、分段清晰（卡片或定义列表），**禁止**首屏仅展示大块无标题 JSON 或直接从「全局参数表」开始。 | -| **P1** | **Agent 切换器** | 与 FR9 一致：切换工作区内 Agent / per-agent 上下文；切换后摘要区立即更新。 | -| **P2** | **显式「编辑」** | 进入结构化表单或分步编辑（全局 / Agent / 记忆）；高级用户可展开「原始 JSON」或等价高级区（与 PRD 辅助修改原则一致）。 | -| **P3** | **全局与其它分组** | 在人格摘要之后或通过 Tab/折叠展示 openclaw.json 全局项、记忆策略等（与附录 A 一致）。 | - -#### 8.4.2 辅助修改与一致性 - -- **与 FR10a / FR12 / FR15 同一套心智：** 保存前校验失败 → 锚点到字段；若实现变更预览 → 使用与 **DiffPreview**（进化）一致的 diff 视觉语言；避免「仅裸文本框」作为人格字段的唯一编辑方式——优先结构化控件 + 可选高级文本。 -- **空状态 / 缺失字段：** 若某 Agent 无人格字段或上游未提供，展示简短说明 + 引导编辑或指向文档，**禁止**空白无解释。 - -#### 8.4.3 Figma / 画板命名 - -- 建议：`Screen / 配置-首屏-人格摘要`、`Screen / 配置-编辑-结构化表单`、`Screen / 配置-Agent切换-摘要更新`。 - ---- - -## 9. 组件策略 - -| 组件 | 说明 | -|------|------| -| **AppShell** | 标题栏 + 侧栏 + 主区；侧栏 `aria-current` | -| **MainNav** | 记忆 / 配置 / 进化；图标 + 文案 | -| **MemoryTable** | 排序、列宽、分页或虚拟列表 | -| **MemoryDayView** | 按日聚合，折叠块 | -| **MemoryMindMapView** | 见 **§8.3.3**；与「每日足迹」**平齐**（同级 Tab 切换进入）；树或力导向图；**分类**根节点 → 记忆树；推断标「推断」 | -| **MemoryViewTabs** | **分段控件**：`表格 \| 每日足迹 \| 思维导图` **三者同级**；**每日足迹** 与 **思维导图** **平齐**（相邻、同样式），**非嵌套**。`role="tablist"`、`role="tab"`、`aria-selected`、左右键切换焦点（可选） | -| **AgentPersonaSummary** | **配置首屏 P0**（§8.4）：展示当前 Agent 的 identity/soul 等只读摘要；入口到编辑 | -| **ConfigForm** | JSON 路径映射到控件；**在人格摘要之后或经「编辑」进入**；危险操作二次确认；与 **FR8b** 首屏不冲突 | -| **EvolutionTemplatePicker** | 卡片；禁用项标「V1」；**MVP 不含**模型选择、API Key、对话式生成 | -| **DiffPreview** | 统一 diff 样式（增删行背景）；附**可观测效果**短说明（与 PRD 模板契约） | -| **EvolutionApplyBar** | 主 CTA：**确认应用**；次：**取消**；**不**将「AI 生成 / 调用模型」设为主按钮（MVP） | -| **WorkspaceBanner** | 工作区路径、CLI 状态、doctor 入口 | -| **Toast / InlineAlert** | 成功、错误、只读沙箱提示 | - ---- - -## 10. 一致性与模式（UX Patterns） - -- **加载：** 表格骨架屏或行内 spinner；**禁止**长时间无反馈（NFR1）。 -- **保存：** 按钮 loading → 成功 toast；失败 **保留表单状态**。 -- **搜索：** 输入 debounce；结果高亮关键词（FR6）。 -- **撤销：** 若仅部分实现，UI 文案与 PRD「附录 D」一致，不承诺全局撤销。 -- **进化：** 仅 **模板 → diff → 确认**；成功后可引导 **doctor**；**无**应用内模型对话 / API 配置作为主路径（§2.4）。 -- **记忆视图 Tab：** **表格｜每日足迹｜思维导图** 必须在 **同一分段控件** 内 **同级** 切换；**禁止**将「每日足迹 / 思维导图」做成嵌套二级 Tab（§8.3）。 - ---- - -## 11. 响应式与无障碍 - -- **响应式：** 最小宽度约 **900px**；再小则侧栏变图标 rail。 -- **键盘：** 主导航 `Tab` 顺序合理；记忆 **视图 Tab** 使用 `tablist`/`tab` 模式，`←` `→` 在 Tab 间移动焦点（可选）；表格 `↑↓` 行导航（可选增强）。 -- **焦点：** 可见焦点环（与系统对比度一致）。 -- **屏幕阅读器：** 导航 landmark、表格 `caption` 或 `aria-label`。 -- **未来：** 暗色主题与 `prefers-color-scheme` 可后续迭代。 - ---- - -## 12. 与 PRD 追溯（简表） - -| PRD 区域 | UX 交付物 | -|----------|-----------| -| FR16–18a | 主导航、空状态、演示模式视觉 | -| FR1–7、FR7a | 表格 / 足迹 / **思维导图**（§8.3 Tab 平齐）、筛选、搜索、详情抽屉 | -| FR8–12、FR8b | 配置首屏人格摘要、配置表单、保存校验反馈、doctor 入口 | -| FR13–15 + PRD 进化 MVP 决策 | 模板选择、diff 预览、确认流；可选 doctor；**不做**应用内通用 LLM SDK 自动落盘进化（见 §2.4） | -| NFR4–6 | **§13** 可点击原型 + 任务走查脚本与记录表；NFR4 定量/定性标准 | - ---- - -## 13. 可点击原型与 NFR4 任务走查（高成本路径） - -本节约束对齐 **PRD NFR4**：新用户在**无文档**条件下 **5 分钟内**理解核心入口；验证任务为「从主界面找到**记忆、配置、进化**三入口 → **完成记忆筛选** → **查看详情**」。统计口径：**至少 5 名**无 ClawForge 经验用户，**80% 以上**在 5 分钟内完成（或采用标准 **SUS / UMUX** 分数阈值）。 - -### 13.1 交付组合 - -| 层级 | 内容 | 用途 | -|------|------|------| -| **可点击原型** | **Figma**（主）或 **HTML**（备） | 走查与演示时可点按真实路径，非纯静态截图 | -| **任务走查** | 统一任务脚本 + 记录表 + 计时 | 对应 NFR4 的可重复验证 | - -### 13.2 Figma：新建文件、结构与上传 - -**无需额外「服务器配置」**：个人免费账号即可。将下列结构在 Figma 中建成 **一个 Design file**（建议文件名：`ClawForge-ClawScope-UX`），便于本地与云端一致。 - -#### 13.2.1 建议 Pages（页面）划分 - -| Page 名 | 内容 | -|---------|------| -| `00-Cover` | 封面：产品名、slogan、本规格路径、日期、负责人 | -| `01-Tokens` | 色板与文字样式（或链接至 published 库）；可与 `ux-color-themes.html` 对齐 | -| `02-Prototype-NFR4` | **走查专用流**：仅含 NFR4 任务所需画板 + 原型连线（见 §13.4） | -| `03-Screens-All` | 全量关键屏（可选）：记忆表格/足迹/**思维导图**、配置、进化、空状态、错误、演示模式 | -| `04-Components` | 按钮、侧栏项、表格行、Toast、模态框等组件 | - -#### 13.2.2 画板（Frame）规格 - -- **桌面应用窗口：** 宽 **1024 × 高 768**（与 `tauri.conf` 默认一致）；或 **1280 × 800** 若需更宽表格。 -- **标题栏区域：** 顶部 **40px** 条，与实现一致（自定义标题栏）。 -- **命名规范：** `Screen / 记忆-表格-默认`、`Screen / 记忆-已筛选`、`Screen / 记忆-思维导图`、`Screen / 记忆-详情抽屉`、`Screen / 配置`、`Screen / 进化-Diff确认` 等，便于开发对照。 - -#### 13.2.3 可点击原型（Prototype）设置 - -1. 在 **`02-Prototype-NFR4`** 中按 **§13.4 任务步骤顺序** 排列画板（从左到右或流程图）。 -2. **交互：** - - 侧栏「记忆 / 配置 / 进化」→ 对应主区 Frame； - - 视图 Tab「表格 / 每日足迹 / 思维导图」→ 对应主区变体 Frame； - - 「筛选」→ 切换至「已筛选」变体 Frame； - - 表格行或导图节点 → 「详情」Frame 或 overlay； - - **Starting point：** 设为「模拟启动后主界面」第一帧。 -3. **分享：** `Share` → 开 **Prototype** 链接供走查使用（查看者无需编辑权限即可点原型）。 - -#### 13.2.4 上传到 Figma 的几种方式 - -| 方式 | 说明 | -|------|------| -| **云端直接建** | 浏览器登录 Figma → New design file → 按上表建 Pages/Frames（**推荐**，无文件迁移） | -| **导入 SVG（本仓库）** | 使用 **`figma-import/Prototype-NFR4-Storyboard.svg`**：拖入 Figma 即生成可编辑矢量图层，再 **Frame 化** 各分镜并 **Prototype 连线**（详见同目录 `README.md`）。**不能替代 `.fig`，但可一键导入、无需手画线框。** | -| **本地 .fig** | 仅当已由 Figma **导出** `.fig` 时，再导入其他账号/团队 | -| **本仓库作附件** | 定稿后的 `.fig` 或 PDF 可放入 `planning-artifacts/main/figma-import/` 旁（需自行维护版本） | - -**说明：** **`.fig` 无法在本仓库凭空生成**（专有格式）。**最接近「上传一个文件就出图层」的方式**是导入 **`Prototype-NFR4-Storyboard.svg`**；可点击交互须在 Figma **Prototype** 模式中手动连接（或后续在导出 `.fig` 中保存连线）。 - -### 13.3 HTML 可点击原型（备选） - -- **用途：** 无 Figma 时仍可做「可点击」演示（超链接或隐藏 div 切换）。 -- **基线：** 扩展同目录 `ux-design-directions.html` 为多「屏」（`hash` 路由或简单 `display` 切换），侧栏与表格行绑定 `href` / `onclick` 切换区块。 -- **范围：** 至少覆盖 **§13.4** 与 NFR4 任务同路径；不要求像素级与 Figma 一致，但 **信息架构须一致**。 - -### 13.4 NFR4 标准任务脚本（走查用） - -**环境：** 不向参与者提供产品外文档；可提供「请完成下列任务」口头/屏幕展示 instructions（与 PRD「无文档」一致：无用户手册）。 - -**任务表述（给参与者）：** - -> 请在不查阅任何说明文档的情况下，在 **5 分钟内**完成： -> 1）在主界面找到 **记忆、配置、进化** 三个入口； -> 2）进入记忆相关区域后，**完成一次记忆筛选**（任意合理筛选条件即可）； -> 3）**查看一条记忆的详情**。 -> 完成后请告知主持人。 - -**主持人操作：** - -- 使用 **Figma Prototype 链接** 或 **HTML 原型**；从开始画面计时 **5 分钟**。 -- 记录是否完成三步、卡点、是否误点、主观感受（可选 SUS 问卷）。 - -**通过标准（与 PRD 一致）：** - -- **定量：** ≥5 名参与者中 **≥80%** 在 5 分钟内完成；或 **SUS ≥ 68** / **UMUX 达标**（若团队选用问卷替代计时）。 -- **定性：** 记录「找不到三入口」「筛选入口不明显」「详情难以发现」等，回灌迭代。 - -### 13.5 走查记录表（模板） - -复制到表格或 Notion： - -| 参与者 ID | 日期 | 原型类型（Figma/HTML） | 5 分钟内完成（Y/N） | 完成时间（秒） | 卡点简述 | SUS（可选） | -|-----------|------|------------------------|----------------------|----------------|----------|-------------| -| P01 | | | | | | | - -**产出物：** 走查汇总 1 页 + 对高优先级卡顿的界面改动项（可建 Issue 或回写 PRD 附录 D）。 - ---- - -## 14. 交付物与下一步 - -| 文件 | 说明 | -|------|------| -| 本文档 | UX 规格主文档（含 §13 高成本原型与 NFR4） | -| `ux-color-themes.html` | 色板与语义 token 示意 | -| `ux-design-directions.html` | 布局方向静态示意；可演进为 HTML 可点击原型 | -| **Figma** | 按 §13.2；**一键导入线框：** `figma-import/Prototype-NFR4-Storyboard.svg` + `figma-import/README.md` | -| **走查记录** | 按 §13.5 留存，作为 NFR4 验收证据 | - -**建议下一步（BMAD）：** `bmad-bmm-create-architecture`（技术架构与 Tauri 能力域对齐），随后 `bmad-bmm-create-epics-and-stories`。 -**与验证并行：** 完成 §13.2–§13.4 后，即可安排首轮 NFR4 走查，不必等开发完成（原型驱动）。 - ---- - -## 15. 修订历史 - -| 日期 | 说明 | -|------|------| -| 2026-03-24 | 初版：`bmad-bmm-create-ux-design` 全流程合成，对齐 PRD / Brief / 现有 claw-scope 壳 | -| 2026-03-24 | 新增 §13：可点击原型（Figma/HTML）+ NFR4 任务走查、Figma 页面/画板/原型/上传说明；原 §13–14 顺延为 §14–15 | -| 2026-03-24 | 新增 `figma-import/Prototype-NFR4-Storyboard.svg` + README：可导入 Figma 的 SVG 分镜（`.fig` 需 Figma 自行导出） | -| 2026-03-24 | 对齐 PRD：新增 §2.4 进化模块 MVP 边界；更新 J4、组件表（EvolutionTemplatePicker / DiffPreview / EvolutionApplyBar）、§12 追溯 | -| 2026-03-24 | 新增 §8.3：记忆主区 **表格｜每日足迹｜思维导图** 三 Tab **同级**；**每日足迹** 与 **思维导图** **平齐**；思维导图视图设计要点；**screenshots/ss4.png** 以文档为准 | -| 2026-03-24 | 新增 §8.4 配置主区「个性化展示优先级」；J3、组件表（AgentPersonaSummary / ConfigForm）、FR 追溯对齐 PRD FR8b | diff --git a/src/imports/ux-design-specification.md b/src/imports/ux-design-specification.md deleted file mode 100644 index 0b635cf..0000000 --- a/src/imports/ux-design-specification.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] -inputDocuments: - - _bmad-output/planning-artifacts/main/prd.md - - _bmad-output/planning/PRODUCT_BRIEF_OpenClaw-Manager.md - - _bmad-output/brainstorming/brainstorming-session-2026-03-24.md -workflow: bmad-bmm-create-ux-design -lastStep: 14 -completedAt: '2026-03-24' ---- - -# UX Design Specification — ClawForge（代号 ClawScope） - -**Author:** （与 PRD 同步，可填 `{{user_name}}`） -**Date:** 2026-03-24 -**关联 PRD:** `_bmad-output/planning-artifacts/main/prd.md` - ---- - -## 1. 项目理解与 UX 目标 - -### 1.1 产品一句话 - -面向 OpenClaw 用户的**本地桌面**工具：让**记忆可见**、**配置可编辑**、**进化可实验**，在约 **5 分钟内**让用户找到三大核心入口并完成首次有效操作（与 FR16、NFR4 对齐）。 - -### 1.2 目标用户 - -- **主用户：** 希望「管好记忆、让 Agent 变聪明」的 OpenClaw 用户；接受图形界面，需要**低认知负担**与清晰导航。 -- **次要用户：** 需要细粒度配置与进化实验的进阶用户。 - -### 1.3 UX 差异化 - -- **深度记忆管理 + 进化实验**（与纯安装/监控类工具区分）。 -- **技术小白友好：** 向导、空状态、演示模式、错误可行动（与 Domain、FR18/FR18a 对齐）。 -- **本地优先：** 界面传达「数据在本地、不经过我们服务器」的信任感（与 NFR12、NFR13 一致）。 - ---- - -## 2. 核心体验（Core Experience） - -### 2.1 最高频动作 - -1. **浏览 / 筛选 / 搜索记忆**（表格或每日足迹）。 -2. **查看并编辑配置**（保存前有校验与反馈）。 -3. **选择进化模板 → 预览 diff → 确认应用**（MVP 以「保守」模板完整链路为主）。 - -### 2.2 必须「零思考」的事 - -- 启动后**立即**知道去哪：记忆 / 配置 / 进化（**主导航常驻**）。 -- **保存**成功或失败：明确 toast / 行内提示，失败时指出路径或校验错误（NFR5）。 -- **工作区不可用**时：单一主 CTA + 说明，而非空白页（FR18、FR18a）。 - -### 2.3 平台与壳层 - -- **Tauri 2 + Web 视图（React）**；**Windows 自定义标题栏**已存在：保持 **40px** 高、拖拽区、`productName` 与 slogan 一致。 -- **桌面优先**：默认布局按 **≥1024×768** 设计；小窗口时侧边栏可折叠为图标条（见 §9）。 - ---- - -## 3. 情感与调性（Emotional Response） - -| 目标情感 | 设计手段 | -|----------|----------| -| **可控、踏实** | 少动画炫技；状态可见（加载、保存、索引中等） | -| **清晰、不炫技** | 信息层级：主操作 > 筛选 > 元数据；避免霓虹色 | -| **专业可信赖** | 与 OpenClaw 术语一致（identity/soul）；错误文案含排查方向（NFR6） | - -**避免：** 过度游戏化、隐喻过重（用户要的是「管理工具」而非「玩具」）。 - ---- - -## 4. 灵感与参考（与 PRD Innovation Patterns 对齐） - -| 参考来源 | 借鉴点 | 本产品落地 | -|----------|--------|------------| -| Obsidian | 每日足迹、图谱感（Growth） | MVP：**每日足迹视图**时间轴 + 当日摘要卡片 | -| Docker Desktop | 列表 + 状态 + 日志感 | **记忆表格** + 行状态（已索引/待处理） | -| Notion | 多视图切换 | **表格 / 每日足迹**视图切换同一数据集 | -| 1Password | 保险库式「当前上下文」 | **单工作区**上下文条：路径或别名 + 健康状态（doctor 可选） | - ---- - -## 5. 设计系统策略 - -### 5.1 技术选型 - -- **UI：** React + **CSS 变量**语义色（便于暗色后续扩展）。 -- **组件：** 优先 **可访问** 的原语（按钮、输入、表格）；复杂表可先 **HTML table + 虚拟滚动**（满足 NFR1 大量条目前提）。 -- **图标：** 与系统一致（Windows 标题栏已用 Segoe MDL2 字符）；内容区可用 **Lucide** 或 **内联 SVG**（需统一 24px 网格）。 - -### 5.2 原则 - -- **语义 token：** `color-bg`, `color-surface`, `color-border`, `color-text`, `color-primary`, `color-danger`（错误/ destructive）。 -- **8px 间距基准**；圆角 **6–8px**（面板/卡片），**4px**（按钮、输入）。 -- **动效：** 150–200ms，仅用于面板展开、toast，避免干扰阅读。 - ---- - -## 6. 视觉基础（Visual Foundation） - -### 6.1 色彩 - -- **默认主题：浅色**（与当前标题栏白底一致）。 -- **主色：** 冷色蓝青（与品牌「Scope / 可见性」一致，**避免**与错误状态混淆）。 -- **成功 / 警告 / 错误：** 绿 / 琥珀 / 红，**对比度**满足 WCAG AA 正文与按钮。 -- **详细色板与对比：** 见同目录 `ux-color-themes.html`。 - -### 6.2 字体 - -- **西文：** `system-ui`, Segoe UI, sans-serif。 -- **中文：** 继承系统 UI 字体（「微软雅黑」/「苹方」等），**不**强制 Web 字体以降低首屏成本。 -- **字号阶梯：** 12（辅助）/ 14（正文）/ 16（小标题）/ 20–24（页标题）。 - -### 6.3 布局骨架 - -``` -┌ 标题栏（40px，自定义）───────────────────────── ┐ -├ 侧栏（240px 可折） │ 主内容区（滚动） │ -│ · 记忆 │ · 工具栏 / 筛选 │ -│ · 配置 │ · 主视图（表/足迹） │ -│ · 进化 │ · 详情 / 抽屉 │ -└───────────────────┴────────────────────────────┘ -``` - ---- - -## 7. 设计方向（已选方向摘要） - -- **方向 A — 「工作台」**：侧栏 + 强表格，适合 power user（**首选 MVP**）。 -- **方向 B — 「向导型」**：大卡片 + 分步，适合首次启动（融入 **空状态 / FR18a**，不作为唯一主界面）。 - -**决策：** 主界面采用 **方向 A**；首次启动与空状态采用 **方向 B** 组件（大按钮、简短说明）。 - -**可视化探索：** 见 `ux-design-directions.html`（静态示意）。 - ---- - -## 8. 用户旅程与关键界面 - -### 8.1 旅程映射（对应 PRD） - -| 旅程 | 界面要点 | -|------|----------| -| J1 首次 5 分钟 | 欢迎页或主界面：**三入口**等高亮；可选「检测工作区」结果条 | -| J2 浏览记忆 | 默认 **表格**：列=时间、类型/来源、Agent、摘要；切换 **每日足迹** | -| J3 编辑配置 | **表单分组**（全局 / Agent / 记忆）；保存 → 校验失败锚点到字段 | -| J4 进化 | **模板卡片**（MVP 强调「保守」）；**diff 预览**模态或侧栏，确认后主列表更新 | - -### 8.2 空状态与错误（FR18 / FR18a / NFR6a） - -- **优先级：** 路径不存在 → 通用提示；路径存在但空 → 引导安装/演示；沙箱阻断 → **平台专属**短链或说明文案。 -- **演示模式：** 明确徽章「演示数据」；只读或临时目录，**视觉区分**（浅黄条或边框）。 - ---- - -## 9. 组件策略 - -| 组件 | 说明 | -|------|------| -| **AppShell** | 标题栏 + 侧栏 + 主区；侧栏 `aria-current` | -| **MainNav** | 记忆 / 配置 / 进化；图标 + 文案 | -| **MemoryTable** | 排序、列宽、分页或虚拟列表 | -| **MemoryDayView** | 按日聚合，折叠块 | -| **ConfigForm** | JSON 路径映射到控件；危险操作二次确认 | -| **EvolutionTemplatePicker** | 卡片；禁用项标「V1」 | -| **DiffPreview** | 统一 diff 样式（增删行背景） | -| **WorkspaceBanner** | 工作区路径、CLI 状态、doctor 入口 | -| **Toast / InlineAlert** | 成功、错误、只读沙箱提示 | - ---- - -## 10. 一致性与模式（UX Patterns） - -- **加载：** 表格骨架屏或行内 spinner；**禁止**长时间无反馈（NFR1）。 -- **保存：** 按钮 loading → 成功 toast；失败 **保留表单状态**。 -- **搜索：** 输入 debounce；结果高亮关键词（FR6）。 -- **撤销：** 若仅部分实现，UI 文案与 PRD「附录 D」一致，不承诺全局撤销。 - ---- - -## 11. 响应式与无障碍 - -- **响应式：** 最小宽度约 **900px**；再小则侧栏变图标 rail。 -- **键盘：** 主导航 `Tab` 顺序合理；表格 `↑↓` 行导航（可选增强）。 -- **焦点：** 可见焦点环（与系统对比度一致）。 -- **屏幕阅读器：** 导航 landmark、表格 `caption` 或 `aria-label`。 -- **未来：** 暗色主题与 `prefers-color-scheme` 可后续迭代。 - ---- - -## 12. 与 PRD 追溯（简表） - -| PRD 区域 | UX 交付物 | -|----------|-----------| -| FR16–18a | 主导航、空状态、演示模式视觉 | -| FR1–7 | 表格 / 足迹视图、筛选、搜索、详情抽屉 | -| FR8–12 | 配置表单、保存校验反馈、doctor 入口 | -| FR13–15 | 模板选择、diff 预览、确认流 | -| NFR4–6 | **§13** 可点击原型 + 任务走查脚本与记录表；NFR4 定量/定性标准 | - ---- - -## 13. 可点击原型与 NFR4 任务走查（高成本路径） - -本节约束对齐 **PRD NFR4**：新用户在**无文档**条件下 **5 分钟内**理解核心入口；验证任务为「从主界面找到**记忆、配置、进化**三入口 → **完成记忆筛选** → **查看详情**」。统计口径：**至少 5 名**无 ClawForge 经验用户，**80% 以上**在 5 分钟内完成（或采用标准 **SUS / UMUX** 分数阈值）。 - -### 13.1 交付组合 - -| 层级 | 内容 | 用途 | -|------|------|------| -| **可点击原型** | **Figma**（主）或 **HTML**（备） | 走查与演示时可点按真实路径，非纯静态截图 | -| **任务走查** | 统一任务脚本 + 记录表 + 计时 | 对应 NFR4 的可重复验证 | - -### 13.2 Figma：新建文件、结构与上传 - -**无需额外「服务器配置」**：个人免费账号即可。将下列结构在 Figma 中建成 **一个 Design file**（建议文件名：`ClawForge-ClawScope-UX`），便于本地与云端一致。 - -#### 13.2.1 建议 Pages（页面）划分 - -| Page 名 | 内容 | -|---------|------| -| `00-Cover` | 封面：产品名、slogan、本规格路径、日期、负责人 | -| `01-Tokens` | 色板与文字样式（或链接至 published 库）；可与 `ux-color-themes.html` 对齐 | -| `02-Prototype-NFR4` | **走查专用流**：仅含 NFR4 任务所需画板 + 原型连线（见 §13.4） | -| `03-Screens-All` | 全量关键屏（可选）：记忆表格/足迹、配置、进化、空状态、错误、演示模式 | -| `04-Components` | 按钮、侧栏项、表格行、Toast、模态框等组件 | - -#### 13.2.2 画板（Frame）规格 - -- **桌面应用窗口：** 宽 **1024 × 高 768**（与 `tauri.conf` 默认一致）；或 **1280 × 800** 若需更宽表格。 -- **标题栏区域：** 顶部 **40px** 条，与实现一致（自定义标题栏）。 -- **命名规范：** `Screen / 记忆-表格-默认`、`Screen / 记忆-已筛选`、`Screen / 记忆-详情抽屉`、`Screen / 配置`、`Screen / 进化-Diff确认` 等，便于开发对照。 - -#### 13.2.3 可点击原型（Prototype）设置 - -1. 在 **`02-Prototype-NFR4`** 中按 **§13.4 任务步骤顺序** 排列画板（从左到右或流程图）。 -2. **交互：** - - 侧栏「记忆 / 配置 / 进化」→ 对应主区 Frame； - - 「筛选」→ 切换至「已筛选」变体 Frame； - - 表格行 → 「详情」Frame 或 overlay； - - **Starting point：** 设为「模拟启动后主界面」第一帧。 -3. **分享：** `Share` → 开 **Prototype** 链接供走查使用（查看者无需编辑权限即可点原型）。 - -#### 13.2.4 上传到 Figma 的几种方式 - -| 方式 | 说明 | -|------|------| -| **云端直接建** | 浏览器登录 Figma → New design file → 按上表建 Pages/Frames（**推荐**，无文件迁移） | -| **导入 SVG（本仓库）** | 使用 **`figma-import/Prototype-NFR4-Storyboard.svg`**：拖入 Figma 即生成可编辑矢量图层，再 **Frame 化** 各分镜并 **Prototype 连线**（详见同目录 `README.md`）。**不能替代 `.fig`，但可一键导入、无需手画线框。** | -| **本地 .fig** | 仅当已由 Figma **导出** `.fig` 时，再导入其他账号/团队 | -| **本仓库作附件** | 定稿后的 `.fig` 或 PDF 可放入 `planning-artifacts/main/figma-import/` 旁（需自行维护版本） | - -**说明：** **`.fig` 无法在本仓库凭空生成**（专有格式）。**最接近「上传一个文件就出图层」的方式**是导入 **`Prototype-NFR4-Storyboard.svg`**；可点击交互须在 Figma **Prototype** 模式中手动连接（或后续在导出 `.fig` 中保存连线）。 - -### 13.3 HTML 可点击原型（备选） - -- **用途：** 无 Figma 时仍可做「可点击」演示（超链接或隐藏 div 切换）。 -- **基线：** 扩展同目录 `ux-design-directions.html` 为多「屏」（`hash` 路由或简单 `display` 切换），侧栏与表格行绑定 `href` / `onclick` 切换区块。 -- **范围：** 至少覆盖 **§13.4** 与 NFR4 任务同路径；不要求像素级与 Figma 一致，但 **信息架构须一致**。 - -### 13.4 NFR4 标准任务脚本（走查用） - -**环境：** 不向参与者提供产品外文档；可提供「请完成下列任务」口头/屏幕展示 instructions（与 PRD「无文档」一致：无用户手册）。 - -**任务表述（给参与者）：** - -> 请在不查阅任何说明文档的情况下，在 **5 分钟内**完成： -> 1）在主界面找到 **记忆、配置、进化** 三个入口； -> 2）进入记忆相关区域后，**完成一次记忆筛选**（任意合理筛选条件即可）； -> 3）**查看一条记忆的详情**。 -> 完成后请告知主持人。 - -**主持人操作：** - -- 使用 **Figma Prototype 链接** 或 **HTML 原型**；从开始画面计时 **5 分钟**。 -- 记录是否完成三步、卡点、是否误点、主观感受（可选 SUS 问卷）。 - -**通过标准（与 PRD 一致）：** - -- **定量：** ≥5 名参与者中 **≥80%** 在 5 分钟内完成；或 **SUS ≥ 68** / **UMUX 达标**（若团队选用问卷替代计时）。 -- **定性：** 记录「找不到三入口」「筛选入口不明显」「详情难以发现」等，回灌迭代。 - -### 13.5 走查记录表（模板） - -复制到表格或 Notion： - -| 参与者 ID | 日期 | 原型类型（Figma/HTML） | 5 分钟内完成（Y/N） | 完成时间（秒） | 卡点简述 | SUS（可选） | -|-----------|------|------------------------|----------------------|----------------|----------|-------------| -| P01 | | | | | | | - -**产出物：** 走查汇总 1 页 + 对高优先级卡顿的界面改动项（可建 Issue 或回写 PRD 附录 D）。 - ---- - -## 14. 交付物与下一步 - -| 文件 | 说明 | -|------|------| -| 本文档 | UX 规格主文档（含 §13 高成本原型与 NFR4） | -| `ux-color-themes.html` | 色板与语义 token 示意 | -| `ux-design-directions.html` | 布局方向静态示意；可演进为 HTML 可点击原型 | -| **Figma** | 按 §13.2；**一键导入线框：** `figma-import/Prototype-NFR4-Storyboard.svg` + `figma-import/README.md` | -| **走查记录** | 按 §13.5 留存，作为 NFR4 验收证据 | - -**建议下一步（BMAD）：** `bmad-bmm-create-architecture`（技术架构与 Tauri 能力域对齐），随后 `bmad-bmm-create-epics-and-stories`。 -**与验证并行：** 完成 §13.2–§13.4 后，即可安排首轮 NFR4 走查，不必等开发完成（原型驱动）。 - ---- - -## 15. 修订历史 - -| 日期 | 说明 | -|------|------| -| 2026-03-24 | 初版：`bmad-bmm-create-ux-design` 全流程合成，对齐 PRD / Brief / 现有 claw-scope 壳 | -| 2026-03-24 | 新增 §13：可点击原型（Figma/HTML）+ NFR4 任务走查、Figma 页面/画板/原型/上传说明；原 §13–14 顺延为 §14–15 | -| 2026-03-24 | 新增 `figma-import/Prototype-NFR4-Storyboard.svg` + README：可导入 Figma 的 SVG 分镜（`.fig` 需 Figma 自行导出） |