@namewta/speculo 0.8.6 → 0.8.7

package/template/workflows/specdev/P-prototype/design-library/foundations.md

@@ -0,0 +1,66 @@
+# 设计基础与六种布局
+
+先按任务模型选择布局，再决定视觉风格。以下结论来自固定研究快照的综合报告；尺寸是原型起点，不是脱离目标用户的硬规范。
+
+## 决策顺序
+
+1. 定义核心对象，以及用户最常做的 3-5 个任务。
+2. 定义对象层级、可恢复 URL、权限和状态模型。
+3. 从六种布局中选择一个主范式，并画出空、错、加载、只读和无权限状态。
+4. 根据任务时长、信息密度和输入设备选择密度档，再定字号、控件高度和面板宽度。
+5. 同时建立浅色与深色的语义 token。
+6. 先建立 primitives，再建立高频 patterns，最后组合页面。
+7. 用真实极端数据、键盘和目标宽度验证。
+
+## 六种高价值布局范式
+
+| 范式 | 适用任务 | 结构与不可丢失的行为 | 代表项目 |
+|---|---|---|---|
+| 全局侧栏 + 页面内容 | 项目管理、CRM、设置、普通后台 | 全局栏只放跨页面稳定对象，页面动作靠近内容头；二级项超过约 5-7 个再引入上下文栏；折叠后保留 tooltip、选中态和持久化状态 | Plane、Twenty、Cal.com |
+| 图标轨 + 上下文侧栏 | 多产品模块、组织或工作区平台 | 图标轨回答“在哪个产品/工作区”，上下文栏回答“范围内有哪些对象”；两层不重复菜单；移动端通常合并为一层 drawer | Supabase Studio、Directus、Mattermost、Paseo |
+| 列表-详情主从 | 客服、邮件、任务、对象浏览、数据库表 | 选择与 URL 同步，宽度可恢复；处理未保存修改、键盘上下移动、空选择、删除落点；窄屏提供列表与详情的明确返回路径 | Chatwoot、Twenty、Open WebUI、CloudCLI |
+| 编辑器/画布 + 检查器 | 设计、白板、SQL、API、低代码 | 主创作面无装饰卡框；工具区和检查器可折叠/调整；快捷键、选择、撤销、缩放和平移属于统一交互模型 | Penpot、Excalidraw、Appsmith、DBX、Hoppscotch |
+| 仪表盘网格 | BI、可观测性、运营概览 | 稳定列系统、拖放手柄、组件最小/最大尺寸；区分编辑/查看；每个 panel 独立呈现无数据、加载和错误 | Grafana、Metabase |
+| 内容中心/文档编辑器 | 知识库、文档、长内容 | 正文限制行长，资源树、目录和评论独立占栏；工具随选择出现；自动保存安静但可确认；低频动作进入斜杠命令或命令面板 | Outline、AFFiNE、AppFlowy、Notesnook、Joplin |
+
+一个原型可以在局部嵌套第二范式，例如“全局侧栏 + 页面内容”中的仪表盘，但必须明确哪个是 shell、哪个只服务当前页面；不要让两套导航或两个检查器竞争同一职责。
+
+## 基础尺度
+
+| 项目 | 建议起点 |
+|---|---|
+| 全局图标轨 | 48-56px |
+| 展开侧栏 | 224-272px |
+| 顶栏 | 44-56px |
+| 右侧检查器 | 288-360px，可调整 |
+| 阅读/表单宽度 | 720-960px |
+| 宽应用内容 | 最多约 1280-1440px；表格、画布、日志和仪表盘使用可用宽度 |
+| 紧凑/默认/触屏控件 | 28-32px / 32-36px / 44-48px |
+| 常用图标 | 14 / 16 / 20px |
+| 主圆角 | 4 / 6 / 8px；更大值留给 dialog、sheet 与触屏容器 |
+
+采用 4px 间距基准，2px 只做视觉校正。图标与文字通常间隔 6-8px，相邻字段 12-16px，表单分组 24-32px，页面区块 32-48px。不要仅靠缩小字体提高密度；先去掉重复标签、合并工具栏并使用渐进披露。
+
+## 工程边界
+
+原型应保持四层逻辑边界，即使暂时没有拆成发布包：
+
+```text
+tokens/       raw scale + semantic roles + themes
+primitives/   button, input, dialog, menu, tooltip
+patterns/     table, filter bar, command palette, inspector
+domain/       注入业务数据、文案、权限与动作
+```
+
+`primitives` 不依赖业务；`patterns` 组合原语但不拥有页面数据；业务层不得绕过 token 散落任意颜色、圆角和阴影。组件库需要薄封装，以固定默认密度、焦点、圆角和 API。
+
+## 原型检查
+
+- 用户能在 5 秒内判断当前位置、作用域和主要动作；
+- 全局、上下文与对象内导航没有重复职责；
+- 画布、表格、正文或消息流是第一视觉信号，而不是装饰卡片；
+- 最长名称、中文、数字、空值和错误文案不会重叠或改变稳定布局；
+- token、primitive、pattern 与领域组件边界可说清；
+- 选择的布局在窄屏有任务重排方案。
+
+更完整的原始论证见 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/report/OPEN_SOURCE_UI_RESEARCH_2026.md</Path>` 第 6-7、11-13 节。

package/template/workflows/specdev/P-prototype/design-library/interaction-patterns.md

@@ -0,0 +1,61 @@
+# 交互模式
+
+原型要呈现完整状态和可恢复行为，而不只展示静态 happy path。以下模式按工具型产品的高频任务组织。
+
+## 导航与状态保持
+
+- shell 在路由切换时保持挂载，侧栏滚动、展开组、面板宽度、筛选和编辑上下文不意外丢失。
+- 选中态同时使用背景、文字/图标对比和位置线索；breadcrumb 只表达层级，不替代明确返回动作。
+- 深层对象提供可复制 URL；刷新后尽量恢复选择、筛选和视图。
+- 列表-详情必须定义空选择、删除当前对象后的落点、未保存修改处理和窄屏返回路径。
+
+## 搜索、命令与快捷键
+
+命令面板服务跨模块跳转、低频动作和主题/设置切换；当前列表的局部搜索仍放在对象附近。命令项包含分组、最近使用、键盘导航、不可用原因和快捷键提示。不要把所有能力藏进 `Cmd/Ctrl+K`。
+
+## 数据表格与网格
+
+按原型问题逐项决定并呈现：
+
+- 列显示/隐藏、排序、筛选、调整宽度和固定列；
+- 行选择与批量动作，批量工具条只在有选择时出现；
+- 虚拟滚动和键盘导航，编辑态不因滚动丢失；
+- 空值、布尔、长文本、代码、日期、时区和大数字格式；
+- loading、无数据、无结果、局部错误和无权限分别建模；
+- 危险写操作展示预览、影响范围、只读或事务提示。
+
+## 表单与保存
+
+- 创建流程有明确主要动作和取消路径；提交后错误与字段程序化关联并可快速定位。
+- 设置页选择“显式保存”或“可靠自动保存 + 可见状态”，不混用而不说明。
+- 长表单按领域分组，标签位置一致；帮助文字解释决策，不重复标签。
+- 危险设置独立成区；只有高损失、不可逆操作才要求输入对象名确认。
+
+## 异步反馈
+
+| 时长 | 反馈 |
+|---|---|
+| 约 100ms 内 | 通常不显示 loading，避免闪烁 |
+| 约 100ms-1s | 按钮局部进度或轻量 skeleton |
+| 1s 以上 | 持续进度、取消能力或后台任务入口 |
+
+Toast 只承载非阻塞确认，不承载必须阅读的错误修复步骤。错误说明发生了什么、影响什么、下一步是什么，并保留用户输入。离线、只读和权限不足不是通用 error 的文案变体，应各有可行动状态。
+
+## 危险操作与撤销
+
+能撤销时优先“执行后短时撤销”；真正不可逆或影响范围不明显时才用 confirmation dialog。按钮写具体动作和范围，例如“删除 12 条记录”，不用“确定”。审批流程同时呈现请求对象、能力边界、允许范围、拒绝路径和可见结果。
+
+## 画布、编辑器与可调面板
+
+- 选择、撤销、缩放、平移和快捷键由统一模型管理；上下文工具随选择出现。
+- 可调 panel 有最小/最大尺寸、键盘或替代控制、持久化和重置路径。
+- 画布型产品为核心对象和操作提供非纯画布的可访问替代路径。
+- 代码/diff/terminal/preview 的 tabs 或 panes 保持稳定尺寸，loading、长标签和状态图标不引起布局跳动。
+
+## 完整组件状态
+
+Button、IconButton、Link、Input、Textarea、Select/Combobox、Checkbox、Radio、Switch、Tooltip、Menu、Popover、Dialog、Drawer/Sheet、Tabs、Toast、InlineAlert、Skeleton 和 EmptyState 至少覆盖适用的 `default / hover / pressed / focus / disabled / loading / error / selected`。工具产品再按问题补 AppShell、Sidebar、CommandPalette、DataTable、FilterBar、ResizablePanel、Inspector、Tree、CodeEditor wrapper 和 PermissionGate。
+
+## 样板验证证据
+
+快照的 Playwright 测试验证九个页面在 390x844 下无横向溢出、Lucide 与图片加载、主题和 token drawer 可交互，以及移动审批产生可见结果：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/ui-gallery/tests/gallery.spec.js</Path>`。复制样板后，用原型自己的状态和任务补充测试，不把这组检查当作生产验收。

