From af3f96379ad230d9dcde3daaef85f78a17b746e3 Mon Sep 17 00:00:00 2001 From: pftom <1043269994@qq.com> Date: Tue, 28 Apr 2026 14:48:45 +0800 Subject: [PATCH 1/3] 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. --- .gitignore | 9 ++ LICENSE | 2 +- QUICKSTART.md | 13 ++- README.md | 86 +++++++++++------- README.zh-CN.md | 86 +++++++++++------- assets/frames/README.md | 2 +- daemon/cli.js | 6 +- daemon/db.js | 4 +- daemon/lint-artifact.js | 10 +- daemon/projects.js | 2 +- daemon/server.js | 8 +- daemon/skills.js | 22 ++--- design-systems/README.md | 2 +- docs/agent-adapters.md | 36 ++++---- docs/architecture.md | 48 +++++----- docs/assets/architecture-concept.png | 0 docs/assets/banner.legacy.png | Bin 2826259 -> 0 bytes docs/assets/banner.png | Bin 2068369 -> 0 bytes docs/assets/banner.svg | 43 +++++++++ docs/assets/design-systems-library.png | Bin 2973320 -> 0 bytes docs/assets/design-systems-library.svg | 43 +++++++++ docs/assets/skills-stack.png | 0 docs/examples/saas-landing-skill/SKILL.md | 8 +- docs/modes.md | 10 +- docs/references.md | 12 +-- docs/roadmap.md | 22 ++--- docs/screenshots/01-entry-view.png | Bin 151242 -> 0 bytes docs/screenshots/01-entry-view.svg | 43 +++++++++ docs/screenshots/02-question-form.png | Bin 269164 -> 0 bytes docs/screenshots/02-question-form.svg | 43 +++++++++ docs/screenshots/03-direction-picker.svg | 43 +++++++++ docs/screenshots/04-todo-progress.svg | 43 +++++++++ docs/screenshots/05-preview-iframe.png | Bin 222493 -> 0 bytes docs/screenshots/05-preview-iframe.svg | 43 +++++++++ .../screenshots/06-design-systems-library.png | Bin 243088 -> 0 bytes .../screenshots/06-design-systems-library.svg | 43 +++++++++ docs/screenshots/07-magazine-deck.png | Bin 81313 -> 0 bytes docs/screenshots/07-magazine-deck.svg | 43 +++++++++ docs/screenshots/08-mobile-app.png | Bin 103741 -> 0 bytes docs/screenshots/08-mobile-app.svg | 43 +++++++++ docs/screenshots/ocd-examples-tab.png | Bin 220036 -> 0 bytes docs/screenshots/saas-landing-example.png | Bin 117515 -> 0 bytes docs/skills-protocol.md | 82 ++++++++--------- docs/spec.md | 22 ++--- index.html | 2 +- package-lock.json | 6 +- package.json | 4 +- public/logo.svg | 4 +- skills/blog-post/SKILL.md | 4 +- skills/blog-post/example.html | 4 +- skills/critique/SKILL.md | 4 +- skills/critique/example.html | 4 +- skills/dashboard/SKILL.md | 4 +- skills/dashboard/example.html | 12 +-- skills/dating-web/SKILL.md | 4 +- skills/dating-web/example.html | 12 +-- skills/digital-eguide/SKILL.md | 4 +- skills/digital-eguide/example.html | 10 +- skills/docs-page/SKILL.md | 4 +- skills/docs-page/example.html | 8 +- skills/email-marketing/SKILL.md | 4 +- skills/email-marketing/example.html | 16 ++-- skills/eng-runbook/SKILL.md | 2 +- skills/finance-report/SKILL.md | 2 +- skills/gamified-app/SKILL.md | 4 +- skills/gamified-app/example.html | 20 ++-- skills/guizang-ppt/SKILL.md | 2 +- skills/hr-onboarding/SKILL.md | 2 +- skills/invoice/SKILL.md | 2 +- skills/kanban-board/SKILL.md | 2 +- skills/magazine-poster/SKILL.md | 4 +- skills/magazine-poster/example.html | 24 ++--- skills/meeting-notes/SKILL.md | 2 +- skills/mobile-app/SKILL.md | 2 +- skills/mobile-app/assets/template.html | 12 +-- skills/mobile-app/example.html | 12 +-- skills/mobile-app/references/checklist.md | 4 +- skills/mobile-app/references/layouts.md | 42 ++++----- skills/mobile-onboarding/SKILL.md | 2 +- skills/motion-frames/SKILL.md | 4 +- skills/motion-frames/example.html | 10 +- skills/pm-spec/SKILL.md | 2 +- skills/pricing-page/SKILL.md | 4 +- skills/pricing-page/example.html | 8 +- skills/saas-landing/SKILL.md | 8 +- skills/saas-landing/example.html | 14 +-- skills/simple-deck/SKILL.md | 2 +- skills/simple-deck/assets/template.html | 6 +- skills/simple-deck/example.html | 14 +-- skills/social-carousel/SKILL.md | 4 +- skills/social-carousel/example.html | 10 +- skills/sprite-animation/SKILL.md | 4 +- skills/sprite-animation/example.html | 16 ++-- skills/team-okrs/SKILL.md | 2 +- skills/tweaks/SKILL.md | 2 +- skills/tweaks/example.html | 2 +- skills/web-prototype/SKILL.md | 4 +- skills/web-prototype/assets/template.html | 8 +- skills/web-prototype/example.html | 12 +-- skills/web-prototype/references/checklist.md | 4 +- skills/web-prototype/references/layouts.md | 16 ++-- skills/weekly-update/SKILL.md | 2 +- skills/wireframe-sketch/SKILL.md | 4 +- skills/wireframe-sketch/example.html | 28 +++--- src/components/DesignFilesPanel.tsx | 2 +- src/components/EntryView.tsx | 2 +- src/components/FileViewer.tsx | 4 +- src/i18n/index.tsx | 2 +- src/i18n/locales/en.ts | 4 +- src/i18n/locales/zh-CN.ts | 4 +- src/index.css | 2 +- src/prompts/deck-framework.ts | 10 +- src/prompts/discovery.ts | 4 +- src/prompts/official-system.ts | 4 +- src/prompts/system.ts | 2 +- src/providers/registry.ts | 2 +- src/runtime/exports.ts | 2 +- src/runtime/srcdoc.ts | 8 +- src/state/config.ts | 2 +- src/types.ts | 2 +- templates/deck-framework.html | 6 +- vite.config.ts | 2 +- 122 files changed, 952 insertions(+), 474 deletions(-) delete mode 100644 docs/assets/architecture-concept.png delete mode 100644 docs/assets/banner.legacy.png delete mode 100644 docs/assets/banner.png create mode 100644 docs/assets/banner.svg delete mode 100644 docs/assets/design-systems-library.png create mode 100644 docs/assets/design-systems-library.svg delete mode 100644 docs/assets/skills-stack.png delete mode 100644 docs/screenshots/01-entry-view.png create mode 100644 docs/screenshots/01-entry-view.svg delete mode 100644 docs/screenshots/02-question-form.png create mode 100644 docs/screenshots/02-question-form.svg create mode 100644 docs/screenshots/03-direction-picker.svg create mode 100644 docs/screenshots/04-todo-progress.svg delete mode 100644 docs/screenshots/05-preview-iframe.png create mode 100644 docs/screenshots/05-preview-iframe.svg delete mode 100644 docs/screenshots/06-design-systems-library.png create mode 100644 docs/screenshots/06-design-systems-library.svg delete mode 100644 docs/screenshots/07-magazine-deck.png create mode 100644 docs/screenshots/07-magazine-deck.svg delete mode 100644 docs/screenshots/08-mobile-app.png create mode 100644 docs/screenshots/08-mobile-app.svg delete mode 100644 docs/screenshots/ocd-examples-tab.png delete mode 100644 docs/screenshots/saas-landing-example.png diff --git a/.gitignore b/.gitignore index 36998c4..5c35152 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,16 @@ dist .DS_Store *.log .vite + +# Local runtime data — auto-created by the daemon on first start. +# Holds app.sqlite (project metadata), projects// (per-project artifacts, +# the agent's CWD), and artifacts/ (one-off renders). Never commit. +.od + +# Legacy folder name from before the rename; keep ignored so existing +# clones don't accidentally stage stale runtime data. .ocd + tsconfig.tsbuildinfo .claude-sessions/* \ No newline at end of file diff --git a/LICENSE b/LICENSE index 4e6e7ae..eb79c35 100644 --- a/LICENSE +++ b/LICENSE @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright 2026 Open Claude Design contributors + Copyright 2026 Open Design contributors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/QUICKSTART.md b/QUICKSTART.md index fd10ecc..4925c0e 100644 --- a/QUICKSTART.md +++ b/QUICKSTART.md @@ -10,7 +10,7 @@ npm run dev:all # starts daemon (:7456) + Vite (:5173) together open http://localhost:5173 ``` -On first load, the app detects your installed code-agent CLI (Claude Code / Codex / Gemini / OpenCode / Cursor Agent / Qwen), picks it automatically, and defaults to `web-prototype` skill + `Neutral Modern` design system. Type a prompt and hit **Send**. The agent streams into the left pane; the `` tag is parsed out and the HTML renders live on the right. When it finishes, click **Save to disk** to persist the artifact under `./.ocd/artifacts/-/index.html`. +On first load, the app detects your installed code-agent CLI (Claude Code / Codex / Gemini / OpenCode / Cursor Agent / Qwen), picks it automatically, and defaults to `web-prototype` skill + `Neutral Modern` design system. Type a prompt and hit **Send**. The agent streams into the left pane; the `` tag is parsed out and the HTML renders live on the right. When it finishes, click **Save to disk** to persist the artifact under `./.od/artifacts/-/index.html`. The **Design system** dropdown ships with 71 built-in systems — 2 hand-authored starters (Neutral Modern, Warm Editorial) and 69 product systems imported from [`awesome-design-md`](https://github.com/VoltAgent/awesome-design-md), grouped by category (AI & LLM, Developer Tools, Productivity, Backend, Design Tools, Fintech, E-Commerce, Media, Automotive). Pick one to skin every prototype in that brand's aesthetic. @@ -57,9 +57,9 @@ Swap the skill or the design system in the top bar and the next send uses the ne ## File map ``` -open-claude-design/ +open-design/ ├── daemon/ # Node/Express — spawns local agents + serves APIs -│ ├── cli.js # `ocd` bin entry (also used by npm scripts) +│ ├── cli.js # `od` bin entry (also used by npm scripts) │ ├── server.js # /api/agents /api/skills /api/design-systems /api/chat /api/upload /api/artifacts/save │ ├── agents.js # PATH scanner for claude/codex/gemini/opencode/cursor-agent/qwen │ ├── skills.js # SKILL.md loader (frontmatter parser) @@ -96,7 +96,10 @@ open-claude-design/ │ ├── components/ # ChatPane, PreviewPane, AgentPicker, SkillPicker, DesignSystemPicker, SettingsDialog │ └── state/config.ts # localStorage persistence ├── docs/ # product vision + spec -├── .ocd/artifacts/ # saved HTML outputs (gitignored) +├── .od/ # runtime data (gitignored, auto-created) +│ ├── app.sqlite # projects / conversations / messages / tabs +│ ├── artifacts/ # one-off "Save to disk" renders +│ └── projects// # per-project working dir + agent cwd └── vite.config.ts # /api proxy to :7456 ``` @@ -111,6 +114,6 @@ open-claude-design/ This Quickstart is the runnable seed of the spec in [`docs/`](docs/). The spec describes where this grows (see [`docs/roadmap.md`](docs/roadmap.md)). Highlights: - `docs/architecture.md` proposes Next.js; we picked Vite for a simpler dev loop. The daemon contract is identical, so migrating is a port, not a rewrite. -- `docs/skills-protocol.md` describes the full `ocd:` frontmatter (typed inputs, sliders, capability gating). This MVP reads `name` / `description` / `triggers` / `ocd.mode` / `ocd.design_system.requires` only — extend `daemon/skills.js` to add the rest. +- `docs/skills-protocol.md` describes the full `od:` frontmatter (typed inputs, sliders, capability gating). This MVP reads `name` / `description` / `triggers` / `od.mode` / `od.design_system.requires` only — extend `daemon/skills.js` to add the rest. - `docs/agent-adapters.md` foresees richer dispatch (capability detection, streaming tool-calls). Our `daemon/agents.js` is a minimal dispatcher — enough to prove the wiring. - `docs/modes.md` lists four modes: prototype / deck / template / design-system. We ship skills for the first two; the picker already filters by `mode`. diff --git a/README.md b/README.md index c65be08..3b746bc 100644 --- a/README.md +++ b/README.md @@ -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**.

