Open Design 深度技术分析：Claude Design 的开源替代品架构解析

2026年4月17日，Anthropic 推出 Claude Design，由 Claude Opus 4.7 驱动，作为 Anthropic Labs 的实验产品面向 Claude Pro、Max、Team 和 Enterprise 订阅用户开放^[1]。Claude Design 的核心创新在于将 LLM 从"生成文字"转变为"交付设计产物"——用户输入自然语言 brief，模型输出可直接渲染的交互式原型、幻灯片、落地页等可视化 artifact。这一范式转换迅速引爆设计社区，但也同时引发了关于厂商锁定（vendor lock-in）的广泛讨论：Claude Design 仅支持 Anthropic 自有模型、仅限云端运行、无法自托管、无 API checkout。

在 Claude Design 发布不到两周内，开源社区迅速涌现了多个替代项目。其中最引人注目的是 Open Design（nexu-io/open-design），于2026年4月28日创建仓库，在10天内即收获超过 32,200 个 GitHub Stars 和 3,554 个 Forks^[2]。这个增速远超同期其他 AI 设计工具开源项目，反映了市场对"开放、可自托管、BYOK（Bring Your Own Key）"设计工具的强烈需求。

Open Design 并非从零开始。它在四个关键开源项目的肩膀上构建：花叔画术（huashu-design）提供设计哲学框架和五维评审体系，归藏 PPT Skill（guizang-ppt-skill）提供幻灯片生成能力，open-codesign 提供 streaming artifact loop 和 sandboxed preview 的 UX 范式，而 multica 提供 daemon-and-runtime 的底层架构模式^[3]。这种"站在巨人肩膀上"的策略使 Open Design 在极短时间内实现了远超任何单一项目的能力覆盖。

Open Design 采用本地 daemon + Web 应用的分层架构，这与 Claude Design 的纯云端方案形成根本性对立。整个系统的核心设计哲学是：daemon 作为唯一的特权进程（privileged process），所有 agent 操作通过 daemon 代理执行，Web 层仅负责 UI 渲染和用户交互。

daemon 是 Open Design 的运行时核心，用 TypeScript 编写（位于 apps/daemon/），通过 pnpm tools-dev 统一管理生命周期（start/stop/run/status/logs/inspect/check）。它承担三重职责：

第一，agent 生命周期管理。daemon 在用户 PATH 上自动扫描已安装的 coding-agent CLI——包括 Claude Code、Codex CLI、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen Code、Qoder CLI、GitHub Copilot CLI、Hermes（ACP 协议）、Kimi CLI（ACP）、Pi（RPC）、Kiro CLI（ACP）、Kilo（ACP）、Mistral Vibe CLI（ACP）、DeepSeek TUI——共 16 种。扫描通过检测可执行文件存在性实现，用户可以在 UI 中一键切换，无需配置文件。

第二，项目文件系统管理。当 agent 被触发时，daemon 在本地磁盘创建真实的项目目录结构，包含 seed template（种子模板）、layout library（布局库）和 self-check checklist（自检清单）。agent 拥有 Read、Write、Bash、WebFetch 四种工具访问权，直接操作真实文件系统——这意味着生成的产物是标准 HTML/CSS/JS 文件，而非某种私有格式。对于 Windows 平台的长路径名问题（ENAMETOOLONG），daemon 在每个 adapter 上实现了 stdin/prompt-file 的 fallback 机制。

第三，API 代理和持久化。当用户没有本地 CLI 时，daemon 提供 BYOK API 代理端点 /api/proxy/{anthropic,openai,azure,google}/stream，支持用户粘贴 baseUrl + apiKey + model，选择 Anthropic/OpenAI/Azure OpenAI/Google Gemini 四种协议，daemon 将 SSE 流标准化回统一的 chat stream。在 daemon 边缘层实施 Internal-IP/SSRF 防护。持久化使用 SQLite（.od/app.sqlite），存储项目、对话、消息、标签页和保存的模板，确保明天打开时所有状态完整恢复。

Open Design 最具工程挑战性的部分在于 agent 适配层。16 种 coding-agent CLI 的通信协议、参数格式、流式输出模式各不相同。Open Design 将它们分为三大协议族：

