@namewta/speculo 0.8.6 → 0.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/src/structured.js +8 -4
  2. package/dist/src/structured.js.map +1 -1
  3. package/package.json +1 -1
  4. package/template/canonical/canonical-specdev-goal-plan.md +67 -20
  5. package/template/canonical/canonical-specdev-grill-with-docs.md +17 -9
  6. package/template/canonical/canonical-specdev-orchestrate-implementation.md +2784 -0
  7. package/template/canonical/canonical-specdev-spec.md +19 -9
  8. package/template/canonical/canonical-specdev-tickets.md +58 -16
  9. package/template/canonical/canonical-specdev-wayfinder.md +11 -11
  10. package/template/workflows/specdev/A-archive-and-consolidate/A-archive-and-consolidate.md +1 -1
  11. package/template/workflows/specdev/I-implement/I-implement.md +10 -5
  12. package/template/workflows/specdev/I-implement/execution-preflight.md +2 -0
  13. package/template/workflows/specdev/I-init-setup/I-init-setup.md +1 -1
  14. package/template/workflows/specdev/I-init-setup/config-template.json +2 -2
  15. package/template/workflows/specdev/O-orchestrate-implementation/O-orchestrate-implementation.md +129 -0
  16. package/template/workflows/specdev/O-orchestrate-implementation/conflict-and-drift.md +18 -0
  17. package/template/workflows/specdev/O-orchestrate-implementation/execution-loop.md +30 -0
  18. package/template/workflows/specdev/O-orchestrate-implementation/implementation-evidence-template.md +39 -0
  19. package/template/workflows/specdev/O-orchestrate-implementation/implementation-map-template.md +50 -0
  20. package/template/workflows/specdev/O-orchestrate-implementation/implementation-plan-template.md +61 -0
  21. package/template/workflows/specdev/O-orchestrate-implementation/input-readiness.md +25 -0
  22. package/template/workflows/specdev/O-orchestrate-implementation/super-dag.md +27 -0
  23. package/template/workflows/specdev/P-goal-plan/planning-modes.md +1 -1
  24. package/template/workflows/specdev/P-prototype/P-prototype.md +30 -26
  25. package/template/workflows/specdev/P-prototype/design-library/INDEX.md +43 -0
  26. package/template/workflows/specdev/P-prototype/design-library/color-and-theme.md +65 -0
  27. package/template/workflows/specdev/P-prototype/design-library/foundations.md +66 -0
  28. package/template/workflows/specdev/P-prototype/design-library/interaction-patterns.md +61 -0
  29. package/template/workflows/specdev/P-prototype/design-library/product-pattern-index.md +73 -0
  30. package/template/workflows/specdev/P-prototype/design-library/research-provenance.md +54 -0
  31. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/METHODOLOGY.md +90 -0
  32. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/README.md +31 -0
  33. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/data/extended-projects.json +241 -0
  34. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/data/projects.json +253 -0
  35. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/reference/USAGE.md +40 -0
  36. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/reference/design-tokens.css +145 -0
  37. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/report/OPEN_SOURCE_UI_RESEARCH_2026.md +519 -0
  38. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/PROJECT_TEMPLATE.md +29 -0
  39. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/README.md +9 -0
  40. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/claude-code-modern-clients.md +407 -0
  41. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/creative-ai-communication.md +574 -0
  42. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/data-dev-tools.md +432 -0
  43. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/personal-multiplatform-apps.md +185 -0
  44. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/research/productivity-collaboration.md +398 -0
  45. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/01-dense-ide.html +68 -0
  46. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/02-monochrome-console.html +18 -0
  47. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/03-soft-personal-ai.html +17 -0
  48. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/04-responsive-web.html +14 -0
  49. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/05-mobile-supervisor.html +16 -0
  50. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/06-cross-platform-workspace.html +17 -0
  51. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/07-local-first-content.html +9 -0
  52. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/08-media-first.html +17 -0
  53. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/README.md +49 -0
  54. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/ATTRIBUTION.md +9 -0
  55. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/landscape.jpg +0 -0
  56. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/lucide.js +20494 -0
  57. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/mountain.jpg +0 -0
  58. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/assets/workspace.jpg +0 -0
  59. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/index.html +70 -0
  60. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/package-lock.json +78 -0
  61. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/package.json +12 -0
  62. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/screenshots/index-desktop.png +0 -0
  63. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/scripts/gallery.js +134 -0
  64. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/styles/base.css +795 -0
  65. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/styles/pages.css +533 -0
  66. package/template/workflows/specdev/P-prototype/design-library/research-snapshot/ui-gallery/tests/gallery.spec.js +56 -0
  67. package/template/workflows/specdev/P-prototype/design-library/responsive-and-platforms.md +53 -0
  68. package/template/workflows/specdev/P-prototype/design-library/style-index.md +32 -0
  69. package/template/workflows/specdev/P-prototype/design-package.schema.json +70 -0
  70. package/template/workflows/specdev/P-prototype/design-system-template.md +366 -0
  71. package/template/workflows/specdev/P-prototype/detect-existing-style.md +53 -0
  72. package/template/workflows/specdev/P-prototype/generate-design-package.md +50 -0
  73. package/template/workflows/specdev/P-prototype/style-selection-protocol.md +41 -0
  74. package/template/workflows/specdev/P-prototype/tools/materialize-prototype.mjs +126 -0
  75. package/template/workflows/specdev/P-prototype/tools/validate-design-package.mjs +155 -0
  76. package/template/workflows/specdev/README.md +28 -15
  77. package/template/workflows/specdev/T-triage/T-triage.md +1 -1
  78. package/template/workflows/specdev/W-wayfinder/W-wayfinder.md +2 -2
  79. package/template/workflows/specdev/W-wayfinder/local-tracker-contract.md +3 -4
  80. package/template/workflows/specdev/common/README.md +6 -3
  81. package/template/workflows/specdev/common/rules/artifact-contract.md +9 -3
  82. package/template/workflows/specdev/common/rules/change-completion.md +3 -0
  83. package/template/workflows/specdev/common/rules/deviation-control.md +2 -0
  84. package/template/workflows/specdev/common/rules/evidence-and-verification.md +2 -0
  85. package/template/workflows/specdev/common/rules/parent-implementation-orchestration.md +27 -0
  86. package/template/workflows/specdev/common/rules/path-ownership.md +3 -1
  87. package/template/workflows/specdev/common/schemas/config.schema.json +4 -4
  88. package/template/workflows/specdev/common/schemas/implementation-map.schema.json +40 -0
  89. package/template/workflows/specdev/common/schemas/implementation-plan.schema.json +44 -0
  90. package/template/workflows/specdev/common/skills/dev-worktree/SKILL.md +4 -4
  91. package/template/workflows/specdev/common/skills/dev-worktree/references/create.md +1 -3
  92. package/template/workflows/specdev/common/skills/subagent-delivery/SKILL.md +5 -3
  93. package/template/workflows/specdev/common/tools/README.md +2 -2
  94. package/template/workflows/specdev/common/tools/validate-specdev.mjs +572 -30
  95. package/template/workflows/specdev/P-prototype/logic-prototype.md +0 -24
  96. package/template/workflows/specdev/P-prototype/prototype-record-template.md +0 -46
  97. package/template/workflows/specdev/P-prototype/ui-prototype.md +0 -21
  98. package/template/workflows/specdev/common/schemas/prototype-record.schema.json +0 -24