- Open Claude Design banner + Open Design banner — placeholder, replace with the live UI hero shot

@@ -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 `` 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 `` extension when you do. @@ -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 `` 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 `` 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//`. 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//`. 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/ }) + │ spawn(cli, [...], { cwd: .od/projects/ }) ▼ ┌──────────────────────────────────────────────────────────┐ │ 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//` + SQLite at `.ocd/db.sqlite` (gitignored) | +| Storage | Plain files in `.od/projects//` + SQLite at `.od/db.sqlite` (gitignored) | | Preview | Sandboxed iframe via `srcdoc` + per-skill `` parser | | Export | HTML (inline assets) · PDF (browser print) · PPTX (skill-defined) · ZIP (archiver) | ## Quickstart ```bash -git clone https://github.com//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// ← 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// ← 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

- 71 design systems library + 71 design systems library — placeholder, replace with the real screenshot

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 `` 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 `) +- [ ] One-command `npx od init` to scaffold a project with `DESIGN.md` +- [ ] Skill marketplace (`od skills install `) Phased delivery → [`docs/roadmap.md`](docs/roadmap.md). diff --git a/README.zh-CN.md b/README.zh-CN.md index 2cda340..ecfebb9 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -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** 驱动。

- Open Claude Design banner + Open Design banner —— 占位图，等待替换为真实产品截图

@@ -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** 读取它们，对自己的输出跑一轮**五维评审**，几秒后吐出一个 ``，渲染在沙盒 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`，并把对应 `` 的扩展名同步改掉即可。