标准 stdin/stdout 交互族：Claude Code、Codex CLI、OpenCode、Qwen Code、Qoder CLI、DeepSeek TUI、Gemini CLI、Cursor Agent、GitHub Copilot CLI。这些 agent 通过 stdin 传入 prompt，从 stdout 读取流式输出。适配器需要处理各自的 JSON 流格式差异和中断信号。

ACP（Agent Communication Protocol）族：Hermes、Kimi CLI、Kiro CLI、Kilo、Mistral Vibe CLI。ACP 是一种新兴的 agent 间通信协议，基于结构化的消息交换而非原始 stdin/stdout。适配器需要实现 ACP 消息的编解码和会话管理。

RPC 族：Pi（来自 badlogic/pi-mono 项目）。Pi 使用基于 RPC 的通信模型，适配器需要维护长连接和请求/响应的映射。

这种"协议感知"的适配器设计意味着，添加新 agent 不需要修改核心逻辑——只需实现对应协议族的 adapter 接口。从 v0.1.0 到 v0.3.0 的快速迭代（10天内从 11 种 agent 扩展到 16 种）已经验证了这一架构的扩展性^[4]。

Open Design 复刻并扩展了 Claude Design 的 artifact-first 心智模型。一次完整的设计生成经历五个确定性的阶段：

阶段 1 — Discovery Form（发现表单）：在模型生成任何像素之前，UI 弹出交互式表单，锁定 brief 的关键参数：目标平台（web/desktop/mobile）、目标受众、语气风格、品牌上下文、内容规模。这是借鉴自 huashu-design 的"先假设再迭代"工作流——30秒的表单填写可以避免30分钟的反复修改。

阶段 2 — Direction Picker（方向选择器）：当用户没有明确品牌时，agent 发出第二个表单，展示 5 种策划好的视觉方向：Editorial Monocle（编辑杂志风）、Modern Minimal（现代极简）、Warm Soft（温暖柔和）、Tech Utility（科技实用）、Brutalist Experimental（粗野实验）。每种方向对应一个确定性的 OKLch 色彩方案和字体栈（定义在 apps/web/src/prompts/directions.ts），而非模型自由发挥。这种"确定性 + 策划"的方式是从 huashu-design 的"5 流派 × 20 设计哲学"理念提炼而来^[5]。

阶段 3 — TodoWrite 计划流：agent 生成结构化的任务计划，以 live todo card 形式在 UI 实时更新。in_progress → completed 状态变化实时反映，用户可以在中途重定向方向，而无需从头开始。

阶段 4 — Pre-flight + 生成：daemon 在磁盘上创建项目文件夹，写入 seed template、layout library 和 self-check checklist。agent 被强制"先读后写"（pre-flight enforced）——必须先读取这些模板和约束，然后才能开始生成。生成完成后，agent 对自己的输出运行五维度自评（哲学一致性/视觉层级/细节执行/功能性/创新性），这是 huashu-design 的核心贡献。

阶段 5 — Artifact 渲染：agent 输出一个 <artifact> 标签包裹的完整 HTML，在 sandboxed iframe（srcdoc）中渲染。用户可以在 file workspace 中就地编辑，或下载为 HTML/PDF/ZIP。对于幻灯片模式，还支持 PPTX 导出。

Open Design 的 Skill 系统直接遵循 Claude Code 的 SKILL.md 约定，每个 skill 是一个文件夹（位于 skills/），包含扩展的 od: frontmatter 元数据——mode、platform、scenario、preview.type、design_system.requires、default_for、featured、fidelity、speaker_notes、animations、example_prompt 等。daemon 通过 apps/daemon/src/skills.ts 解析这些元数据。

31 个 skill 分为两大模式：prototype 模式（27 个）生成单页 artifact（落地页、移动应用原型、仪表盘、社交轮播、精灵动画等）；deck 模式（4 个）生成水平滑动演示文稿（guizang-ppt、simple-deck、replit-deck、weekly-update）。scenario 字段用于 picker UI 的分组：design、marketing、operation、engineering、product、finance、hr、sale、personal。

每个 skill 都附带一个真实的 example.html，用户无需任何认证即可在仓库中直接打开查看 agent 将产出的效果。这种"所见即所得"的 skill 体验大幅降低了选择成本。