@@ -0,0 +1,73 @@
1
+ # 38 个产品模式映射
2
+
3
+ 本索引覆盖 snapshot 中 19 个基础项目、8 个 Claude Code 客户端和 11 个多端个人应用。映射用于找到相似约束和进一步阅读入口,不是统一评分、设计排名或许可建议。
4
+
5
+ ## 研究入口
6
+
7
+ - D:`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/data-dev-tools.md</Path>`
8
+ - P:`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/productivity-collaboration.md</Path>`
9
+ - C:`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/creative-ai-communication.md</Path>`
10
+ - A:`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/claude-code-modern-clients.md</Path>`
11
+ - M:`<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/research/personal-multiplatform-apps.md</Path>`
12
+
13
+ 结构化事实源是 `<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>`。
14
+
15
+ ## 基础项目(19)
16
+
17
+ | 项目 | 核心布局/产品模式 | 最适合借鉴 | 入口 |
18
+ |---|---|---|---|
19
+ | Supabase Studio | 产品轨 + 模块侧栏 + 数据工作区 | 设计系统分层、数据工具 shell、语义颜色 | D |
20
+ | Grafana | 顶栏 + 可停靠菜单 + 仪表盘画布 | 主题契约、密集 dashboard、插件化 UI | D |
21
+ | Metabase | 应用栏 + 集合侧栏 + 查询/仪表盘 | 低门槛分析、主题封装、命令面板 | D |
22
+ | DBeaver Community | 对象树 + 多标签编辑器 + 辅助视图 | 极高密度桌面工作台、上下文命令 | D |
23
+ | Directus | 模块轨 + 集合导航 + 多布局 + 侧栏 | schema 驱动界面、扩展点、多视图 | D |
24
+ | Appsmith | 实体树 + 画布 + 属性面板 + 调试器 | 低代码编辑器、检查器、调试反馈 | D |
25
+ | DBX | 连接树 + tabs + 编辑/数据区 + 工具面板 | 轻量现代桌面端、可调多窗格、AI/MCP | D |
26
+ | Plane | 可调侧栏 + List/Kanban/Gantt + 详情 | 同一数据多视图、peek 侧栏、高效工作台 | P |
27
+ | AppFlowy | 插件式 workspace + 文档/数据库视图 + 原生响应式导航 | local-first、真正跨端、移动任务重排 | P |
28
+ | Twenty | 表格/管道 + 记录侧面板 + 移动导航首页 | 元数据驱动业务 UI、对象表、记录面板 | P |
29
+ | Cal.com / Cal.diy | 管理配置 shell + 独立公开预约流程 | 后台与客户界面分离、预约表单、品牌定制 | P |
30
+ | Outline | 文档树 + 聚焦编辑器 + 情境协作工具 | 低干扰写作、树导航、命令栏 | P |
31
+ | AFFiNE | Page/Edgeless 双模 + 浮动/可调侧栏 | local-first、多模文档、响应式侧栏 | P |
32
+ | Penpot | 无限画布 + 左侧对象/资产 + 右侧 inspector | 专业画布、原生设计 token、设计到代码交付 | C |
33
+ | Excalidraw | 全屏画布 + 漂浮工具岛 + 情境属性 | 低学习成本画布、上下文工具、手绘语言 | C |
34
+ | Open WebUI | 会话侧栏 + 单列聊天 + 模型/工具/RAG workspace | AI 会话 IA、文字缩放、渐进披露 | C |
35
+ | Chatwoot | 导航 + 队列列表 + 会话 + 客户上下文 | 密集主从、实时状态、客服上下文 | C |
36
+ | Mattermost | 团队轨 + 频道栏 + 消息流 + 可调线程栏 | 长期复杂协作、主题、线程上下文 | C |
37
+ | Hoppscotch | 协议导航 + 请求/响应 split panes + collection 栏 | API 工作流、可调 pane、协议切换 | C |
38
+
39
+ ## Claude Code 客户端(8)
40
+
41
+ | 项目 | 平台与产品模式 | 可用于回答 | 入口 |
42
+ |---|---|---|---|
43
+ | CloudCLI / Claude Code UI | Web/PWA/Electron;会话 drawer/sidebar + transcript + tool/git/file/terminal views | 自托管响应式 Agent UI、工具视图编排 | A |
44
+ | Happy | iOS/Android/Web/macOS;活动会话 inbox + event timeline + 移动 composer/approval | 移动监督、通知、权限审批 | A |
45
+ | Paseo | iOS/Android/Web/Electron/CLI;workspace/agent 侧栏 + chat/editor tabs + file/diff/terminal panes | 真正多端、多个 Agent 与 workspace | A |
46
+ | Opcode | Windows/macOS/Linux;项目/会话浏览 + agent console + analytics/MCP/config modules | 单色本地控制台、管理与分析 | A |
47
+ | CodePilot | Electron;侧栏 + chat workspace + split sessions + provider/MCP/skills/media | 柔和个人 AI、模块化桌面 workspace | A |
48
+ | cdesktop | 响应式 Web;sessions + transcript/terminal/diff + plan/files/preview,最多四 cells | IDE 密度、多 pane 验证工作区 | A |
49
+ | TOKENICODE | Tauri 桌面;会话导航 + chat + local file/editor tools | 本地桌面 AI、编辑器与会话组合 | A |
50
+ | OpenClaudgents | Tauri 桌面;多会话 chat + agent-team status visualization | 新兴的 Agent 团队状态可视化;成熟度不足时只作概念线索 | A |
51
+
52
+ ## 多端个人应用(11)
53
+
54
+ | 项目 | 平台实现/共享模式 | 可用于回答 | 入口 |
55
+ |---|---|---|---|
56
+ | Notesnook | React/React Native/Electron;共享 editor、core、theme,平台 view 分层 | 内容编辑、主题共享、Web/桌面/移动壳分工 | M |
57
+ | Standard Notes | React/React Native/Electron;共享领域模型,Web/desktop 与 mobile shells | 加密笔记的领域共享与平台壳 | M |
58
+ | Joplin | React/React Native/Electron monorepo;共享 sync/data,平台 UI packages | local-first 同步、多端内容编辑 | M |
59
+ | Logseq | ClojureScript/React/Electron;共享 block model/domain,平台 capability 分层 | 块编辑器、知识图谱与平台能力 | M |
60
+ | LocalSend | Flutter 单一跨平台 UI | 高共享率的桌面/移动任务流 | M |
61
+ | Immich | SvelteKit Web + Flutter mobile;共享 API/领域词汇,UI 分开 | 媒体优先、拍摄/上传与桌面浏览职责分离 | M |
62
+ | Bitwarden Clients | 共享 Web/browser/desktop stack;native mobile 独立 | 共享领域与安全流程、平台原生 UI 取舍 | M |
63
+ | RustDesk | Rust core + Flutter 跨平台 UI | 深度本地能力与统一多端控制界面 | M |
64
+ | Element Web and Element X | 共享协议、SDK、设计语言;Web React,移动 SwiftUI/Compose | 协议一致、平台原生实现、实时通信 | M |
65
+ | Home Assistant Frontend | 响应式 Web UI 嵌入 iOS/Android companion shells | Web-first 多端、设备能力由 native shell 补充 | M |
66
+ | Actual Budget | 共享 React UI;browser worker 与 desktop Node data adapters | local-first 财务工具、共享 UI 与数据适配器 | M |
67
+
68
+ ## 使用映射
69
+
70
+ 1. 先从当前原型的对象、任务、密度和平台筛选 1-3 个项目。
71
+ 2. 读取对应详细报告,区分源码事实、界面观察和研究者推断。
72
+ 3. 只迁移结构性选择和当前问题所需模式;不要复制品牌、受限源码或迁移中的旧组件。
73
+ 4. 需要视觉起点时,再将项目与 `<Path>{roots.workflows}/specdev/P-prototype/design-library/style-index.md</Path>` 的八种样板关联。样板的“主要参考”是综合实现,不等于项目逐像素复制。
@@ -0,0 +1,54 @@
1
+ # 研究来源、快照与复用边界
2
+
3
+ ## 固定快照
4
+
5
+ | 字段 | 值 |
6
+ |---|---|
7
+ | 上游仓库 | `open-source-ui-research`(authoring 来源;安装后的运行时不依赖上游工作树) |
8
+ | snapshot commit | `49b565913c52f4867456e609696625157f19b930`(短 SHA `49b5659`) |
9
+ | commit subject | `feat: add visual UI style gallery` |
10
+ | 研究基准日 | `2026-08-30` |
11
+ | 快照目录 | `<Path>{roots.workflows}/specdev/P-prototype/design-library/research-snapshot/</Path>` |
12
+ | tracked file count | 38 |
13
+
14
+ `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/`。
15
+
16
+ 快照内 `.gitignore` 文件是 tracked 内容,必须保留。不要因目录名以点开头而把它们误判为上游 Git 元数据。
17
+
18
+ ## 内容清单
19
+
20
+ | 分区 | 数量 | 权威内容 |
21
+ |---|---:|---|
22
+ | 根文件 | 3 | `.gitignore`、README、研究方法 |
23
+ | data 分区 | 2 | 19 个基础项目 + 8 个 Claude Code 客户端 + 11 个多端项目,共 38 个记录 |
24
+ | reference 分区 | 2 | 综合 token 与使用约束 |
25
+ | report 分区 | 1 | 总报告、六种布局、跨项目结论和验收清单 |
26
+ | research 分区 | 7 | 项目模板、研究索引和五份分类研究 |
27
+ | ui-gallery 分区 | 23 | 8 个风格页、总览、样式、脚本、测试、依赖锁、Lucide、图片、截图与 attribution |
28
+ | 合计 | 38 | 与 pinned Git tree 一致 |
29
+
30
+ ## 证据等级
31
+
32
+ | 等级 | 证据 | 可以支持 |
33
+ |---|---|---|
34
+ | A | 仓库 design token、主题、组件源码、官方设计系统 | 精确颜色、字号、圆角、间距、组件状态和实现 |
35
+ | B | 官方架构/产品文档、Storybook、官方截图 | 技术栈、信息架构、主要布局和交互流程 |
36
+ | C | 可访问产品界面与发布说明 | 带“约”的界面观察与响应行为 |
37
+ | D | 第三方资料、搜索摘要、研究者推断 | 线索或明确标注的推断,不支持精确数值 |
38
+
39
+ 精确值必须回到 A 级证据。GitHub stars 是 2026-08-30 附近的近似快照,只说明关注度,不代表 UI 质量。许可字段是研究提示,不构成法律意见;代码公开也不自动等于 OSI 开源或允许直接复用。
40
+
41
+ ## 资产与 attribution
42
+
43
+ 三张本地示例图来自 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 重新核对依赖与许可。
44
+
45
+ 逐项目源码许可差异很大,包括 Apache/MIT/MPL、AGPL、BSL、混合目录许可和 source-available restrictions。设计库用于研究结构、任务和交互;没有明确许可与项目需要时,不复制项目源码或品牌表达。
46
+
47
+ ## 快照不变性
48
+
49
+ - 原型运行只读 snapshot;复用资产只写入当前 change 的设计包。
50
+ - snapshot 的相对链接、资源路径和 package lock 保持原样。
51
+ - 更新研究库必须显式选择新的完整 commit,重新从 Git tracked tree 建立整个 snapshot,重新核对 38 项映射、链接、文件清单、二进制 hash、测试和 attribution;不得混入上游工作树的未提交文件。
52
+ - 更新后在本文件替换 commit、基准日和 inventory,并将差异作为研究升级审查,不做静默刷新。
53
+
54
+ 原始方法与局限见 `<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>`。
@@ -0,0 +1,90 @@
1
+ # 研究方法与证据标准
2
+
3
+ ## 目标
4
+
5
+ 本研究不是评选“最好看”的产品,而是回答三个可执行问题:
6
+
7
+ 1. 成熟开源产品如何组织高复杂度软件界面?
8
+ 2. 哪些视觉与交互模式跨产品重复出现,因而值得作为默认基线?
9
+ 3. 哪些方案只适合特定产品密度、输入设备或技术栈,不能直接照搬?
10
+
11
+ ## 样本选择
12
+
13
+ 样本覆盖六类典型软件界面:
14
+
15
+ - 数据库、BI 与可观测性工具
16
+ - 低代码与后台管理工具
17
+ - 项目管理、文档与个人生产力工具
18
+ - 设计与白板工具
19
+ - AI 对话与开发者工具
20
+ - 客服、通信与协作工具
21
+
22
+ 入选条件包括:公开源码、仍在维护、具有可运行的产品界面、社区或行业影响力较高,以及能够代表一种有辨识度的界面模式。GitHub 星标仅用于说明关注度,不作为设计质量评分。
23
+
24
+ ## 证据等级
25
+
26
+ | 等级 | 证据 | 可支持的结论 |
27
+ |---|---|---|
28
+ | A | 仓库内 design token、主题、组件源码、官方设计系统 | 精确颜色、字号、圆角、间距、组件状态与技术实现 |
29
+ | B | 官方架构文档、产品文档、Storybook、官方截图 | 技术栈、信息架构、主要布局与交互流程 |
30
+ | C | 可访问的产品界面与发布说明 | 界面观察、响应行为、视觉层级 |
31
+ | D | 第三方文章、搜索摘要、研究者推断 | 只作为线索或明确标注的推断,不支持精确数值 |
32
+
33
+ ## 分析维度
34
+
35
+ ### 产品与技术
36
+
37
+ - 产品类型、目标用户、主要任务
38
+ - Web/桌面/移动端边界
39
+ - 前端框架、状态与数据层、样式方案、组件库、图标库
40
+ - 单仓/多包结构、设计系统归属与主题机制
41
+
42
+ ### 信息架构与布局
43
+
44
+ - 全局导航、上下文导航、工作区、检查器、辅助面板
45
+ - 固定/可折叠/可调整尺寸区域
46
+ - 列表-详情、主从、画布、仪表盘、编辑器等布局范式
47
+ - 页面密度、最大内容宽度、空状态和渐进披露
48
+
49
+ ### 视觉系统
50
+
51
+ - 中性色阶、品牌色、语义色、深浅主题
52
+ - 字体家族、字号阶梯、行高、字重和数字排版
53
+ - 间距基准、控件高度、图标尺寸
54
+ - 圆角、边框、阴影、层级和聚焦环
55
+
56
+ ### 交互与状态
57
+
58
+ - 导航、搜索、命令面板、快捷键
59
+ - 表格、筛选、批量操作、拖放和调整尺寸
60
+ - 表单验证、保存模型、撤销与危险操作
61
+ - 加载、骨架、空、错误、离线、只读和权限不足状态
62
+ - 键盘可达性、屏幕阅读器和减少动态效果
63
+
64
+ ## 可选的后续评分框架
65
+
66
+ 针对具体软件选型时,可按 1-5 分评估以下维度,分数只用于定位参考对象,不代表综合产品排名:
67
+
68
+ - `density`:高信息密度任务的组织能力
69
+ - `visualSystem`:token 和组件一致性
70
+ - `interaction`:复杂操作的效率与反馈
71
+ - `accessibility`:键盘、焦点、语义与可读性
72
+ - `responsive`:跨宽度适应能力
73
+ - `sourceClarity`:从公开源码复现设计规则的容易程度
74
+
75
+ 本轮没有为 19 个不同领域的产品强行给出统一分数。数据库 IDE、白板和内容编辑器的目标不同,脱离目标软件权重的数字会制造虚假的可比性。`data/projects.json` 先保留事实字段和 `bestFor` 标签;确定目标软件后,再为上述维度设置权重并评分。
76
+
77
+ ## 数值记录规则
78
+
79
+ - 精确值必须能回链到 A 级证据。
80
+ - 屏幕观察得到的值写为“约”,且不伪装为 token。
81
+ - 星标数按采集日取近似值,并使用 `k` 级别展示,避免短期波动制造假精度。
82
+ - 同一项目不同子应用可能采用不同设计系统,必须标明适用范围。
83
+ - AGPL、MPL、Elastic License、BSL、功能性源码许可等必须分开标注;“代码公开”不自动等于 OSI 开源。
84
+
85
+ ## 局限
86
+
87
+ - 产品快速迭代,报告记录的是 2026-08-30 附近的源码状态。
88
+ - 登录后或付费功能可能无法完整观察。
89
+ - 仓库中的旧组件、迁移中 token 与当前生产界面可能并存。
90
+ - 本研究为工程与设计参考,不替代对目标用户的可用性测试。
@@ -0,0 +1,31 @@
1
+ # Open Source UI Research
2
+
3
+ 面向桌面端、Web 与移动软件设计的开源产品 UI/UX 研究库。
4
+
5
+ 本项目通过源码、官方设计系统、产品文档和实际界面资料,拆解热门开源产品的:
6
+
7
+ - 信息架构与整体布局
8
+ - 技术栈与前端架构
9
+ - 色彩、字体、间距、圆角、阴影等视觉 token
10
+ - 导航、表格、表单、命令面板、反馈状态等交互模式
11
+ - 可复用的设计原则与落地建议
12
+
13
+ ## 交付物
14
+
15
+ - [可视化 UI 风格样板库](ui-gallery/index.html):8 个独立 HTML 页面,覆盖高密度 IDE、桌面控制台、个人 AI、响应式 Web、移动审批、真正多端、内容编辑与媒体优先风格;附可复制 token 和响应式实现。
16
+ - [综合研究报告](report/OPEN_SOURCE_UI_RESEARCH_2026.md):基础 19 个项目总览、跨项目结论、布局/视觉/交互基线和验收清单。
17
+ - [Claude Code 现代开源客户端专项](research/claude-code-modern-clients.md):CloudCLI、Happy、Paseo、Opcode、CodePilot、cdesktop、TOKENICODE、OpenClaudgents,分别覆盖桌面、Web、移动与跨设备方案。
18
+ - [多端个人应用对照](research/personal-multiplatform-apps.md):Notesnook、Joplin、LocalSend、Immich、RustDesk、Actual Budget 等 11 个项目,按桌面/Web/移动分别总结。
19
+ - [数据与开发工具](research/data-dev-tools.md):Supabase、Grafana、Metabase、DBeaver、Directus、Appsmith、DBX。
20
+ - [协作与生产力](research/productivity-collaboration.md):Plane、AppFlowy、Twenty、Cal.com、Outline、AFFiNE。
21
+ - [创作、AI 与通信](research/creative-ai-communication.md):Penpot、Excalidraw、Open WebUI、Chatwoot、Mattermost、Hoppscotch。
22
+ - [结构化基础项目清单](data/projects.json) 与 [扩展项目清单](data/extended-projects.json):合计 38 个项目记录,供后续网站、筛选器或自动化消费。
23
+ - [设计 token 基线](reference/design-tokens.css) 与 [使用建议](reference/USAGE.md):跨项目综合出的可实现起点。
24
+ - [研究方法](METHODOLOGY.md):证据等级、选择标准、评分维度和局限。
25
+
26
+ ## 研究原则
27
+
28
+ 1. 优先引用 GitHub 源码、官方文档和官方设计系统。
29
+ 2. 明确区分源码事实、界面观察和研究者推断。
30
+ 3. 星标数等时效数据注明采集日期,不将其视为 UI 质量指标。
31
+ 4. 对无法从公开资料精确确认的数值,不制造伪精度。
@@ -0,0 +1,241 @@
1
+ {
2
+ "asOf": "2026-08-30",
3
+ "notes": "GitHub stars are a dated snapshot. License fields are research notes, not legal advice.",
4
+ "claudeCodeClients": [
5
+ {
6
+ "id": "cloudcli",
7
+ "name": "CloudCLI / Claude Code UI",
8
+ "repo": "https://github.com/siteboon/claudecodeui",
9
+ "stars": 13505,
10
+ "platforms": ["web", "pwa", "desktop-electron"],
11
+ "relationship": "Direct Claude Agent SDK and CLI web UI",
12
+ "frontend": ["React 18", "Vite", "Tailwind CSS 3", "CodeMirror", "xterm"],
13
+ "backend": ["Express", "SQLite", "Electron"],
14
+ "layout": "session drawer/sidebar + transcript + tool, git, file and terminal views",
15
+ "visual": "warm neutral light theme, neutral 8/12/17% dark surfaces, blue accent, 8px base radius",
16
+ "license": "AGPL-3.0",
17
+ "detailReport": "research/claude-code-modern-clients.md"
18
+ },
19
+ {
20
+ "id": "happy",
21
+ "name": "Happy",
22
+ "repo": "https://github.com/slopus/happy",
23
+ "stars": 23551,
24
+ "platforms": ["ios", "android", "web", "macos-tauri"],
25
+ "relationship": "Encrypted remote client and wrapper for Claude Code and Codex",
26
+ "frontend": ["Expo", "React Native 0.83", "React 19", "Unistyles", "Zustand"],
27
+ "backend": ["CLI wrapper", "encrypted sync", "push notifications"],
28
+ "layout": "active-session inbox + event timeline + mobile composer and approval surfaces",
29
+ "visual": "Material-like purple tonal palette, 14-17px mobile text, 16-24px native radii",
30
+ "license": "MIT",
31
+ "detailReport": "research/claude-code-modern-clients.md"
32
+ },
33
+ {
34
+ "id": "paseo",
35
+ "name": "Paseo",
36
+ "repo": "https://github.com/getpaseo/paseo",
37
+ "stars": 15495,
38
+ "platforms": ["ios", "android", "web", "desktop-electron", "cli"],
39
+ "relationship": "Multi-agent daemon supporting Claude Code, Codex, Copilot, OpenCode and Pi",
40
+ "frontend": ["Expo", "React Native Web", "Unistyles", "Zustand", "CodeMirror", "xterm"],
41
+ "backend": ["local daemon", "Electron", "remote host protocol"],
42
+ "layout": "workspace and agent sidebar + tabbed chat/editor + file, diff and terminal panes",
43
+ "visual": "zinc surfaces, muted green accent, 12/14/15px dense type, 4/6/8px working radii",
44
+ "license": "Apache-2.0",
45
+ "detailReport": "research/claude-code-modern-clients.md"
46
+ },
47
+ {
48
+ "id": "opcode",
49
+ "name": "Opcode",
50
+ "repo": "https://github.com/winfunc/opcode",
51
+ "stars": 22384,
52
+ "platforms": ["windows", "macos", "linux"],
53
+ "relationship": "Local desktop control center for Claude Code",
54
+ "frontend": ["React 18", "Tailwind CSS 4", "Zustand"],
55
+ "backend": ["Tauri 2", "Rust"],
56
+ "layout": "project/session browser + agent console + analytics, MCP and configuration modules",
57
+ "visual": "near-monochrome OKLCH dark surfaces, Inter, 4-12px common radii",
58
+ "license": "AGPL-3.0",
59
+ "detailReport": "research/claude-code-modern-clients.md"
60
+ },
61
+ {
62
+ "id": "codepilot",
63
+ "name": "CodePilot",
64
+ "repo": "https://github.com/op7418/CodePilot",
65
+ "stars": 6437,
66
+ "platforms": ["windows", "macos", "linux", "browser-development-mode"],
67
+ "relationship": "Multi-provider desktop agent with Claude Code import and integration",
68
+ "frontend": ["Next.js 16", "React 19", "Tailwind CSS 4", "Radix"],
69
+ "backend": ["Electron"],
70
+ "layout": "sidebar + chat workspace + split sessions + provider, MCP, skills and media modules",
71
+ "visual": "warm monochrome OKLCH default, 16px base radius, diffuse shadows, 12 theme families",
72
+ "license": "BSL-1.1; converts to Apache-2.0 on 2029-03-16",
73
+ "detailReport": "research/claude-code-modern-clients.md"
74
+ },
75
+ {
76
+ "id": "cdesktop",
77
+ "name": "cdesktop",
78
+ "repo": "https://github.com/cdesktop-ai/cdesktop",
79
+ "stars": 108,
80
+ "platforms": ["responsive-web", "tauri-planned"],
81
+ "relationship": "Local web UI for Claude Code, Codex, Gemini CLI, OpenCode and Hermes",
82
+ "frontend": ["React 18", "Vite", "Tailwind CSS 3", "Zustand"],
83
+ "backend": ["Rust", "SQLite"],
84
+ "layout": "sessions sidebar + transcript/terminal/diff + plan/files/app-preview pane; up to four cells",
85
+ "visual": "IDE-like neutral surfaces, orange brand accent, IBM Plex Sans, 2px global radius",
86
+ "license": "Apache-2.0",
87
+ "detailReport": "research/claude-code-modern-clients.md"
88
+ },
89
+ {
90
+ "id": "tokenicode",
91
+ "name": "TOKENICODE",
92
+ "repo": "https://github.com/yiliqi78/TOKENICODE",
93
+ "stars": 438,
94
+ "platforms": ["windows", "macos", "linux"],
95
+ "relationship": "Claude Code desktop workspace",
96
+ "frontend": ["React 19", "Tailwind CSS 4", "CodeMirror", "Tiptap", "Zustand"],
97
+ "backend": ["Tauri 2", "Rust"],
98
+ "layout": "conversation navigation + chat + local file/editor tools",
99
+ "visual": "black/blue/purple/green families, solid neutral surfaces, platform Chinese font stack",
100
+ "license": "Apache-2.0",
101
+ "detailReport": "research/claude-code-modern-clients.md"
102
+ },
103
+ {
104
+ "id": "openclaudgents",
105
+ "name": "OpenClaudgents",
106
+ "repo": "https://github.com/MagnusPladsen/OpenClaudgents",
107
+ "stars": 1,
108
+ "platforms": ["desktop"],
109
+ "relationship": "Claude Code multi-session and agent-team visualization",
110
+ "frontend": ["React", "TypeScript"],
111
+ "backend": ["Tauri 2"],
112
+ "layout": "multi-session chat + agent team status visualization",
113
+ "visual": "multiple themes; emerging concept rather than a mature reference",
114
+ "license": "MIT",
115
+ "detailReport": "research/claude-code-modern-clients.md"
116
+ }
117
+ ],
118
+ "personalMultiplatformApps": [
119
+ {
120
+ "id": "notesnook",
121
+ "name": "Notesnook",
122
+ "repo": "https://github.com/streetwriters/notesnook",
123
+ "stars": 14482,
124
+ "platforms": ["web", "windows", "macos", "linux", "ios", "android"],
125
+ "stack": ["React", "React Native", "Electron", "TypeScript"],
126
+ "sharingModel": "shared editor, core and theme with platform view layers",
127
+ "license": "GPL-3.0",
128
+ "detailReport": "research/personal-multiplatform-apps.md"
129
+ },
130
+ {
131
+ "id": "standard-notes",
132
+ "name": "Standard Notes",
133
+ "repo": "https://github.com/standardnotes/app",
134
+ "stars": 6612,
135
+ "platforms": ["web", "windows", "macos", "linux", "ios", "android"],
136
+ "stack": ["React", "React Native", "Electron", "TypeScript"],
137
+ "sharingModel": "shared domain model with web/desktop and mobile shells",
138
+ "license": "AGPL-3.0",
139
+ "detailReport": "research/personal-multiplatform-apps.md"
140
+ },
141
+ {
142
+ "id": "joplin",
143
+ "name": "Joplin",
144
+ "repo": "https://github.com/laurent22/joplin",
145
+ "stars": 56164,
146
+ "platforms": ["desktop", "ios", "android", "cli", "server"],
147
+ "stack": ["React", "React Native", "Electron", "TypeScript"],
148
+ "sharingModel": "monorepo sharing sync and data layers, platform-specific UI packages",
149
+ "license": "AGPL-3.0-or-later with directory exceptions",
150
+ "detailReport": "research/personal-multiplatform-apps.md"
151
+ },
152
+ {
153
+ "id": "logseq",
154
+ "name": "Logseq",
155
+ "repo": "https://github.com/logseq/logseq",
156
+ "stars": 44685,
157
+ "platforms": ["web", "desktop", "ios", "android"],
158
+ "stack": ["ClojureScript", "React", "Electron", "DataScript"],
159
+ "sharingModel": "shared block model and domain logic with platform capability layers",
160
+ "license": "AGPL-3.0",
161
+ "detailReport": "research/personal-multiplatform-apps.md"
162
+ },
163
+ {
164
+ "id": "localsend",
165
+ "name": "LocalSend",
166
+ "repo": "https://github.com/localsend/localsend",
167
+ "stars": 89722,
168
+ "platforms": ["windows", "macos", "linux", "ios", "android"],
169
+ "stack": ["Flutter", "Dart"],
170
+ "sharingModel": "single cross-platform Flutter UI",
171
+ "license": "Apache-2.0",
172
+ "detailReport": "research/personal-multiplatform-apps.md"
173
+ },
174
+ {
175
+ "id": "immich",
176
+ "name": "Immich",
177
+ "repo": "https://github.com/immich-app/immich",
178
+ "stars": 112970,
179
+ "platforms": ["web", "ios", "android", "server"],
180
+ "stack": ["SvelteKit", "Flutter", "TypeScript", "Dart"],
181
+ "sharingModel": "shared API/domain vocabulary, separate web and mobile UI",
182
+ "license": "AGPL-3.0",
183
+ "detailReport": "research/personal-multiplatform-apps.md"
184
+ },
185
+ {
186
+ "id": "bitwarden-clients",
187
+ "name": "Bitwarden Clients",
188
+ "repo": "https://github.com/bitwarden/clients",
189
+ "stars": 13703,
190
+ "platforms": ["web", "browser-extension", "desktop", "ios", "android", "cli"],
191
+ "stack": ["Angular", "Nx", "Electron", "Swift", "Kotlin"],
192
+ "sharingModel": "shared web/browser/desktop stack; separate native mobile repositories",
193
+ "license": "GPL-3.0 default; Bitwarden License in marked modules",
194
+ "detailReport": "research/personal-multiplatform-apps.md"
195
+ },
196
+ {
197
+ "id": "rustdesk",
198
+ "name": "RustDesk",
199
+ "repo": "https://github.com/rustdesk/rustdesk",
200
+ "stars": 122142,
201
+ "platforms": ["windows", "macos", "linux", "web", "ios", "android"],
202
+ "stack": ["Rust", "Flutter"],
203
+ "sharingModel": "Rust core plus cross-platform Flutter UI",
204
+ "license": "AGPL-3.0",
205
+ "detailReport": "research/personal-multiplatform-apps.md"
206
+ },
207
+ {
208
+ "id": "element",
209
+ "name": "Element Web and Element X",
210
+ "repo": "https://github.com/element-hq/element-web",
211
+ "stars": 13411,
212
+ "platforms": ["web", "desktop", "ios", "android"],
213
+ "stack": ["React", "Electron", "SwiftUI", "Kotlin Compose", "Matrix Rust SDK"],
214
+ "sharingModel": "shared protocol, SDK and design language with native mobile UI",
215
+ "license": "AGPL-3.0",
216
+ "detailReport": "research/personal-multiplatform-apps.md"
217
+ },
218
+ {
219
+ "id": "home-assistant-frontend",
220
+ "name": "Home Assistant Frontend",
221
+ "repo": "https://github.com/home-assistant/frontend",
222
+ "stars": 5639,
223
+ "platforms": ["responsive-web", "ios-companion", "android-companion"],
224
+ "stack": ["Lit", "Web Components", "TypeScript", "native companion shells"],
225
+ "sharingModel": "responsive web UI embedded in native companion applications",
226
+ "license": "Apache-2.0",
227
+ "detailReport": "research/personal-multiplatform-apps.md"
228
+ },
229
+ {
230
+ "id": "actual-budget",
231
+ "name": "Actual Budget",
232
+ "repo": "https://github.com/actualbudget/actual",
233
+ "stars": 28455,
234
+ "platforms": ["web", "windows", "macos", "linux", "mobile-web"],
235
+ "stack": ["React", "Electron", "SQLite", "WASM", "TypeScript"],
236
+ "sharingModel": "shared React UI with browser worker and desktop Node data adapters",
237
+ "license": "MIT",
238
+ "detailReport": "research/personal-multiplatform-apps.md"
239
+ }
240
+ ]
241
+ }