package/template/workflows/specdev/P-prototype/design-library/product-pattern-index.md

@@ -0,0 +1,73 @@
+# 38 个产品模式映射
+
+本索引覆盖 snapshot 中 19 个基础项目、8 个 Claude Code 客户端和 11 个多端个人应用。映射用于找到相似约束和进一步阅读入口，不是统一评分、设计排名或许可建议。
+
+## 研究入口
+
+- D：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/data-dev-tools.md</Path>`
+- P：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/productivity-collaboration.md</Path>`
+- C：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/creative-ai-communication.md</Path>`
+- A：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/claude-code-modern-clients.md</Path>`
+- M：`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/personal-multiplatform-apps.md</Path>`
+
+结构化事实源是 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/data/projects.json</Path>` 和 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/data/extended-projects.json</Path>`。
+
+## 基础项目（19）
+
+| 项目 | 核心布局/产品模式 | 最适合借鉴 | 入口 |
+|---|---|---|---|
+| Supabase Studio | 产品轨 + 模块侧栏 + 数据工作区 | 设计系统分层、数据工具 shell、语义颜色 | D |
+| Grafana | 顶栏 + 可停靠菜单 + 仪表盘画布 | 主题契约、密集 dashboard、插件化 UI | D |
+| Metabase | 应用栏 + 集合侧栏 + 查询/仪表盘 | 低门槛分析、主题封装、命令面板 | D |
+| DBeaver Community | 对象树 + 多标签编辑器 + 辅助视图 | 极高密度桌面工作台、上下文命令 | D |
+| Directus | 模块轨 + 集合导航 + 多布局 + 侧栏 | schema 驱动界面、扩展点、多视图 | D |
+| Appsmith | 实体树 + 画布 + 属性面板 + 调试器 | 低代码编辑器、检查器、调试反馈 | D |
+| DBX | 连接树 + tabs + 编辑/数据区 + 工具面板 | 轻量现代桌面端、可调多窗格、AI/MCP | D |
+| Plane | 可调侧栏 + List/Kanban/Gantt + 详情 | 同一数据多视图、peek 侧栏、高效工作台 | P |
+| AppFlowy | 插件式 workspace + 文档/数据库视图 + 原生响应式导航 | local-first、真正跨端、移动任务重排 | P |
+| Twenty | 表格/管道 + 记录侧面板 + 移动导航首页 | 元数据驱动业务 UI、对象表、记录面板 | P |
+| Cal.com / Cal.diy | 管理配置 shell + 独立公开预约流程 | 后台与客户界面分离、预约表单、品牌定制 | P |
+| Outline | 文档树 + 聚焦编辑器 + 情境协作工具 | 低干扰写作、树导航、命令栏 | P |
+| AFFiNE | Page/Edgeless 双模 + 浮动/可调侧栏 | local-first、多模文档、响应式侧栏 | P |
+| Penpot | 无限画布 + 左侧对象/资产 + 右侧 inspector | 专业画布、原生设计 token、设计到代码交付 | C |
+| Excalidraw | 全屏画布 + 漂浮工具岛 + 情境属性 | 低学习成本画布、上下文工具、手绘语言 | C |
+| Open WebUI | 会话侧栏 + 单列聊天 + 模型/工具/RAG workspace | AI 会话 IA、文字缩放、渐进披露 | C |
+| Chatwoot | 导航 + 队列列表 + 会话 + 客户上下文 | 密集主从、实时状态、客服上下文 | C |
+| Mattermost | 团队轨 + 频道栏 + 消息流 + 可调线程栏 | 长期复杂协作、主题、线程上下文 | C |
+| Hoppscotch | 协议导航 + 请求/响应 split panes + collection 栏 | API 工作流、可调 pane、协议切换 | C |
+
+## Claude Code 客户端（8）
+
+| 项目 | 平台与产品模式 | 可用于回答 | 入口 |
+|---|---|---|---|
+| CloudCLI / Claude Code UI | Web/PWA/Electron；会话 drawer/sidebar + transcript + tool/git/file/terminal views | 自托管响应式 Agent UI、工具视图编排 | A |
+| Happy | iOS/Android/Web/macOS；活动会话 inbox + event timeline + 移动 composer/approval | 移动监督、通知、权限审批 | A |
+| Paseo | iOS/Android/Web/Electron/CLI；workspace/agent 侧栏 + chat/editor tabs + file/diff/terminal panes | 真正多端、多个 Agent 与 workspace | A |
+| Opcode | Windows/macOS/Linux；项目/会话浏览 + agent console + analytics/MCP/config modules | 单色本地控制台、管理与分析 | A |
+| CodePilot | Electron；侧栏 + chat workspace + split sessions + provider/MCP/skills/media | 柔和个人 AI、模块化桌面 workspace | A |
+| cdesktop | 响应式 Web；sessions + transcript/terminal/diff + plan/files/preview，最多四 cells | IDE 密度、多 pane 验证工作区 | A |
+| TOKENICODE | Tauri 桌面；会话导航 + chat + local file/editor tools | 本地桌面 AI、编辑器与会话组合 | A |
+| OpenClaudgents | Tauri 桌面；多会话 chat + agent-team status visualization | 新兴的 Agent 团队状态可视化；成熟度不足时只作概念线索 | A |
+
+## 多端个人应用（11）
+
+| 项目 | 平台实现/共享模式 | 可用于回答 | 入口 |
+|---|---|---|---|
+| Notesnook | React/React Native/Electron；共享 editor、core、theme，平台 view 分层 | 内容编辑、主题共享、Web/桌面/移动壳分工 | M |
+| Standard Notes | React/React Native/Electron；共享领域模型，Web/desktop 与 mobile shells | 加密笔记的领域共享与平台壳 | M |
+| Joplin | React/React Native/Electron monorepo；共享 sync/data，平台 UI packages | local-first 同步、多端内容编辑 | M |
+| Logseq | ClojureScript/React/Electron；共享 block model/domain，平台 capability 分层 | 块编辑器、知识图谱与平台能力 | M |
+| LocalSend | Flutter 单一跨平台 UI | 高共享率的桌面/移动任务流 | M |
+| Immich | SvelteKit Web + Flutter mobile；共享 API/领域词汇，UI 分开 | 媒体优先、拍摄/上传与桌面浏览职责分离 | M |
+| Bitwarden Clients | 共享 Web/browser/desktop stack；native mobile 独立 | 共享领域与安全流程、平台原生 UI 取舍 | M |
+| RustDesk | Rust core + Flutter 跨平台 UI | 深度本地能力与统一多端控制界面 | M |
+| Element Web and Element X | 共享协议、SDK、设计语言；Web React，移动 SwiftUI/Compose | 协议一致、平台原生实现、实时通信 | M |
+| Home Assistant Frontend | 响应式 Web UI 嵌入 iOS/Android companion shells | Web-first 多端、设备能力由 native shell 补充 | M |
+| Actual Budget | 共享 React UI；browser worker 与 desktop Node data adapters | local-first 财务工具、共享 UI 与数据适配器 | M |
+
+## 使用映射
+
+1. 先从当前原型的对象、任务、密度和平台筛选 1-3 个项目。
+2. 读取对应详细报告，区分源码事实、界面观察和研究者推断。
+3. 只迁移结构性选择和当前问题所需模式；不要复制品牌、受限源码或迁移中的旧组件。
+4. 需要视觉起点时，再将项目与 `<Path>{roots.workflows}/specdev/P-prototype/design-library/style-index.md</Path>` 的八种样板关联。样板的“主要参考”是综合实现，不等于项目逐像素复制。

