摘要Open Design 是 GitHub 上 Star 数突破 60K 的开源项目定位为 Anthropic Claude Design 的本地优先、完全开源的替代方案。本文从系统架构、设计协议、技能系统、HyperFrames 视频渲染管线、Agent 适配器等维度进行全方位拆解探讨它如何将 AI 设计从云端黑盒转化为可组合、可审计、可版本管理的本地工程资产。目录项目基因为什么需要 Open Design六层架构全景拆解DESIGN.md将品牌规范写入 MarkdownSKILL.md技能即文件的协议设计HyperFrames从 HTML 到 MP4 的确定性渲染管线Agent 适配器21 个 CLI 的统一调度层Prompt Stack可组合的上下文引擎应用实战从零搭建品牌设计工作流总结与展望1. 项目基因为什么需要 Open Design1.1 背景Anthropic 推出的 Claude Design 在 2025 年引发了 AI 辅助设计领域的范式变革——用户用自然语言描述需求AI Agent 直接生成可交互的 HTML 原型、演示文稿和设计系统。但这种能力被锁定在闭源、云端、绑定单一模型的产品形态中痛点Claude Design 的现状Open Design 的解法模型锁定仅支持 Anthropic 模型支持 21 个 CLI BYOK任意 OpenAI 兼容端点数据归属产物存储在云端产物落地本地.od/目录可git add生态封闭无法自定义技能/设计系统155 技能、150 设计系统全部以文件形式存在无法自托管纯 SaaS桌面应用 Docker Vercel 三种部署模式闭源黑盒产品Apache-2.0 许可证1.2 核心数据指标数值GitHub Stars60,300最新版本v0.9.0 (2026-06-02)技术栈Next.js 16 React 18 TypeScript Node 24内置技能155设计系统150插件数量261支持 Agent21 CLIs导出格式HTML / PDF / PPTX / MP4 / ZIP / Markdown1.3 设计哲学Open Design 的核心主张可以概括为四条原则本地优先Local-First桌面应用、守护进程、技能运行时均在本地运行不依赖厂商云服务BYOK 全链路所有层级支持自带密钥兼容 DeepSeek、Groq、OpenRouter 等任意兼容端点可组合可扩展技能和设计系统以文件形式存储用户可自由编辑、Fork、版本管理Agent 即执行器不重复造 Agent而是复用用户本地已安装的 Coding Agent CLI2. 六层架构全景拆解Open Design 的系统架构可以抽象为六个独立且可替换的工程层┌────────────────────────────────────────────────────────────────┐ │ ① 入口层 (Entry Layer) │ │ Next.js 16 Web UI · Electron Desktop · Chat · Preview │ ├────────────────────────────────────────────────────────────────┤ │ ② 执行层 (Daemon Layer) │ │ Express SQLite · SSE Streaming · Session Manager │ │ Artifact Store · Export Pipeline · Preview Compiler │ ├────────────────────────────────────────────────────────────────┤ │ ③ Agent 层 (Agent Layer) │ │ Agent Adapter Pool · PATH Scanner · Stream Normalizer │ │ Claude Code · Codex · Cursor · Gemini · OpenCode · Qwen ... │ ├────────────────────────────────────────────────────────────────┤ │ ④ 技能层 (Skill Layer) │ │ SKILL.md Protocol · Frontmatter Parser · FS Watch │ │ prototype · deck · template · design-system │ ├────────────────────────────────────────────────────────────────┤ │ ⑤ 设计系统层 (Design System Layer) │ │ DESIGN.md 9-Section Schema · Memory Cache · Hot Reload │ │ Linear · Stripe · Vercel · Apple · Tesla · Spotify ... │ ├────────────────────────────────────────────────────────────────┤ │ ⑥ 交付层 (Delivery Layer) │ │ Sandbox iframe · HTML/PDF/PPTX/ZIP Export · HyperFrames │ └────────────────────────────────────────────────────────────────┘2.1 入口层浏览器 桌面双模入口层负责用户交互体验。它不执行任何 Agent 逻辑——所有重型操作都下沉到守护进程。Web 应用Next.js 16 App Router开发模式下通过next.config.ts将/api/*代理到守护进程Electron 桌面应用macOS Apple Silicon/Intel Windows x64提供原生体验核心界面组件聊天面板、文件工作区、沙盒 iframe 预览、技能/设计系统选择器2.2 执行层守护进程架构守护进程Daemon是整个系统的中枢以单二进制或轻量 Node 脚本形式分发默认监听http://localhost:7456。核心子系统的职责矩阵子系统职责实现要点Session Manager为每个 Web 标签页维护独立会话保存活跃 Agent / Skill / Artifact / 工具调用状态24h 后 GCAgent Adapter Pool管理所有 Agent CLI 适配器实例跨会话复用PATH 扫描 配置目录探测Skill Registry技能发现与优先级合并三个扫描目录./.claude/skills/./skills/~/.claude/skills/Design-system Resolver设计系统的查找与注入顺序查找./DESIGN.md→./design-system/DESIGN.mdArtifact Store管理磁盘制品文件纯文件存储不驻留内存Preview Compile Pipeline预览前的编译转换JSX Babel 转换、CSS 内联Export Pipeline多格式导出HTML / PDF / PPTX / ZIP / Markdown安全边界设计Daemon HTTP API 默认仅绑定localhost用户 API 密钥仅存储在config.toml权限 0600绝不发送至任何远程服务器项目本身无自有服务器2.3 数据持久化纯文件存储设计Open Design 放弃了 SQLite/数据库方案采用纯文件存储这是一个经过深思熟虑的架构决策.od/ ├── config.json # 项目级 daemon 配置 ├── artifacts/ # 制品存储 │ └── 2026-04-24T10-03-12-landing/ │ ├── artifact.json # 元数据skill/mode/prompt/父级引用 │ ├── index.html # 主输出文件 │ └── assets/ # 生成的图片、字体等资源 ├── history.jsonl # 仅追加操作日志git 友好 └── sessions/ └── session-id.json # 瞬态会话24h GC设计决策理由artifact.json元数据 → 无需数据库即可重建制品树history.jsonl→ 仅追加写入对 git 友好方便grep搜索会话与制品分离 → 会话是临时 UI 状态制品是持久资产3. DESIGN.md将品牌规范写入 Markdown3.1 协议由来Open Design 遵循 awesome-claude-design 社区约定的9 节式 DESIGN.md Schema。这不是 Open Design 独创的而是一个正在形成的社区标准——把品牌设计规范从 Figma 的视觉参考转化为 AI Agent 可精确读取、严格遵循的结构化文档。3.2 九节结构详解# 品牌名称 ## 1. Visual Theme Atmosphere # 视觉主题与氛围 — 品牌整体调性描述 # 示例现代、极简、科技感以留白传递专业与信任 ## 2. Color Palette Roles # 调色板与角色 — 基于 OKLCh 色彩空间的色值体系 # 示例主色 oklch(65% 0.25 250) 用于CTA按钮 # 辅助色 oklch(85% 0.08 250) 用于背景强调 # 中性色 oklch(95% 0 0) 用于大面积底色 ## 3. Typography Rules # 排版规则 — 字体族、字号、字重、行高、字间距 # 示例标题 → Inter Bold | 2rem | line-height 1.2 # 正文 → Inter Regular | 1rem | line-height 1.6 ## 4. Component Stylings # 组件样式规范 — 按钮、输入框、卡片、导航等 # 示例主按钮 → 圆角 8px、主色填充、hover 明度10% ## 5. Layout Principles # 布局原则 — 响应式断点、栅格、间距 # 示例max-width 1280px、8px 栅格系统、section 间距 80px ## 6. Depth Elevation # 深度与层级 — 阴影、z-index、层级视觉区分 # 示例卡片阴影 → 0 2px 8px rgba(0,0,0,0.08) # 模态框阴影 → 0 8px 32px rgba(0,0,0,0.16) ## 7. Dos and Donts # 设计规范约束 — 明确允许与禁止的行为 # 示例DO → 保持 60-30-10 色彩比例 # DONT → 禁止使用超过 3 种字体 ## 8. Responsive Behavior # 响应式行为 — 各断点的适配规则 # 示例Mobile (768px) → 单列布局、图片全宽 # Desktop (1024px) → 多列栅格、固定侧边栏 ## 9. Agent Prompt Guide # Agent 提示指南 — 给 AI 的明确指令 # 示例所有页面必须包含品牌主色条 # 正文行高不得低于 1.63.3 色彩系统的 OKLCh 优势Open Design 推荐使用OKLCh色彩空间而非传统的 HEX/RGB/HSL原因如下与 sRGB/HSL 的对比属性HSLOKLCh感知均匀性❌ 相同数值变化在不同色相下亮度差异大✅ 人眼感知的亮度变化线性无障碍性❌ 难以精确控制对比度✅ 可直接约束亮度L满足 WCAGAI 可操作⚠️ 需要额外计算才能安全变体✅ 调整 L/C/h 即可生成安全调色板OKLCh 的三个通道L (Lightness) ∈ [0, 1] → 感知亮度0 黑1 白 C (Chroma) ∈ [0, 0.4] → 饱和度/鲜艳度 h (Hue) ∈ [0, 360] → 色相角度生成品牌调色板的实际操作保持色相角h不变通过调节L和C生成从深到浅的完整色阶。例如主色 oklch(55% 0.22 250) → 中等蓝色 浅变体 oklch(85% 0.08 250) → 浅蓝背景 深变体 oklch(35% 0.15 250) → 深蓝文本3.4 设计系统的加载与注入机制用户选择设计系统 │ ▼ Design-system Resolver 查找 DESIGN.md │ ▼ 解析 9 节结构 → 内存缓存 │ ▼ ┌─────────────────────────────┐ │ 注入到 Agent System Prompt │ │ │ │ [当前设计系统: Stripe] │ │ ## Color Palette Roles │ │ ## Typography Rules │ │ ... │ │ │ │ 技能正文 (SKILL.md body) │ │ 工艺参考 (Craft Refs) │ │ 用户 Prompt │ └─────────────────────────────┘ │ ▼ Agent 生成 → 自动适配品牌风格如果技能通过od.design_system.sections声明了仅需部分章节如[color, typography]则只注入相关章节——减少不必要的 token 消耗。4. SKILL.md技能即文件的协议设计4.1 协议基础Open Design 的技能系统遵循Claude Code SKILL.md 约定并扩展了od:命名空间的前置元数据。这意味着为普通 Claude Code 编写的技能可直接在 Open Design 中运行不使用 OD 扩展的技能也可在普通 Claude Code 中运行双向兼容是协议设计的核心原则。4.2 完整技能目录结构skill-root/ ├── SKILL.md # 清单 工作流指令前置元数据 Markdown 正文 ├── assets/ # 模板、样板文件、静态资源 │ ├── template.html │ └── ... ├── references/ # Agent 规划阶段读取的知识文件 │ ├── themes.md │ ├── layouts.md │ ├── components.md │ └── checklist.md └── tests/ # 可选 CI 测试 ├── basic.prompt ├── basic.expected.manifest.json └── basic.expected.regex.txt4.3 SKILL.md 前置元数据规范---name:magazine-web-ppt# 技能唯一标识description:|Magazine-style horizontal-swipe web deck.triggers:# 触发关键词-magazine deck-杂志风 PPT# OD 扩展字段全部可选 od:mode:deck# prototype | deck | template | design-systempreview:type:html# html | jsx | pptx | markdownentry:index.htmlreload:debounce-100example_prompt:Create a magazine-style web deck from my content.example_prompt_i18n:zh-CN:用杂志风网页 PPT 模板把我的内容做成横向翻页 deck。design_system:requires:truesections:[color,typography]# 仅注入相关章节craft:# 品牌无关的工艺参考requires:[typography,color,anti-ai-slop]inputs:# 侧边栏类型化输入表单-name:titletype:stringrequired:true-name:slide_counttype:integerdefault:8min:4max:20-name:themetype:enumvalues:[editorial,minimal,brutalist,dark-glass,warm]default:editorialparameters:# 实时调整滑块-name:accent_huetype:huedefault:18range:[0,360]-name:section_spacingtype:spacingdefault:48range:[16,128]outputs:primary:index.htmlsecondary:[slides.json]# PPTX 导出所需辅助文件capabilities_required:-surgical_edit-file_write---4.4 四种技能模式模式用途预览类型主输出典型工作流prototype-skill单屏交互原型html/jsxindex.html明确需求 → 解析设计令牌 → 编写组件树 → 写入文件deck-skill多页演示文稿html单文件导航index.html明确主题页数 → 选择主题 → 填充布局 → 质量自检template-skill基于预置模板生成继承模板类型填充后的副本复制 template → 替换占位符 → 调整令牌design-system-skill生成 DESIGN.mdmarkdownDESIGN.md分析输入 → 按 9 节起草 → 预览组件 → 定稿4.5 无 OD 字段时的智能推断当技能文件没有od字段时系统会自动推断mode从技能名称/描述的关键词推断推断失败默认prototypepreview.type自动嗅探文件类型*.html→ html*.jsx→ jsxdesign_system.requires如果技能正文提到 “design system” 或 “DESIGN.md” 则自动为 trueinputs / parameters无仅支持自由文本输入这种渐进增强的设计确保了最大兼容性——最简单的技能只需一个SKILL.md文件即可运行。4.6 技能发现机制启动 / SIGHUP 信号 / FS-watch 事件 │ ▼ ┌─────────────────────────────┐ │ Skill Registry 扫描 │ │ │ │ ① ./.claude/skills/ (P1) │ ← 项目私有优先级最高 │ ② ./skills/ (P2) │ ← 项目共享 │ ③ ~/.claude/skills/ (P3) │ ← 用户全局 │ │ │ 同名技能使用高优先级版本 │ │ chokidar 监听文件变化 │ └─────────────────────────────┘5. HyperFrames从 HTML 到 MP4 的确定性渲染管线5.1 技术定位HyperFrames 是 Open Design 生态中的HTML→视频元层meta-layer解决了一个关键工程问题如何让 AI Agent 用写代码的方式生成确定性、帧级精确的视频核心公式纯 HTML CSS GSAP 动画 → HyperFrames 渲染引擎 → 确定性 MP4 输出确定性的含义是相同输入 → 字节级完全一致的输出帧。这意味着不依赖 GPU帧级稳定与 Remotion 同级别CI 环境可重现“Same file appears on every machine, identical, every time”Agent 可写入、渲染并检查输出无需人工干预5.2 渲染管线架构整个管道分为五个阶段阶段 ① 源内容获取 ├── 自然语言 prompt ├── 文章链接 → 服务端拉取 → Markdown └── GitHub 仓库 → 克隆/拉取 → Markdown │ ▼ 阶段 ② Agent 循环内容规划 读取源内容 选定模板风格 → 生成内容图故事板 → 每帧对应的 HTML 代码 │ ▼ 阶段 ③ 内容图构建中间表示 IR ContentGraph: { nodes: [实体/数据/文本节点], edges: [序列关系/依赖关系/对比关系] } → 拓扑排序 → 确定帧顺序和时长 │ ▼ 阶段 ④ 逐帧 HTML 生成 每个节点 → 独立的自包含动画 HTML 文件 所有 GSAP 依赖、样式、资源内嵌在单文件中 │ ▼ 阶段 ⑤ HyperFrames 渲染引擎 无头 Chromium 逐帧加载 HTML → 录制 GSAP 动画 → 输出逐帧 WebM → FFmpeg (libx264) → 拼接 → MP4 → 可选混入 MiniMax 生成的 BGM 旁白5.3 确定性渲染的数学基础HyperFrames 的确定性来源于对动画时间线的精确控制。对于一个 GSAP 动画序列其时间线可描述为设动画序列A {a₁, a₂, ..., aₙ}每个动画片段aᵢ由以下参数定义aᵢ (t_startᵢ, durationᵢ, easingᵢ, propertiesᵢ)渲染器在时间t的帧F(t)由所有活跃动画的交集决定F(t) Composite({ aᵢ · progress(t - t_startᵢ) | t ∈ [t_startᵢ, t_startᵢ durationᵢ] })其中progress(τ)由缓动函数easingᵢ计算progress(τ) clamp(easingᵢ(τ / durationᵢ), 0, 1)由于所有参数都是确定性的纯数学函数无物理时间依赖给定相同的输入 HTML 和时间t输出帧F(t)必然相同。最终的 MP4 编码参数参数值视频编码器libx264帧率由 HTML 中data-duration和内容图拓扑排序决定分辨率由data-width×data-height指定中间格式WebM无头 Chromium 录制音频混流MiniMax TTS BGM背景音乐自动压低以突出人声支持淡入淡出5.4 HTML 时间属性语法HyperFrames 使用data-*属性在 DOM 层面表达时间线!-- 一个 5 秒的视频 --divdata-width1920data-height1080!-- 背景片段从 0 秒开始持续 5 秒 --videosrcintro.mp4data-duration5/!-- 标题从第 1 秒开始出现持续 4 秒 --h1data-start1data-duration4Hello, friend./h1!-- 副标题从第 2 秒淡入 --pdata-start2data-duration3classfade-inThis is a HyperFrame./p/div三个核心属性属性含义类型data-width/data-height画布分辨率pxdata-start元素出现的起始时间秒浮点data-duration元素持续时长秒浮点5.5 多引擎适配器接口当前默认渲染引擎为 HyperFrames但架构层面预留了统一适配器接口后续可接入引擎特点HyperFrames(当前默认)确定性渲染不依赖 GPUAgent-nativeRemotion(计划中)React 组件渲染视频生态丰富Motion Canvas / Revideo(计划中)程序化动画Manim(计划中)数学/科学可视化动画引擎切换通过统一适配器接口完成上层 Agent 逻辑无需修改。6. Agent 适配器21 个 CLI 的统一调度层6.1 架构决策不重复造 AgentOpen Design 做了这样一个关键决策不投入资源自研模型或 Agent而是复用用户本地已有的 Coding Agent CLI。这意味着Agent 层的唯一职责是检测、适配、调度每个 Agent 的能力边界由适配器声明用户可自由选择并随时切换自己信任的 Agent6.2 适配器池架构Daemon 启动 │ ▼ Agent Scanner (PATH 配置目录探测) │ ├── claude ✓ → 创建 ClaudeAdapter ├── codex ✓ → 创建 CodexAdapter ├── cursor ✓ → 创建 CursorAdapter ├── gemini ✓ → 创建 GeminiAdapter ├── opencode ✓ → 创建 OpenCodeAdapter ├── qwen ✓ → 创建 QwenAdapter ├── copilot ✓ → 创建 CopilotAdapter ├── kimi ✓ → 创建 KimiAdapter ├── hermes ✓ → 创建 HermesAdapter ├── devin ✗ → 未安装跳过 └── ... │ ▼ Agent Adapter Pool (跨会话复用) │ ├── 标准化启动包装 ├── 流式输出归一化JSON Lines → 统一 SSE 事件流 ├── 能力声明多轮、精确编辑、原生 Skill 加载等 └── 环境变量注入6.3 支持的 Agent CLI 全矩阵Agent CLI安装命令特点Claude Codeod mcp install claudeAnthropic 官方skill 原生支持Codex CLIod mcp install codexOpenAI 官方Cursorod mcp install cursorIDE 内置 agentVS Code Copilotod mcp install copilotGitHub CopilotGemini CLIod mcp install geminiGoogle 官方OpenCodeod mcp install opencode开源Qwen Codeod mcp install qwen阿里通义千问Kimi CLIod mcp install kimi月之暗面Hermes Agentod mcp install hermes-OpenClawod mcp install openclaw-Antigravityod mcp install antigravity-Clineod mcp install clineVS Code 插件Traeod mcp install trae字节跳动Mistral Vibeod mcp install vibeMistral 官方Pi Agentod mcp install piInflection AI总计支持21 个 CLI及任何 OpenAI 兼容端点BYOK6.4 执行模式本地 CLI vs API模式选择器值请求流向Local CLI默认“Local CLI”Frontend → Daemon →spawn(agent, ...)→ stdout → SSE → 预览API 模式“Anthropic API” / “OpenAI API” / …Frontend → Daemon/api/proxy/{provider}/stream→ SSE → 预览两种模式共用同一个artifact解析器和同一个沙盒 iframe 预览。6.5 Agent 运行时环境变量注入Daemon 在生成 Agent 进程时自动注入以下上下文OD_BIN# daemon CLI 的绝对路径OD_DAEMON_URL# 运行中的 daemon URL (http://127.0.0.1:7457)OD_PROJECT_ID# 当前项目 IDOD_PROJECT_DIR# 当前项目文件目录这使得 Agent 可以回写产物到正确的磁盘位置、调用 daemon 能力、访问项目上下文。6.6 SSE 流式传输协议这是前端与 daemon 之间最核心的通信协议。关键架构决策location /api/ { proxy_pass http://127.0.0.1:7456; proxy_buffering off; # ← 必须关闭 gzip off; # ← 必须关闭否则 SSE 被缓冲 proxy_read_timeout 86400s; # 长连接容忍 proxy_http_version 1.1; proxy_set_header Connection ; }⚠️常见故障gzip on会缓冲 SSE 响应导致 80-90 秒后出现net::ERR_INCOMPLETE_CHUNKED_ENCODING。流事件类型共享于packages/contracts/src事件类型说明text_delta文本增量Agent 输出的文本增量tool_call工具调用Agent 执行的工具调用编辑/写入/读取thinking思考过程Agent 的推理过程若支持artifact_start制品开始新制品创建artifact_end制品完成制品写入完成error错误执行异常7. Prompt Stack可组合的上下文引擎7.1 架构概览每次用户请求发送时Open Design 并非使用固定的 system prompt。它以动态组合的多层上下文作为输入——这个设计精确模拟了专业设计师的工作流程查阅品牌手册、回顾过往参考、对齐需求约束、遵循输出规则。┌──────────────────────────────────────────────┐ │ 7 层 Prompt Stack │ ├──────────────────────────────────────────────┤ │ ① Discovery Directive │ │ 首轮需求表单 · 品牌分支 · TodoWrite · │ │ 5 维自我评审规则 │ ├──────────────────────────────────────────────┤ │ ② Identity Canon │ │ 官方设计师 prompt · 反 AI 低质内容检查 │ │ 初级设计师校验规则 │ ├──────────────────────────────────────────────┤ │ ③ Active DESIGN.md (品牌设计系统) │ │ 仅注入 od.design_system.sections │ │ 指定的相关章节 │ ├──────────────────────────────────────────────┤ │ ④ Active SKILL.md (当前技能) │ │ 工作流步骤 输出规则 │ ├──────────────────────────────────────────────┤ │ ⑤ Project Metadata │ │ 产物类型 · 保真度 · 演讲者备注 · │ │ 动画配置 · 灵感参考 ID │ ├──────────────────────────────────────────────┤ │ ⑥ Skill Attachments │ │ 预注入的模板文件 · 参考资料 │ │ assets/ · references/ │ ├──────────────────────────────────────────────┤ │ ⑦ Framework Directives │ │ 幻灯片导航 · 计数器 · 滚动 · 打印规则 │ └──────────────────────────────────────────────┘7.2 RULE 1需求对齐优先Open Design 内置了一个关键规则——发现表单优先于代码生成每个新设计需求的第一轮 不直接生成代码 ↓ 弹出 question-form iddiscovery ↓ 询问 · surface载体Web/移动/桌面/PPT · audience受众C端/B端/内部 · tone风格专业/活泼/极简/科技 · brand context品牌背景 · scale规模单页/多页/应用 · constraints约束 ↓ 对齐需求方向后 → 再进入生成阶段这种设计将提前对齐需求的工程实践内置到了产品流程中大幅降低了方向偏差导致的大规模返工。8. 应用实战从零搭建品牌设计工作流8.1 环境准备方式一桌面应用推荐macOS / Windows 安装包 → open-design.ai方式二Docker 部署gitclone https://github.com/nexu-io/open-design.gitcdopen-design/deploycp.env.example .env# 编辑 .env 填入 API 密钥或使用本地 CLIdockercompose up-d# 访问 http://localhost:7456方式三源码运行gitclone https://github.com/nexu-io/open-design.gitcdopen-design corepackenablepnpminstallpnpmtools-dev run web8.2 场景一生成品牌落地页Step 1 — 创建项目并激活设计系统# 在 Web UI 中创建新项目或导入现有文件夹# 从 150 套设计系统中选择例如 Stripe 风格Step 2 — 选择技能在技能选择器中选择saas-landing营销落地页或web-prototype通用原型。Step 3 — 填写发现表单surface: Web 桌面端 audience: 企业客户B2B SaaS tone: 专业、现代、科技感 brand context: 音视频处理 API 平台 scale: 单页Hero Features Pricing CTAStep 4 — 发送 Prompt创建一个音视频 API 平台的落地页。 核心功能实时转码、智能去噪、超分辨率。 目标用户音视频开发者。 需要包含Hero 区、3 个功能卡片、定价对比表、CTA 按钮。Step 5 — 预览与导出Agent 生成 → 沙盒 iframe 实时预览 → 微调参数 → 导出 HTML/PDF/PPTX。8.3 场景二创建自定义品牌设计系统如果 150 套内置系统中没有你的品牌可以从零生成Step 1 — 切换到 design-system 模式在 UI 中选择 design-system 技能。Step 2 — 提供品牌输入品牌名称MyVideoAPI 行业音视频 SaaS 风格关键词现代、科技、专业、可靠 竞品参考Vercel、Cloudinary、Mux 主色偏好深蓝 青蓝Step 3 — Agent 生成 DESIGN.mdAgent 会按 9 节 Schema 输出完整的品牌规范文件。Step 4 — 保存并激活# 保存为项目设计系统cpDESIGN.md ./.od/design-system/DESIGN.md# 或全局安装cpDESIGN.md ~/.open-design/design-systems/myvideoapi/DESIGN.md之后所有技能生成的内容都会自动应用这套品牌规范。8.4 场景三制作产品介绍视频Step 1 — 选择 HyperFrames 技能Step 2 — 描述视频内容制作一个 60 秒的产品介绍视频 - 0-5s品牌 Logo 动画入场 - 5-15s标题实时视频转码 API打字机效果 - 15-35s三个功能特性卡片依次滑入 - 35-50s数据可视化图表动画 - 50-60sCTA 按钮 LogoStep 3 — Agent 生成内容图 逐帧 HTMLAgent 自动完成内容图构建 → 拓扑排序逐帧 HTML 生成嵌入 GSAP 动画 品牌色HyperFrames 渲染 → MP4 输出8.5 场景四多 Agent 对比测试同一需求切换不同 Agent 观察生成质量差异# 使用 Claude Code 生成# 记录色彩准确性、组件完整性、代码质量# 使用 Qwen Code 生成同一需求# 记录响应速度、中文理解能力、布局还原度# 使用 Gemini CLI 生成同一需求# 记录创意性、动画效果、代码架构这种对比测试对于团队 Agent 选型非常有价值。9. 总结与展望9.1 核心价值判断Open Design 的真正价值不在于开源 Claude Design 替代版这个传播性 slogan。它的工程创新在于用本地 daemon 连接浏览器体验和本地文件系统复用现有 Coding Agent 的执行能力用 SKILL.md 和 DESIGN.md 约束输出风格用沙盒预览和导出管线把 AI 生成产物变成可交付的工程资产。六层可替换架构使得每个层级都可以独立演进入口层 ─── 可替换 UI 框架当前 Next.js 16 执行层 ─── 可替换后端当前 Express Node 24 Agent 层 ── 可替换执行器当前 21 个 CLI 技能层 ─── 可组合能力单元SKILL.md 协议 设计系统层 ─ 可版本管理品牌规范DESIGN.md 协议 交付层 ─── 多格式导出管线HTML/PDF/PPTX/MP49.2 技术亮点亮点说明DESIGN.md 9 节 Schema将品牌规范从感觉转化为 Agent 可精确执行的规则文件SKILL.md 双向兼容Claude Code 原生技能无需修改即可运行OD 扩展为可选HyperFrames 确定性渲染HTML→MP4 管线保证 CI 可重现字节级一致Prompt Stack7 层动态上下文组合模拟专业设计师工作流程纯文件存储.od/artifacts/直接git add进入 PR 审查流程9.3 风险与局限多 Agent 适配器维护成本支持的 CLI 越多不同 CLI 的输出格式、权限、错误处理差异带来的维护压力越大本地 daemon 安全边界daemon 可以调 CLI、读写文件、代理 API需要严格的 SSRF 阻断和权限控制不适合一键出图需求需要理解本地 runtime、Agent、Skill、设计系统等概念存在一定工程门槛版本快速迭代v0.9.0 仍处于 rapid iteration 阶段生产环境依赖需谨慎评估9.4 未来方向功能状态注释模式精准编辑 部分上线npx od init脚手架 计划中Plugin SDK CLI 计划中Figma → React/Next/Vue 迁移插件 Alpha刷新现有代码库插件 计划中Remotion / Motion Canvas 渲染引擎 计划中参考资料GitHub: nexu-io/open-designOpen Design 官方文档HyperFrames 官方awesome-claude-design (DESIGN.md 规范)SKILL.md 协议规范Open Design 架构文档本文完成于 2026 年 6 月 7 日基于 Open Design v0.9.0 版本。技术架构与功能特性可能随项目迭代而变化请以官方文档为准。
【GitHub】 Open Design 深度技术解析：把 Claude Design 搬回本地的 Agent 设计工作台
发布时间：2026/6/7 14:08:36
摘要Open Design 是 GitHub 上 Star 数突破 60K 的开源项目定位为 Anthropic Claude Design 的本地优先、完全开源的替代方案。本文从系统架构、设计协议、技能系统、HyperFrames 视频渲染管线、Agent 适配器等维度进行全方位拆解探讨它如何将 AI 设计从云端黑盒转化为可组合、可审计、可版本管理的本地工程资产。目录项目基因为什么需要 Open Design六层架构全景拆解DESIGN.md将品牌规范写入 MarkdownSKILL.md技能即文件的协议设计HyperFrames从 HTML 到 MP4 的确定性渲染管线Agent 适配器21 个 CLI 的统一调度层Prompt Stack可组合的上下文引擎应用实战从零搭建品牌设计工作流总结与展望1. 项目基因为什么需要 Open Design1.1 背景Anthropic 推出的 Claude Design 在 2025 年引发了 AI 辅助设计领域的范式变革——用户用自然语言描述需求AI Agent 直接生成可交互的 HTML 原型、演示文稿和设计系统。但这种能力被锁定在闭源、云端、绑定单一模型的产品形态中痛点Claude Design 的现状Open Design 的解法模型锁定仅支持 Anthropic 模型支持 21 个 CLI BYOK任意 OpenAI 兼容端点数据归属产物存储在云端产物落地本地.od/目录可git add生态封闭无法自定义技能/设计系统155 技能、150 设计系统全部以文件形式存在无法自托管纯 SaaS桌面应用 Docker Vercel 三种部署模式闭源黑盒产品Apache-2.0 许可证1.2 核心数据指标数值GitHub Stars60,300最新版本v0.9.0 (2026-06-02)技术栈Next.js 16 React 18 TypeScript Node 24内置技能155设计系统150插件数量261支持 Agent21 CLIs导出格式HTML / PDF / PPTX / MP4 / ZIP / Markdown1.3 设计哲学Open Design 的核心主张可以概括为四条原则本地优先Local-First桌面应用、守护进程、技能运行时均在本地运行不依赖厂商云服务BYOK 全链路所有层级支持自带密钥兼容 DeepSeek、Groq、OpenRouter 等任意兼容端点可组合可扩展技能和设计系统以文件形式存储用户可自由编辑、Fork、版本管理Agent 即执行器不重复造 Agent而是复用用户本地已安装的 Coding Agent CLI2. 六层架构全景拆解Open Design 的系统架构可以抽象为六个独立且可替换的工程层┌────────────────────────────────────────────────────────────────┐ │ ① 入口层 (Entry Layer) │ │ Next.js 16 Web UI · Electron Desktop · Chat · Preview │ ├────────────────────────────────────────────────────────────────┤ │ ② 执行层 (Daemon Layer) │ │ Express SQLite · SSE Streaming · Session Manager │ │ Artifact Store · Export Pipeline · Preview Compiler │ ├────────────────────────────────────────────────────────────────┤ │ ③ Agent 层 (Agent Layer) │ │ Agent Adapter Pool · PATH Scanner · Stream Normalizer │ │ Claude Code · Codex · Cursor · Gemini · OpenCode · Qwen ... │ ├────────────────────────────────────────────────────────────────┤ │ ④ 技能层 (Skill Layer) │ │ SKILL.md Protocol · Frontmatter Parser · FS Watch │ │ prototype · deck · template · design-system │ ├────────────────────────────────────────────────────────────────┤ │ ⑤ 设计系统层 (Design System Layer) │ │ DESIGN.md 9-Section Schema · Memory Cache · Hot Reload │ │ Linear · Stripe · Vercel · Apple · Tesla · Spotify ... │ ├────────────────────────────────────────────────────────────────┤ │ ⑥ 交付层 (Delivery Layer) │ │ Sandbox iframe · HTML/PDF/PPTX/ZIP Export · HyperFrames │ └────────────────────────────────────────────────────────────────┘2.1 入口层浏览器 桌面双模入口层负责用户交互体验。它不执行任何 Agent 逻辑——所有重型操作都下沉到守护进程。Web 应用Next.js 16 App Router开发模式下通过next.config.ts将/api/*代理到守护进程Electron 桌面应用macOS Apple Silicon/Intel Windows x64提供原生体验核心界面组件聊天面板、文件工作区、沙盒 iframe 预览、技能/设计系统选择器2.2 执行层守护进程架构守护进程Daemon是整个系统的中枢以单二进制或轻量 Node 脚本形式分发默认监听http://localhost:7456。核心子系统的职责矩阵子系统职责实现要点Session Manager为每个 Web 标签页维护独立会话保存活跃 Agent / Skill / Artifact / 工具调用状态24h 后 GCAgent Adapter Pool管理所有 Agent CLI 适配器实例跨会话复用PATH 扫描 配置目录探测Skill Registry技能发现与优先级合并三个扫描目录./.claude/skills/./skills/~/.claude/skills/Design-system Resolver设计系统的查找与注入顺序查找./DESIGN.md→./design-system/DESIGN.mdArtifact Store管理磁盘制品文件纯文件存储不驻留内存Preview Compile Pipeline预览前的编译转换JSX Babel 转换、CSS 内联Export Pipeline多格式导出HTML / PDF / PPTX / ZIP / Markdown安全边界设计Daemon HTTP API 默认仅绑定localhost用户 API 密钥仅存储在config.toml权限 0600绝不发送至任何远程服务器项目本身无自有服务器2.3 数据持久化纯文件存储设计Open Design 放弃了 SQLite/数据库方案采用纯文件存储这是一个经过深思熟虑的架构决策.od/ ├── config.json # 项目级 daemon 配置 ├── artifacts/ # 制品存储 │ └── 2026-04-24T10-03-12-landing/ │ ├── artifact.json # 元数据skill/mode/prompt/父级引用 │ ├── index.html # 主输出文件 │ └── assets/ # 生成的图片、字体等资源 ├── history.jsonl # 仅追加操作日志git 友好 └── sessions/ └── session-id.json # 瞬态会话24h GC设计决策理由artifact.json元数据 → 无需数据库即可重建制品树history.jsonl→ 仅追加写入对 git 友好方便grep搜索会话与制品分离 → 会话是临时 UI 状态制品是持久资产3. DESIGN.md将品牌规范写入 Markdown3.1 协议由来Open Design 遵循 awesome-claude-design 社区约定的9 节式 DESIGN.md Schema。这不是 Open Design 独创的而是一个正在形成的社区标准——把品牌设计规范从 Figma 的视觉参考转化为 AI Agent 可精确读取、严格遵循的结构化文档。3.2 九节结构详解# 品牌名称 ## 1. Visual Theme Atmosphere # 视觉主题与氛围 — 品牌整体调性描述 # 示例现代、极简、科技感以留白传递专业与信任 ## 2. Color Palette Roles # 调色板与角色 — 基于 OKLCh 色彩空间的色值体系 # 示例主色 oklch(65% 0.25 250) 用于CTA按钮 # 辅助色 oklch(85% 0.08 250) 用于背景强调 # 中性色 oklch(95% 0 0) 用于大面积底色 ## 3. Typography Rules # 排版规则 — 字体族、字号、字重、行高、字间距 # 示例标题 → Inter Bold | 2rem | line-height 1.2 # 正文 → Inter Regular | 1rem | line-height 1.6 ## 4. Component Stylings # 组件样式规范 — 按钮、输入框、卡片、导航等 # 示例主按钮 → 圆角 8px、主色填充、hover 明度10% ## 5. Layout Principles # 布局原则 — 响应式断点、栅格、间距 # 示例max-width 1280px、8px 栅格系统、section 间距 80px ## 6. Depth Elevation # 深度与层级 — 阴影、z-index、层级视觉区分 # 示例卡片阴影 → 0 2px 8px rgba(0,0,0,0.08) # 模态框阴影 → 0 8px 32px rgba(0,0,0,0.16) ## 7. Dos and Donts # 设计规范约束 — 明确允许与禁止的行为 # 示例DO → 保持 60-30-10 色彩比例 # DONT → 禁止使用超过 3 种字体 ## 8. Responsive Behavior # 响应式行为 — 各断点的适配规则 # 示例Mobile (768px) → 单列布局、图片全宽 # Desktop (1024px) → 多列栅格、固定侧边栏 ## 9. Agent Prompt Guide # Agent 提示指南 — 给 AI 的明确指令 # 示例所有页面必须包含品牌主色条 # 正文行高不得低于 1.63.3 色彩系统的 OKLCh 优势Open Design 推荐使用OKLCh色彩空间而非传统的 HEX/RGB/HSL原因如下与 sRGB/HSL 的对比属性HSLOKLCh感知均匀性❌ 相同数值变化在不同色相下亮度差异大✅ 人眼感知的亮度变化线性无障碍性❌ 难以精确控制对比度✅ 可直接约束亮度L满足 WCAGAI 可操作⚠️ 需要额外计算才能安全变体✅ 调整 L/C/h 即可生成安全调色板OKLCh 的三个通道L (Lightness) ∈ [0, 1] → 感知亮度0 黑1 白 C (Chroma) ∈ [0, 0.4] → 饱和度/鲜艳度 h (Hue) ∈ [0, 360] → 色相角度生成品牌调色板的实际操作保持色相角h不变通过调节L和C生成从深到浅的完整色阶。例如主色 oklch(55% 0.22 250) → 中等蓝色 浅变体 oklch(85% 0.08 250) → 浅蓝背景 深变体 oklch(35% 0.15 250) → 深蓝文本3.4 设计系统的加载与注入机制用户选择设计系统 │ ▼ Design-system Resolver 查找 DESIGN.md │ ▼ 解析 9 节结构 → 内存缓存 │ ▼ ┌─────────────────────────────┐ │ 注入到 Agent System Prompt │ │ │ │ [当前设计系统: Stripe] │ │ ## Color Palette Roles │ │ ## Typography Rules │ │ ... │ │ │ │ 技能正文 (SKILL.md body) │ │ 工艺参考 (Craft Refs) │ │ 用户 Prompt │ └─────────────────────────────┘ │ ▼ Agent 生成 → 自动适配品牌风格如果技能通过od.design_system.sections声明了仅需部分章节如[color, typography]则只注入相关章节——减少不必要的 token 消耗。4. SKILL.md技能即文件的协议设计4.1 协议基础Open Design 的技能系统遵循Claude Code SKILL.md 约定并扩展了od:命名空间的前置元数据。这意味着为普通 Claude Code 编写的技能可直接在 Open Design 中运行不使用 OD 扩展的技能也可在普通 Claude Code 中运行双向兼容是协议设计的核心原则。4.2 完整技能目录结构skill-root/ ├── SKILL.md # 清单 工作流指令前置元数据 Markdown 正文 ├── assets/ # 模板、样板文件、静态资源 │ ├── template.html │ └── ... ├── references/ # Agent 规划阶段读取的知识文件 │ ├── themes.md │ ├── layouts.md │ ├── components.md │ └── checklist.md └── tests/ # 可选 CI 测试 ├── basic.prompt ├── basic.expected.manifest.json └── basic.expected.regex.txt4.3 SKILL.md 前置元数据规范---name:magazine-web-ppt# 技能唯一标识description:|Magazine-style horizontal-swipe web deck.triggers:# 触发关键词-magazine deck-杂志风 PPT# OD 扩展字段全部可选 od:mode:deck# prototype | deck | template | design-systempreview:type:html# html | jsx | pptx | markdownentry:index.htmlreload:debounce-100example_prompt:Create a magazine-style web deck from my content.example_prompt_i18n:zh-CN:用杂志风网页 PPT 模板把我的内容做成横向翻页 deck。design_system:requires:truesections:[color,typography]# 仅注入相关章节craft:# 品牌无关的工艺参考requires:[typography,color,anti-ai-slop]inputs:# 侧边栏类型化输入表单-name:titletype:stringrequired:true-name:slide_counttype:integerdefault:8min:4max:20-name:themetype:enumvalues:[editorial,minimal,brutalist,dark-glass,warm]default:editorialparameters:# 实时调整滑块-name:accent_huetype:huedefault:18range:[0,360]-name:section_spacingtype:spacingdefault:48range:[16,128]outputs:primary:index.htmlsecondary:[slides.json]# PPTX 导出所需辅助文件capabilities_required:-surgical_edit-file_write---4.4 四种技能模式模式用途预览类型主输出典型工作流prototype-skill单屏交互原型html/jsxindex.html明确需求 → 解析设计令牌 → 编写组件树 → 写入文件deck-skill多页演示文稿html单文件导航index.html明确主题页数 → 选择主题 → 填充布局 → 质量自检template-skill基于预置模板生成继承模板类型填充后的副本复制 template → 替换占位符 → 调整令牌design-system-skill生成 DESIGN.mdmarkdownDESIGN.md分析输入 → 按 9 节起草 → 预览组件 → 定稿4.5 无 OD 字段时的智能推断当技能文件没有od字段时系统会自动推断mode从技能名称/描述的关键词推断推断失败默认prototypepreview.type自动嗅探文件类型*.html→ html*.jsx→ jsxdesign_system.requires如果技能正文提到 “design system” 或 “DESIGN.md” 则自动为 trueinputs / parameters无仅支持自由文本输入这种渐进增强的设计确保了最大兼容性——最简单的技能只需一个SKILL.md文件即可运行。4.6 技能发现机制启动 / SIGHUP 信号 / FS-watch 事件 │ ▼ ┌─────────────────────────────┐ │ Skill Registry 扫描 │ │ │ │ ① ./.claude/skills/ (P1) │ ← 项目私有优先级最高 │ ② ./skills/ (P2) │ ← 项目共享 │ ③ ~/.claude/skills/ (P3) │ ← 用户全局 │ │ │ 同名技能使用高优先级版本 │ │ chokidar 监听文件变化 │ └─────────────────────────────┘5. HyperFrames从 HTML 到 MP4 的确定性渲染管线5.1 技术定位HyperFrames 是 Open Design 生态中的HTML→视频元层meta-layer解决了一个关键工程问题如何让 AI Agent 用写代码的方式生成确定性、帧级精确的视频核心公式纯 HTML CSS GSAP 动画 → HyperFrames 渲染引擎 → 确定性 MP4 输出确定性的含义是相同输入 → 字节级完全一致的输出帧。这意味着不依赖 GPU帧级稳定与 Remotion 同级别CI 环境可重现“Same file appears on every machine, identical, every time”Agent 可写入、渲染并检查输出无需人工干预5.2 渲染管线架构整个管道分为五个阶段阶段 ① 源内容获取 ├── 自然语言 prompt ├── 文章链接 → 服务端拉取 → Markdown └── GitHub 仓库 → 克隆/拉取 → Markdown │ ▼ 阶段 ② Agent 循环内容规划 读取源内容 选定模板风格 → 生成内容图故事板 → 每帧对应的 HTML 代码 │ ▼ 阶段 ③ 内容图构建中间表示 IR ContentGraph: { nodes: [实体/数据/文本节点], edges: [序列关系/依赖关系/对比关系] } → 拓扑排序 → 确定帧顺序和时长 │ ▼ 阶段 ④ 逐帧 HTML 生成 每个节点 → 独立的自包含动画 HTML 文件 所有 GSAP 依赖、样式、资源内嵌在单文件中 │ ▼ 阶段 ⑤ HyperFrames 渲染引擎 无头 Chromium 逐帧加载 HTML → 录制 GSAP 动画 → 输出逐帧 WebM → FFmpeg (libx264) → 拼接 → MP4 → 可选混入 MiniMax 生成的 BGM 旁白5.3 确定性渲染的数学基础HyperFrames 的确定性来源于对动画时间线的精确控制。对于一个 GSAP 动画序列其时间线可描述为设动画序列A {a₁, a₂, ..., aₙ}每个动画片段aᵢ由以下参数定义aᵢ (t_startᵢ, durationᵢ, easingᵢ, propertiesᵢ)渲染器在时间t的帧F(t)由所有活跃动画的交集决定F(t) Composite({ aᵢ · progress(t - t_startᵢ) | t ∈ [t_startᵢ, t_startᵢ durationᵢ] })其中progress(τ)由缓动函数easingᵢ计算progress(τ) clamp(easingᵢ(τ / durationᵢ), 0, 1)由于所有参数都是确定性的纯数学函数无物理时间依赖给定相同的输入 HTML 和时间t输出帧F(t)必然相同。最终的 MP4 编码参数参数值视频编码器libx264帧率由 HTML 中data-duration和内容图拓扑排序决定分辨率由data-width×data-height指定中间格式WebM无头 Chromium 录制音频混流MiniMax TTS BGM背景音乐自动压低以突出人声支持淡入淡出5.4 HTML 时间属性语法HyperFrames 使用data-*属性在 DOM 层面表达时间线!-- 一个 5 秒的视频 --divdata-width1920data-height1080!-- 背景片段从 0 秒开始持续 5 秒 --videosrcintro.mp4data-duration5/!-- 标题从第 1 秒开始出现持续 4 秒 --h1data-start1data-duration4Hello, friend./h1!-- 副标题从第 2 秒淡入 --pdata-start2data-duration3classfade-inThis is a HyperFrame./p/div三个核心属性属性含义类型data-width/data-height画布分辨率pxdata-start元素出现的起始时间秒浮点data-duration元素持续时长秒浮点5.5 多引擎适配器接口当前默认渲染引擎为 HyperFrames但架构层面预留了统一适配器接口后续可接入引擎特点HyperFrames(当前默认)确定性渲染不依赖 GPUAgent-nativeRemotion(计划中)React 组件渲染视频生态丰富Motion Canvas / Revideo(计划中)程序化动画Manim(计划中)数学/科学可视化动画引擎切换通过统一适配器接口完成上层 Agent 逻辑无需修改。6. Agent 适配器21 个 CLI 的统一调度层6.1 架构决策不重复造 AgentOpen Design 做了这样一个关键决策不投入资源自研模型或 Agent而是复用用户本地已有的 Coding Agent CLI。这意味着Agent 层的唯一职责是检测、适配、调度每个 Agent 的能力边界由适配器声明用户可自由选择并随时切换自己信任的 Agent6.2 适配器池架构Daemon 启动 │ ▼ Agent Scanner (PATH 配置目录探测) │ ├── claude ✓ → 创建 ClaudeAdapter ├── codex ✓ → 创建 CodexAdapter ├── cursor ✓ → 创建 CursorAdapter ├── gemini ✓ → 创建 GeminiAdapter ├── opencode ✓ → 创建 OpenCodeAdapter ├── qwen ✓ → 创建 QwenAdapter ├── copilot ✓ → 创建 CopilotAdapter ├── kimi ✓ → 创建 KimiAdapter ├── hermes ✓ → 创建 HermesAdapter ├── devin ✗ → 未安装跳过 └── ... │ ▼ Agent Adapter Pool (跨会话复用) │ ├── 标准化启动包装 ├── 流式输出归一化JSON Lines → 统一 SSE 事件流 ├── 能力声明多轮、精确编辑、原生 Skill 加载等 └── 环境变量注入6.3 支持的 Agent CLI 全矩阵Agent CLI安装命令特点Claude Codeod mcp install claudeAnthropic 官方skill 原生支持Codex CLIod mcp install codexOpenAI 官方Cursorod mcp install cursorIDE 内置 agentVS Code Copilotod mcp install copilotGitHub CopilotGemini CLIod mcp install geminiGoogle 官方OpenCodeod mcp install opencode开源Qwen Codeod mcp install qwen阿里通义千问Kimi CLIod mcp install kimi月之暗面Hermes Agentod mcp install hermes-OpenClawod mcp install openclaw-Antigravityod mcp install antigravity-Clineod mcp install clineVS Code 插件Traeod mcp install trae字节跳动Mistral Vibeod mcp install vibeMistral 官方Pi Agentod mcp install piInflection AI总计支持21 个 CLI及任何 OpenAI 兼容端点BYOK6.4 执行模式本地 CLI vs API模式选择器值请求流向Local CLI默认“Local CLI”Frontend → Daemon →spawn(agent, ...)→ stdout → SSE → 预览API 模式“Anthropic API” / “OpenAI API” / …Frontend → Daemon/api/proxy/{provider}/stream→ SSE → 预览两种模式共用同一个artifact解析器和同一个沙盒 iframe 预览。6.5 Agent 运行时环境变量注入Daemon 在生成 Agent 进程时自动注入以下上下文OD_BIN# daemon CLI 的绝对路径OD_DAEMON_URL# 运行中的 daemon URL (http://127.0.0.1:7457)OD_PROJECT_ID# 当前项目 IDOD_PROJECT_DIR# 当前项目文件目录这使得 Agent 可以回写产物到正确的磁盘位置、调用 daemon 能力、访问项目上下文。6.6 SSE 流式传输协议这是前端与 daemon 之间最核心的通信协议。关键架构决策location /api/ { proxy_pass http://127.0.0.1:7456; proxy_buffering off; # ← 必须关闭 gzip off; # ← 必须关闭否则 SSE 被缓冲 proxy_read_timeout 86400s; # 长连接容忍 proxy_http_version 1.1; proxy_set_header Connection ; }⚠️常见故障gzip on会缓冲 SSE 响应导致 80-90 秒后出现net::ERR_INCOMPLETE_CHUNKED_ENCODING。流事件类型共享于packages/contracts/src事件类型说明text_delta文本增量Agent 输出的文本增量tool_call工具调用Agent 执行的工具调用编辑/写入/读取thinking思考过程Agent 的推理过程若支持artifact_start制品开始新制品创建artifact_end制品完成制品写入完成error错误执行异常7. Prompt Stack可组合的上下文引擎7.1 架构概览每次用户请求发送时Open Design 并非使用固定的 system prompt。它以动态组合的多层上下文作为输入——这个设计精确模拟了专业设计师的工作流程查阅品牌手册、回顾过往参考、对齐需求约束、遵循输出规则。┌──────────────────────────────────────────────┐ │ 7 层 Prompt Stack │ ├──────────────────────────────────────────────┤ │ ① Discovery Directive │ │ 首轮需求表单 · 品牌分支 · TodoWrite · │ │ 5 维自我评审规则 │ ├──────────────────────────────────────────────┤ │ ② Identity Canon │ │ 官方设计师 prompt · 反 AI 低质内容检查 │ │ 初级设计师校验规则 │ ├──────────────────────────────────────────────┤ │ ③ Active DESIGN.md (品牌设计系统) │ │ 仅注入 od.design_system.sections │ │ 指定的相关章节 │ ├──────────────────────────────────────────────┤ │ ④ Active SKILL.md (当前技能) │ │ 工作流步骤 输出规则 │ ├──────────────────────────────────────────────┤ │ ⑤ Project Metadata │ │ 产物类型 · 保真度 · 演讲者备注 · │ │ 动画配置 · 灵感参考 ID │ ├──────────────────────────────────────────────┤ │ ⑥ Skill Attachments │ │ 预注入的模板文件 · 参考资料 │ │ assets/ · references/ │ ├──────────────────────────────────────────────┤ │ ⑦ Framework Directives │ │ 幻灯片导航 · 计数器 · 滚动 · 打印规则 │ └──────────────────────────────────────────────┘7.2 RULE 1需求对齐优先Open Design 内置了一个关键规则——发现表单优先于代码生成每个新设计需求的第一轮 不直接生成代码 ↓ 弹出 question-form iddiscovery ↓ 询问 · surface载体Web/移动/桌面/PPT · audience受众C端/B端/内部 · tone风格专业/活泼/极简/科技 · brand context品牌背景 · scale规模单页/多页/应用 · constraints约束 ↓ 对齐需求方向后 → 再进入生成阶段这种设计将提前对齐需求的工程实践内置到了产品流程中大幅降低了方向偏差导致的大规模返工。8. 应用实战从零搭建品牌设计工作流8.1 环境准备方式一桌面应用推荐macOS / Windows 安装包 → open-design.ai方式二Docker 部署gitclone https://github.com/nexu-io/open-design.gitcdopen-design/deploycp.env.example .env# 编辑 .env 填入 API 密钥或使用本地 CLIdockercompose up-d# 访问 http://localhost:7456方式三源码运行gitclone https://github.com/nexu-io/open-design.gitcdopen-design corepackenablepnpminstallpnpmtools-dev run web8.2 场景一生成品牌落地页Step 1 — 创建项目并激活设计系统# 在 Web UI 中创建新项目或导入现有文件夹# 从 150 套设计系统中选择例如 Stripe 风格Step 2 — 选择技能在技能选择器中选择saas-landing营销落地页或web-prototype通用原型。Step 3 — 填写发现表单surface: Web 桌面端 audience: 企业客户B2B SaaS tone: 专业、现代、科技感 brand context: 音视频处理 API 平台 scale: 单页Hero Features Pricing CTAStep 4 — 发送 Prompt创建一个音视频 API 平台的落地页。 核心功能实时转码、智能去噪、超分辨率。 目标用户音视频开发者。 需要包含Hero 区、3 个功能卡片、定价对比表、CTA 按钮。Step 5 — 预览与导出Agent 生成 → 沙盒 iframe 实时预览 → 微调参数 → 导出 HTML/PDF/PPTX。8.3 场景二创建自定义品牌设计系统如果 150 套内置系统中没有你的品牌可以从零生成Step 1 — 切换到 design-system 模式在 UI 中选择 design-system 技能。Step 2 — 提供品牌输入品牌名称MyVideoAPI 行业音视频 SaaS 风格关键词现代、科技、专业、可靠 竞品参考Vercel、Cloudinary、Mux 主色偏好深蓝 青蓝Step 3 — Agent 生成 DESIGN.mdAgent 会按 9 节 Schema 输出完整的品牌规范文件。Step 4 — 保存并激活# 保存为项目设计系统cpDESIGN.md ./.od/design-system/DESIGN.md# 或全局安装cpDESIGN.md ~/.open-design/design-systems/myvideoapi/DESIGN.md之后所有技能生成的内容都会自动应用这套品牌规范。8.4 场景三制作产品介绍视频Step 1 — 选择 HyperFrames 技能Step 2 — 描述视频内容制作一个 60 秒的产品介绍视频 - 0-5s品牌 Logo 动画入场 - 5-15s标题实时视频转码 API打字机效果 - 15-35s三个功能特性卡片依次滑入 - 35-50s数据可视化图表动画 - 50-60sCTA 按钮 LogoStep 3 — Agent 生成内容图 逐帧 HTMLAgent 自动完成内容图构建 → 拓扑排序逐帧 HTML 生成嵌入 GSAP 动画 品牌色HyperFrames 渲染 → MP4 输出8.5 场景四多 Agent 对比测试同一需求切换不同 Agent 观察生成质量差异# 使用 Claude Code 生成# 记录色彩准确性、组件完整性、代码质量# 使用 Qwen Code 生成同一需求# 记录响应速度、中文理解能力、布局还原度# 使用 Gemini CLI 生成同一需求# 记录创意性、动画效果、代码架构这种对比测试对于团队 Agent 选型非常有价值。9. 总结与展望9.1 核心价值判断Open Design 的真正价值不在于开源 Claude Design 替代版这个传播性 slogan。它的工程创新在于用本地 daemon 连接浏览器体验和本地文件系统复用现有 Coding Agent 的执行能力用 SKILL.md 和 DESIGN.md 约束输出风格用沙盒预览和导出管线把 AI 生成产物变成可交付的工程资产。六层可替换架构使得每个层级都可以独立演进入口层 ─── 可替换 UI 框架当前 Next.js 16 执行层 ─── 可替换后端当前 Express Node 24 Agent 层 ── 可替换执行器当前 21 个 CLI 技能层 ─── 可组合能力单元SKILL.md 协议 设计系统层 ─ 可版本管理品牌规范DESIGN.md 协议 交付层 ─── 多格式导出管线HTML/PDF/PPTX/MP49.2 技术亮点亮点说明DESIGN.md 9 节 Schema将品牌规范从感觉转化为 Agent 可精确执行的规则文件SKILL.md 双向兼容Claude Code 原生技能无需修改即可运行OD 扩展为可选HyperFrames 确定性渲染HTML→MP4 管线保证 CI 可重现字节级一致Prompt Stack7 层动态上下文组合模拟专业设计师工作流程纯文件存储.od/artifacts/直接git add进入 PR 审查流程9.3 风险与局限多 Agent 适配器维护成本支持的 CLI 越多不同 CLI 的输出格式、权限、错误处理差异带来的维护压力越大本地 daemon 安全边界daemon 可以调 CLI、读写文件、代理 API需要严格的 SSRF 阻断和权限控制不适合一键出图需求需要理解本地 runtime、Agent、Skill、设计系统等概念存在一定工程门槛版本快速迭代v0.9.0 仍处于 rapid iteration 阶段生产环境依赖需谨慎评估9.4 未来方向功能状态注释模式精准编辑 部分上线npx od init脚手架 计划中Plugin SDK CLI 计划中Figma → React/Next/Vue 迁移插件 Alpha刷新现有代码库插件 计划中Remotion / Motion Canvas 渲染引擎 计划中参考资料GitHub: nexu-io/open-designOpen Design 官方文档HyperFrames 官方awesome-claude-design (DESIGN.md 规范)SKILL.md 协议规范Open Design 架构文档本文完成于 2026 年 6 月 7 日基于 Open Design v0.9.0 版本。技术架构与功能特性可能随项目迭代而变化请以官方文档为准。
