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, but for design.** A local-first, web-deployable open replica of Anthropic's [Claude Design][cd] — your existing coding agent (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen) becomes the design engine, driven by composable **Skills** and **71 brand-grade Design Systems**.

 <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 — placeholder, replace with the live UI hero shot" width="100%" />
 </p>

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

 Anthropic's [Claude Design][cd] (released 2026-04-17, Opus 4.7) showed what happens when an LLM stops writing prose and starts shipping design artifacts. It went viral — and stayed closed, paid-only, cloud-only, locked to Anthropic's model and Anthropic's skills.

-**Open Claude Design (OCD) is the open substrate.** We don't build an agent — the strongest coding agents already live on your laptop. We wire them into a skill-driven design workflow that runs on `pnpm dev`, deploys to Vercel, and stays BYOK at every layer.
+**Open Design (OD) is the open substrate.** We don't build an agent — the strongest coding agents already live on your laptop. We wire them into a skill-driven design workflow that runs on `pnpm dev`, deploys to Vercel, and stays BYOK at every layer.

 Type `make me a magazine-style pitch deck for our seed round`. The interactive question form pops up before the model improvises a single pixel. The agent picks one of five curated visual directions. A live `TodoWrite` plan streams into the UI. The daemon builds a real on-disk project folder with a seed template, layout library, and self-check checklist. The agent reads them — pre-flight enforced — runs a five-dimensional critique against its own output, and emits a single `<artifact>` that renders in a sandboxed iframe seconds later.

 That's not "AI tries to design something". That's an AI that has been trained, by the prompt stack, to behave like a senior designer with a working filesystem, a deterministic palette library, and a checklist culture.