package/template/workflows/specdev/P-prototype/design-library/research-provenance.md

@@ -0,0 +1,54 @@
+# 研究来源、快照与复用边界
+
+## 固定快照
+
+| 字段 | 值 |
+|---|---|
+| 上游仓库 | `open-source-ui-research`（authoring 来源；安装后的运行时不依赖上游工作树） |
+| snapshot commit | `49b565913c52f4867456e609696625157f19b930`（短 SHA `49b5659`） |
+| commit subject | `feat: add visual UI style gallery` |
+| 研究基准日 | `2026-08-30` |
+| 快照目录 | `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/</Path>` |
+| tracked file count | 38 |
+
+`research-snapshot` 来自该 commit 的 Git archive，保留全部 tracked 相对结构和字节内容。它包含 Markdown 研究、两个 JSON 数据集、综合 CSS token、八个 HTML 页面、共享 HTML/CSS/JS、Playwright 测试、package lock、本地 Lucide、三张 JPEG、截图和 attribution；不包含 `.git/`、`node_modules/` 或未跟踪的 `test-results/`。
+
+快照内 `.gitignore` 文件是 tracked 内容，必须保留。不要因目录名以点开头而把它们误判为上游 Git 元数据。
+
+## 内容清单
+
+| 分区 | 数量 | 权威内容 |
+|---|---:|---|
+| 根文件 | 3 | `.gitignore`、README、研究方法 |
+| data 分区 | 2 | 19 个基础项目 + 8 个 Claude Code 客户端 + 11 个多端项目，共 38 个记录 |
+| reference 分区 | 2 | 综合 token 与使用约束 |
+| report 分区 | 1 | 总报告、六种布局、跨项目结论和验收清单 |
+| research 分区 | 7 | 项目模板、研究索引和五份分类研究 |
+| ui-gallery 分区 | 23 | 8 个风格页、总览、样式、脚本、测试、依赖锁、Lucide、图片、截图与 attribution |
+| 合计 | 38 | 与 pinned Git tree 一致 |
+
+## 证据等级
+
+| 等级 | 证据 | 可以支持 |
+|---|---|---|
+| A | 仓库 design token、主题、组件源码、官方设计系统 | 精确颜色、字号、圆角、间距、组件状态和实现 |
+| B | 官方架构/产品文档、Storybook、官方截图 | 技术栈、信息架构、主要布局和交互流程 |
+| C | 可访问产品界面与发布说明 | 带“约”的界面观察与响应行为 |
+| D | 第三方资料、搜索摘要、研究者推断 | 线索或明确标注的推断，不支持精确数值 |
+
+精确值必须回到 A 级证据。GitHub stars 是 2026-08-30 附近的近似快照，只说明关注度，不代表 UI 质量。许可字段是研究提示，不构成法律意见；代码公开也不自动等于 OSI 开源或允许直接复用。
+
+## 资产与 attribution
+
+三张本地示例图来自 Unsplash，具体 photo ID 与署名记录在 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/ATTRIBUTION.md</Path>`。Lucide 是本地 vendored UMD 1.37.0，ISC license。复制包含图片或 Lucide 的样板时同时携带 attribution，并在进入生产前由项目 owner 重新核对依赖与许可。
+
+逐项目源码许可差异很大，包括 Apache/MIT/MPL、AGPL、BSL、混合目录许可和 source-available restrictions。设计库用于研究结构、任务和交互；没有明确许可与项目需要时，不复制项目源码或品牌表达。
+
+## 快照不变性
+
+- 原型运行只读 snapshot；复用资产只写入当前 change 的设计包。
+- snapshot 的相对链接、资源路径和 package lock 保持原样。
+- 更新研究库必须显式选择新的完整 commit，重新从 Git tracked tree 建立整个 snapshot，重新核对 38 项映射、链接、文件清单、二进制 hash、测试和 attribution；不得混入上游工作树的未提交文件。
+- 更新后在本文件替换 commit、基准日和 inventory，并将差异作为研究升级审查，不做静默刷新。
+
+原始方法与局限见 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/METHODOLOGY.md</Path>`；总报告见 `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/report/OPEN_SOURCE_UI_RESEARCH_2026.md</Path>`。

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/METHODOLOGY.md