Open Design 内置 129 套 Design System，这是其与竞品拉开差距的核心资产。具体构成是：2 套手工编写的 starter + 70 套产品系统（Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小红书等）从 awesome-design-md 项目导入^[6]，加上 57 套设计 skill 从 awesome-design-skills 项目直接添加到 design-systems/ 目录。

awesome-design-md 本身是一个拥有 72,775 stars 的热门项目^[7]，其核心理念是：每个 DESIGN.md 是一个纯文本 Markdown 文件，描述某品牌的色彩、字体、间距、组件风格等设计规范。coding agent 读取这个文件后即可生成匹配该品牌视觉语言的 UI。Open Design 将这些 DESIGN.md 直接作为 agent 的上下文输入，使"品牌级设计"从概念变为确定性产出。

Open Design 在设计 loop 旁并行集成了三种媒体生成能力，通过统一的 chat surface 暴露，输出真实文件（.mp4/.png）到项目 workspace：

gpt-image-2（Azure/OpenAI）：用于海报、头像、信息图、插画地图等静态图像生成。

Seedance 2.0（字节跳动）：用于 15 秒电影级 text-to-video 和 image-to-video 生成。

HyperFrames（heygen-com/hyperframes）：用于 HTML → MP4 的动态图形渲染——产品展示、动态排版、数据图表、社交叠加层、logo 片尾等。

在 prompt-templates/ 目录下提供了 93 个可直接复制的提示词模板（43 个 gpt-image-2 + 39 个 Seedance + 11 个 HyperFrames），附带预览缩略图和来源标注^[2]。

Open Design 明确声明站在四个开源项目的肩膀上。理解这四个项目，才能理解 Open Design 的技术基因。

huashu-design（花叔画术）由开发者 @AlchainHust 创建，其起源本身就是一段传奇——作者声称"逆向了 Claude Design"后于 2026 年 4 月 19 日开源^[5]。它的核心创新不是代码，而是设计方法论的形式化：将资深设计师的决策过程编码为可执行的 prompt 协议。5 维评审体系（哲学一致性、视觉层级、细节执行、功能性、创新性，每项 10 分）和 anti-AI-slop 清单（避免渐变滥用、居中排版、emoji 装饰等 AI 生成物的典型特征）是其最独特的贡献。

open-codesign由 OpenCoworkAI 开发，是最早的开源 Claude Design 替代品^[8]。它采用 Electron 桌面应用形态，内嵌 pi-ai 作为 agent runtime，提供 12 个内置设计 skill 模块。Open Design 借鉴了其 streaming artifact 和 sandboxed preview 的交互范式，但有意在形态上分化——open-codesign 是"桌面应用 + 内嵌 agent"，Open Design 是"Web 应用 + 外部 CLI agent"。

multica是一个 AI-native 任务管理平台，核心理念是"将 coding agent 变成真正的队友"^[9]。它的 daemon 架构——PATH 扫描、本地 daemon 作为唯一特权进程、agent 通过 daemon 代理执行——直接影响了 Open Design 的 runtime 设计。multica 支持 11 种 agent CLI，Open Design 在此基础上扩展到 16 种。

AI 设计工具市场在 2026 年已形成多个差异化赛道。以下从架构、模型策略、部署方式、输出格式等关键维度进行对比。

以下从设计工程师实际关心的能力维度进行量化评估。

Open Design 的 31 个 skill 按 9 个场景分组，覆盖了从产品设计到个人使用的广泛需求。以下分析其核心适用场景和局限。

产品原型与落地页：这是 Open Design 最成熟的场景。web-prototype、saas-landing、dashboard 等 skill 配合 129 套 Design System，可以在 3-10 分钟内生成品牌级保真的 HTML 原型。对于创业团队做 pitch deck 或产品 demo 来说，效率提升显著。Claude Design 在此场景下的优势是 Opus 4.7 的视觉理解能力更强，但 Open Design 的 design system 覆盖面更广。

演示文稿生成：通过 guizang-ppt skill 的杂志风布局和 WebGL hero 背景，Open Design 可以生成视觉效果出色的幻灯片。支持 PDF 和 PPTX 双格式导出，后者在 v0.3.0 中增加了原生 Save As 对话框^[4]。这一场景直接对标 Claude Design 的 slides 能力，但 open-design 的优势在于完全离线可用。

