Refactor project name from "Open Claude Design" to "Open Design"

- Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name.
2026-04-28 14:48:45 +08:00
parent a98096a042
commit af3f96379a
122 changed files with 952 additions and 474 deletions
@@ -1,9 +1,9 @@
-# Open Claude Design
+# Open Design

 > **给设计的 Claude Code。** 一个本地优先、可部署到 Vercel 的开源 [Claude Design][cd] 复刻 —— 你机器上已经装好的 coding agent（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen）就是设计引擎，由可组合的 **Skills** 和 **71 套品牌级 Design System** 驱动。

 <p align="center">
-  <img src="docs/assets/banner.png" alt="Open Claude Design banner" width="100%" />
+  <img src="docs/assets/banner.svg" alt="Open Design banner —— 占位图，等待替换为真实产品截图" width="100%" />
 </p>

 <p align="center">
@@ -22,13 +22,13 @@

 Anthropic 的 [Claude Design][cd]（2026-04-17 发布，基于 Opus 4.7）让大家第一次看到：当一个 LLM 不再写废话、开始直接交付设计成品，会是什么样子。它瞬间出圈 —— 然后保持闭源、付费、只跑在云上、绑定 Anthropic 的模型和 Anthropic 的内部 skill。

-**Open Claude Design（OCD）是它的开源底座。** 我们不做 agent —— 你笔记本上最强的 coding agent 已经装好了。我们要做的，是把它接进一个 skill 驱动的设计工作流，跑在一个普通的 Web 应用里：本地 `pnpm dev`，云端 `vercel deploy`，每一层都 BYOK（自带 Key）。
+**Open Design（OD）是它的开源底座。** 我们不做 agent —— 你笔记本上最强的 coding agent 已经装好了。我们要做的，是把它接进一个 skill 驱动的设计工作流，跑在一个普通的 Web 应用里：本地 `pnpm dev`，云端 `vercel deploy`，每一层都 BYOK（自带 Key）。

 输入「帮我做一份杂志风的种子轮 pitch deck」。在模型挥洒第一个像素之前，**初始化问题表单**已经先跳出来。Agent 从 5 套精挑的视觉方向里选一个。一张活的 `TodoWrite` 计划卡片实时流入 UI。Daemon 在磁盘上构建出一个真实的项目目录，里面有 seed 模板、布局库、自检 checklist。Agent **强制 pre-flight** 读取它们，对自己的输出跑一轮**五维评审**，几秒后吐出一个 `<artifact>`，渲染在沙盒 iframe 里。

 这不是「AI 试图做点设计」。这是一个被提示词栈训练得像高级设计师一样工作的 AI —— 有可用的文件系统、有确定性的色板库、有 checklist 文化。

