+
+---
+
+## Three things you can ship in one afternoon
+
+| If you want to… | You're really adding | Where it lives | Ship size |
+|---|---|---|---|
+| Make OD render a new kind of artifact (an invoice, an iOS Settings screen, a one-pager…) | a **Skill** | [`skills//`](skills/) | one folder, ~2 files |
+| Make OD speak a new brand's visual language | a **Design System** | [`design-systems//DESIGN.md`](design-systems/) | one Markdown file |
+| Hook up a new coding-agent CLI | an **Agent adapter** | [`daemon/agents.js`](daemon/agents.js) | ~10 lines in one array |
+| Add a feature, fix a bug, lift a UX pattern from [`open-codesign`][ocod] | code | `src/`, `daemon/` | normal PR |
+| Improve docs, port a section to 中文, fix typos | docs | `README.md`, `README.zh-CN.md`, `docs/`, `QUICKSTART.md` | one PR |
+
+If you're not sure which bucket your idea is in, [open a discussion / issue first](https://github.com/nexu-io/open-design/issues/new) and we'll point you at the right surface.
+
+---
+
+## Local setup
+
+The full one-page setup lives in [`QUICKSTART.md`](QUICKSTART.md). The TL;DR for contributors:
+
+```bash
+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)
+pnpm typecheck # tsc -b --noEmit
+pnpm build # production build
+```
+
+Node 18+ is required. macOS, Linux, and WSL2 are tested daily. Windows native should work but isn't a primary target — file an issue if it doesn't.
+
+You don't need any agent CLI on your `PATH` to develop OD itself — the daemon will tell you "no agents found" and fall back to the **Anthropic API · BYOK** path, which is the fastest dev loop anyway.
+
+---
+
+## Adding a new Skill
+
+A skill is a folder under [`skills/`](skills/) with a `SKILL.md` at the root, following Claude Code's [`SKILL.md` convention][skill] plus our optional `od:` extension. **No registration step.** Drop the folder in, restart the daemon, the picker shows it.
+
+### Skill folder layout
+
+```text
+skills/your-skill/
+├── SKILL.md # required
+├── assets/template.html # optional but recommended — the seed file
+├── references/ # optional — knowledge files the agent reads
+│ ├── layouts.md
+│ ├── components.md
+│ └── checklist.md
+└── example.html # strongly recommended — a real, hand-built sample
+```
+
+### `SKILL.md` frontmatter
+
+The first three keys are the Claude Code base spec — `name`, `description`, `triggers`. Everything under `od:` is OD-specific and optional, but **`od.mode`** decides which group the skill shows up in (Prototype / Deck / Template / Design system).
+
+```yaml
+---
+name: your-skill
+description: |
+ One-paragraph elevator pitch. The agent reads this verbatim to decide
+ if the user's brief matches. Be concrete: surface, audience, what's in
+ the artifact, what's not.
+triggers:
+ - "your trigger phrase"
+ - "another phrase"
+ - "中文触发词"
+od:
+ mode: prototype # prototype | deck | template | design-system
+ platform: desktop # desktop | mobile
+ scenario: marketing # free-form tag for grouping
+ featured: 1 # any positive integer surfaces it under "Showcase examples"
+ preview:
+ type: html # html | jsx | pptx | markdown
+ entry: index.html
+ design_system:
+ requires: true # does the skill read the active DESIGN.md?
+ sections: [color, typography, layout, components]
+ example_prompt: "A copy-pastable prompt that nicely shows what this skill does."
+---
+
+# Your Skill
+
+Body is free-form Markdown describing the workflow the agent should follow…
+```
+
+The full grammar — typed inputs, slider parameters, capability gating — lives in [`docs/skills-protocol.md`](docs/skills-protocol.md).
+
+### Bar for merging a new skill
+
+We're picky about skills because they're the user-facing surface. A new skill must:
+
+1. **Ship a real `example.html`.** Hand-built, opens straight from disk, looks like something a designer would actually deliver. No lorem ipsum, no `` placeholder hero. If you can't build the example yourself, the skill probably isn't ready.
+2. **Pass the anti-AI-slop checklist** in the body. No purple gradients, no generic emoji icons, no rounded card with a left-border accent, no Inter as a *display* face, no invented stats. Read the **Anti-AI-slop machinery** section of the README for the full list.
+3. **Honest placeholders.** When the agent doesn't have a real number, write `—` or a labelled grey block, not "10× faster".
+4. **Have a `references/checklist.md`** with at least P0 gates (the stuff the agent has to pass before emitting ``). Lift the format from [`skills/guizang-ppt/references/checklist.md`](skills/guizang-ppt/) or [`skills/dating-web/references/checklist.md`](skills/dating-web/).
+5. **Add a screenshot** at `docs/screenshots/skills/.png` if the skill is featured. PNG, ~1024×640 retina, captured from the real `example.html` at zoomed-out browser scale.
+6. **Be a single self-contained folder.** No CDN imports beyond what other skills already use; no fonts you didn't license; no images larger than ~250 KB.
+
+If you fork an existing skill (e.g. start from `dating-web` and remix into a `recruiting-web`), keep the original LICENSE and authorship in `references/` and call it out in your PR description.
+
+### Skills that already ship — pick one to imitate
+
+- Visual showcase, single-screen prototype: [`skills/dating-web/`](skills/dating-web/), [`skills/digital-eguide/`](skills/digital-eguide/)
+- Multi-frame mobile flow: [`skills/mobile-onboarding/`](skills/mobile-onboarding/), [`skills/gamified-app/`](skills/gamified-app/)
+- Document / template (no design system required): [`skills/pm-spec/`](skills/pm-spec/), [`skills/weekly-update/`](skills/weekly-update/)
+- Deck mode: [`skills/guizang-ppt/`](skills/guizang-ppt/) (bundled verbatim from [op7418/guizang-ppt-skill][guizang]) and [`skills/simple-deck/`](skills/simple-deck/)
+
+---
+
+## Adding a new Design System
+
+A design system is a single [`DESIGN.md`](design-systems/README.md) file under `design-systems//`. **One file, no code.** Drop it in, restart the daemon, the picker shows it grouped by category.
+
+### Design system folder layout
+
+```text
+design-systems/your-brand/
+└── DESIGN.md
+```
+
+### `DESIGN.md` shape
+
+```markdown
+# Design System Inspired by YourBrand
+
+> Category: Developer Tools
+> One-line summary that shows in the picker preview.
+
+## 1. Visual Theme & Atmosphere
+…
+
+## 2. Color
+- Primary: `#hex` / `oklch(...)`
+- …
+
+## 3. Typography
+…
+
+## 4. Spacing & Grid
+## 5. Layout & Composition
+## 6. Components
+## 7. Motion & Interaction
+## 8. Voice & Brand
+## 9. Anti-patterns
+```
+
+The 9-section schema is fixed — that's what skill bodies grep for. The first H1 becomes the picker label (the `Design System Inspired by` prefix is stripped automatically), and the `> Category: …` line decides which group it lands in. Existing categories are listed in [`design-systems/README.md`](design-systems/README.md); if your brand truly doesn't fit, you can introduce a new one, but **try existing categories first**.
+
+### Bar for merging a new design system
+
+1. **All 9 sections present.** Empty section bodies are fine for hard-to-find data (e.g. motion tokens), but the headings have to be there or the prompt grep breaks.
+2. **Hex codes are real.** Sample directly from the brand's site or product, not from memory or AI guesses. The README's "brand-spec extraction" 5-step protocol applies to maintainers too.
+3. **OKLch values for accent colors** are nice-to-have. They make palettes lerp predictably across light/dark.
+4. **No marketing fluff.** The brand's tagline is not a design token. Cut it.
+5. **Slug uses ASCII** — `linear.app` becomes `linear-app`, `x.ai` becomes `x-ai`. The 69 imported systems already follow this convention; mirror it.
+
+The 69 product systems we ship are imported from [`VoltAgent/awesome-design-md`][acd2] via [`scripts/sync-design-systems.mjs`](scripts/sync-design-systems.mjs). If your brand belongs upstream, **send the PR there first** — we'll pick it up automatically on the next sync. The `design-systems/` folder is for systems that don't fit upstream, plus our two hand-authored starters.
+
+---
+
+## Adding a new coding-agent CLI
+
+Hooking up a new agent (e.g. some new shop's `foo-coder` CLI) is one entry in [`daemon/agents.js`](daemon/agents.js):
+
+```javascript
+{
+ id: 'foo',
+ name: 'Foo Coder',
+ bin: 'foo',
+ versionArgs: ['--version'],
+ buildArgs: (prompt) => ['exec', '-p', prompt],
+ streamFormat: 'plain', // or 'claude-stream-json' if it speaks that
+}
+```
+
+That's it — daemon will detect it on `PATH`, the picker shows it, the chat path works. If the CLI emits **typed events** (like Claude Code's `--output-format stream-json`), wire a parser in [`daemon/claude-stream.js`](daemon/claude-stream.js) and set `streamFormat: 'claude-stream-json'`.
+
+Bar for merging:
+
+1. **A real session works end-to-end** with the new agent — paste the daemon log into the PR description showing it streamed an artifact through.
+2. **`docs/agent-adapters.md`** is updated with the CLI's quirks (does it require a key file? does it support image input? what's its non-interactive flag?).
+3. **The README's "Supported coding agents" table** gets one row.
+
+---
+
+## Code style
+
+We're not pedantic about formatting (Prettier on save is fine), but two rules are non-negotiable because they show up in the prompt stack and the user-facing API:
+
+1. **Single quotes in JS/TS.** Strings are single-quoted unless escaping makes them ugly. The codebase is already consistent — please match.
+2. **Comments in English.** Even if the PR is translating something into 中文, code comments stay in English so we can keep one set of greppable references.
+
+Beyond that:
+
+- **Don't narrate.** No `// import the module`, no `// loop through items`. If the code reads obviously, the comment is noise. Save comments for non-obvious intent or constraints the code can't express.
+- **TypeScript** for `src/`. The daemon (`daemon/`) is plain ESM JavaScript with JSDoc when types matter — keep it that way.
+- **No new top-level dependencies** without a paragraph in the PR description on what we get vs. what bytes we ship. The dep list in [`package.json`](package.json) is small on purpose.
+- **Run `pnpm typecheck`** before pushing. CI runs it; failing it earns a "please fix" comment.
+
+---
+
+## Commits & pull requests
+
+- **One concern per PR.** Adding a skill + refactoring the parser + bumping a dep is three PRs.
+- **Title is imperative + scope.** `add dating-web skill`, `fix daemon SSE backpressure when CLI hangs`, `docs: clarify .od layout`.
+- **Body explains the why.** "What does this do" is usually obvious from the diff; "why does this need to exist" rarely is.
+- **Reference an issue** if there is one. If there isn't and the PR is non-trivial, open one first so we can agree the change is wanted before you spend the time.
+- **No squash-during-review.** Push fixups; we'll squash on merge.
+- **No force-push to a shared branch** unless the reviewer asked.
+
+We don't enforce a CLA. Apache-2.0 covers us; your contribution is licensed under the same.
+
+---
+
+## Reporting bugs
+
+Open an issue with:
+
+- What you ran (the exact `pnpm dev:all` / `npm start` invocation).
+- Which agent CLI was selected (or whether you were on the BYOK path).
+- The skill + design system pair that triggered it.
+- The relevant **daemon stderr tail** — most "the artifact never rendered" reports get diagnosed in 30 seconds when we can see `spawn ENOENT` or the CLI's actual error.
+- A screenshot if it's UI.
+
+For prompt-stack bugs ("the agent emitted a purple gradient hero, the slop blacklist was supposed to forbid that"), include the **full assistant message** so we can see whether the violation was the model or the prompt.
+
+---
+
+## Asking questions
+
+- Architecture question, design question, "is this a bug or a misuse" → [GitHub Discussions](https://github.com/nexu-io/open-design/discussions) (preferred — searchable for the next person).
+- "How do I write a skill that does X" → Open a discussion. We'll answer it and turn the answer into [`docs/skills-protocol.md`](docs/skills-protocol.md) if it's a missing pattern.
+
+---
+
+## What we don't accept
+
+To keep the project focused, please don't open PRs that:
+
+- **Vendor a model runtime.** OD's whole bet is "your existing CLI is enough". We don't ship `pi-ai`, OpenAI keys, or model loaders.
+- **Add a new framework to the frontend.** Vite + React 18 + TS is the line. No Next.js, Astro, Solid, Svelte rewrites.
+- **Replace the daemon with a serverless function.** The daemon's whole point is owning a real `cwd` and spawning a real CLI. Vercel deployment of the SPA is fine; the daemon stays a daemon.
+- **Add telemetry / analytics / phone-home.** OD is local-first. The only outbound calls are to providers the user explicitly configured.
+- **Bundle a binary** without a license file and authorship attribution next to it.
+
+If you're not sure whether your idea fits, open a discussion before writing the code.
+
+---
+
+## License
+
+By contributing, you agree your contribution is licensed under the [Apache-2.0 License](LICENSE) of this repository, with the exception of files inside [`skills/guizang-ppt/`](skills/guizang-ppt/), which retain their original MIT license and authorship attribution to [op7418](https://github.com/op7418).
+
+[skill]: https://docs.anthropic.com/en/docs/claude-code/skills
+[guizang]: https://github.com/op7418/guizang-ppt-skill
+[acd2]: https://github.com/VoltAgent/awesome-design-md
+[ocod]: https://github.com/OpenCoworkAI/open-codesign
diff --git a/CONTRIBUTING.zh-CN.md b/CONTRIBUTING.zh-CN.md
new file mode 100644
index 0000000..5e44c39
--- /dev/null
+++ b/CONTRIBUTING.zh-CN.md
@@ -0,0 +1,265 @@
+# 贡献指南 · Contributing to Open Design
+
+谢谢你愿意参与。OD 是有意做小的 —— 大部分价值在 **文件** 里（skill、design system、提示词片段），而不是框架代码。这意味着收益最高的贡献往往就是一个文件夹、一份 Markdown，或者一个 PR 大小的 adapter。
+
+这份指南会告诉你：每种贡献该往哪里看、合并之前 PR 需要过哪些线。
+
+
@@ -20,13 +20,13 @@
## Why this exists
-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.
+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-source, paid-only, cloud-only, locked to Anthropic's model and Anthropic's skills. There is no checkout, no self-host, no Vercel deploy, no swap-in-your-own-agent.
-**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.
+**Open Design (OD) is the open-source alternative.** Same loop, same artifact-first mental model, none of the lock-in. We don't ship 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.
+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 — exactly the bar Claude Design set, but open and yours.
OD stands on four open-source shoulders:
@@ -52,51 +52,130 @@ OD stands on four open-source shoulders:
## Demo
-> **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.
-
-
+ 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 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 — 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 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 preview — every <artifact> renders in a clean srcdoc iframe. Editable in place via the file workspace; downloadable as HTML, PDF, ZIP.
-
+ 71-system library — every product system shows its 4-color signature. Click for the full DESIGN.md, swatch grid, and live showcase.
-
+ Deck mode (guizang-ppt) — the bundled guizang-ppt-skill drops in unchanged. Magazine layouts, WebGL hero backgrounds, single-file HTML output, PDF export.
-
+ 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.
+## 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 `od:` frontmatter (`mode`, `platform`, `scenario`, `preview`, `design_system`).
+
+### Showcase examples
+
+The visually distinctive skills you'll most likely run first. Each ships a real `example.html` you can open straight from the repo to see exactly what the agent will produce — no auth, no setup.
+
+
+
+
+
+dating-web · prototype Consumer dating / matchmaking dashboard — left rail nav, ticker bar, KPIs, 30-day mutual-matches chart, editorial typography.
+
+
+
+digital-eguide · template Two-spread digital e-guide — cover (title, author, TOC teaser) + lesson spread with pull-quote and step list. Creator / lifestyle tone.
+
+
+gamified-app · prototype Three-frame gamified mobile-app prototype on a dark showcase stage — cover, today's quests with XP ribbons + level bar, quest detail.
+
+
+
+
+
+mobile-onboarding · prototype Three-frame mobile onboarding flow — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA.
+
+
+
+motion-frames · prototype Single-frame motion-design hero with looping CSS animations — rotating type ring, animated globe, ticking timer. Hand-off ready for HyperFrames.
+
+
+
+
+
+social-carousel · prototype Three-card 1080×1080 social-media carousel — cinematic panels with display headlines that connect across the series, brand mark, loop affordance.
+
+
+### Design surfaces
+
+| Skill | Mode | Default for | What it produces |
+|---|---|---|---|
+| [`web-prototype`](skills/web-prototype/) | prototype | desktop | Single-page HTML — landings, marketing, hero pages |
+| [`saas-landing`](skills/saas-landing/) | prototype | desktop | Hero / features / pricing / CTA marketing layout |
+| [`dashboard`](skills/dashboard/) | prototype | desktop | Admin / analytics with sidebar + data dense layout |
+| [`pricing-page`](skills/pricing-page/) | prototype | desktop | Standalone pricing + comparison tables |
+| [`docs-page`](skills/docs-page/) | prototype | desktop | 3-column documentation layout |
+| [`blog-post`](skills/blog-post/) | prototype | desktop | Editorial long-form |
+| [`mobile-app`](skills/mobile-app/) | prototype | mobile | iPhone 15 Pro / Pixel framed app screen(s) |
+| [`simple-deck`](skills/simple-deck/) | deck | desktop | Minimal horizontal-swipe deck |
+| [`guizang-ppt`](skills/guizang-ppt/) | deck | **default** for deck | Magazine-style web PPT — bundled from [op7418/guizang-ppt-skill][guizang] |
+
+### Document / work-product surfaces
+
+| Skill | Mode | What it produces |
+|---|---|---|
+| [`pm-spec`](skills/pm-spec/) | template | PM specification doc with TOC + decision log |
+| [`weekly-update`](skills/weekly-update/) | template | Team weekly with progress / blockers / next |
+| [`meeting-notes`](skills/meeting-notes/) | template | Meeting decision log |
+| [`eng-runbook`](skills/eng-runbook/) | template | Incident runbook |
+| [`finance-report`](skills/finance-report/) | template | Exec finance summary |
+| [`hr-onboarding`](skills/hr-onboarding/) | template | Role onboarding plan |
+| [`invoice`](skills/invoice/) | template | Single-page invoice |
+| [`kanban-board`](skills/kanban-board/) | template | Board snapshot |
+| [`team-okrs`](skills/team-okrs/) | template | OKR scoresheet |
+
+Adding a skill takes one folder. Read [`docs/skills-protocol.md`](docs/skills-protocol.md) for the extended frontmatter, fork an existing skill, restart the daemon, it appears in the picker.
+
## Six load-bearing ideas
### 1 · We don't ship an agent. Yours is good enough.
@@ -320,59 +399,10 @@ open-design/
└── 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 `od:` frontmatter (`mode`, `platform`, `scenario`, `preview`, `design_system`).
-
-### Showcase examples
-
-The visually distinctive skills you'll most likely run first. Each ships a real `example.html` you can open straight from the repo to see what the agent will produce.
-
-| Skill | Mode | What it produces |
-|---|---|---|
-| [`dating-web`](skills/dating-web/) | prototype | Consumer dating / matchmaking dashboard — left rail nav, ticker bar, KPIs, 30-day mutual-matches chart, editorial typography |
-| [`digital-eguide`](skills/digital-eguide/) | template | Two-spread digital e-guide — cover (title, author, TOC teaser) + lesson spread with pull-quote and step list. Creator / lifestyle tone |
-| [`email-marketing`](skills/email-marketing/) | prototype | Brand product-launch HTML email — masthead, hero image, headline lockup, CTA, specs grid. Centered single-column, table-fallback safe |
-| [`gamified-app`](skills/gamified-app/) | prototype | Three-frame gamified mobile-app prototype on a dark showcase stage — cover, today's quests with XP ribbons + level bar, quest detail |
-| [`mobile-onboarding`](skills/mobile-onboarding/) | prototype | Three-frame mobile onboarding flow — splash, value-prop, sign-in. Status bar, swipe dots, primary CTA |
-| [`motion-frames`](skills/motion-frames/) | prototype | Single-frame motion-design hero with looping CSS animations — rotating type ring, animated globe, ticking timer. Hand-off ready for HyperFrames |
-| [`social-carousel`](skills/social-carousel/) | prototype | Three-card 1080×1080 social-media carousel — cinematic panels with display headlines that connect across the series, brand mark, loop affordance |
-| [`sprite-animation`](skills/sprite-animation/) | prototype | Pixel / 8-bit animated explainer slide — full-bleed cream stage, animated pixel mascot, kinetic Japanese display type, looping CSS keyframes |
-
-### Design surfaces
-
-| Skill | Mode | Default for | What it produces |
-|---|---|---|---|
-| [`web-prototype`](skills/web-prototype/) | prototype | desktop | Single-page HTML — landings, marketing, hero pages |
-| [`saas-landing`](skills/saas-landing/) | prototype | desktop | Hero / features / pricing / CTA marketing layout |
-| [`dashboard`](skills/dashboard/) | prototype | desktop | Admin / analytics with sidebar + data dense layout |
-| [`pricing-page`](skills/pricing-page/) | prototype | desktop | Standalone pricing + comparison tables |
-| [`docs-page`](skills/docs-page/) | prototype | desktop | 3-column documentation layout |
-| [`blog-post`](skills/blog-post/) | prototype | desktop | Editorial long-form |
-| [`mobile-app`](skills/mobile-app/) | prototype | mobile | iPhone 15 Pro / Pixel framed app screen(s) |
-| [`simple-deck`](skills/simple-deck/) | deck | desktop | Minimal horizontal-swipe deck |
-| [`guizang-ppt`](skills/guizang-ppt/) | deck | **default** for deck | Magazine-style web PPT — bundled from [op7418/guizang-ppt-skill][guizang] |
-
-### Document / work-product surfaces
-
-| Skill | Mode | What it produces |
-|---|---|---|
-| [`pm-spec`](skills/pm-spec/) | template | PM specification doc with TOC + decision log |
-| [`weekly-update`](skills/weekly-update/) | template | Team weekly with progress / blockers / next |
-| [`meeting-notes`](skills/meeting-notes/) | template | Meeting decision log |
-| [`eng-runbook`](skills/eng-runbook/) | template | Incident runbook |
-| [`finance-report`](skills/finance-report/) | template | Exec finance summary |
-| [`hr-onboarding`](skills/hr-onboarding/) | template | Role onboarding plan |
-| [`invoice`](skills/invoice/) | template | Single-page invoice |
-| [`kanban-board`](skills/kanban-board/) | template | Board snapshot |
-| [`team-okrs`](skills/team-okrs/) | template | OKR scoresheet |
-
-Adding a skill takes one folder. Read [`docs/skills-protocol.md`](docs/skills-protocol.md) for the extended frontmatter, fork an existing skill, restart the daemon, it appears in the picker.
-
## Design Systems
-
+
71 systems out of the box, each as a single [`DESIGN.md`](design-systems/README.md):
@@ -450,7 +480,7 @@ The whole machinery below is the [`huashu-design`](https://github.com/alchaincyf
| PPT skill reuse | N/A | Built-in | **[`guizang-ppt-skill`][guizang] drops in** |
| Minimum billing | Pro / Max / Team | BYOK | **BYOK** |
-[cd]: https://www.anthropic.com/news/claude-design
+[cd]: https://x.com/claudeai/status/2045156267690213649
[ocod]: https://github.com/OpenCoworkAI/open-codesign
[piai]: https://github.com/mariozechner/pi-ai
[acd]: https://github.com/VoltAgent/awesome-claude-design
@@ -479,7 +509,7 @@ Every external project this repo borrows from. Each link goes to the source so y
| Project | Role here |
|---|---|
-| [`Claude Design`][cd] | The closed product this repo provides an open substrate for. |
+| [`Claude Design`][cd] | The closed-source product this repo is the open-source alternative to. |
| [**`alchaincyf/huashu-design`**](https://github.com/alchaincyf/huashu-design) | The design-philosophy core. Junior-Designer workflow, the 5-step brand-asset protocol, anti-AI-slop checklist, 5-dimensional self-critique, and the "5 schools × 20 design philosophies" library behind our direction picker — all distilled into [`src/prompts/discovery.ts`](src/prompts/discovery.ts) and [`src/prompts/directions.ts`](src/prompts/directions.ts). |
| [**`op7418/guizang-ppt-skill`**][guizang] | Magazine-web-PPT skill bundled verbatim under [`skills/guizang-ppt/`](skills/guizang-ppt/) with original LICENSE preserved. Default for deck mode. P0/P1/P2 checklist culture borrowed for every other skill. |
| [**`multica-ai/multica`**](https://github.com/multica-ai/multica) | The daemon + adapter architecture. PATH-scan agent detection, local daemon as the only privileged process, agent-as-teammate worldview. We adopt the model; we do not vendor the code. |
@@ -508,7 +538,15 @@ Phased delivery → [`docs/roadmap.md`](docs/roadmap.md).
This is an early implementation — the closed loop (detect → pick skill + design system → chat → parse `` → preview → save) runs end-to-end. The prompt stack and skill library are where most of the value lives, and they're stable. The component-level UI is shipping daily.
-Issues, PRs, new skills, and new design systems are all welcome.
+## Contributing
+
+Issues, PRs, new skills, and new design systems are all welcome. The highest-leverage contributions are usually one folder, one Markdown file, or one PR-sized adapter:
+
+- **Add a skill** — drop a folder into [`skills/`](skills/) following the [`SKILL.md`][skill] convention.
+- **Add a design system** — drop a `DESIGN.md` into [`design-systems//`](design-systems/) using the 9-section schema.
+- **Wire up a new coding-agent CLI** — one entry in [`daemon/agents.js`](daemon/agents.js).
+
+Full walkthrough, bar-for-merging, code style, and what we don't accept → [`CONTRIBUTING.md`](CONTRIBUTING.md) ([简体中文](CONTRIBUTING.zh-CN.md)).
## License
diff --git a/README.zh-CN.md b/README.zh-CN.md
index ecfebb9..763c2ca 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,9 +1,9 @@
# Open Design
-> **给设计的 Claude Code。** 一个本地优先、可部署到 Vercel 的开源 [Claude Design][cd] 复刻 —— 你机器上已经装好的 coding agent（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen）就是设计引擎，由可组合的 **Skills** 和 **71 套品牌级 Design System** 驱动。
+> **[Claude Design][cd] 的开源替代品。** 本地优先、可部署到 Vercel、每一层都 BYOK —— 你机器上已经装好的 coding agent（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen）就是设计引擎，由 **19 个可组合 Skills** 和 **71 套品牌级 Design System** 驱动。
71 套开箱即用，每套一个 [`DESIGN.md`](design-systems/README.md)：
@@ -450,7 +480,7 @@ open-design/
| PPT skill 复用 | N/A | 内置 | **[`guizang-ppt-skill`][guizang] 直接接入** |
| 计费门槛 | Pro / Max / Team | BYOK | **BYOK** |
-[cd]: https://www.anthropic.com/news/claude-design
+[cd]: https://x.com/claudeai/status/2045156267690213649
[ocod]: https://github.com/OpenCoworkAI/open-codesign
[piai]: https://github.com/mariozechner/pi-ai
[acd]: https://github.com/VoltAgent/awesome-claude-design
@@ -479,7 +509,7 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。
| 项目 | 在这里的角色 |
|---|---|
-| [`Claude Design`][cd] | 本仓库为它提供开源底座的闭源产品。 |
+| [`Claude Design`][cd] | 本仓库为之提供开源替代的闭源产品。 |
| [**`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) 与 [`src/prompts/directions.ts`](src/prompts/directions.ts)。 |
| [**`op7418/guizang-ppt-skill`**（歸藏）][guizang] | Magazine-web-PPT skill 原样捆绑在 [`skills/guizang-ppt/`](skills/guizang-ppt/) 下，原 LICENSE 保留。Deck 模式默认。P0/P1/P2 checklist 文化也被借给了所有其他 skill。 |
| [**`multica-ai/multica`**](https://github.com/multica-ai/multica) | Daemon + adapter 架构。PATH 扫描式 agent 检测、本地 daemon 作为唯一特权进程、agent-as-teammate 世界观。我们采纳模型，不 vendor 代码。 |
@@ -508,7 +538,15 @@ Daemon 启动时从 `PATH` 自动检测，无需配置。
这是一个早期实现 —— 闭环（检测 → 选 skill + design system → 对话 → 解析 `` → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库是价值最重的部分，目前已稳定。组件级 UI 仍在每天迭代。
-欢迎 issue、PR、新 skill、新 design system。
+## 贡献
+
+欢迎 issue、PR、新 skill、新 design system。收益最高的贡献往往就是一个文件夹、一份 Markdown，或者一个 PR 大小的 adapter：
+
+- **加一个 skill** —— 往 [`skills/`](skills/) 丢一个文件夹，遵循 [`SKILL.md`][skill] 规范。
+- **加一套 design system** —— 往 [`design-systems//`](design-systems/) 丢一份 `DESIGN.md`，用 9 段式 schema。
+- **接入一个新的 coding-agent CLI** —— 在 [`daemon/agents.js`](daemon/agents.js) 里加一项。
+
+完整流程、合并硬线、代码风格、我们不接收的 PR 类型 → [`CONTRIBUTING.zh-CN.md`](CONTRIBUTING.zh-CN.md)（[English](CONTRIBUTING.md)）。
## License
diff --git a/daemon/skills.js b/daemon/skills.js
index c20c592..04e6edb 100644
--- a/daemon/skills.js
+++ b/daemon/skills.js
@@ -38,6 +38,13 @@ export async function listSkills(skillsRoot) {
defaultFor: normalizeDefaultFor(data.od?.default_for),
upstream: typeof data.od?.upstream === 'string' ? data.od.upstream : null,
featured: normalizeFeatured(data.od?.featured),
+ // Optional metadata hints used by 'Use this prompt' fast-create so
+ // the resulting project mirrors the shipped example.html. Each hint
+ // is only consumed when its kind matches the skill mode; missing
+ // hints fall back to the same defaults the new-project form uses.
+ fidelity: normalizeFidelity(data.od?.fidelity),
+ speakerNotes: normalizeBoolHint(data.od?.speaker_notes),
+ animations: normalizeBoolHint(data.od?.animations),
examplePrompt: derivePrompt(data),
body: hasAttachments ? withSkillRootPreamble(body, dir) : body,
dir,
@@ -85,6 +92,27 @@ function normalizeDefaultFor(value) {
return [String(value)];
}
+// Optional `od.fidelity` hint for prototype skills. Only 'wireframe' and
+// 'high-fidelity' are meaningful — anything else collapses to null so the
+// caller falls back to the form default ('high-fidelity').
+function normalizeFidelity(value) {
+ if (value === 'wireframe' || value === 'high-fidelity') return value;
+ return null;
+}
+
+// Coerce truthy / falsy strings ("true", "yes", "false", "no") and booleans
+// to a real boolean. Returns null for anything we can't interpret so the
+// caller knows to fall back to the form default.
+function normalizeBoolHint(value) {
+ if (typeof value === 'boolean') return value;
+ if (typeof value === 'string') {
+ const v = value.trim().toLowerCase();
+ if (v === 'true' || v === 'yes' || v === '1') return true;
+ if (v === 'false' || v === 'no' || v === '0') return false;
+ }
+ return null;
+}
+
// 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
diff --git a/docs/assets/_cover/banner.html b/docs/assets/_cover/banner.html
new file mode 100644
index 0000000..a3f57b0
--- /dev/null
+++ b/docs/assets/_cover/banner.html
@@ -0,0 +1,381 @@
+
+
+
+
+Open Design — cover
+
+
+
+
+
+
+
+
Open Design · Manifesto · 2026 Edition
+
open.design
+
Cover · 01 / 08 · OSS Alternative
+
+
+
+
+
+
+ · APACHE 2.0
+ Local-first · BYOK
+
+
+ Design with the
+ agent already
+ on your laptop.
+
+
+ Open Design is the open-source alternative to Claude Design.
+ Your existing coding agent — Claude Code · Codex · Cursor · Gemini · OpenCode · Qwen —
+ becomes the design engine, driven by 19 composable Skills and 71 brand-grade Design Systems.
+
+ Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma —
+ seventy-one brand-grade systems, one open library, zero lock-in.
+
+
By Open Design · Maintained on GitHub · 19 / 04 / 2026
+
+
+
+
71
+
Design Systems
+
+
+
19
+
Composable Skills
+
+
+
1
+
Library, zero vendor cloud
+
+
+
+
What's inside.
+
+
Tokens, palettes, motion04
+
Pick a direction12
+
Tone & typography18
+
71 systems index24
+
Bring-your-own-key40
+
The anti-AI-slop checklist52
+
+
+
+
+
+
+
+
+
Chapter 02 · Index
+
71 entries · A → Z
+
+
+
All systems — one library.
+
+ Every system ships a deterministic OKLch palette, a font stack, and a tone profile.
+ Pick one tile and the agent inherits the whole brand.
+
+
+
+ S
+ eventy-one product systems, two hand-authored starters, five visual directions. Imported and curated
+ from awesome-design-md, hand-tuned for Open Design's discovery loop. Drop one in,
+ every artifact downstream changes accordingly — no model freestyle.
+
+
+
+
+ 03
+ Linear
+ · graphite · violet
+
+
+ 07
+ Stripe
+ · payments · indigo
+
+
+ 09
+ Vercel
+ · void · grayscale
+
+
+ 14
+ Airbnb
+ · rausch · rounded
+
+
+ 18
+ Tesla
+ · red · industrial
+
+
+ 22
+ Notion
+ · paper · serif
+
+
+ 27
+ Anthropic
+ · clay · serif
+
+
+ 31
+ Apple
+ · chrome · sf pro
+
+
+ 34
+ Cursor
+ · terminal · mono
+
+
+ 41
+ Supabase
+ · emerald · rounded
+
+
+ 48
+ Figma
+ · spectrum · canvas
+
+
+ 57
+ OpenAI
+ · void · sober
+
+
+
+
+
+
+
+
+
+
+
+
Spotlight · Linear · 03 / 71
+
Graphite + electric violet.
+
IBM Plex Sans · Inter Display · 4-step OKLch palette · 16/24 grid · square radius. The agent inherits the full token tree the moment you tap the tile.
+ 
+ 
+ 
+ 
+