移动应用原型：内置 iPhone 15 Pro、Pixel、iPad Pro、MacBook、Browser Chrome 五种设备边框（pixel-accurate SVG），agent 生成的移动原型自带 Dynamic Island、状态栏等细节。multi-screen 原型共享 /frames/ 资产，agent 无需重绘设备外壳。

运营与营销素材：social-carousel（1080×1080 社交轮播）、email-marketing（品牌邮件）、magazine-poster（杂志海报）等 skill 覆盖了常见的营销素材需求。配合 gpt-image-2 和 Seedance 2.0 的媒体生成能力，可以产出包含真实图像和视频的完整营销物料。

内部文档与报告：pm-spec（产品需求文档）、eng-runbook（运维手册）、finance-report（财务报告）、hr-onboarding（入职文档）、invoice（发票）、kanban-board（看板）、team-okrs（OKR）等 skill 覆盖了企业内部文档场景。这些 skill 的价值在于将"写文档"从纯文本提升为结构化、品牌化的视觉文档。

Open Design 的出现和爆发增长标志着 AI 设计工具领域正在经历一次范式转移——从"AI 辅助设计师"到"AI 作为设计师"。

趋势一：Artifact-First 成为新标准。Claude Design 验证了这一范式，Open Design 将其开源化，open-codesign 提供了桌面端实现。未来所有 AI 设计工具都将围绕"自然语言输入 → 结构化 artifact 输出"这一核心 loop 构建。区别在于 artifact 的格式——HTML（Open Design/open-codesign）vs Figma 文件（Figma AI）vs React 代码（v0.dev）。

趋势二：BYOK 成为开源项目标配。Open Design 的 16 种 CLI + 4 种 API 代理设置了一个新标杆——不仅 BYOK（自带 API Key），甚至 BYOA（Bring Your Own Agent）。这种"编排层与执行层分离"的架构使工具本身不与任何模型厂商绑定，在模型能力快速迭代的 2026 年具有显著的长期优势。

趋势三：Design System 成为 AI 设计的基础设施。awesome-design-md 的 72K+ stars 和 Open Design 的 129 套内置系统表明，将品牌设计规范形式化为机器可读的 Markdown 文件正在成为一种新标准。这意味着未来设计系统不仅服务于人类设计师，也将直接服务于 AI agent。

趋势四：Daemon 架构从任务管理渗透到设计工具。multica 率先将 daemon 用于 agent 任务管理，Open Design 将其引入设计工具。daemon 作为唯一特权进程的架构确保了安全性（agent 无法直接访问系统资源）和可观测性（所有操作通过 daemon 代理），这很可能成为 AI-native 桌面应用的通用模式。

趋势五：开源社区加速创新迭代。Open Design 在 10 天内发布了 4 个大版本（v0.1.0 → v0.4.0），25 个贡献者提交了 39 个 PR^[4]。这种速度是任何单一商业团队难以匹配的。开源的好处不仅是免费，更是"集体智慧"对单一闭源方案的快速追赶和超越。

Open Design 在技术层面实现了三个关键突破：

第一，将 artifact-first 设计范式开源化。通过复刻 Claude Design 的核心交互模型（discovery form → direction picker → todo plan → pre-flight → artifact），同时消除所有厂商锁定，Open Design 为整个社区提供了一个可自由使用、修改和部署的基础平台。

第二，构建了"编排即服务"的架构。16 种 agent CLI 的统一适配层、31 个可组合 skill、129 套 Design System、3 种媒体生成引擎——Open Design 本身不生成任何像素，它的价值在于将正确的 prompt、约束和工具在正确的时机交给正确的 agent。这种"元设计"架构使其具有极强的扩展性。

第三，验证了开源在 AI 设计工具领域的可行性。32K+ stars、3.5K+ forks、290 个 open issues^[2]表明社区对这一方向的认可和参与热情。在 Claude Design 仍处于 research preview 阶段时，Open Design 已经在开源社区建立了先发优势。

当然，Open Design 也面临挑战：输出质量依赖底层模型、缺乏多人协作、项目仍处于快速迭代期（当前最新版 v0.4.0-beta）。但作为一个发布仅 10 天的项目，其技术架构的完整性和社区响应速度已经令人印象深刻。如果能在未来几个月内稳定核心 loop、提升弱模型的产出质量、并建立 skill/Design System 的社区贡献机制，Open Design 有望成为 AI 设计工具领域最重要的开源基础设施。