-OCD stands on four open-source shoulders:
+OD stands on four open-source shoulders:

 - [**`alchaincyf/huashu-design`**](https://github.com/alchaincyf/huashu-design) — the design-philosophy compass. Junior-Designer workflow, the 5-step brand-asset protocol, the anti-AI-slop checklist, the 5-dimensional self-critique, and the "5 schools × 20 design philosophies" idea behind our direction picker — all distilled into [`src/prompts/discovery.ts`](src/prompts/discovery.ts).
 - [**`op7418/guizang-ppt-skill`**](https://github.com/op7418/guizang-ppt-skill) — the deck mode. Bundled verbatim under [`skills/guizang-ppt/`](skills/guizang-ppt/) with original LICENSE preserved; magazine-style layouts, WebGL hero, P0/P1/P2 checklists.
@@ -52,46 +52,46 @@ OCD stands on four open-source shoulders:

 ## Demo

-> Screenshots are placeholders — the live UI is what the screenshots will be of. Replace the `docs/screenshots/*.png` files in PR.
+> **Screenshots pending.** Every card below is a placeholder SVG — replace `docs/screenshots/*.svg` with real `.png`/`.jpg` captures and bump the `<img src=…>` extension when you do.

 <table>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/01-entry-view.png" alt="Entry view: pick skill + design system + brief" /><br/>
+<img src="docs/screenshots/01-entry-view.svg" alt="01 · Entry view — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Entry view</b> — pick a skill, pick a design system, type the brief. The same surface for prototypes, decks, mobile apps, dashboards, and editorial pages.</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/02-question-form.png" alt="Turn-1 discovery question form" /><br/>
-<sub><b>Turn-1 discovery form</b> — before the model writes a pixel, OCD locks the brief: surface, audience, tone, brand context, scale. 30 seconds of radios beats 30 minutes of redirects.</sub>
+<img src="docs/screenshots/02-question-form.svg" alt="02 · Discovery form — placeholder, replace with the real screenshot" /><br/>
+<sub><b>Turn-1 discovery form</b> — before the model writes a pixel, OD locks the brief: surface, audience, tone, brand context, scale. 30 seconds of radios beats 30 minutes of redirects.</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/03-direction-picker.png" alt="Direction picker — 5 deterministic visual directions" /><br/>
+<img src="docs/screenshots/03-direction-picker.svg" alt="03 · Direction picker — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Direction picker</b> — when the user has no brand, the agent emits a second form with 5 curated directions (Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm). One radio click → a deterministic palette + font stack, no model freestyle.</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/04-todo-progress.png" alt="Live TodoWrite plan streaming into the UI" /><br/>
+<img src="docs/screenshots/04-todo-progress.svg" alt="04 · Live todo progress — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Live todo progress</b> — the agent's plan streams as a live card. <code>in_progress</code> → <code>completed</code> updates land in real time. The user can redirect cheaply, mid-flight.</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/05-preview-iframe.png" alt="Sandboxed iframe preview of the generated artifact" /><br/>
+<img src="docs/screenshots/05-preview-iframe.svg" alt="05 · Sandboxed preview — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Sandboxed preview</b> — every <code>&lt;artifact&gt;</code> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP.</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/06-design-systems-library.png" alt="71-system design-system library with palette swatches" /><br/>
+<img src="docs/screenshots/06-design-systems-library.svg" alt="06 · 71-system library — placeholder, replace with the real screenshot" /><br/>
 <sub><b>71-system library</b> — every product system shows its 4-color signature. Click for the full <code>DESIGN.md</code>, swatch grid, and live showcase.</sub>
 </td>
 </tr>
 <tr>
 <td width="50%">
-<img src="docs/screenshots/07-magazine-deck.png" alt="Magazine-style horizontal deck output" /><br/>
+<img src="docs/screenshots/07-magazine-deck.svg" alt="07 · Magazine deck — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Deck mode (guizang-ppt)</b> — the bundled <a href="https://github.com/op7418/guizang-ppt-skill"><code>guizang-ppt-skill</code></a> drops in unchanged. Magazine layouts, WebGL hero backgrounds, single-file HTML output, PDF export.</sub>
 </td>
 <td width="50%">
-<img src="docs/screenshots/08-mobile-app.png" alt="Mobile app prototype with iPhone 15 Pro frame" /><br/>
+<img src="docs/screenshots/08-mobile-app.svg" alt="08 · Mobile prototype — placeholder, replace with the real screenshot" /><br/>
 <sub><b>Mobile prototype</b> — pixel-accurate iPhone 15 Pro chrome (Dynamic Island, status bar SVGs, home indicator). Multi-screen prototypes use the shared <code>/frames/</code> assets so the agent never re-draws a phone.</sub>
 </td>
 </tr>
@@ -113,13 +113,13 @@ The 9-section `DESIGN.md` schema from [`VoltAgent/awesome-design-md`][acd2] —

 ### 4 · The interactive question form prevents 80% of redirects.

-OCD's prompt stack hard-codes a `RULE 1`: every fresh design brief begins with a `<question-form id="discovery">` instead of code. Surface · audience · tone · brand context · scale · constraints. A long brief still leaves design decisions open — visual tone, color stance, scale — exactly the things the form locks down in 30 seconds. The cost of a wrong direction is one chat round, not one finished deck.
+OD's prompt stack hard-codes a `RULE 1`: every fresh design brief begins with a `<question-form id="discovery">` instead of code. Surface · audience · tone · brand context · scale · constraints. A long brief still leaves design decisions open — visual tone, color stance, scale — exactly the things the form locks down in 30 seconds. The cost of a wrong direction is one chat round, not one finished deck.

 This is the **Junior-Designer mode** distilled from [`huashu-design`](https://github.com/alchaincyf/huashu-design): batch the questions up front, show something visible early (even a wireframe with grey blocks), let the user redirect cheaply. Combined with the brand-asset protocol (locate · download · `grep` hex · write `brand-spec.md` · vocalise), it's the single biggest reason output stops feeling like AI freestyle and starts feeling like a designer who paid attention before painting.

 ### 5 · The daemon makes the agent feel like it's on your laptop, because it is.

-The daemon spawns the CLI with `cwd` set to the project's artifact folder under `.ocd/projects/<id>/`. The agent gets `Read`, `Write`, `Bash`, `WebFetch` — real tools against a real filesystem. It can `Read` the skill's `assets/template.html`, `grep` your CSS for hex values, write a `brand-spec.md`, drop generated images, and produce `.pptx` / `.zip` / `.pdf` files that show up in the file workspace as download chips when the turn ends. Sessions, conversations, messages, tabs persist in a local SQLite DB — pop the project open tomorrow and the agent's todo card is right where you left it.
+The daemon spawns the CLI with `cwd` set to the project's artifact folder under `.od/projects/<id>/`. The agent gets `Read`, `Write`, `Bash`, `WebFetch` — real tools against a real filesystem. It can `Read` the skill's `assets/template.html`, `grep` your CSS for hex values, write a `brand-spec.md`, drop generated images, and produce `.pptx` / `.zip` / `.pdf` files that show up in the file workspace as download chips when the turn ends. Sessions, conversations, messages, tabs persist in a local SQLite DB — pop the project open tomorrow and the agent's todo card is right where you left it.

 ### 6 · The prompt stack is the product.

@@ -158,7 +158,7 @@ Every layer is composable. Every layer is a file you can edit. Read [`src/prompt
   │   /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 @@ Every layer is composable. Every layer is a file you can edit. Read [`src/prompt
 | Frontend | Vite 5 + React 18 + TypeScript |
 | Daemon | Node 18+ · Express · SSE streaming · `better-sqlite3` for projects/conversations/messages/tabs |
 | Agent transport | `child_process.spawn` with `claude-stream-json` parser for Claude Code, line-buffered plain stdout for the rest |
-| Storage | Plain files in `.ocd/projects/<id>/` + SQLite at `.ocd/db.sqlite` (gitignored) |
+| Storage | Plain files in `.od/projects/<id>/` + SQLite at `.od/db.sqlite` (gitignored) |
 | Preview | Sandboxed iframe via `srcdoc` + per-skill `<artifact>` parser |
 | Export | HTML (inline assets) · PDF (browser print) · PPTX (skill-defined) · 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         # or npm install
 pnpm dev:all         # daemon (:7456) + Vite (:5173)
 open http://localhost:5173
@@ -190,22 +190,40 @@ The first load:
 1. Detects which agent CLIs you have on `PATH` and picks one automatically.
 2. Loads 19 skills + 71 design systems.
 3. Pops the welcome dialog so you can paste an Anthropic key (only needed for the BYOK fallback path).
+4. **Auto-creates `./.od/`** — the local runtime folder for the SQLite project DB, per-project artifacts, and saved renders. There is no `od init` step; the daemon `mkdir`s everything it needs on boot.

 Type a prompt, hit **Send**, watch the question form arrive, fill it, watch the todo card stream, watch the artifact render. Click **Save to disk** or download as a project ZIP.

+### First-run state (`./.od/`)
+
+The daemon owns one hidden folder at the repo root. Everything in it is gitignored and machine-local — never commit it.
+
+```
+.od/
+├── app.sqlite                 ← projects · conversations · messages · open tabs
+├── artifacts/                 ← one-off "Save to disk" renders (timestamped)
+└── projects/<id>/             ← per-project working dir, also the agent's cwd
+```
+
+| Want to… | Do this |
+|---|---|
+| Inspect what's in there | `ls -la .od && sqlite3 .od/app.sqlite '.tables'` |
+| Reset to a clean slate | stop the daemon, `rm -rf .od`, run `pnpm dev:all` again |
+| Move it elsewhere | not supported yet — the path is hard-coded relative to the repo |
+
 Full file map, scripts, and troubleshooting → [`QUICKSTART.md`](QUICKSTART.md).

 ## Repository structure

 ```
-open-claude-design/
+open-design/
 ├── README.md                      ← this file
 ├── README.zh-CN.md                ← 简体中文
 ├── QUICKSTART.md                  ← run / build / deploy guide
-├── package.json                   ← pnpm workspace, single bin: ocd
+├── package.json                   ← pnpm workspace, single bin: od
 │
 ├── daemon/                        ← Node + Express, the only server
-│   ├── cli.js                     ← `ocd` bin entry point
+│   ├── cli.js                     ← `od` bin entry point
 │   ├── server.js                  ← /api/* routes (projects, chat, files, exports)
 │   ├── agents.js                  ← PATH scanner + per-CLI argv builders
 │   ├── claude-stream.js           ← streaming JSON parser for Claude Code stdout
@@ -288,7 +306,7 @@ open-claude-design/
 ├── docs/
 │   ├── spec.md                    ← product spec, scenarios, differentiation
 │   ├── architecture.md            ← topologies, data flow, components
-│   ├── skills-protocol.md         ← extended SKILL.md ocd: frontmatter
+│   ├── skills-protocol.md         ← extended SKILL.md od: frontmatter
 │   ├── agent-adapters.md          ← per-CLI detection + dispatch
 │   ├── modes.md                   ← prototype / deck / template / design-system
 │   ├── references.md              ← long-form provenance
@@ -296,15 +314,15 @@ open-claude-design/
 │   ├── schemas/                   ← JSON schemas
 │   └── examples/                  ← canonical artifact examples
 │
-└── .ocd/                          ← runtime data, gitignored
+└── .od/                           ← runtime data, gitignored, auto-created
+    ├── app.sqlite                 ← projects / conversations / messages / tabs
    ├── projects/<id>/             ← per-project working folder (agent's cwd)
-    ├── artifacts/                 ← saved one-off renders
-    └── db.sqlite                  ← projects / conversations / messages / tabs
+    └── artifacts/                 ← saved one-off renders
 ```

 ## Skills

-19 skills ship in the box. Each is a folder under [`skills/`](skills/) following the Claude Code [`SKILL.md`][skill] convention with an extended `ocd:` frontmatter (`mode`, `platform`, `scenario`, `preview`, `design_system`).
+19 skills ship in the box. Each is a folder under [`skills/`](skills/) following the Claude Code [`SKILL.md`][skill] convention with an extended `od:` frontmatter (`mode`, `platform`, `scenario`, `preview`, `design_system`).

 ### Showcase examples

@@ -354,7 +372,7 @@ Adding a skill takes one folder. Read [`docs/skills-protocol.md`](docs/skills-pr
 ## Design Systems

 <p align="center">
-  <img src="docs/assets/design-systems-library.png" alt="71 design systems library" width="100%" />
+  <img src="docs/assets/design-systems-library.svg" alt="71 design systems library — placeholder, replace with the real screenshot" width="100%" />
 </p>

 71 systems out of the box, each as a single [`DESIGN.md`](design-systems/README.md):
@@ -386,7 +404,7 @@ The library is imported via [`scripts/sync-design-systems.mjs`](scripts/sync-des

 ## Visual directions

-When the user has no brand spec, the agent emits a second form with five curated directions — the OCD adaptation of [`huashu-design`'s "5 schools × 20 design philosophies" 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). Each direction is a deterministic spec — palette in OKLch, font stack, layout posture cues, references — that the agent binds verbatim into the seed template's `:root`. One radio click → a fully specified visual system. No improvisation, no AI-slop.
+When the user has no brand spec, the agent emits a second form with five curated directions — the OD adaptation of [`huashu-design`'s "5 schools × 20 design philosophies" 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). Each direction is a deterministic spec — palette in OKLch, font stack, layout posture cues, references — that the agent binds verbatim into the seed template's `:root`. One radio click → a fully specified visual system. No improvisation, no AI-slop.

 | Direction | Mood | Refs |
 |---|---|---|
@@ -400,7 +418,7 @@ Full spec → [`src/prompts/directions.ts`](src/prompts/directions.ts).

 ## Anti-AI-slop machinery

-The whole machinery below is the [`huashu-design`](https://github.com/alchaincyf/huashu-design) playbook, ported into OCD's prompt-stack and made enforceable per-skill via the side-file pre-flight. Read [`src/prompts/discovery.ts`](src/prompts/discovery.ts) for the live wording:
+The whole machinery below is the [`huashu-design`](https://github.com/alchaincyf/huashu-design) playbook, ported into OD's prompt-stack and made enforceable per-skill via the side-file pre-flight. Read [`src/prompts/discovery.ts`](src/prompts/discovery.ts) for the live wording:

 - **Question form first.** Turn 1 is `<question-form>` only — no thinking, no tools, no narration. The user chooses defaults at radio speed.
 - **Brand-spec extraction.** When the user attaches a screenshot or URL, the agent runs a five-step protocol (locate · download · grep hex · codify `brand-spec.md` · vocalise) before writing CSS. **Never guesses brand colors from memory.**
@@ -411,7 +429,7 @@ The whole machinery below is the [`huashu-design`](https://github.com/alchaincyf

 ## Comparison

-| Axis | [Claude Design][cd] (Anthropic) | [Open CoDesign][ocod] | **Open Claude Design** |
+| Axis | [Claude Design][cd] (Anthropic) | [Open CoDesign][ocod] | **Open Design** |
 |---|---|---|---|
 | License | Closed | MIT | **Apache-2.0** |
 | Form factor | Web (claude.ai) | Desktop (Electron) | **Web app + local daemon** |
@@ -481,8 +499,8 @@ Long-form provenance write-up — what we take from each, what we deliberately d
 - [ ] Comment-mode surgical edits (click element → instruction → patch) — pattern from [`open-codesign`][ocod]
 - [ ] AI-emitted tweaks panel (model surfaces the parameters worth tweaking) — pattern from [`open-codesign`][ocod]
 - [ ] Vercel + tunnel deployment recipe (Topology B)
- [ ] One-command `npx ocd init` to scaffold a project with `DESIGN.md`
- [ ] Skill marketplace (`ocd skills install <github-repo>`)
+- [ ] One-command `npx od init` to scaffold a project with `DESIGN.md`
+- [ ] Skill marketplace (`od skills install <github-repo>`)

 Phased delivery → [`docs/roadmap.md`](docs/roadmap.md).