-OCD 站在四个开源项目的肩膀上：
+OD 站在四个开源项目的肩膀上：

 - [**`alchaincyf/huashu-design`**（花叔的画术）](https://github.com/alchaincyf/huashu-design) —— 设计哲学的指南针。Junior-Designer 工作流、5 步品牌资产协议、anti-AI-slop checklist、五维自评审、以及方向选择器背后的「5 流派 × 20 种设计哲学」思路 —— 全部蒸馏进 [`src/prompts/discovery.ts`](src/prompts/discovery.ts)。
 - [**`op7418/guizang-ppt-skill`**（歸藏的杂志风 PPT skill）](https://github.com/op7418/guizang-ppt-skill) —— Deck 模式。原样捆绑在 [`skills/guizang-ppt/`](skills/guizang-ppt/) 下，原 LICENSE 保留；杂志版式、WebGL hero、P0/P1/P2 checklist。
@@ -52,46 +52,46 @@ OCD 站在四个开源项目的肩膀上：

 ## 效果展示

-> 截图位为占位 —— 真实 UI 就是这些截图要拍的对象，请在 PR 里替换 `docs/screenshots/*.png`。
+> **截图位待补。** 下方每张卡片都是占位 SVG —— 截好真实图后把 `docs/screenshots/*.svg` 替换为 `.png` / `.jpg`，并把对应 `<img src=…>` 的扩展名同步改掉即可。

 <table>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/01-entry-view.png" alt="入口页：选 skill + 选 design system + 写需求" /><br/>
+<img src="docs/screenshots/01-entry-view.svg" alt="01 · 入口页 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>入口页</b> —— 选 skill、选 design system、写一行需求。同一个表面服务原型、deck、移动端、dashboard、editorial 页面所有 mode。</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/02-question-form.png" alt="第一轮 discovery 表单" /><br/>
-<sub><b>初始化问题表单</b> —— 模型动笔之前，OCD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。</sub>
+<img src="docs/screenshots/02-question-form.svg" alt="02 · 初始化问题表单 —— 占位图，等待替换为真实截图" /><br/>
+<sub><b>初始化问题表单</b> —— 模型动笔之前，OD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/03-direction-picker.png" alt="5 套确定性视觉方向选择器" /><br/>
+<img src="docs/screenshots/03-direction-picker.svg" alt="03 · 方向选择器 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>方向选择器</b> —— 用户没有品牌上下文时，agent 自动跳第二个表单，5 套精选方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）一个 radio 选完，色板 + 字体栈直接锁定，没有 freestyle 空间。</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/04-todo-progress.png" alt="Live TodoWrite 进度卡片" /><br/>
+<img src="docs/screenshots/04-todo-progress.svg" alt="04 · 实时 todo 进度 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>实时 todo 进度</b> —— Agent 的计划以活卡片形式流入 UI。<code>in_progress</code> → <code>completed</code> 实时切换。用户能在中途以极低成本介入纠偏。</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/05-preview-iframe.png" alt="沙盒 iframe 预览生成的 artifact" /><br/>
+<img src="docs/screenshots/05-preview-iframe.svg" alt="05 · 沙盒预览 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>沙盒预览</b> —— 每个 <code>&lt;artifact&gt;</code> 都在干净的 srcdoc iframe 里渲染。可在文件工作区里就地编辑；可下载为 HTML / PDF / ZIP。</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/06-design-systems-library.png" alt="71 套 design system 库 + 调色板" /><br/>
+<img src="docs/screenshots/06-design-systems-library.svg" alt="06 · 71 套 design system 库 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>71 套 design system 库</b> —— 每套产品系统都展示 4 色色卡。点进去看完整的 <code>DESIGN.md</code>、色板网格、live showcase。</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/07-magazine-deck.png" alt="杂志风横向翻页 deck 输出" /><br/>
+<img src="docs/screenshots/07-magazine-deck.svg" alt="07 · 杂志风 deck —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>Deck 模式（guizang-ppt）</b> —— 内置的 <a href="https://github.com/op7418/guizang-ppt-skill"><code>guizang-ppt-skill</code></a> 原样接入。杂志版式、WebGL hero 背景、单文件 HTML 输出、可导 PDF。</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/08-mobile-app.png" alt="带 iPhone 15 Pro 外壳的移动端原型" /><br/>
+<img src="docs/screenshots/08-mobile-app.svg" alt="08 · 移动端原型 —— 占位图，等待替换为真实截图" /><br/>
 <sub><b>移动端原型</b> —— 像素级精确的 iPhone 15 Pro chrome（灵动岛、状态栏 SVG、Home Indicator）。多屏原型直接复用 <code>/frames/</code> 共享资源，agent 永远不需要重新画一遍手机。</sub>
 </td>
 </tr>
@@ -113,13 +113,13 @@ Daemon 启动时扫 `PATH`，找 [`claude`](https://docs.anthropic.com/en/docs/c

 ### 4 · 初始化问题表单干掉 80% 的来回返工

-OCD 的提示词栈把 `RULE 1` 写死了：每个新设计任务都从 `<question-form id="discovery">` 开始，**不是代码**。Surface · 受众 · 调性 · 品牌上下文 · 规模 · 约束。一段写得很长的需求里仍然有大量留白：视觉调性、色彩立场、规模 —— 而表单恰恰把这些用 30 秒勾选项锁死。错方向的代价是一轮对话，不是一份做完的 deck。
+OD 的提示词栈把 `RULE 1` 写死了：每个新设计任务都从 `<question-form id="discovery">` 开始，**不是代码**。Surface · 受众 · 调性 · 品牌上下文 · 规模 · 约束。一段写得很长的需求里仍然有大量留白：视觉调性、色彩立场、规模 —— 而表单恰恰把这些用 30 秒勾选项锁死。错方向的代价是一轮对话，不是一份做完的 deck。

 这就是从 [`huashu-design`](https://github.com/alchaincyf/huashu-design) 蒸馏出来的 **Junior-Designer 模式**：开工前一次性批量问完，尽早 show 出一些可见的东西（哪怕只是灰色方块的 wireframe），让用户用最低成本介入纠偏。再叠加品牌资产协议（定位 · 下载 · `grep` hex · 写 `brand-spec.md` · 复述），这是输出从「AI freestyle」跳到「先看资料再画图的设计师」最关键的一步。

 ### 5 · Daemon 让 agent 感觉自己就在你笔记本上 —— 因为它就是

-Daemon `spawn` CLI 时，`cwd` 设到该项目在 `.ocd/projects/<id>/` 下的 artifact 文件夹。Agent 拿到的 `Read` / `Write` / `Bash` / `WebFetch` 都是真工具，作用在真文件系统上。它能 `Read` skill 的 `assets/template.html`，能 `grep` 你的 CSS 拿 hex，能写一份 `brand-spec.md`，能落地生成的图片，能产出 `.pptx` / `.zip` / `.pdf` —— 这些文件在 turn 结束的时候作为下载 chip 出现在文件工作区里。Session、对话、消息、tab 都持久化在本地 SQLite 里 —— 明天再打开这个项目，agent 的 todo 卡片还在你昨天停下的地方。
+Daemon `spawn` CLI 时，`cwd` 设到该项目在 `.od/projects/<id>/` 下的 artifact 文件夹。Agent 拿到的 `Read` / `Write` / `Bash` / `WebFetch` 都是真工具，作用在真文件系统上。它能 `Read` skill 的 `assets/template.html`，能 `grep` 你的 CSS 拿 hex，能写一份 `brand-spec.md`，能落地生成的图片，能产出 `.pptx` / `.zip` / `.pdf` —— 这些文件在 turn 结束的时候作为下载 chip 出现在文件工作区里。Session、对话、消息、tab 都持久化在本地 SQLite 里 —— 明天再打开这个项目，agent 的 todo 卡片还在你昨天停下的地方。

 ### 6 · 提示词栈本身就是产品

@@ -158,7 +158,7 @@ DISCOVERY 指令         （turn-1 表单、turn-2 品牌分支、TodoWrite、
   │   /api/chat (SSE)    │
   │                      │
   └─────────┬────────────┘
-             │ spawn(cli, [...], { cwd: .ocd/projects/<id> })
+             │ spawn(cli, [...], { cwd: .od/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · gemini · opencode · qwen│
@@ -171,15 +171,15 @@ DISCOVERY 指令         （turn-1 表单、turn-2 品牌分支、TodoWrite、
 | 前端 | Vite 5 + React 18 + TypeScript |
 | Daemon | Node 18+ · Express · SSE 流 · `better-sqlite3` 存项目/对话/消息/tab |
 | Agent 传输层 | `child_process.spawn`，Claude Code 走 `claude-stream-json` 解析器，其余走 line-buffered plain stdout |
-| 存储 | 纯文件 `.ocd/projects/<id>/` + SQLite `.ocd/db.sqlite`（已 gitignore） |
+| 存储 | 纯文件 `.od/projects/<id>/` + SQLite `.od/app.sqlite`（已 gitignore，daemon 启动自建） |
 | 预览 | 沙盒 iframe（`srcdoc`）+ 每个 skill 的 `<artifact>` parser |
 | 导出 | HTML（内联资源）· PDF（浏览器打印）· PPTX（skill 自定义）· ZIP（archiver） |

 ## Quickstart

 ```bash
-git clone https://github.com/<your-org>/open-claude-design.git
-cd open-claude-design
+git clone https://github.com/nexu-io/open-design.git
+cd open-design
 pnpm install         # 或 npm install
 pnpm dev:all         # daemon (:7456) + Vite (:5173) 一起起
 open http://localhost:5173
@@ -190,22 +190,40 @@ open http://localhost:5173
 1. 检测你 `PATH` 上有哪些 agent CLI，自动选一个。
 2. 加载 19 个 skill + 71 套 design system。
 3. 弹欢迎对话框，让你贴 Anthropic key（仅 BYOK 兜底路径需要）。
+4. **自动创建 `./.od/`** —— 本地运行时目录，存放 SQLite 项目库、各项目工作区、保存下来的 artifact。**没有** `od init` 这一步，daemon 启动时会自己 `mkdir`。

 输入需求，回车，看 question form 跳出来，填，看 todo 卡片流动，看 artifact 渲染。点 **Save to disk** 或导出整个项目 ZIP。

+### 第一次跑起来（`./.od/` 解释）
+
+Daemon 在仓库根下维护一个隐藏目录，里面所有内容都已 gitignore，纯本机数据，**不要** commit。
+
+```
+.od/
+├── app.sqlite                 ← 项目 · 对话 · 消息 · 打开的 tab
+├── artifacts/                 ← Save to disk 一次性渲染（带时间戳）
+└── projects/<id>/             ← 每个项目的工作目录，也是 agent 的 cwd
+```
+
+| 想做什么 | 怎么做 |
+|---|---|
+| 看一眼里面有啥 | `ls -la .od && sqlite3 .od/app.sqlite '.tables'` |
+| 完全清空，从零再来 | 先停 daemon，再 `rm -rf .od`，然后重新 `pnpm dev:all` |
+| 换到别的位置 | 暂不支持 —— 路径是相对仓库根写死的 |
+
 完整文件地图、脚本、排错 → [`QUICKSTART.md`](QUICKSTART.md)。

 ## 仓库结构

 ```
-open-claude-design/
+open-design/
 ├── README.md                      ← 英文
 ├── README.zh-CN.md                ← 本文件
 ├── QUICKSTART.md                  ← 跑 / 构建 / 部署
-├── package.json                   ← 单 bin: ocd
+├── package.json                   ← 单 bin: od
 │
 ├── daemon/                        ← Node + Express，唯一的服务端
-│   ├── cli.js                     ← `ocd` 二进制入口
+│   ├── cli.js                     ← `od` 二进制入口
 │   ├── server.js                  ← /api/* 路由（projects、chat、files、exports）
 │   ├── agents.js                  ← PATH 扫描器 + 各 CLI 的 argv 拼装
 │   ├── claude-stream.js           ← Claude Code stdout 流式 JSON 解析
@@ -288,7 +306,7 @@ open-claude-design/
 ├── docs/
 │   ├── spec.md                    ← 产品定义、场景、差异化
 │   ├── architecture.md            ← 拓扑、数据流、组件
-│   ├── skills-protocol.md         ← 扩展 SKILL.md 的 ocd: frontmatter
+│   ├── skills-protocol.md         ← 扩展 SKILL.md 的 od: frontmatter
 │   ├── agent-adapters.md          ← 各 CLI 检测 + 派发
 │   ├── modes.md                   ← prototype / deck / template / design-system
 │   ├── references.md              ← 详尽的引用与师承
@@ -296,15 +314,15 @@ open-claude-design/
 │   ├── schemas/                   ← JSON schema
 │   └── examples/                  ← 标准 artifact 样例
 │
-└── .ocd/                          ← 运行时数据，已 gitignore
+└── .od/                           ← 运行时数据，已 gitignore，daemon 启动自建
+    ├── app.sqlite                 ← 项目 / 对话 / 消息 / tab
    ├── projects/<id>/             ← 每个项目的工作目录（agent 的 cwd）
-    ├── artifacts/                 ← 单次保存的 artifact
-    └── db.sqlite                  ← 项目 / 对话 / 消息 / tab
+    └── artifacts/                 ← 单次保存的 artifact
 ```

 ## 内置 Skills

-19 个 skill，每个一个文件夹，都遵循 Claude Code 的 [`SKILL.md`][skill] 规范，并叠加 OCD 的 `ocd:` frontmatter（`mode`、`platform`、`scenario`、`preview`、`design_system`）。
+19 个 skill，每个一个文件夹，都遵循 Claude Code 的 [`SKILL.md`][skill] 规范，并叠加 OD 的 `od:` frontmatter（`mode`、`platform`、`scenario`、`preview`、`design_system`）。

 ### 示例展示（Showcase examples）

@@ -354,7 +372,7 @@ open-claude-design/
 ## Design System

 <p align="center">
-  <img src="docs/assets/design-systems-library.png" alt="71 套 design system 库" width="100%" />
+  <img src="docs/assets/design-systems-library.svg" alt="71 套 design system 库 —— 占位图，等待替换为真实截图" width="100%" />
 </p>

 71 套开箱即用，每套一个 [`DESIGN.md`](design-systems/README.md)：
@@ -386,7 +404,7 @@ open-claude-design/

 ## 视觉方向

-当用户没有品牌资产时，agent 会跳第二个表单，5 套精选方向 —— 这是 [`huashu-design` 的「设计方向顾问 · 5 流派 × 20 种设计哲学」 fallback](https://github.com/alchaincyf/huashu-design#%E8%AE%BE%E8%AE%A1%E6%96%B9%E5%90%91%E9%A1%BE%E9%97%AE-fallback) 在 OCD 里的落地。每一套都是确定性 spec —— OKLch 色板、字体栈、版式姿态、参考列表 —— agent 直接把它**原样**绑进 seed 模板的 `:root`。一个 radio 选完，整套视觉系统全部锁定。零 freestyle，零 AI slop。
+当用户没有品牌资产时，agent 会跳第二个表单，5 套精选方向 —— 这是 [`huashu-design` 的「设计方向顾问 · 5 流派 × 20 种设计哲学」 fallback](https://github.com/alchaincyf/huashu-design#%E8%AE%BE%E8%AE%A1%E6%96%B9%E5%90%91%E9%A1%BE%E9%97%AE-fallback) 在 OD 里的落地。每一套都是确定性 spec —— OKLch 色板、字体栈、版式姿态、参考列表 —— agent 直接把它**原样**绑进 seed 模板的 `:root`。一个 radio 选完，整套视觉系统全部锁定。零 freestyle，零 AI slop。

 | 方向 | 调性 | 参考 |
 |---|---|---|
@@ -400,7 +418,7 @@ open-claude-design/

 ## 反 AI Slop 机制

-下面整套机制都是 [`huashu-design`](https://github.com/alchaincyf/huashu-design) 的 playbook，被移植进 OCD 的提示词栈，并通过 skill 副文件 pre-flight 让每个 skill 都能落地执行。看 [`src/prompts/discovery.ts`](src/prompts/discovery.ts) 是真实文案：
+下面整套机制都是 [`huashu-design`](https://github.com/alchaincyf/huashu-design) 的 playbook，被移植进 OD 的提示词栈，并通过 skill 副文件 pre-flight 让每个 skill 都能落地执行。看 [`src/prompts/discovery.ts`](src/prompts/discovery.ts) 是真实文案：

 - **先表单。** Turn 1 必须是 `<question-form>`，**不准** thinking、不准 tools、不准旁白。用户用 radio 速度选默认。
 - **品牌资产协议。** 用户贴截图或 URL 时，agent 走 5 步流程（定位 · 下载 · grep hex · 写 `brand-spec.md` · 复述）才能开始写 CSS。**绝不从记忆里猜品牌色**。
@@ -411,7 +429,7 @@ open-claude-design/

 ## 横向对比

-| 维度 | [Claude Design][cd]（Anthropic） | [Open CoDesign][ocod] | **Open Claude Design** |
+| 维度 | [Claude Design][cd]（Anthropic） | [Open CoDesign][ocod] | **Open Design** |
 |---|---|---|---|
 | License | 闭源 | MIT | **Apache-2.0** |
 | 形态 | Web (claude.ai) | 桌面 (Electron) | **Web 应用 + 本地 daemon** |
@@ -481,8 +499,8 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。
 - [ ] 评论模式手术刀编辑（点元素 → 指令 → 局部 patch）—— 模式来自 [`open-codesign`][ocod]
 - [ ] AI 自吐 tweaks 面板（模型自己抛出值得调的参数）—— 模式来自 [`open-codesign`][ocod]
 - [ ] Vercel + 隧道部署食谱（Topology B）
- [ ] 一行 `npx ocd init` 脚手架带 `DESIGN.md`
- [ ] Skill 市场（`ocd skills install <github-repo>`）
+- [ ] 一行 `npx od init` 脚手架带 `DESIGN.md`
+- [ ] Skill 市场（`od skills install <github-repo>`）

 分阶段交付计划在 [`docs/roadmap.md`](docs/roadmap.md)。