open-design/README.zh-CN.md

Open Claude Design

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

English · 简体中文

---

为什么要做这个

Anthropic 的 Claude Design（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）。

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

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

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

• alchaincyf/huashu-design（花叔的画术） —— 设计哲学的指南针。Junior-Designer 工作流、5 步品牌资产协议、anti-AI-slop checklist、五维自评审、以及方向选择器背后的「5 流派 × 20 种设计哲学」思路 —— 全部蒸馏进 src/prompts/discovery.ts。
• op7418/guizang-ppt-skill（歸藏的杂志风 PPT skill） —— Deck 模式。原样捆绑在 skills/guizang-ppt/ 下，原 LICENSE 保留；杂志版式、WebGL hero、P0/P1/P2 checklist。
• OpenCoworkAI/open-codesign —— UX 北极星，也是我们最接近的同类。第一个开源的 Claude-Design 替代品。我们借鉴了它的流式 artifact 循环、沙盒 iframe 预览模式（自带 React 18 + Babel）、实时 agent 面板（todos + tool calls + 可中断生成）、5 种导出格式列表（HTML / PDF / PPTX / ZIP / Markdown）。我们刻意在形态上分流 —— 它是桌面 Electron 应用，把 pi-ai 打包进去做 agent；我们是 Web 应用 + 本地 daemon，把 agent 运行时委托给你已经装好的 CLI。
• multica-ai/multica —— Daemon 与运行时架构。PATH 扫描式 agent 检测，本地 daemon 作为唯一的特权进程，agent-as-teammate 的世界观。

一眼概览

	你拿到的
支持的 coding agent	Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Anthropic API（BYOK 兜底）
内置 design system	71 套 —— 2 套手写起手 + 69 套从 awesome-design-md 导入的产品系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma…）
内置 skill	19 个 —— 原型 / deck / 移动端 / dashboard / pricing / docs / blog / SaaS landing，外加 10 个文档与办公产物模板（PM 规范、周报、OKR、runbook、看板…）
视觉方向	5 套精选流派（Editorial Monocle · Modern Minimal · Tech Utility · Brutalist · Soft Warm），每一套自带 OKLch 色板 + 字体栈
设备外壳	iPhone 15 Pro · Pixel · iPad Pro · MacBook · Browser Chrome —— 像素级精确，跨 skill 共享
Agent 运行时	本地 daemon 在你的项目目录里 spawn CLI —— agent 拥有真实的 Read / Write / Bash / WebFetch，作用在真实磁盘上
部署目标	本地 pnpm dev · Vercel · 单进程生产 (npm start)
License	Apache-2.0

效果展示