@@ -0,0 +1,90 @@
+# 研究方法与证据标准
+
+## 目标
+
+本研究不是评选“最好看”的产品，而是回答三个可执行问题：
+
+1. 成熟开源产品如何组织高复杂度软件界面？
+2. 哪些视觉与交互模式跨产品重复出现，因而值得作为默认基线？
+3. 哪些方案只适合特定产品密度、输入设备或技术栈，不能直接照搬？
+
+## 样本选择
+
+样本覆盖六类典型软件界面：
+
+- 数据库、BI 与可观测性工具
+- 低代码与后台管理工具
+- 项目管理、文档与个人生产力工具
+- 设计与白板工具
+- AI 对话与开发者工具
+- 客服、通信与协作工具
+
+入选条件包括：公开源码、仍在维护、具有可运行的产品界面、社区或行业影响力较高，以及能够代表一种有辨识度的界面模式。GitHub 星标仅用于说明关注度，不作为设计质量评分。
+
+## 证据等级
+
+| 等级 | 证据 | 可支持的结论 |
+|---|---|---|
+| A | 仓库内 design token、主题、组件源码、官方设计系统 | 精确颜色、字号、圆角、间距、组件状态与技术实现 |
+| B | 官方架构文档、产品文档、Storybook、官方截图 | 技术栈、信息架构、主要布局与交互流程 |
+| C | 可访问的产品界面与发布说明 | 界面观察、响应行为、视觉层级 |
+| D | 第三方文章、搜索摘要、研究者推断 | 只作为线索或明确标注的推断，不支持精确数值 |
+
+## 分析维度
+
+### 产品与技术
+
+- 产品类型、目标用户、主要任务
+- Web/桌面/移动端边界
+- 前端框架、状态与数据层、样式方案、组件库、图标库
+- 单仓/多包结构、设计系统归属与主题机制
+
+### 信息架构与布局
+
+- 全局导航、上下文导航、工作区、检查器、辅助面板
+- 固定/可折叠/可调整尺寸区域
+- 列表-详情、主从、画布、仪表盘、编辑器等布局范式
+- 页面密度、最大内容宽度、空状态和渐进披露
+
+### 视觉系统
+
+- 中性色阶、品牌色、语义色、深浅主题
+- 字体家族、字号阶梯、行高、字重和数字排版
+- 间距基准、控件高度、图标尺寸
+- 圆角、边框、阴影、层级和聚焦环
+
+### 交互与状态
+
+- 导航、搜索、命令面板、快捷键
+- 表格、筛选、批量操作、拖放和调整尺寸
+- 表单验证、保存模型、撤销与危险操作
+- 加载、骨架、空、错误、离线、只读和权限不足状态
+- 键盘可达性、屏幕阅读器和减少动态效果
+
+## 可选的后续评分框架
+
+针对具体软件选型时，可按 1-5 分评估以下维度，分数只用于定位参考对象，不代表综合产品排名：
+
+- `density`：高信息密度任务的组织能力
+- `visualSystem`：token 和组件一致性
+- `interaction`：复杂操作的效率与反馈
+- `accessibility`：键盘、焦点、语义与可读性
+- `responsive`：跨宽度适应能力
+- `sourceClarity`：从公开源码复现设计规则的容易程度
+
+本轮没有为 19 个不同领域的产品强行给出统一分数。数据库 IDE、白板和内容编辑器的目标不同，脱离目标软件权重的数字会制造虚假的可比性。`data/projects.json` 先保留事实字段和 `bestFor` 标签；确定目标软件后，再为上述维度设置权重并评分。
+
+## 数值记录规则
+
+- 精确值必须能回链到 A 级证据。
+- 屏幕观察得到的值写为“约”，且不伪装为 token。
+- 星标数按采集日取近似值，并使用 `k` 级别展示，避免短期波动制造假精度。
+- 同一项目不同子应用可能采用不同设计系统，必须标明适用范围。
+- AGPL、MPL、Elastic License、BSL、功能性源码许可等必须分开标注；“代码公开”不自动等于 OSI 开源。
+
+## 局限
+
+- 产品快速迭代，报告记录的是 2026-08-30 附近的源码状态。
+- 登录后或付费功能可能无法完整观察。
+- 仓库中的旧组件、迁移中 token 与当前生产界面可能并存。
+- 本研究为工程与设计参考，不替代对目标用户的可用性测试。

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/README.md

