将Claude Code变为AI设计引擎：开源方案Open Design架构解析

项目卡片

• 项目：Open Design
• 状态：v0.1.0 / 10.5k Stars（4 天内）/ Apache-2.0
• 一句话判断：如果你已经在用 Claude Code 或 Codex，这是把它们变成 AI 设计师的免费、本地优先方案。

Anthropic 在 2026 年 4 月 17 日发布了 Claude Design——一个用 AI 直接生成可交互设计原型的产品。Opus 4.7 驱动，支持网页原型、PPT、移动端 UI，发布首周在 X 上拿下了约 6000 万次曝光。

它也带来了三个硬限制：闭源、仅 Anthropic 模型、仅云端运行。

Open Design（OD）是开源社区给出的回答。它不自己造 Agent，而是把你已经装在电脑上的 11 种编程 Agent CLI——Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen、Copilot、Hermes、Kimi、Pi、Kiro——自动检测并接管。这个思路我一开始觉得有些讨巧，但读完源码后改变了看法：把 Daemon 的编排层和 Agent 层解耦，确实比绑定单一模型更有弹性。

核心架构：不造 Agent，只管编排

OD 的架构分两层：Web 前端（Next.js 16）+ 本地 Daemon（Express + SQLite）。Daemon 启动时扫描 PATH，找到哪些 Agent CLI 可用，注册为候选设计引擎。用户发一句"帮我做一个 SaaS Landing"，Agent 被以 child_process.spawn 启动，工作目录指向项目文件夹，拥有完整的 Read / Write / Bash / WebFetch 能力。

没有装任何 CLI？Daemon 提供 BYOK 代理——POST /api/proxy/stream 接受任何 OpenAI 兼容的 baseUrl + apiKey，SSE 直通到模型。SSRF 防护在 Daemon 边界拦截内网地址。

三种部署拓扑：

• 全本地（默认）：pnpm tools-dev run web 一条命令启动 Daemon + Web
• Web 上 Vercel + 本地 Daemon：通过 tunnel 连接
• 纯 Vercel + API：无 Daemon，体验降级但零门槛可试

Skill 和 Design System：文件即插件

OD 的设计能力来自两个可组合层。

Skill（31 个）遵循 Claude Code 的 SKILL.md 约定，本质是一个文件夹：SKILL.md + assets/ + references/。每个 Skill 定义一种设计产出——Web 原型、SaaS Landing、Dashboard、移动端 App、PPT、社媒轮播、线框草图等。两种模式：prototype（27 个，单页 HTML artifact）和 deck（4 个，水平滑动演示文稿）。

加一个 Skill 的方式：在 skills/ 下建一个文件夹，重启 Daemon，出现在选择器里。

Design System（129 个）采用 DESIGN.md 格式——来自 VoltAgent/awesome-design-md 生态的 9 段标准 schema（色彩、字体、间距、组件、布局、动效、语调、品牌、反模式）。内置 70 个产品级设计系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、小红书等），外加 57 个来自 awesome-design-skills 的设计技能。

切换 Design System 就是切换一套确定性的色彩令牌和字体栈。下一个 artifact 自动使用新系统。不需要模型"自由发挥"色彩。

Prompt Stack：产品即提示词工程

OD 的设计哲学核心是一个多层 prompt 合成机制。每次发送时，Daemon 组装的不是简单的"系统提示 + 用户消息"，而是六层堆叠：

1. Discovery 指令层：强制 Turn 1 弹出 <question-form>，锁定表面、受众、语调、品牌、规模等设计决策
2. 身份宪章：OFFICIAL_DESIGNER_PROMPT——定义 Agent 是"在用户文件系统上工作的专家设计师"
3. 活跃 Design System：DESIGN.md 的令牌作为权威约束
4. 活跃 Skill：SKILL.md 定义工作流和输出规则
5. Skill 副文件：assets/template.html 和 references/*.md 作为预检读取注入
6. Deck 框架指令（仅 Deck 模式）：导航、计数器、滚动的 JS/CSS 契约

这套逻辑提炼自 alchaincyf/huashu-design 的 Junior-Designer 工作流。我试过跳过 discovery form 直接让 Agent 开干，产出基本不可用——模型对"品牌调性"和"视觉密度"的默认偏好很固定，不锁就一定会跑偏。30 秒填个表比 5 分钟来回纠错便宜得多。

对比 Claude Design 和 Open CoDesign

维度	Claude Design	Open CoDesign	Open Design
开源	否	是（MIT）	是（Apache-2.0）
Agent	仅 Anthropic Opus	内置 pi-ai 多模型	11 种 CLI + 任意 BYOK
部署	仅云端	Electron 桌面	本地 / Vercel / Docker
Skill 格式	私有	TypeScript 模块	SKILL.md（Claude Code 标准）
Design System	私有	有限	129 个，DESIGN.md 开放格式
Export	有限	HTML/PDF/PPTX/ZIP/MD	HTML/PDF/PPTX/ZIP/MD

OD 走的不是"更便宜的白嫖版"路线。它赌的是另一个方向：你已经装在电脑上的编程 Agent 就是设计引擎，OD 只负责让它具备设计能力。这样做的好处是天然兼容未来任何新出的 CLI 工具——Agent 层的进步自动惠及设计能力。

上手成本和注意事项

环境要求：Node ~24 + pnpm 10.33.x，通过 Corepack 固定版本。三条命令启动：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install && pnpm tools-dev run web

几个需要注意的点：

• Node 版本硬绑定 ~24，老版本会因 package.json#engines 校验失败。我用 nvm 切到 24 后才跑通
• 首次运行自动创建 .od/ 目录（SQLite + artifact），不需要手动 init
• 没装任何 Agent CLI 时，得去 Settings 里手动配 BYOK API——Daemon 不会帮你猜
• Windows 原生支持有限，WSL2 更稳妥
• 项目 4 月 28 日才创建，93 个 open issues，API 和 Skill 格式后续都可能变

值得试吗

4 天 10.5k Stars 的增速说明需求是真实的。项目站在 huashu-design、guizang-ppt-skill、open-codesign、multica 四个成熟项目的肩膀上，不是从零搭建。Apache-2.0 协议，商业友好。

额外附带了 82 个 prompt 模板（43 图像 + 39 视频），JSON 格式存储，可以脱离 OD 直接复用到其他 AI 图像/视频工具。

适合已经在用 Claude Code / Codex / Gemini CLI 的工程师，想低成本让日常 Agent 兼做设计。不适合需要像素级控制的团队——OD 的产出是原型和演示文稿，不是 Figma 精细稿。项目刚发布，93 个 open issues，API 和 Skill 格式都可能在后续版本变动。

像 Open Design 这类 开源实战 典范，其价值在于将“使用”的门槛降到最低，让你手头现有的工具立刻多了一项新技能。

引用链接

[1] Open Design: https://github.com/nexu-io/open-design