截图位为占位 —— 真实 UI 就是这些截图要拍的对象，请在 PR 里替换 docs/screenshots/*.png。

入口页 —— 选 skill、选 design system、写一行需求。同一个表面服务原型、deck、移动端、dashboard、editorial 页面所有 mode。	初始化问题表单 —— 模型动笔之前，OCD 先把需求锁住：surface、受众、调性、品牌上下文、规模。30 秒勾选项秒杀 30 分钟来回返工。
方向选择器 —— 用户没有品牌上下文时，agent 自动跳第二个表单，5 套精选方向（Monocle / Modern Minimal / Tech Utility / Brutalist / Soft Warm）一个 radio 选完，色板 + 字体栈直接锁定，没有 freestyle 空间。	实时 todo 进度 —— Agent 的计划以活卡片形式流入 UI。in_progress → completed 实时切换。用户能在中途以极低成本介入纠偏。
沙盒预览 —— 每个 <artifact> 都在干净的 srcdoc iframe 里渲染。可在文件工作区里就地编辑；可下载为 HTML / PDF / ZIP。	71 套 design system 库 —— 每套产品系统都展示 4 色色卡。点进去看完整的 DESIGN.md、色板网格、live showcase。
Deck 模式（guizang-ppt） —— 内置的 guizang-ppt-skill 原样接入。杂志版式、WebGL hero 背景、单文件 HTML 输出、可导 PDF。	移动端原型 —— 像素级精确的 iPhone 15 Pro chrome（灵动岛、状态栏 SVG、Home Indicator）。多屏原型直接复用 /frames/ 共享资源，agent 永远不需要重新画一遍手机。

六个底层设计

1 · 我们不带 agent，你的就够好

Daemon 启动时扫 PATH，找 claude、codex、cursor-agent、gemini、opencode、qwen。哪个在就用哪个 —— 通过 stdio 驱动，每个 CLI 一个 adapter。灵感来自 multica 和 cc-switch。一个 CLI 都没有？Anthropic API · BYOK 就是同一条管线减去 spawn。

2 · Skill 是文件，不是插件

遵循 Claude Code SKILL.md 规范，每个 skill = SKILL.md + assets/ + references/。把一个文件夹丢进 skills/，重启 daemon，picker 里就能看到。内置的 magazine-web-ppt 就是 op7418/guizang-ppt-skill 原样捆绑 —— 原 LICENSE 保留、原作者归属保留。

3 · Design System 是可移植的 Markdown，不是 theme JSON

VoltAgent/awesome-design-md 的 9 段式 DESIGN.md —— color、typography、spacing、layout、components、motion、voice、brand、anti-patterns。每个 artifact 都从激活的 system 里读 token。切换 system → 下一次渲染就用新的 token。下拉框里现成的有：Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Anthropic、Cursor、Supabase、Figma、Resend、Raycast、Lovable、Cohere、Mistral、ElevenLabs、X.AI、Spotify、Webflow、Sanity、PostHog、Sentry、MongoDB、ClickHouse、Cal、Replicate、Clay、Composio… 共 71 套。

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

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

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

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

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

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

发送时拼装的不是「system + user」。它是：

DISCOVERY 指令         （turn-1 表单、turn-2 品牌分支、TodoWrite、五维评审）
  + 身份与工作流宪章   （OFFICIAL_DESIGNER_PROMPT、anti-AI-slop、Junior Designer 模式）
  + 激活的 DESIGN.md   （71 套备选）
  + 激活的 SKILL.md    （19 套备选）
  + 项目元数据          （kind、fidelity、speakerNotes、animations、灵感 system id）
  + Skill 副文件       （自动注入 pre-flight：先读 assets/template.html + references/*.md）
  + （仅 deck 模式）    DECK_FRAMEWORK_DIRECTIVE   （nav / counter / scroll / print）

每一层都可组合。每一层都是一个你能改的文件。看 src/prompts/system.ts 和 src/prompts/discovery.ts 就知道真实契约长什么样。

技术架构

┌────────────────────────── 浏览器 ──────────────────────────────┐
│                                                                │
│   Vite + React SPA  （chat · 文件工作区 · iframe 预览）        │
│                                                                │
└──────────────┬───────────────────────────────────┬─────────────┘
               │ /api/* （dev 走代理）             │ direct (BYOK)
               ▼                                   ▼
   ┌──────────────────────┐              ┌──────────────────────┐
   │   本地 daemon         │              │   Anthropic SDK      │
   │   （Express + SQLite）│              │   （浏览器兜底）      │
   │                      │              └──────────────────────┘
   │   /api/agents        │
   │   /api/skills        │
   │   /api/design-systems│
   │   /api/projects/...  │
   │   /api/chat (SSE)    │
   │                      │
   └─────────┬────────────┘
             │ spawn(cli, [...], { cwd: .ocd/projects/<id> })
             ▼
   ┌──────────────────────────────────────────────────────────┐
   │  claude · codex · cursor-agent · gemini · opencode · qwen│
   │  读 SKILL.md + DESIGN.md，把 artifact 写到磁盘            │
   └──────────────────────────────────────────────────────────┘

层	技术栈
前端	Vite 5 + React 18 + TypeScript
Daemon	Node 18+ · Express · SSE 流 · better-sqlite3 存项目/对话/消息/tab
Agent 传输层	child_process.spawn，Claude Code 走 claude-stream-json 解析器，其余走 line-buffered plain stdout
存储	纯文件 .ocd/projects/<id>/ + SQLite .ocd/db.sqlite（已 gitignore）
预览	沙盒 iframe（srcdoc）+ 每个 skill 的 <artifact> parser
导出	HTML（内联资源）· PDF（浏览器打印）· PPTX（skill 自定义）· ZIP（archiver）

Quickstart

git clone https://github.com/<your-org>/open-claude-design.git
cd open-claude-design
pnpm install         # 或 npm install
pnpm dev:all         # daemon (:7456) + Vite (:5173) 一起起
open http://localhost:5173

第一次加载会：

1. 检测你 PATH 上有哪些 agent CLI，自动选一个。
2. 加载 19 个 skill + 71 套 design system。
3. 弹欢迎对话框，让你贴 Anthropic key（仅 BYOK 兜底路径需要）。

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

完整文件地图、脚本、排错 → QUICKSTART.md。

仓库结构

open-claude-design/
├── README.md                      ← 英文
├── README.zh-CN.md                ← 本文件
├── QUICKSTART.md                  ← 跑 / 构建 / 部署
├── package.json                   ← 单 bin: ocd
│
├── daemon/                        ← Node + Express，唯一的服务端
│   ├── cli.js                     ← `ocd` 二进制入口
│   ├── server.js                  ← /api/* 路由（projects、chat、files、exports）
│   ├── agents.js                  ← PATH 扫描器 + 各 CLI 的 argv 拼装
│   ├── claude-stream.js           ← Claude Code stdout 流式 JSON 解析
│   ├── skills.js                  ← SKILL.md frontmatter 加载器
│   ├── design-systems.js          ← DESIGN.md 加载器 + swatch 提取
│   ├── design-system-preview.js   ← 单系统 live showcase
│   ├── design-system-showcase.js  ← 多 section 画廊渲染
│   ├── lint-artifact.js           ← 输出的 P0/P1 自检
│   ├── projects.js                ← 项目级文件系统辅助
│   ├── db.js                      ← SQLite schema（projects/messages/templates/tabs）
│   └── frontmatter.js             ← 零依赖 YAML 子集解析
│
├── src/                           ← Vite + React + TS 前端
│   ├── App.tsx                    ← 路由、bootstrap、设置
│   ├── components/                ← 27 个组件（chat、composer、picker、preview、sketch…）
│   ├── prompts/
│   │   ├── system.ts              ← composeSystemPrompt(base, skill, DS, metadata)
│   │   ├── official-system.ts     ← 身份宪章
│   │   ├── discovery.ts           ← turn-1 表单 + turn-2 分支 + 五维评审
│   │   ├── directions.ts          ← 5 套视觉方向 × OKLch 色板 + 字体栈
│   │   └── deck-framework.ts      ← deck 导航 / 计数 / 打印样式
│   ├── artifacts/
│   │   ├── parser.ts              ← 流式 <artifact> 标签解析
│   │   └── question-form.ts       ← <question-form> JSON 协议 + 重放
│   ├── runtime/
│   │   ├── srcdoc.ts              ← iframe 沙盒包装
│   │   ├── markdown.tsx           ← 助手消息渲染
│   │   ├── exports.ts             ← HTML / PDF / ZIP 导出
│   │   └── zip.ts                 ← 项目打包
│   ├── providers/
│   │   ├── daemon.ts              ← /api/chat SSE 流消费者
│   │   ├── anthropic.ts           ← BYOK Anthropic SDK 路径
│   │   └── registry.ts            ← /api/agents、/api/skills、/api/design-systems
│   └── state/                     ← config + projects（localStorage + daemon 持久化）
│
├── skills/                        ← 19 个 SKILL.md skill 包
│   ├── web-prototype/             ← 原型默认
│   ├── saas-landing/              ← 营销页（hero / features / pricing / CTA）
│   ├── dashboard/                 ← 后台 / 数据看板
│   ├── pricing-page/              ← 独立定价页 + 对比
│   ├── docs-page/                 ← 三栏文档
│   ├── blog-post/                 ← 长文 editorial
│   ├── mobile-app/                ← 带手机外壳的 app 屏
│   ├── simple-deck/               ← 极简横滑 deck
│   ├── guizang-ppt/               ← 内置 magazine-web-ppt（deck 默认）
│   │   ├── SKILL.md
│   │   ├── assets/template.html   ← seed
│   │   └── references/{themes,layouts,components,checklist}.md
│   ├── pm-spec/                   ← PM 规范文档
│   ├── weekly-update/             ← 团队周报
│   ├── meeting-notes/             ← 会议纪要
│   ├── eng-runbook/               ← 故障 / runbook
│   ├── finance-report/            ← 财务摘要
│   ├── hr-onboarding/             ← 入职计划
│   ├── invoice/                   ← 单页发票
│   ├── kanban-board/              ← 看板快照
│   ├── mobile-onboarding/         ← 多屏移动流
│   └── team-okrs/                 ← OKR 计分表
│
├── design-systems/                ← 71 套 DESIGN.md
│   ├── default/                   ← Neutral Modern（起手）
│   ├── warm-editorial/            ← Warm Editorial（起手）
│   ├── linear-app/  vercel/  stripe/  airbnb/  notion/  cursor/  apple/  …
│   └── README.md
│
├── assets/
│   └── frames/                    ← 跨 skill 共享设备外壳
│       ├── iphone-15-pro.html
│       ├── android-pixel.html
│       ├── ipad-pro.html
│       ├── macbook.html
│       └── browser-chrome.html
│
├── templates/
│   └── deck-framework.html        ← deck 基线（nav / counter / print）
│
├── scripts/
│   └── sync-design-systems.mjs    ← 从上游 awesome-design-md tarball 重新导入
│
├── docs/
│   ├── spec.md                    ← 产品定义、场景、差异化
│   ├── architecture.md            ← 拓扑、数据流、组件
│   ├── skills-protocol.md         ← 扩展 SKILL.md 的 ocd: frontmatter
│   ├── agent-adapters.md          ← 各 CLI 检测 + 派发
│   ├── modes.md                   ← prototype / deck / template / design-system
│   ├── references.md              ← 详尽的引用与师承
│   ├── roadmap.md                 ← 分阶段交付
│   ├── schemas/                   ← JSON schema
│   └── examples/                  ← 标准 artifact 样例
│
└── .ocd/                          ← 运行时数据，已 gitignore
    ├── projects/<id>/             ← 每个项目的工作目录（agent 的 cwd）
    ├── artifacts/                 ← 单次保存的 artifact
    └── db.sqlite                  ← 项目 / 对话 / 消息 / tab

内置 Skills

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

示例展示（Showcase examples）

视觉表现最强、最适合上手第一跑的几条 skill。每条都附带可直接打开的 example.html，先看产出再下单。

Skill	Mode	产出
dating-web	prototype	消费级约会 / 婚恋仪表盘 —— 左侧栏、社区动态 ticker、头部 KPI、30 天双向匹配柱状图，editorial 字体，克制点缀色
digital-eguide	template	两页数字 e-guide —— 封面（标题、作者、TOC 预告）+ 内文跨页（pull-quote + 步骤列表），创作者 / 生活方式风
email-marketing	prototype	品牌新品发布邮件 —— 顶部 wordmark、hero 图、标题锁排、主 CTA、规格网格。居中单列 + 表格降级，邮件客户端安全
gamified-app	prototype	三屏游戏化移动 app 原型，黑色舞台 —— 封面 / 今日任务（XP 缎带 + 等级条）/ 任务详情
mobile-onboarding	prototype	三屏移动端引导流 —— splash、价值主张、登录。状态栏、滑动点、主 CTA
motion-frames	prototype	单帧 motion 设计 hero，CSS 循环动画 —— 旋转字环、地球、计时器。可直接交给 HyperFrames 等关键帧导出
social-carousel	prototype	1080×1080 三连社媒轮播图 —— 三张电影感面板，标题前后呼应，品牌标识、loop 标记
sprite-animation	prototype	像素 / 8-bit 动画解释器单帧 —— 米白通屏、像素吉祥物、动感日文标题、循环 CSS keyframes，可直接录屏成竖版视频

设计交付类

Skill	Mode	默认场景	产出
web-prototype	prototype	桌面	单页 HTML —— landing、营销、hero
saas-landing	prototype	桌面	hero / features / pricing / CTA 营销版式
dashboard	prototype	桌面	带侧栏 + 数据密集型的后台
pricing-page	prototype	桌面	独立定价页 + 对比表
docs-page	prototype	桌面	三栏文档版式
blog-post	prototype	桌面	长文 editorial
mobile-app	prototype	移动	带 iPhone 15 Pro / Pixel 外壳的 app 屏
simple-deck	deck	桌面	极简横滑 deck
guizang-ppt	deck	deck 默认	杂志风网页 PPT —— 来自 op7418/guizang-ppt-skill

文档与办公产物类

Skill	Mode	产出
pm-spec	template	PM 规范文档 + 目录 + 决策日志
weekly-update	template	团队周报：进度 / 阻塞 / 下一步
meeting-notes	template	会议决策纪要
eng-runbook	template	故障 runbook
finance-report	template	高管财务摘要
hr-onboarding	template	岗位入职计划
invoice	template	单页发票
kanban-board	template	看板快照
team-okrs	template	OKR 计分表

新增一个 skill 就是新增一个文件夹。读 docs/skills-protocol.md 了解扩展 frontmatter，fork 一个现有 skill，重启 daemon 即生效。

Design System

71 套开箱即用，每套一个 DESIGN.md：

完整目录（点击展开）

AI & LLM —— claude · cohere · mistral-ai · minimax · together-ai · replicate · runwayml · elevenlabs · ollama · x-ai

开发者工具 —— cursor · vercel · linear-app · framer · expo · clickhouse · mongodb · supabase · hashicorp · posthog · sentry · warp · webflow · sanity · mintlify · lovable · composio · opencode-ai · voltagent

生产力 —— notion · figma · miro · airtable · superhuman · intercom · zapier · cal · clay · raycast

金融科技 —— stripe · coinbase · binance · kraken · mastercard · revolut · wise

电商 / 出行 —— shopify · airbnb · uber · nike · starbucks · pinterest

媒体 —— spotify · playstation · wired · theverge · meta

汽车 —— tesla · bmw · ferrari · lamborghini · bugatti · renault

其他 —— apple · ibm · nvidia · vodafone · sentry · resend · spacex

起手 —— default（Neutral Modern）· warm-editorial

整个库通过 scripts/sync-design-systems.mjs 从 VoltAgent/awesome-design-md 导入。重新执行即可刷新。

视觉方向

当用户没有品牌资产时，agent 会跳第二个表单，5 套精选方向 —— 这是 huashu-design 的「设计方向顾问 · 5 流派 × 20 种设计哲学」 fallback 在 OCD 里的落地。每一套都是确定性 spec —— OKLch 色板、字体栈、版式姿态、参考列表 —— agent 直接把它原样绑进 seed 模板的 :root。一个 radio 选完，整套视觉系统全部锁定。零 freestyle，零 AI slop。

方向	调性	参考
Editorial — Monocle / FT	印刷杂志，墨水 + 米色纸 + 暖红强调	Monocle · FT Weekend · NYT Magazine
Modern minimal — Linear / Vercel	冷调、结构化、克制强调	Linear · Vercel · Stripe
Tech utility	信息密度、等宽、终端感	Bloomberg · Bauhaus 工具
Brutalist	粗粝、巨字、无阴影、刺眼强调	Bloomberg Businessweek · Achtung
Soft warm	大方、低对比、桃色中性	Notion 营销页 · Apple Health

完整 spec → src/prompts/directions.ts。

反 AI Slop 机制

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

• 先表单。 Turn 1 必须是 <question-form>，不准 thinking、不准 tools、不准旁白。用户用 radio 速度选默认。
• 品牌资产协议。 用户贴截图或 URL 时，agent 走 5 步流程（定位 · 下载 · grep hex · 写 brand-spec.md · 复述）才能开始写 CSS。绝不从记忆里猜品牌色。
• 五维评审。 在吐 <artifact> 之前，agent 默默给自己 1–5 分打分，五个维度：哲学 / 层级 / 执行 / 具体度 / 克制。任一维 < 3/5 视为退步 —— 修完再评。两轮是常态。
• P0/P1/P2 checklist。 每个 skill 都自带 references/checklist.md，含硬性 P0。Agent 必须 P0 全过才能 emit。
• Slop 黑名单。 暴力紫渐变、通用 emoji 图标、左 border 圆角卡片、手绘 SVG 真人脸、Inter 当 display 字体、自编指标 —— 提示词里全部明令禁止。
• 诚实占位 > 假数据。 Agent 没真数字时写 — 或一个标注的灰块，绝不写「快 10 倍」。

横向对比

维度	Claude Design（Anthropic）	Open CoDesign	Open Claude Design
License	闭源	MIT	Apache-2.0
形态	Web (claude.ai)	桌面 (Electron)	Web 应用 + 本地 daemon
可部署 Vercel	❌	❌	✅
Agent 运行时	内置 (Opus 4.7)	内置 (pi-ai)	委托给用户已装好的 CLI
Skill	私有	12 套自定义 TS 模块 + SKILL.md	19 套基于文件的 SKILL.md，可丢入
Design system	私有	DESIGN.md（v0.2 路线图）	DESIGN.md × 71 套，开箱即有
Provider 灵活度	仅 Anthropic	7+（pi-ai）	取决于你的 agent
初始化问题表单	❌	❌	✅ 硬规则 turn 1
方向选择器	❌	❌	✅ 5 套确定性方向
实时 todo 进度 + tool 流	❌	✅	✅（UX 模式来自 open-codesign）
沙盒 iframe 预览	❌	✅	✅（模式来自 open-codesign）
评论模式手术刀编辑	❌	✅	🚧 路线图（移植自 open-codesign）
AI 自吐 tweaks 面板	❌	✅	🚧 路线图（移植自 open-codesign）
文件系统级工作区	❌	部分（Electron 沙盒）	✅ 真 cwd、真工具、SQLite 持久化
五维自评审	❌	❌	✅ Emit 前必跑
导出格式	受限	HTML / PDF / PPTX / ZIP / Markdown	HTML / PDF / PPTX / ZIP / Markdown
PPT skill 复用	N/A	内置	guizang-ppt-skill 直接接入
计费门槛	Pro / Max / Team	BYOK	BYOK

支持的 Coding Agent

Daemon 启动时从 PATH 自动检测，无需配置。

Agent	二进制	流式	备注
Claude Code	claude	--output-format stream-json（类型化事件）	一等公民，最佳保真度
Codex CLI	codex	line-buffered	codex exec <prompt>
Cursor Agent	cursor-agent	line-buffered	cursor-agent -p
Gemini CLI	gemini	line-buffered	gemini -p
OpenCode	opencode	line-buffered	opencode run
Qwen Code	qwen	line-buffered	qwen -p
Anthropic API · BYOK	n/a	SSE 直连	没装任何 CLI 时的浏览器兜底

加一个新 CLI = 在 daemon/agents.js 里加一项。流式格式从 claude-stream-json（类型化事件）和 plain（原始文本）两种里选一个。

引用与师承

每一个被借鉴的开源项目都列在这里。点链接可以验证师承。

项目	在这里的角色
Claude Design	本仓库为它提供开源底座的闭源产品。
alchaincyf/huashu-design（花叔的画术）	设计哲学的核心。Junior-Designer 工作流、5 步品牌资产协议、anti-AI-slop checklist、五维自评审、以及方向选择器背后的「5 流派 × 20 种设计哲学」库 —— 全部蒸馏进 src/prompts/discovery.ts 与 src/prompts/directions.ts。
op7418/guizang-ppt-skill（歸藏）	Magazine-web-PPT skill 原样捆绑在 skills/guizang-ppt/ 下，原 LICENSE 保留。Deck 模式默认。P0/P1/P2 checklist 文化也被借给了所有其他 skill。
multica-ai/multica	Daemon + adapter 架构。PATH 扫描式 agent 检测、本地 daemon 作为唯一特权进程、agent-as-teammate 世界观。我们采纳模型，不 vendor 代码。
OpenCoworkAI/open-codesign	第一个开源的 Claude-Design 替代品，也是我们最接近的同类。已采纳的 UX 模式：流式 artifact 循环、沙盒 iframe 预览（自带 React 18 + Babel）、实时 agent 面板（todos + tool calls + 可中断）、5 种导出格式列表（HTML/PDF/PPTX/ZIP/Markdown）、本地优先的 designs hub、SKILL.md 品味注入。路线图上的 UX 模式：评论模式手术刀编辑、AI 自吐 tweaks 面板。我们刻意不 vendor pi-ai —— open-codesign 把它打包成 agent 运行时；我们则委托给用户已经装好的 CLI。
VoltAgent/awesome-claude-design / awesome-design-md	9 段式 DESIGN.md schema 的来源，69 套产品系统通过 scripts/sync-design-systems.mjs 导入。
farion1231/cc-switch	跨多个 agent CLI 的 symlink 式 skill 分发灵感来源。
Claude Code skills	SKILL.md 规范原样采纳 —— 任何 Claude Code skill 丢进 skills/ 都能被 daemon 识别。

详尽的师承说明（每一项我们采纳了什么、刻意没采纳什么）在 docs/references.md。

Roadmap

• Daemon + agent 检测 + skill registry + design-system 目录
• Web 应用 + 对话 + question form + todo progress + 沙盒预览
• 19 个 skill + 71 套 design system + 5 套视觉方向 + 5 个设备外壳
• SQLite 后端的 projects · conversations · messages · tabs · templates
• 评论模式手术刀编辑（点元素 → 指令 → 局部 patch）—— 模式来自 open-codesign
• AI 自吐 tweaks 面板（模型自己抛出值得调的参数）—— 模式来自 open-codesign
• Vercel + 隧道部署食谱（Topology B）
• 一行 npx ocd init 脚手架带 DESIGN.md
• Skill 市场（ocd skills install <github-repo>）

分阶段交付计划在 docs/roadmap.md。

项目状态

这是一个早期实现 —— 闭环（检测 → 选 skill + design system → 对话 → 解析 <artifact> → 预览 → 保存）已经端到端跑通。提示词栈和 skill 库是价值最重的部分，目前已稳定。组件级 UI 仍在每天迭代。

欢迎 issue、PR、新 skill、新 design system。

License

Apache-2.0。内置的 skills/guizang-ppt/ 保留它原始的 LICENSE（MIT）和原作者 op7418 的归属。