-Entry view: pick skill + design system + brief
+01 · Entry view — placeholder, replace with the real screenshot
Entry view — pick a skill, pick a design system, type the brief. The same surface for prototypes, decks, mobile apps, dashboards, and editorial pages. 		-Turn-1 discovery question form
-Turn-1 discovery form — 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. +02 · Discovery form — placeholder, replace with the real screenshot
+Turn-1 discovery form — 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.
-Direction picker — 5 deterministic visual directions
+03 · Direction picker — placeholder, replace with the real screenshot
Direction picker — 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. 		-Live TodoWrite plan streaming into the UI
+04 · Live todo progress — placeholder, replace with the real screenshot
Live todo progress — the agent's plan streams as a live card. in_progress → completed updates land in real time. The user can redirect cheaply, mid-flight.
-Sandboxed iframe preview of the generated artifact
+05 · Sandboxed preview — placeholder, replace with the real screenshot
Sandboxed preview — every <artifact> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP. 		-71-system design-system library with palette swatches
+06 · 71-system library — placeholder, replace with the real screenshot
71-system library — every product system shows its 4-color signature. Click for the full DESIGN.md, swatch grid, and live showcase.
-Magazine-style horizontal deck output
+07 · Magazine deck — placeholder, replace with the real screenshot
Deck mode (guizang-ppt) — the bundled guizang-ppt-skill drops in unchanged. Magazine layouts, WebGL hero backgrounds, single-file HTML output, PDF export. 		-Mobile app prototype with iPhone 15 Pro frame
+08 · Mobile prototype — placeholder, replace with the real screenshot
Mobile prototype — pixel-accurate iPhone 15 Pro chrome (Dynamic Island, status bar SVGs, home indicator). Multi-screen prototypes use the shared /frames/ assets so the agent never re-draws a phone.
@@ -113,13 +113,13 @@ Daemon 启动时扫 `PATH`，找 [`claude`](https://docs.anthropic.com/en/docs/c ### 4 · 初始化问题表单干掉 80% 的来回返工 -OCD 的提示词栈把 `RULE 1` 写死了：每个新设计任务都从 `` 开始，**不是代码**。Surface · 受众 · 调性 · 品牌上下文 · 规模 · 约束。一段写得很长的需求里仍然有大量留白：视觉调性、色彩立场、规模 —— 而表单恰恰把这些用 30 秒勾选项锁死。错方向的代价是一轮对话，不是一份做完的 deck。 +OD 的提示词栈把 `RULE 1` 写死了：每个新设计任务都从 `` 开始，**不是代码**。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//` 下的 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//` 下的 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/ }) + │ spawn(cli, [...], { cwd: .od/projects/ }) ▼ ┌──────────────────────────────────────────────────────────┐ │ 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//` + SQLite `.ocd/db.sqlite`（已 gitignore） | +| 存储 | 纯文件 `.od/projects//` + SQLite `.od/app.sqlite`（已 gitignore，daemon 启动自建） | | 预览 | 沙盒 iframe（`srcdoc`）+ 每个 skill 的 `` parser | | 导出 | HTML（内联资源）· PDF（浏览器打印）· PPTX（skill 自定义）· ZIP（archiver） | ## Quickstart ```bash -git clone https://github.com//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// ← 每个项目的工作目录，也是 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// ← 每个项目的工作目录（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

- 71 套 design system 库 + 71 套 design system 库 —— 占位图，等待替换为真实截图

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 必须是 ``，**不准** 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 `） +- [ ] 一行 `npx od init` 脚手架带 `DESIGN.md` +- [ ] Skill 市场（`od skills install `） 分阶段交付计划在 [`docs/roadmap.md`](docs/roadmap.md)。 diff --git a/assets/frames/README.md b/assets/frames/README.md index 84d87fd..809bd27 100644 --- a/assets/frames/README.md +++ b/assets/frames/README.md @@ -43,7 +43,7 @@ path inside its inner viewport: > \`\`\` -In an OCD-managed project, the recommended pattern is: +In an OD-managed project, the recommended pattern is: \`\`\` my-project/ diff --git a/daemon/cli.js b/daemon/cli.js index dd352ec..2cb1deb 100644 --- a/daemon/cli.js +++ b/daemon/cli.js @@ -2,7 +2,7 @@ import { startServer } from './server.js'; const args = process.argv.slice(2); -let port = Number(process.env.OCD_PORT) || 7456; +let port = Number(process.env.OD_PORT) || 7456; let open = true; for (let i = 0; i < args.length; i++) { @@ -12,7 +12,7 @@ for (let i = 0; i < args.length; i++) { } else if (a === '--no-open') { open = false; } else if (a === '-h' || a === '--help') { - console.log(`Usage: ocd [--port ] [--no-open] + console.log(`Usage: od [--port ] [--no-open] Starts a local daemon that: * scans PATH for installed code-agent CLIs (claude, codex, gemini, opencode, cursor-agent, ...) @@ -24,7 +24,7 @@ Starts a local daemon that: } startServer({ port }).then(url => { - console.log(`[ocd] listening on ${url}`); + console.log(`[od] listening on ${url}`); if (open) { const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' diff --git a/daemon/db.js b/daemon/db.js index 2af1552..4fbf4d3 100644 --- a/daemon/db.js +++ b/daemon/db.js @@ -1,6 +1,6 @@ // SQLite-backed persistence for projects, conversations, messages, and the // per-project set of open file tabs. The on-disk project folder under -// .ocd/projects// is still the single owner of the user's actual files +// .od/projects// is still the single owner of the user's actual files // (HTML artifacts, sketches, uploads); this database tracks the metadata // that used to live in localStorage. @@ -12,7 +12,7 @@ let dbInstance = null; export function openDatabase(projectRoot) { if (dbInstance) return dbInstance; - const dir = path.join(projectRoot, '.ocd'); + const dir = path.join(projectRoot, '.od'); fs.mkdirSync(dir, { recursive: true }); const file = path.join(dir, 'app.sqlite'); const db = new Database(file); diff --git a/daemon/lint-artifact.js b/daemon/lint-artifact.js index 2943172..c50110c 100644 --- a/daemon/lint-artifact.js +++ b/daemon/lint-artifact.js @@ -143,7 +143,7 @@ export function lintArtifact(rawHtml) { severity: 'P0', id: 'left-accent-card', message: 'Rounded card with a coloured left border — the canonical AI-slop card pattern.', - fix: 'Drop either the border-radius (set 0px) or the border-left. Cards in the OCD seed use hairline borders all-round, no left accent.', + fix: 'Drop either the border-radius (set 0px) or the border-left. Cards in the OD seed use hairline borders all-round, no left accent.', snippet: clip(lam[0]), }); } @@ -262,19 +262,19 @@ export function lintArtifact(rawHtml) { } // ── P2-1: missing comment-mode anchor on
──────────────── - // Either `data-ocd-id` (web/mobile prototypes) or `data-screen-label` + // Either `data-od-id` (web/mobile prototypes) or `data-screen-label` // (decks) counts. Whichever the artifact uses, every
should // carry one so the chat layer can target it. const sections = html.match(/]*>/gi) ?? []; const tagged = sections.filter( - (s) => /data-ocd-id\s*=/.test(s) || /data-screen-label\s*=/.test(s), + (s) => /data-od-id\s*=/.test(s) || /data-screen-label\s*=/.test(s), ).length; if (sections.length > 0 && tagged < sections.length) { out.push({ severity: 'P2', id: 'missing-section-anchor', - message: `${sections.length - tagged} of ${sections.length}
s lack data-ocd-id (or data-screen-label).`, - fix: 'Add data-ocd-id="kebab-slug" (or data-screen-label="01 Cover" for slides) to every top-level
so comment mode can target it.', + message: `${sections.length - tagged} of ${sections.length}
s lack data-od-id (or data-screen-label).`, + fix: 'Add data-od-id="kebab-slug" (or data-screen-label="01 Cover" for slides) to every top-level
so comment mode can target it.', }); } diff --git a/daemon/projects.js b/daemon/projects.js index 7011704..c1a94e5 100644 --- a/daemon/projects.js +++ b/daemon/projects.js @@ -1,5 +1,5 @@ // Project files registry. Each project is a folder under -// /.ocd/projects//. The frontend's project list +// /.od/projects//. The frontend's project list // (localStorage) carries metadata; this module is the single owner of the // on-disk content (HTML artifacts, sketches, uploaded images, pasted text). // diff --git a/daemon/server.js b/daemon/server.js index af6b609..f3a6246 100644 --- a/daemon/server.js +++ b/daemon/server.js @@ -50,11 +50,11 @@ const PROJECT_ROOT = path.resolve(__dirname, '..'); const STATIC_DIR = path.join(PROJECT_ROOT, 'dist'); const SKILLS_DIR = path.join(PROJECT_ROOT, 'skills'); const DESIGN_SYSTEMS_DIR = path.join(PROJECT_ROOT, 'design-systems'); -const ARTIFACTS_DIR = path.join(PROJECT_ROOT, '.ocd', 'artifacts'); -const PROJECTS_DIR = path.join(PROJECT_ROOT, '.ocd', 'projects'); +const ARTIFACTS_DIR = path.join(PROJECT_ROOT, '.od', 'artifacts'); +const PROJECTS_DIR = path.join(PROJECT_ROOT, '.od', 'projects'); fs.mkdirSync(PROJECTS_DIR, { recursive: true }); -const UPLOAD_DIR = path.join(os.tmpdir(), 'ocd-uploads'); +const UPLOAD_DIR = path.join(os.tmpdir(), 'od-uploads'); fs.mkdirSync(UPLOAD_DIR, { recursive: true }); fs.mkdirSync(ARTIFACTS_DIR, { recursive: true }); @@ -580,7 +580,7 @@ export async function startServer({ port = 7456 } = {}) { // No mtime-based caching — frames are static and small. app.use('/frames', express.static(path.join(PROJECT_ROOT, 'assets', 'frames'))); - // Project files. Each project owns a flat folder under .ocd/projects// + // Project files. Each project owns a flat folder under .od/projects// // containing every file the user has uploaded, pasted, sketched, or that // the agent has generated. Names are sanitized; paths are confined to the // project's own folder (see daemon/projects.js). diff --git a/daemon/skills.js b/daemon/skills.js index da1a34b..c20c592 100644 --- a/daemon/skills.js +++ b/daemon/skills.js @@ -24,20 +24,20 @@ export async function listSkills(skillsRoot) { const raw = await readFile(skillPath, 'utf8'); const { data, body } = parseFrontmatter(raw); const hasAttachments = await dirHasAttachments(dir); - const mode = data.ocd?.mode || inferMode(body, data.description); + const mode = data.od?.mode || inferMode(body, data.description); out.push({ id: data.name || entry.name, name: data.name || entry.name, description: data.description || '', triggers: Array.isArray(data.triggers) ? data.triggers : [], mode, - platform: normalizePlatform(data.ocd?.platform, mode, body, data.description), - scenario: normalizeScenario(data.ocd?.scenario, body, data.description), - previewType: data.ocd?.preview?.type || 'html', - designSystemRequired: data.ocd?.design_system?.requires ?? true, - defaultFor: normalizeDefaultFor(data.ocd?.default_for), - upstream: typeof data.ocd?.upstream === 'string' ? data.ocd.upstream : null, - featured: normalizeFeatured(data.ocd?.featured), + platform: normalizePlatform(data.od?.platform, mode, body, data.description), + scenario: normalizeScenario(data.od?.scenario, body, data.description), + previewType: data.od?.preview?.type || 'html', + designSystemRequired: data.od?.design_system?.requires ?? true, + defaultFor: normalizeDefaultFor(data.od?.default_for), + upstream: typeof data.od?.upstream === 'string' ? data.od.upstream : null, + featured: normalizeFeatured(data.od?.featured), examplePrompt: derivePrompt(data), body: hasAttachments ? withSkillRootPreamble(body, dir) : body, dir, @@ -85,7 +85,7 @@ function normalizeDefaultFor(value) { return [String(value)]; } -// Coerce `ocd.featured` into a numeric priority. Lower numbers float to the +// Coerce `od.featured` into a numeric priority. Lower numbers float to the // top of the Examples gallery; `true` is treated as priority 1; anything // missing/unrecognised becomes null so non-featured skills keep their // natural alphabetical order. @@ -99,12 +99,12 @@ function normalizeFeatured(value) { return null; } -// Prefer an explicitly authored `ocd.example_prompt`. Fall back to the +// Prefer an explicitly authored `od.example_prompt`. Fall back to the // skill description's first sentence — it's already written in actionable // language ("Admin / analytics dashboard in a single HTML file…") so it // serves as a passable starter prompt. function derivePrompt(data) { - const explicit = data.ocd?.example_prompt; + const explicit = data.od?.example_prompt; if (typeof explicit === 'string' && explicit.trim()) return explicit.trim(); const desc = typeof data.description === 'string' ? data.description.trim() : ''; if (!desc) return ''; diff --git a/design-systems/README.md b/design-systems/README.md index 7335e1d..85265fe 100644 --- a/design-systems/README.md +++ b/design-systems/README.md @@ -6,7 +6,7 @@ will read it as part of its system prompt. ## What's bundled -- **`default/`** — Neutral Modern. Hand-authored starter for the OCD spec. +- **`default/`** — Neutral Modern. Hand-authored starter for the OD spec. - **`warm-editorial/`** — Warm Editorial. Hand-authored serif starter. - **69 product systems**, imported from [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) diff --git a/docs/agent-adapters.md b/docs/agent-adapters.md index 1759b74..aa14bad 100644 --- a/docs/agent-adapters.md +++ b/docs/agent-adapters.md @@ -2,7 +2,7 @@ **Parent:** [`spec.md`](spec.md) · **Siblings:** [`architecture.md`](architecture.md) · [`skills-protocol.md`](skills-protocol.md) · [`modes.md`](modes.md) -The adapter layer is OCD's most load-bearing design decision. We delegate the **entire agent loop** — model calls, tool use, context management, permission handling, resume, cancel — to the user's existing code agent CLI. OCD's job is to detect it, feed it a skill + prompt + working directory, and stream its output back to the web UI. +The adapter layer is OD's most load-bearing design decision. We delegate the **entire agent loop** — model calls, tool use, context management, permission handling, resume, cancel — to the user's existing code agent CLI. OD's job is to detect it, feed it a skill + prompt + working directory, and stream its output back to the web UI. > **Thesis:** The code agent space has already converged on a few strong implementations (Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, OpenClaw). Reimplementing a 7th is worse than just talking to all of them. > @@ -70,7 +70,7 @@ type AgentEvent = ## 2. Detection strategy -Run all adapters' `detect()` in parallel on daemon start, then cache results in `~/.open-claude-design/agents.json` with a 24h TTL. Re-detect on daemon `SIGHUP`. +Run all adapters' `detect()` in parallel on daemon start, then cache results in `~/.open-design/agents.json` with a 24h TTL. Re-detect on daemon `SIGHUP`. Each adapter uses **two signals**: @@ -98,7 +98,7 @@ If both signals agree, detection is confident. If only one signal fires, we mark Skills travel into each agent via one of three strategies, in order of preference: ### 4.1 Native skill loading (preferred) -Agent scans its own `~/./skills/` on launch. We symlink OCD's skill into that dir (see [`skills-protocol.md`](skills-protocol.md) §3) and let the agent pick it up natively. Zero prompt overhead. +Agent scans its own `~/./skills/` on launch. We symlink OD's skill into that dir (see [`skills-protocol.md`](skills-protocol.md) §3) and let the agent pick it up natively. Zero prompt overhead. - **Works for:** Claude Code. Codex (version-dependent). OpenCode. @@ -131,10 +131,10 @@ The adapter declares which strategy to use via `capabilities().nativeSkillLoadin - Invocation: direct Anthropic Messages API with `stream: true`. - Skill loading: prompt injection only — read the skill dir, inline everything. -- Tool use: we register `Read/Write/Edit` as tools, implement them in the daemon against the artifact cwd, and run the loop ourselves. This is the one place OCD does own the loop — because the user has no agent at all. Keep it as dumb as possible. +- Tool use: we register `Read/Write/Edit` as tools, implement them in the daemon against the artifact cwd, and run the loop ourselves. This is the one place OD does own the loop — because the user has no agent at all. Keep it as dumb as possible. - Surgical edits: approximated by regenerating the whole target file with "only change X" in the prompt. - Model: Claude Sonnet 4.6 default; Opus 4.7 behind a flag. -- **Why ship this at all?** Topology C requires it (no daemon available in a pure-Vercel deploy). Also, users trying OCD for the first time without a CLI installed still get a working experience. +- **Why ship this at all?** Topology C requires it (no daemon available in a pure-Vercel deploy). Also, users trying OD for the first time without a CLI installed still get a working experience. ### 5.3 Codex @@ -173,7 +173,7 @@ The web UI reads `agents.capabilities()` and disables features that the active a | Comment mode (click to refine) | `surgicalEdit: true` | Hidden; show tooltip explaining why | | Streaming tool-call feed | `streaming: true` | Show a spinner only | | Resume interrupted run | `resume: true` | "Cancel + restart" only | -| Skill picker shows skill with `ocd.capabilities_required` | all listed caps | Skill greyed out with reason | +| Skill picker shows skill with `od.capabilities_required` | all listed caps | Skill greyed out with reason | This is how we avoid "works on my Claude Code, breaks on your Gemini" — we detect, degrade, and document. @@ -192,7 +192,7 @@ Switching mid-run is not allowed (cancel first). The artifact is agent-agnostic; ## 8. Fallback chain -If the user's preferred agent fails (crash, auth, timeout), OCD offers a one-click fallback in this order: +If the user's preferred agent fails (crash, auth, timeout), OD offers a one-click fallback in this order: 1. User's preferred agent (e.g. Cursor Agent) 2. Any other detected agent (Claude Code, if installed) @@ -206,14 +206,14 @@ First run: ``` $ pnpm dev -[ocd] daemon starting on :7431 -[ocd] detecting agents… -[ocd] ✓ claude-code v0.6.3 (auth: ok, skills dir linked) -[ocd] ✓ codex v0.8.1 (auth: ok) -[ocd] ✗ cursor-agent (not installed) -[ocd] ✗ gemini-cli (installed but not authenticated; run `gemini auth login`) -[ocd] ✓ api-fallback (ANTHROPIC_API_KEY found) -[ocd] daemon ready; 3 agents available +[od] daemon starting on :7431 +[od] detecting agents… +[od] ✓ claude-code v0.6.3 (auth: ok, skills dir linked) +[od] ✓ codex v0.8.1 (auth: ok) +[od] ✗ cursor-agent (not installed) +[od] ✗ gemini-cli (installed but not authenticated; run `gemini auth login`) +[od] ✓ api-fallback (ANTHROPIC_API_KEY found) +[od] daemon ready; 3 agents available ``` Web UI mirrors this in an agent-selector dropdown, with unauthenticated agents shown greyed out with a fix-it tooltip. @@ -222,8 +222,8 @@ Web UI mirrors this in an agent-selector dropdown, with unauthenticated agents s We inherit the underlying agent's permission model rather than building our own. This means: -- **Claude Code** respects its own `--allowed-tools` and `--permission-mode` flags. OCD passes through user preferences. -- **Codex / Cursor** sandbox by workspace; OCD always sets cwd to the artifact dir so nothing outside is visible by default. +- **Claude Code** respects its own `--allowed-tools` and `--permission-mode` flags. OD passes through user preferences. +- **Codex / Cursor** sandbox by workspace; OD always sets cwd to the artifact dir so nothing outside is visible by default. - **API fallback** is the one case we own. We implement a whitelist: only `Read`, `Write`, `Edit` tools, all rooted at the artifact cwd. Network access is off. The daemon never grants more authority to an agent than it had on its own. We don't run the agent in a privileged mode "for convenience." @@ -253,6 +253,6 @@ Each adapter is a separate module so community contributions can add new ones wi ## 12. Open questions - **Nested agents.** What if Claude Code's agent itself spawns a subagent? We receive events from the outer process only. v1 policy: surface only top-level events; summarize subagent activity as "sub-task" placeholder. -- **Billing awareness.** Some agents bill per message, some per token. OCD doesn't track cost in MVP; v1 adds an optional "usage" event from adapters that expose it. +- **Billing awareness.** Some agents bill per message, some per token. OD doesn't track cost in MVP; v1 adds an optional "usage" event from adapters that expose it. - **Windows support.** PATH scanning and `spawn` semantics differ on Windows. v1 targets macOS and Linux; Windows is best-effort. - **Docker-contained agents.** Some users run Claude Code in a container. Adapter needs a "remote" mode — probably same interface but talks over SSH. Phase 2+. diff --git a/docs/architecture.md b/docs/architecture.md index 5fbea63..ac33896 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -13,7 +13,7 @@ This doc describes the system topology, runtime modes, data flow, and file layou ## 1. Three deployment topologies -OCD is a web app plus a local daemon. The split means the same UI can run in three shapes: +OD is a web app plus a local daemon. The split means the same UI can run in three shapes: ### Topology A — Fully local (the default) @@ -24,7 +24,7 @@ OCD is a web app plus a local daemon. The split means the same UI can run in thr │ │ │ │ │ ws://localhost:7431 │ │ ▼ │ -│ ocd daemon (Node, long-running) │ +│ od daemon (Node, long-running) │ │ │ │ │ ▼ │ │ spawns: claude / codex / cursor / … │ @@ -36,22 +36,22 @@ One `pnpm dev` starts both the Next.js app and the daemon (via a predev script). ### Topology B — Web on Vercel + daemon on user's machine ``` -browser ──► ocd.yourdomain.com (Vercel) +browser ──► od.yourdomain.com (Vercel) │ │ ws(s):// user-provided URL (e.g. cloudflared tunnel) ▼ - ocd daemon on user's laptop + od daemon on user's laptop │ ▼ spawns: claude / codex / … ``` -The user runs `ocd daemon --expose` which prints a tunnel URL; they paste the URL into the deployed web app's "Connect daemon" screen. Daemon holds secrets; Vercel holds nothing sensitive. +The user runs `od daemon --expose` which prints a tunnel URL; they paste the URL into the deployed web app's "Connect daemon" screen. Daemon holds secrets; Vercel holds nothing sensitive. ### Topology C — Web on Vercel + direct API (no daemon) ``` -browser ──► ocd.yourdomain.com (Vercel serverless) +browser ──► od.yourdomain.com (Vercel serverless) │ ▼ Anthropic Messages API (BYOK stored in browser) @@ -91,8 +91,8 @@ The three topologies share the same web bundle; the difference is which transpor │ │ ▼ ▼ ┌─ agent CLIs ─┐ ┌─ filesystem ─┐ -│ claude │ │ ./.ocd/ │ -│ codex │ │ ~/.ocd/ │ +│ claude │ │ ./.od/ │ +│ codex │ │ ~/.od/ │ │ cursor-agent │ │ skills/ │ │ gemini │ │ DESIGN.md │ │ opencode │ └──────────────┘ @@ -107,10 +107,10 @@ The three topologies share the same web bundle; the difference is which transpor - **Why Next.js, not Vite SPA?** We want SSR for the marketing landing page + serverless routes for Topology C's direct-API path + Vercel deployment as a first-class citizen. An SPA would need a separate server for any of that. - **State:** Zustand for session/artifact stores. Browser-side only; hydrated from daemon on connect. - **Iframe preview:** Vendored React 18 + Babel standalone for JSX artifacts, following [Open CoDesign][ocod]'s approach. HTML artifacts load raw. See [§5](#5-preview-renderer). -- **Comment mode:** Click captures `[data-ocd-id]` on preview DOM, opens a popover, sends `{artifact_id, element_id, note}` to daemon → agent gets a surgical edit instruction. +- **Comment mode:** Click captures `[data-od-id]` on preview DOM, opens a popover, sends `{artifact_id, element_id, note}` to daemon → agent gets a surgical edit instruction. - **Slider UI:** When an agent emits a "tweak parameter" tool call (see [`skills-protocol.md`](skills-protocol.md) §4.2), the web app renders a live-update control that re-sends parameterized prompts without round-tripping the chat. -### 3.2 Local daemon (`ocd daemon`) +### 3.2 Local daemon (`od daemon`) Single binary via `pkg` or a thin Node script distributed over npm. Responsibilities: @@ -155,7 +155,7 @@ Conflicts resolve by priority (higher wins). Each skill parsed once; watched for Plain files on disk. Conventional layout per project: ``` -./.ocd/ +./.od/ ├── config.json # project-level daemon config ├── artifacts/ │ ├── 2026-04-24T10-03-12-landing/ @@ -169,8 +169,8 @@ Plain files on disk. Conventional layout per project: ``` Rationale: -- **Plain files** → users can `git add ./.ocd/artifacts/` and review designs in PRs. -- **`artifact.json` metadata** → OCD can reconstruct the artifact tree without a DB. +- **Plain files** → users can `git add ./.od/artifacts/` and review designs in PRs. +- **`artifact.json` metadata** → OD can reconstruct the artifact tree without a DB. - **`history.jsonl` not SQLite** → append-only, git-friendly, greppable. [Open CoDesign][ocod] uses SQLite; we deliberately don't. - **Sessions separate from artifacts** → sessions are ephemeral UI state; artifacts are durable. @@ -195,7 +195,7 @@ Rationale: 3. Daemon: a. picks active skill (prototype-skill) b. loads design-system (DESIGN.md) - c. materializes a new artifact dir under ./.ocd/artifacts// + c. materializes a new artifact dir under ./.od/artifacts// d. invokes agent adapter with: - system: skill's SKILL.md contents + DESIGN.md - user: original prompt @@ -242,9 +242,9 @@ Rationale: | File | Purpose | |---|---| -| `~/.open-claude-design/config.toml` | daemon-global: default agent preference, keys (optional, BYOK), telemetry opt-in (default off) | -| `~/.open-claude-design/agents.json` | cached agent detection results | -| `./.ocd/config.json` | project-local: active design system, preferred skills, preferred mode | +| `~/.open-design/config.toml` | daemon-global: default agent preference, keys (optional, BYOK), telemetry opt-in (default off) | +| `~/.open-design/agents.json` | cached agent detection results | +| `./.od/config.json` | project-local: active design system, preferred skills, preferred mode | | `./skills//SKILL.md` | skill manifest (standard Claude Code format) | | `./DESIGN.md` | active design system ([awesome-claude-design][acd] format) | @@ -288,35 +288,35 @@ pnpm dev # starts daemon on :7431, next on :3000 services: daemon: image: openclaudedesign/daemon - volumes: [ "~/.open-claude-design:/root/.open-claude-design", "./:/workspace" ] + volumes: [ "~/.open-design:/root/.open-design", "./:/workspace" ] ports: ["7431:7431"] web: image: openclaudedesign/web ports: ["3000:3000"] - environment: [ "OCD_DAEMON_URL=ws://daemon:7431" ] + environment: [ "OD_DAEMON_URL=ws://daemon:7431" ] ``` ### Vercel + local daemon (Topology B) ```sh vercel deploy # web only -ocd daemon --expose # user runs locally; prints tunnel URL +od daemon --expose # user runs locally; prints tunnel URL # user pastes URL into /connect UI ``` ### Vercel direct (Topology C) ```sh vercel deploy # same bundle -# flip VERCEL env flag OCD_MODE=direct to hide daemon-connect UI +# flip VERCEL env flag OD_MODE=direct to hide daemon-connect UI ``` ## 9. Security model | Surface | Threat | Mitigation | |---|---|---| -| Daemon WebSocket | Arbitrary local process talks to daemon | Token handshake; token printed on `ocd daemon` start, required in WS URL | +| Daemon WebSocket | Arbitrary local process talks to daemon | Token handshake; token printed on `od daemon` start, required in WS URL | | Artifact code in preview | XSS/cookie theft from host | `
-入口页：选 skill + 选 design system + 写需求
+01 · 入口页 —— 占位图，等待替换为真实截图
入口页 —— 选 skill、选 design system、写一行需求。同一个表面服务原型、deck、移动端、dashboard、editorial 页面所有 mode。 		-第一轮 discovery 表单
-初始化问题表单 —— 模型动笔之前，OCD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。 +02 · 初始化问题表单 —— 占位图，等待替换为真实截图
+初始化问题表单 —— 模型动笔之前，OD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。
-5 套确定性视觉方向选择器
+03 · 方向选择器 —— 占位图，等待替换为真实截图
方向选择器 —— 用户没有品牌上下文时，agent 自动跳第二个表单，5 套精选方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）一个 radio 选完，色板 + 字体栈直接锁定，没有 freestyle 空间。 		-Live TodoWrite 进度卡片
+04 · 实时 todo 进度 —— 占位图，等待替换为真实截图
实时 todo 进度 —— Agent 的计划以活卡片形式流入 UI。in_progress → completed 实时切换。用户能在中途以极低成本介入纠偏。
-沙盒 iframe 预览生成的 artifact
+05 · 沙盒预览 —— 占位图，等待替换为真实截图
沙盒预览 —— 每个 <artifact> 都在干净的 srcdoc iframe 里渲染。可在文件工作区里就地编辑；可下载为 HTML / PDF / ZIP。 		-71 套 design system 库 + 调色板
+06 · 71 套 design system 库 —— 占位图，等待替换为真实截图
71 套 design system 库 —— 每套产品系统都展示 4 色色卡。点进去看完整的 DESIGN.md、色板网格、live showcase。
-杂志风横向翻页 deck 输出
+07 · 杂志风 deck —— 占位图，等待替换为真实截图
Deck 模式（guizang-ppt） —— 内置的 guizang-ppt-skill 原样接入。杂志版式、WebGL hero 背景、单文件 HTML 输出、可导 PDF。 		-带 iPhone 15 Pro 外壳的移动端原型
+08 · 移动端原型 —— 占位图，等待替换为真实截图
移动端原型 —— 像素级精确的 iPhone 15 Pro chrome（灵动岛、状态栏 SVG、Home Indicator）。多屏原型直接复用 /frames/ 共享资源，agent 永远不需要重新画一遍手机。