@@ -0,0 +1,31 @@
+# Open Source UI Research
+
+面向桌面端、Web 与移动软件设计的开源产品 UI/UX 研究库。
+
+本项目通过源码、官方设计系统、产品文档和实际界面资料，拆解热门开源产品的：
+
+- 信息架构与整体布局
+- 技术栈与前端架构
+- 色彩、字体、间距、圆角、阴影等视觉 token
+- 导航、表格、表单、命令面板、反馈状态等交互模式
+- 可复用的设计原则与落地建议
+
+## 交付物
+
+- [可视化 UI 风格样板库](ui-gallery/index.html)：8 个独立 HTML 页面，覆盖高密度 IDE、桌面控制台、个人 AI、响应式 Web、移动审批、真正多端、内容编辑与媒体优先风格；附可复制 token 和响应式实现。
+- [综合研究报告](report/OPEN_SOURCE_UI_RESEARCH_2026.md)：基础 19 个项目总览、跨项目结论、布局/视觉/交互基线和验收清单。
+- [Claude Code 现代开源客户端专项](research/claude-code-modern-clients.md)：CloudCLI、Happy、Paseo、Opcode、CodePilot、cdesktop、TOKENICODE、OpenClaudgents，分别覆盖桌面、Web、移动与跨设备方案。
+- [多端个人应用对照](research/personal-multiplatform-apps.md)：Notesnook、Joplin、LocalSend、Immich、RustDesk、Actual Budget 等 11 个项目，按桌面/Web/移动分别总结。
+- [数据与开发工具](research/data-dev-tools.md)：Supabase、Grafana、Metabase、DBeaver、Directus、Appsmith、DBX。
+- [协作与生产力](research/productivity-collaboration.md)：Plane、AppFlowy、Twenty、Cal.com、Outline、AFFiNE。
+- [创作、AI 与通信](research/creative-ai-communication.md)：Penpot、Excalidraw、Open WebUI、Chatwoot、Mattermost、Hoppscotch。
+- [结构化基础项目清单](data/projects.json) 与 [扩展项目清单](data/extended-projects.json)：合计 38 个项目记录，供后续网站、筛选器或自动化消费。
+- [设计 token 基线](reference/design-tokens.css) 与 [使用建议](reference/USAGE.md)：跨项目综合出的可实现起点。
+- [研究方法](METHODOLOGY.md)：证据等级、选择标准、评分维度和局限。
+
+## 研究原则
+
+1. 优先引用 GitHub 源码、官方文档和官方设计系统。
+2. 明确区分源码事实、界面观察和研究者推断。
+3. 星标数等时效数据注明采集日期，不将其视为 UI 质量指标。
+4. 对无法从公开资料精确确认的数值，不制造伪精度。

package/template/workflows/specdev/P-prototype/design-library/research-snapshot/data/extended-projects.json

@@ -0,0 +1,241 @@
+{
+  "asOf": "2026-08-30",
+  "notes": "GitHub stars are a dated snapshot. License fields are research notes, not legal advice.",
+  "claudeCodeClients": [
+    {
+      "id": "cloudcli",
+      "name": "CloudCLI / Claude Code UI",
+      "repo": "https://github.com/siteboon/claudecodeui",
+      "stars": 13505,
+      "platforms": ["web", "pwa", "desktop-electron"],
+      "relationship": "Direct Claude Agent SDK and CLI web UI",
+      "frontend": ["React 18", "Vite", "Tailwind CSS 3", "CodeMirror", "xterm"],
+      "backend": ["Express", "SQLite", "Electron"],
+      "layout": "session drawer/sidebar + transcript + tool, git, file and terminal views",
+      "visual": "warm neutral light theme, neutral 8/12/17% dark surfaces, blue accent, 8px base radius",
+      "license": "AGPL-3.0",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "happy",
+      "name": "Happy",
+      "repo": "https://github.com/slopus/happy",
+      "stars": 23551,
+      "platforms": ["ios", "android", "web", "macos-tauri"],
+      "relationship": "Encrypted remote client and wrapper for Claude Code and Codex",
+      "frontend": ["Expo", "React Native 0.83", "React 19", "Unistyles", "Zustand"],
+      "backend": ["CLI wrapper", "encrypted sync", "push notifications"],
+      "layout": "active-session inbox + event timeline + mobile composer and approval surfaces",
+      "visual": "Material-like purple tonal palette, 14-17px mobile text, 16-24px native radii",
+      "license": "MIT",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "paseo",
+      "name": "Paseo",
+      "repo": "https://github.com/getpaseo/paseo",
+      "stars": 15495,
+      "platforms": ["ios", "android", "web", "desktop-electron", "cli"],
+      "relationship": "Multi-agent daemon supporting Claude Code, Codex, Copilot, OpenCode and Pi",
+      "frontend": ["Expo", "React Native Web", "Unistyles", "Zustand", "CodeMirror", "xterm"],
+      "backend": ["local daemon", "Electron", "remote host protocol"],
+      "layout": "workspace and agent sidebar + tabbed chat/editor + file, diff and terminal panes",
+      "visual": "zinc surfaces, muted green accent, 12/14/15px dense type, 4/6/8px working radii",
+      "license": "Apache-2.0",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "opcode",
+      "name": "Opcode",
+      "repo": "https://github.com/winfunc/opcode",
+      "stars": 22384,
+      "platforms": ["windows", "macos", "linux"],
+      "relationship": "Local desktop control center for Claude Code",
+      "frontend": ["React 18", "Tailwind CSS 4", "Zustand"],
+      "backend": ["Tauri 2", "Rust"],
+      "layout": "project/session browser + agent console + analytics, MCP and configuration modules",
+      "visual": "near-monochrome OKLCH dark surfaces, Inter, 4-12px common radii",
+      "license": "AGPL-3.0",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "codepilot",
+      "name": "CodePilot",
+      "repo": "https://github.com/op7418/CodePilot",
+      "stars": 6437,
+      "platforms": ["windows", "macos", "linux", "browser-development-mode"],
+      "relationship": "Multi-provider desktop agent with Claude Code import and integration",
+      "frontend": ["Next.js 16", "React 19", "Tailwind CSS 4", "Radix"],
+      "backend": ["Electron"],
+      "layout": "sidebar + chat workspace + split sessions + provider, MCP, skills and media modules",
+      "visual": "warm monochrome OKLCH default, 16px base radius, diffuse shadows, 12 theme families",
+      "license": "BSL-1.1; converts to Apache-2.0 on 2029-03-16",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "cdesktop",
+      "name": "cdesktop",
+      "repo": "https://github.com/cdesktop-ai/cdesktop",
+      "stars": 108,
+      "platforms": ["responsive-web", "tauri-planned"],
+      "relationship": "Local web UI for Claude Code, Codex, Gemini CLI, OpenCode and Hermes",
+      "frontend": ["React 18", "Vite", "Tailwind CSS 3", "Zustand"],
+      "backend": ["Rust", "SQLite"],
+      "layout": "sessions sidebar + transcript/terminal/diff + plan/files/app-preview pane; up to four cells",
+      "visual": "IDE-like neutral surfaces, orange brand accent, IBM Plex Sans, 2px global radius",
+      "license": "Apache-2.0",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "tokenicode",
+      "name": "TOKENICODE",
+      "repo": "https://github.com/yiliqi78/TOKENICODE",
+      "stars": 438,
+      "platforms": ["windows", "macos", "linux"],
+      "relationship": "Claude Code desktop workspace",
+      "frontend": ["React 19", "Tailwind CSS 4", "CodeMirror", "Tiptap", "Zustand"],
+      "backend": ["Tauri 2", "Rust"],
+      "layout": "conversation navigation + chat + local file/editor tools",
+      "visual": "black/blue/purple/green families, solid neutral surfaces, platform Chinese font stack",
+      "license": "Apache-2.0",
+      "detailReport": "research/claude-code-modern-clients.md"
+    },
+    {
+      "id": "openclaudgents",
+      "name": "OpenClaudgents",
+      "repo": "https://github.com/MagnusPladsen/OpenClaudgents",
+      "stars": 1,
+      "platforms": ["desktop"],
+      "relationship": "Claude Code multi-session and agent-team visualization",
+      "frontend": ["React", "TypeScript"],
+      "backend": ["Tauri 2"],
+      "layout": "multi-session chat + agent team status visualization",
+      "visual": "multiple themes; emerging concept rather than a mature reference",
+      "license": "MIT",
+      "detailReport": "research/claude-code-modern-clients.md"
+    }
+  ],
+  "personalMultiplatformApps": [
+    {
+      "id": "notesnook",
+      "name": "Notesnook",
+      "repo": "https://github.com/streetwriters/notesnook",
+      "stars": 14482,
+      "platforms": ["web", "windows", "macos", "linux", "ios", "android"],
+      "stack": ["React", "React Native", "Electron", "TypeScript"],
+      "sharingModel": "shared editor, core and theme with platform view layers",
+      "license": "GPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "standard-notes",
+      "name": "Standard Notes",
+      "repo": "https://github.com/standardnotes/app",
+      "stars": 6612,
+      "platforms": ["web", "windows", "macos", "linux", "ios", "android"],
+      "stack": ["React", "React Native", "Electron", "TypeScript"],
+      "sharingModel": "shared domain model with web/desktop and mobile shells",
+      "license": "AGPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "joplin",
+      "name": "Joplin",
+      "repo": "https://github.com/laurent22/joplin",
+      "stars": 56164,
+      "platforms": ["desktop", "ios", "android", "cli", "server"],
+      "stack": ["React", "React Native", "Electron", "TypeScript"],
+      "sharingModel": "monorepo sharing sync and data layers, platform-specific UI packages",
+      "license": "AGPL-3.0-or-later with directory exceptions",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "logseq",
+      "name": "Logseq",
+      "repo": "https://github.com/logseq/logseq",
+      "stars": 44685,
+      "platforms": ["web", "desktop", "ios", "android"],
+      "stack": ["ClojureScript", "React", "Electron", "DataScript"],
+      "sharingModel": "shared block model and domain logic with platform capability layers",
+      "license": "AGPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "localsend",
+      "name": "LocalSend",
+      "repo": "https://github.com/localsend/localsend",
+      "stars": 89722,
+      "platforms": ["windows", "macos", "linux", "ios", "android"],
+      "stack": ["Flutter", "Dart"],
+      "sharingModel": "single cross-platform Flutter UI",
+      "license": "Apache-2.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "immich",
+      "name": "Immich",
+      "repo": "https://github.com/immich-app/immich",
+      "stars": 112970,
+      "platforms": ["web", "ios", "android", "server"],
+      "stack": ["SvelteKit", "Flutter", "TypeScript", "Dart"],
+      "sharingModel": "shared API/domain vocabulary, separate web and mobile UI",
+      "license": "AGPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "bitwarden-clients",
+      "name": "Bitwarden Clients",
+      "repo": "https://github.com/bitwarden/clients",
+      "stars": 13703,
+      "platforms": ["web", "browser-extension", "desktop", "ios", "android", "cli"],
+      "stack": ["Angular", "Nx", "Electron", "Swift", "Kotlin"],
+      "sharingModel": "shared web/browser/desktop stack; separate native mobile repositories",
+      "license": "GPL-3.0 default; Bitwarden License in marked modules",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "rustdesk",
+      "name": "RustDesk",
+      "repo": "https://github.com/rustdesk/rustdesk",
+      "stars": 122142,
+      "platforms": ["windows", "macos", "linux", "web", "ios", "android"],
+      "stack": ["Rust", "Flutter"],
+      "sharingModel": "Rust core plus cross-platform Flutter UI",
+      "license": "AGPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "element",
+      "name": "Element Web and Element X",
+      "repo": "https://github.com/element-hq/element-web",
+      "stars": 13411,
+      "platforms": ["web", "desktop", "ios", "android"],
+      "stack": ["React", "Electron", "SwiftUI", "Kotlin Compose", "Matrix Rust SDK"],
+      "sharingModel": "shared protocol, SDK and design language with native mobile UI",
+      "license": "AGPL-3.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "home-assistant-frontend",
+      "name": "Home Assistant Frontend",
+      "repo": "https://github.com/home-assistant/frontend",
+      "stars": 5639,
+      "platforms": ["responsive-web", "ios-companion", "android-companion"],
+      "stack": ["Lit", "Web Components", "TypeScript", "native companion shells"],
+      "sharingModel": "responsive web UI embedded in native companion applications",
+      "license": "Apache-2.0",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    },
+    {
+      "id": "actual-budget",
+      "name": "Actual Budget",
+      "repo": "https://github.com/actualbudget/actual",
+      "stars": 28455,
+      "platforms": ["web", "windows", "macos", "linux", "mobile-web"],
+      "stack": ["React", "Electron", "SQLite", "WASM", "TypeScript"],
+      "sharingModel": "shared React UI with browser worker and desktop Node data adapters",
+      "license": "MIT",
+      "detailReport": "research/personal-multiplatform-apps.md"
+    }
+  ]
+}