Open Design：打破 Claude Design 垄断的开源设计革命

引言

想象一下，如果你的设计师不仅能够理解你的需求，还能从每次交互中学习、适应你的风格，并且真正"理解"设计的本质------这不再是科幻小说中的情节，而是正在发生的现实。

2026年4月17日，Anthropic 发布了 Claude Design，这个产品展示了当 LLM 停止撰写散文，开始交付设计工件时会发生什么。它迅速走红------但同时也保持闭源、仅限付费、仅限云端、锁定在 Anthropic 的模型和技能生态中。没有结账选项，没有自托管，没有 Vercel 部署，没有替换代理的灵活性。

Open Design (OD) 应运而生。它是 Claude Design 的开源替代方案------相同的循环、相同的工件优先思维模式，但零锁定。OD 不捆绑代理------最强大的编码代理已经存在于你的笔记本电脑上。它将这些代理连接到技能驱动的设计工作流中，可以在本地运行，可以部署到 Vercel，并在每一层都保持 BYOK（Bring Your Own Key）。

当你输入"make me a magazine-style pitch deck for our seed round"时，交互式问题表单会在模型即兴创作单个像素之前弹出。代理选择五种策划视觉方向之一。实时的 TodoWrite 计划流式传输到 UI 中。守护进程在磁盘上构建一个真实的项目文件夹，包含种子模板、布局库和自检清单。代理读取这些内容------强制预检------对其自己的输出进行五维批判，并发出一个单一的 <artifact>，几秒钟后就在沙盒 iframe 中渲染。

这不是"AI 试图设计某物"。这是一个通过提示栈训练的 AI，它像高级设计师一样行动------拥有工作文件系统、确定性调色板库和清单文化------正是 Claude Design 设定的标准，但是开放的和属于你的。

项目概述

Open Design 是一个本地优先、开源的替代方案，旨在挑战 Anthropic 的 Claude Design 在 AI 设计领域的垄断地位。该项目于 2026年4月28日创建，在短短7天内就获得了超过 25,000 个 stars，成为 GitHub 上增长最快的开源项目之一。

核心数据

指标	数据
GitHub Stars	25,900+
Forks	2,800+
Contributors	102+
License	Apache-2.0
创建时间	2026-04-28
主要语言	TypeScript (64.7%), HTML (23.2%), CSS (6.6%)

核心特性

Open Design 提供了令人印象深刻的功能集合：

15 种 AI 编程代理支持：自动检测 PATH 中的编码代理 CLI（Claude Code、Codex、Devin for Terminal、Cursor Agent、Gemini CLI、OpenCode、Qwen、GitHub Copilot CLI、Hermes、Kimi、Pi、Kiro、Kilo、Mistral Vibe、DeepSeek TUI），一键切换
31 个可组合技能：27 个原型模式技能（web-prototype、saas-landing、dashboard、mobile-app、gamified-app 等）+ 4 个演示模式技能（guizang-ppt、simple-deck、replit-deck、weekly-update）
72 个品牌级设计系统：Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple、Cursor、Supabase、Figma、小红书等
5 种视觉方向：Editorial Monocle（编辑单焦）、Modern Minimal（现代极简）、Warm Soft（温暖柔和）、Tech Utility（技术实用）、Brutalist Experimental（野兽派实验）
多媒体生成：图像（gpt-image-2）、视频（Seedance 2.0、HyperFrames）、音频生成

技术架构深度分析

Open Design 采用了创新的"守护进程 + Web 应用"架构，这种设计既保证了本地优先的数据隐私，又提供了现代化的 Web 用户体验。

整体架构图

本地守护进程 (Node 24 + Express)
Web 应用层
浏览器层 (Next.js 16)
SSRFGuarded
BYOK 代理层
Anthropic 代理
OpenAI 代理
Azure 代理
Google 代理
存储层
项目文件夹
工件缓存
模板数据库
对话数据库
AI 代理层
Claude Code
Codex CLI
Cursor Agent
Gemini CLI
其他代理 (12+)
聊天界面
文件工作区
沙盒预览 iframe
设置面板
导入对话框
React 18 核心
状态管理
SSE 客户端
工件解析器
API 路由器
技能注册表
设计系统目录
SQLite 数据库
媒体管道
外部 API

前端技术栈

核心框架：

Next.js 16 App Router：最新的 React 服务端渲染框架，提供出色的性能和 SEO
React 18：利用并发渲染、自动批处理等最新特性
TypeScript：类型安全的开发体验

关键组件：

聊天界面（Chat）：支持 SSE 流式响应
文件工作区（File Workspace）：实时文件预览和编辑
沙盒预览（Sandboxed Preview）：使用 srcdoc iframe 隔离渲染
选择器（Picker）：技能、设计系统、视觉方向的选择

状态管理：

本地状态：React hooks
持久化状态：localStorage + daemon 支持的后端存储
实时同步：SSE（Server-Sent Events）流式传输

守护进程架构

守护进程是 Open Design 的核心创新，它作为唯一的有权限进程运行，负责：

核心职责：

代理检测和调度：扫描 PATH 中的 AI 代理 CLI
技能管理：加载和解析 SKILL.md 文件
设计系统管理：管理 72 个 DESIGN.md 系统
项目持久化：SQLite 数据库存储（projects、conversations、messages、tabs、templates）
媒体生成调度：协调图像、视频、音频生成
BYOK 代理：提供多供应商 API 代理服务

技术实现：

typescript 复制代码

// 守护进程核心结构
class OpenDesignDaemon {
  private agentRegistry: Map<string, AgentAdapter>;
  private skillRegistry: Map<string, Skill>;
  private designSystemCatalog: Map<string, DesignSystem>;
  private sqliteDB: Database;
  private mediaDispatcher: MediaPipeline;

  async detectAgents(): Promise<void> {
    // 扫描 PATH 中的代理 CLI
    const pathEnv = process.env.PATH || '';
    const paths = pathEnv.split(pathDelimiter);

    for (const agentDef of AGENT_DEFS) {
      const cliPath = await findExecutable(agentDef.bin, paths);
      if (cliPath) {
        const adapter = new AgentAdapter(agentDef, cliPath);
        this.agentRegistry.set(agentDef.bin, adapter);
      }
    }
  }

  async spawnAgent(agentId: string, cwd: string): Promise<ChildProcess> {
    const adapter = this.agentRegistry.get(agentId);
    if (!adapter) {
      throw new Error(`Agent ${agentId} not found`);
    }

    return adapter.spawn(cwd);
  }
}

AI 代理适配器

Open Design 支持 15 种不同的 AI 编程代理 CLI，每种代理都有独特的通信协议和参数格式。

代理适配架构：
守护进程
scan PATH
流格式
claude-stream-json
copilot-stream-json
json-event-stream
acp-json-rpc
pi-rpc
plain
AI 代理 CLI
claude
codex
devin
gemini
cursor-agent
qwen
copilot
hermes
kimi
pi
kiro-cli
kilo
vibe-acp
deepseek
代理检测器
适配器工厂
流解析器

流格式处理：

流格式	使用代理	解析器	特点
`claude-stream-json`	Claude Code	typed events	结构化事件流，包含工具调用、思考过程
`copilot-stream-json`	GitHub Copilot	typed events	类似 Claude 格式，优化代码补全
`json-event-stream`	Codex, Gemini, Cursor, OpenCode	per-CLI parser	每个代理有定制的事件解析器
`acp-json-rpc`	Devin, Hermes, Kimi, Kiro, Kilo, Vibe	Agent Client Protocol	JSON-RPC over stdio
`pi-rpc`	Pi	stdio JSON-RPC	特殊的 RPC 协议
`plain`	Qwen, DeepSeek	raw stdout chunks	原始输出块流

技能系统架构

Open Design 的技能系统是其最核心的创新之一。技能不是插件，而是文件------遵循 Claude Code 的 SKILL.md 约定。

技能结构：

复制代码

skills/
├── web-prototype/
│   ├── SKILL.md              # 技能元数据和配置
│   ├── assets/
│   │   ├── template.html     # 种子模板
│   │   └── styles.css        # 基础样式
│   └── references/
│       ├── layouts.md        # 布局参考
│       ├── components.md     # 组件参考
│       └── checklist.md      # P0/P1/P2 检查清单
├── guizang-ppt/
│   ├── SKILL.md
│   ├── assets/
│   │   └── template.html
│   └── references/
│       ├── themes.md
│       ├── layouts.md
│       ├── components.md
│       └── checklist.md
└── ... (29 more skills)

技能元数据扩展：

yaml 复制代码

# SKILL.md 扩展 frontmatter
---
mode: prototype                    # prototype | deck | template
platform: desktop                  # desktop | mobile
scenario: design                   # design | marketing | operation | engineering | product | finance | hr | sale | personal
preview.type: artifact             # artifact | document | composition
design_system.requires: false      # 是否需要特定设计系统
default_for: web-prototype         # 默认用于哪个场景
featured: true                     # 是否在精选中展示
fidelity: high                     # low | medium | high
speaker_notes: true                # 是否支持演讲者备注
animations: enabled                # disabled | enabled | required
example_prompt: "Create a modern SaaS landing page with hero, features, and pricing sections"
---

技能加载流程：
守护进程启动
扫描 skills/ 目录
解析 SKILL.md frontmatter
验证 od: 扩展字段
加载 assets/ 和 references/
注册到技能注册表
构建 API 端点
GET /api/skills
GET /api/skills/:id
GET /api/skills/:id/example
返回技能目录
返回技能元数据
组装种子模板
注入参考文件
返回示例工件

设计系统架构

Open Design 包含 72 个品牌级设计系统，每个系统都是单个 DESIGN.md 文件，遵循 9 部分架构。

DESIGN.md 架构：

markdown 复制代码

# 设计系统名称

## Color（颜色）
- 主色板
- 次要色板
- 中性色
- 语义色（成功、警告、错误、信息）

## Typography（排版）
- 字体栈
- 字号等级
- 行高
- 字重
- 字母间距

## Spacing（间距）
- 间距标尺
- 边距规范
- 组件内间距

## Layout（布局）
- 栅格系统
- 断点
- 容器宽度
- 列数

## Components（组件）
- 按钮
- 表单
- 卡片
- 模态框
- 导航

## Motion（动效）
- 缓动函数
- 过渡时间
- 动画原则

## Voice（语调）
- 语气
- 措辞
- 格式

## Brand（品牌）
- 品牌故事
- 价值观
- 目标受众

## Anti-patterns（反模式）
- 避免的样式
- 常见错误
- 最佳实践

设计系统加载流程：
守护进程启动
扫描 design-systems/ 目录
解析 DESIGN.md 文件
验证 9 个部分
提取设计令牌
构建颜色映射
构建排版栈
构建间距标尺
注册到设计系统目录
GET /api/design-systems
返回系统目录
用户选择设计系统
激活设计系统
注入令牌到工件
应用样式规则
渲染工件

核心创新点

1. 不捆绑代理------你的代理足够好

Open Design 的第一个核心理念是：不捆绑代理。相反，它利用你已有的代理。

传统方法的问题：

Claude Design 捆绑 Opus 4.7
Open CoDesign 捆绑 pi-ai
用户无法使用他们喜欢的代理

Open Design 的解决方案：

typescript 复制代码

// 自动检测 PATH 中的代理
const AGENT_DEFS = [
  { bin: 'claude', format: 'claude-stream-json' },
  { bin: 'codex', format: 'json-event-stream', parser: 'codex' },
  { bin: 'devin', format: 'acp-json-rpc' },
  { bin: 'gemini', format: 'json-event-stream', parser: 'gemini' },
  { bin: 'opencode', format: 'json-event-stream', parser: 'opencode' },
  { bin: 'cursor-agent', format: 'json-event-stream', parser: 'cursor-agent' },
  { bin: 'qwen', format: 'plain' },
  { bin: 'copilot', format: 'copilot-stream-json' },
  { bin: 'hermes', format: 'acp-json-rpc' },
  { bin: 'kimi', format: 'acp-json-rpc' },
  { bin: 'pi', format: 'pi-rpc' },
  { bin: 'kiro-cli', format: 'acp-json-rpc' },
  { bin: 'kilo', format: 'acp-json-rpc' },
  { bin: 'vibe-acp', format: 'acp-json-rpc' },
  { bin: 'deepseek', format: 'plain' }
];

async function detectAvailableAgents(): Promise<string[]> {
  const pathEnv = process.env.PATH || '';
  const paths = pathEnv.split(pathDelimiter);
  const available = [];

  for (const agentDef of AGENT_DEFS) {
    const cliPath = await findExecutable(agentDef.bin, paths);
    if (cliPath) {
      available.push(agentDef.bin);
    }
  }

  return available;
}

BYOK 代理回退：

如果用户没有安装任何 CLI，Open Design 提供多供应商 API 代理：

typescript 复制代码

// BYOK 代理端点
app.post('/api/proxy/:provider/stream', async (req, res) => {
  const { provider } = req.params;
  const { baseUrl, apiKey, model, messages } = req.body;

  // SSRF 防护：拒绝本地 IP
  const hostname = new URL(baseUrl).hostname;
  if (isLocalIP(hostname)) {
    return res.status(403).json({ error: 'Local IPs not allowed' });
  }

  // 根据供应商构建请求
  const upstream = buildUpstreamRequest(provider, baseUrl, apiKey, model, messages);

  // 设置 SSE 流
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 转发标准化 SSE
  for await (const chunk of upstream.stream) {
    res.write(`data: ${JSON.stringify(normalizeSSE(chunk))}\n\n`);
  }

  res.write('data: [DONE]\n\n');
  res.end();
});

2. 技能是文件，不是插件

Open Design 采用文件系统基础的技能系统，而不是传统的插件架构。

传统插件架构的问题：

需要复杂的注册机制
版本管理困难
依赖地狱
安全性难以控制

文件技能系统的优势：

复制代码

技能作为文件：
✅ 简单的文件夹结构
✅ Git 友好的版本控制
✅ 易于分发和共享
✅ 透明的代码审查
✅ 无需构建步骤

添加技能的流程：
1. 在 skills/ 下创建文件夹
2. 添加 SKILL.md（必需）
3. 添加 assets/ 和 references/（可选）
4. 重启守护进程
5. 技能自动出现在选择器中

技能热加载：

typescript 复制代码

// 守护进程监听技能目录变化
chokidar.watch('skills/', {
  ignored: /(^|[\/\\])\../, // 忽略隐藏文件
  persistent: true
}).on('all', (event, path) => {
  if (event === 'add' || event === 'change') {
    reloadSkill(path);
  } else if (event === 'unlink') {
    unregisterSkill(path);
  }
});

async function reloadSkill(skillPath: string): Promise<void> {
  const skill = await parseSKILLMD(skillPath);
  skillRegistry.set(skill.id, skill);

  // 通知 Web 客户端
  broadcastWS({
    type: 'skill-reloaded',
    skill: skill.toJSON()
  });
}

3. 设计系统是可移植的 Markdown，不是主题 JSON

Open Design 的第三个核心理念是：设计系统应该是人类可读的 Markdown，而不是机器生成的 JSON。

为什么是 Markdown：

Markdown	JSON
✅ 人类可读	❌ 难以阅读
✅ Git 友好	❌ 合并冲突频繁
✅ 易于编辑	❌ 需要特殊工具
✅ 支持注释	❌ 无注释
✅ 版本控制清晰	❌ 难以追踪变化

DESIGN.md 示例（Linear 设计系统）：

markdown 复制代码

# Linear Design System

## Color

### Primary
- Primary 50: #EEF2FF6
- Primary 100: #E0E7FF
- Primary 500: #6366F1
- Primary 600: #4F46E5
- Primary 700: #4338CA

### Neutral
- Gray 50: #F9FAFB
- Gray 100: #F3F4F6
- Gray 200: #E5E7EB
- Gray 800: #1F2937
- Gray 900: #111827

## Typography

### Font Stack
- Sans: 'Inter', system-ui, -apple-system, sans-serif
- Mono: 'JetBrains Mono', 'Fira Code', monospace

### Type Scale
- XS: 0.75rem (12px)
- SM: 0.875rem (14px)
- Base: 1rem (16px)
- LG: 1.125rem (18px)
- XL: 1.25rem (20px)
- 2XL: 1.5rem (24px)
- 3XL: 1.875rem (30px)
- 4XL: 2.25rem (36px)

## Spacing

### Spacing Scale
- 0: 0
- 1: 0.25rem (4px)
- 2: 0.5rem (8px)
- 3: 0.75rem (12px)
- 4: 1rem (16px)
- 5: 1.25rem (20px)
- 6: 1.5rem (24px)
- 8: 2rem (32px)
- 10: 2.5rem (40px)
- 12: 3rem (48px)
- 16: 4rem (64px)

## Layout

### Container
- Max Width: 1200px
- Padding: 2rem

### Grid
- Columns: 12
- Gap: 1.5rem

### Breakpoints
- SM: 640px
- MD: 768px
- LG: 1024px
- XL: 1280px
- 2XL: 1536px

## Components

### Button
- Base: bg-primary-600 text-white rounded-lg px-4 py-2
- Hover: bg-primary-700
- Focus: ring-2 ring-primary-500 ring-offset-2
- Disabled: opacity-50 cursor-not-allowed

### Card
- Base: bg-white rounded-lg border border-gray-200 shadow-sm
- Padding: spacing-6
- Hover: shadow-md

### Input
- Base: border border-gray-300 rounded-lg px-3 py-2
- Focus: ring-2 ring-primary-500 ring-offset-2 border-primary-500
- Error: border-red-500 ring-red-500

## Motion

### Easing
- Default: cubic-bezier(0.4, 0, 0.2, 1)
- In: cubic-bezier(0.4, 0, 1, 1)
- Out: cubic-bezier(0, 0, 0.2, 1)

### Duration
- Fast: 150ms
- Base: 200ms
- Slow: 300ms

## Voice

### Tone
- Professional but approachable
- Clear and concise
- Action-oriented

### Formatting
- Sentence case for headings
- Title case for buttons
- No exclamation marks in body text

## Brand

### Story
Linear is the issue tracking tool you'll enjoy using. Designed for high-performance teams.

### Values
- Speed
- Clarity
- Attention to detail

### Audience
- Software engineers
- Product managers
- Designers

## Anti-patterns

### Styles to Avoid
- Aggressive gradients
- Generic emoji icons
- Rounded cards with left border accent
- Hand-drawn SVG humans
- Inter as display face
- Invented metrics

### Common Mistakes
- Overusing shadows
- Inconsistent spacing
- Too many colors
- Ignoring contrast ratios

### Best Practices
- Use semantic color tokens
- Maintain visual hierarchy
- Test for accessibility
- Design for dark mode

设计系统切换：

typescript 复制代码

// 切换设计系统
async function switchDesignSystem(projectId: string, systemId: string): Promise<void> {
  const system = designSystemCatalog.get(systemId);
  if (!system) {
    throw new Error(`Design system ${systemId} not found`);
  }

  const project = await getProject(projectId);
  project.designSystem = systemId;

  // 重新渲染所有工件
  for (const artifact of project.artifacts) {
    await renderArtifact(artifact, system);
  }

  // 持久化到数据库
  await db.updateProject(projectId, { designSystem: systemId });
}

4. 交互式问题表单防止 80% 的重定向

Open Design 的第四个核心理念是：在生成任何内容之前，先通过交互式表单收集关键信息。

问题表单的价值：

传统方法	交互式表单
❌ 30 分钟的重定向	✅ 30 秒的表单填写
❌ 模糊的需求	✅ 明确的约束
❌ 频繁的迭代	✅ 一次性正确
❌ 用户沮丧	✅ 用户满意

问题表单示例：

typescript 复制代码

// 发现表单（Turn-1）
const discoveryForm = {
  id: 'discovery',
  title: '让我们了解你的设计需求',
  fields: [
    {
      name: 'surface',
      type: 'select',
      question: '你想要创建什么类型的设计？',
      options: [
        { value: 'web-prototype', label: 'Web 原型' },
        { value: 'mobile-app', label: '移动应用' },
        { value: 'deck', label: '演示文稿' },
        { value: 'dashboard', label: '仪表板' }
      ],
      required: true
    },
    {
      name: 'audience',
      type: 'select',
      question: '目标受众是谁？',
      options: [
        { value: 'developers', label: '开发者' },
        { value: 'business', label: '商业用户' },
        { value: 'consumers', label: '消费者' },
        { value: 'enterprise', label: '企业客户' }
      ],
      required: true
    },
    {
      name: 'tone',
      type: 'select',
      question: '你希望传达什么语气？',
      options: [
        { value: 'professional', label: '专业' },
        { value: 'casual', label: '随意' },
        { value: 'playful', label: '有趣' },
        { value: 'luxury', label: '奢华' }
      ],
      required: true
    },
    {
      name: 'brandContext',
      type: 'textarea',
      question: '描述一下你的品牌背景（如果有）',
      placeholder: '例如：我们是一家 AI 初创公司，专注于提高开发效率...',
      required: false
    },
    {
      name: 'scale',
      type: 'select',
      question: '项目的规模是？',
      options: [
        { value: 'mvp', label: 'MVP（最小可行产品）' },
        { value: 'production', label: '生产级应用' },
        { value: 'enterprise', label: '企业级系统' }
      ],
      required: true
    },
    {
      name: 'constraints',
      type: 'textarea',
      question: '有什么特定的约束或要求吗？',
      placeholder: '例如：必须支持暗黑模式、需要 RTL 支持等...',
      required: false
    }
  ]
};

表单处理流程：
是
否
有错误
成功
否
是
用户发送消息
是否首次设计?
发出问题表单
处理请求
显示表单 UI
用户填写表单
验证表单
显示错误
提取上下文
是否有品牌?
发出方向表单
构建提示词
显示方向表单
用户选择方向
应用视觉方向
流式传输到代理
渲染工件

5. 守护进程让代理感觉像在你的笔记本电脑上

Open Design 的第五个核心理念是：代理应该真正运行在用户的文件系统中，而不是模拟的环境。

传统方法的问题：

代理运行在虚拟环境中
文件操作是模拟的
无法访问真实文件
持久化困难

Open Design 的解决方案：

typescript 复制代码

// 守护进程在项目文件夹中启动代理
const projectPath = `.od/projects/${projectId}`;
const agentProcess = spawnAgent(agentId, {
  cwd: projectPath,
  env: {
    ...process.env,
    PROJECT_PATH: projectPath
  }
});

// 代理获得真实的工具
const tools = {
  Read: {
    description: '读取文件内容',
    function: async (path: string) => {
      const fullPath = resolve(projectPath, path);
      return await readFile(fullPath, 'utf-8');
    }
  },
  Write: {
    description: '写入文件',
    function: async (path: string, content: string) => {
      const fullPath = resolve(projectPath, path);
      await writeFile(fullPath, content, 'utf-8');
      return { success: true };
    }
  },
  Bash: {
    description: '执行 shell 命令',
    function: async (command: string) => {
      const { stdout, stderr } = await exec(command, {
        cwd: projectPath,
        timeout: 30000
      });
      return { stdout, stderr };
    }
  },
  WebFetch: {
    description: '获取网页内容',
    function: async (url: string) => {
      const response = await fetch(url);
      return await response.text();
    }
  }
};

// 代理可以真正"看到"和"修改"文件
// 例如：grep hex 颜色值、读取模板、生成图片等

文件系统布局：

复制代码

.od/
├── app.sqlite                 # 项目数据库
├── artifacts/                 # 保存的工件
├── projects/
│   ├── project-1/
│   │   ├── artifact.html      # 生成的工件
│   │   ├── assets/            # 工件资源
│   │   ├── brand-spec.md      # 品牌规范
│   │   ├── tweaks.json        # 调整参数
│   │   └── checkpoint.json    # 检查点
│   ├── project-2/
│   │   └── ...
│   └── project-3/
│       └── ...
└── media-config.json          # 媒体配置（API keys 等）

Windows 友好的生成：

typescript 复制代码

// Windows ENAMETOOLONG 错误的回退
async function spawnAgentWithFallback(agentId: string, cwd: string, prompt: string): Promise<ChildProcess> {
  const MAX_ARG_LENGTH = 32 * 1024; // Windows CreateProcess 限制

  if (prompt.length > MAX_ARG_LENGTH) {
    // 回退到 stdin
    return spawnAgentStdin(agentId, cwd, prompt);
  } else if (prompt.length > MAX_ARG_LENGTH / 2) {
    // 回退到临时文件
    const promptFile = path.join(cwd, '.prompt.txt');
    await writeFile(promptFile, prompt, 'utf-8');
    return spawnAgentFile(agentId, cwd, promptFile);
  } else {
    // 正常的命令行参数
    return spawnAgentArgs(agentId, cwd, prompt);
  }
}

6. 提示栈是产品

Open Design 的第六个核心理念是：提示词栈本身就是产品，需要精心设计和工程化。

提示栈架构：

typescript 复制代码

// 提示栈不是简单的"system + user"
// 而是多层次的复合结构
interface PromptStack {
  // 第 1 层：发现指令
  discovery: {
    turn1Form: string;        // 首次问题表单
    turn2Branch: string;       // 品牌分支逻辑
    todoWrite: string;         // TodoWrite 协议
    fiveDimCritique: string;   // 五维自我批判
  };

  // 第 2 层：身份宪章
  identity: {
    officialDesignerPrompt: string;  // 官方设计师提示词
    antiAISlop: string;              // 反 AI slop 清单
    juniorPass: string;              // 初级设计师模式
  };

  // 第 3 层：活跃的 DESIGN.md
  designSystem: {
    systemId: string;
    color: string;
    typography: string;
    spacing: string;
    layout: string;
    components: string;
    motion: string;
    voice: string;
    brand: string;
    antiPatterns: string;
  };

  // 第 4 层：活跃的 SKILL.md
  skill: {
    skillId: string;
    mode: 'prototype' | 'deck' | 'template';
    platform: 'desktop' | 'mobile';
    scenario: string;
    instructions: string;
    references: string[];
    checklist: string;
  };

  // 第 5 层：项目元数据
  metadata: {
    kind: string;
    fidelity: 'low' | 'medium' | 'high';
    speakerNotes: boolean;
    animations: boolean;
    inspirationIds: string[];
  };

  // 第 6 层：技能边文件（预检注入）
  sideFiles: {
    template: string;      // assets/template.html
    layouts: string;       // references/layouts.md
    components: string;    // references/components.md
    checklist: string;     // references/checklist.md
  };

  // 第 7 层：演示框架指令（仅 deck 模式）
  deckFramework?: {
    nav: string;
    counter: string;
    scroll: string;
    print: string;
  };
}

提示栈组装：

typescript 复制代码

async function composePromptStack(projectId: string, skillId: string): Promise<string> {
  const stack = await buildPromptStack(projectId, skillId);

  const sections = [
    `# DISCOVERY DIRECTIVES\n\n${stack.discovery.turn1Form}`,
    `# IDENTITY CHARTER\n\n${stack.identity.officialDesignerPrompt}`,
    `# DESIGN SYSTEM\n\n${stack.designSystem.color}`,
    `# SKILL INSTRUCTIONS\n\n${stack.skill.instructions}`,
    `# PROJECT METADATA\n\n${JSON.stringify(stack.metadata, null, 2)}`,
    `# SIDE FILES\n\n${stack.sideFiles.template}`,
    `# REFERENCES\n\n${stack.sideFiles.layouts}`
  ];

  if (stack.deckFramework) {
    sections.push(`# DECK FRAMEWORK\n\n${stack.deckFramework.nav}`);
  }

  return sections.join('\n\n---\n\n');
}

应用场景与案例

Open Design 的应用场景非常广泛，涵盖了从个人项目到企业级应用的各种需求。

场景 1：初创公司快速原型

需求：一个 AI 初创公司需要在 24 小时内创建一个种子轮融资演示文稿。

传统方法：

❌ 雇佣设计师：2-3 天，$500-1000
❌ 使用 Figma：1-2 天，需要设计经验
❌ 使用 PowerPoint：1 天，效果不佳

Open Design 方法：

typescript 复制代码

// 1. 选择技能
const skill = 'guizang-ppt';  // 杂志风格 PPT

// 2. 选择设计系统
const designSystem = 'anthropic';  // 使用 Anthropic 的设计系统

// 3. 填写表单
const form = {
  surface: 'deck',
  audience: 'investors',
  tone: 'professional',
  brandContext: 'AI 初创公司，提高开发效率',
  scale: 'mvp',
  constraints: '需要包含市场分析、产品演示、团队介绍、财务预测'
};

// 4. 生成演示文稿
const prompt = `
创建一个种子轮融资演示文稿：
- 杂志风格布局
- 使用 Anthropic 设计系统
- 包含以下部分：
  1. 封面（公司名称、标语）
  2. 问题（我们解决的痛点）
  3. 解决方案（我们的产品）
  4. 市场机会（TAM、SAM、SOM）
  5. 产品演示（核心功能）
  6. 商业模式（如何盈利）
  7. 竞争优势（为什么是我们）
  8. 团队介绍（核心成员）
  9. 财务预测（3 年）
  10. 融资计划（融资额、用途）
`;

// 5. 导出为 PPTX
const pptx = await exportToPPTX(artifact);

结果：

✅ 30 分钟内完成
✅ 专业级设计
✅ 可编辑的 HTML 源码
✅ 导出为 PPTX、PDF

场景 2：企业仪表板设计

需求：一个 SaaS 公司需要一个全新的数据分析仪表板。

Open Design 方法：

typescript 复制代码

// 1. 选择技能
const skill = 'dashboard';  // 仪表板技能

// 2. 选择设计系统
const designSystem = 'linear';  // 使用 Linear 的设计系统

// 3. 填写表单
const form = {
  surface: 'dashboard',
  audience: 'business',
  tone: 'professional',
  brandContext: 'SaaS 数据分析平台',
  scale: 'production',
  constraints: '需要支持暗黑模式、实时数据更新、自定义小部件'
};

// 4. 生成仪表板
const prompt = `
创建一个数据分析仪表板：
- 侧边栏导航
- 顶部搜索栏和用户菜单
- 主要内容区域包括：
  1. 概览卡片（总收入、用户数、增长率、留存率）
  2. 折线图（收入趋势）
  3. 柱状图（用户增长）
  4. 饼图（用户分布）
  5. 表格（最近交易）
- 支持 12 列栅格布局
- 响应式设计（移动端、平板、桌面）
`;

// 5. 生成 HTML + CSS + JavaScript
const artifact = await generateArtifact(prompt, skill, designSystem);

结果：

✅ 1 小时内完成
✅ 生产级代码
✅ 完全可定制
✅ 可直接集成到现有应用

场景 3：移动应用原型

需求：一个社交应用需要创建一个 iOS 原型，用于投资者演示。

Open Design 方法：

typescript 复制代码

// 1. 选择技能
const skill = 'mobile-onboarding';  // 移动引导流程

// 2. 选择设计系统
const designSystem = 'apple';  // 使用 Apple 的设计系统

// 3. 填写表单
const form = {
  surface: 'mobile-app',
  audience: 'consumers',
  tone: 'casual',
  brandContext: '社交应用，连接志同道合的人',
  scale: 'mvp',
  constraints: '需要 3 个屏幕：启动页、价值主张页、登录页'
};

// 4. 生成原型
const prompt = `
创建一个移动应用引导流程：
- iPhone 15 Pro 设备框架
- 3 个屏幕：
  1. 启动页（Logo、标语、加载动画）
  2. 价值主张页（核心功能说明、行动号召）
  3. 登录页（社交登录按钮、条款链接）
- 使用 Apple 设计系统
- 包含状态栏、主页指示器
- 支持滑动交互
`;

// 5. 生成 HTML + CSS
const artifact = await generateArtifact(prompt, skill, designSystem);

结果：

✅ 45 分钟内完成
✅ 像素级准确的 iOS 框架
✅ 真实的设备尺寸
✅ 可交互的原型

场景 4：营销材料生成

需求：一个产品发布需要一套完整的营销材料（社交媒体图形、演示文稿、着陆页）。

Open Design 方法：

typescript 复制代码

// 1. 生成社交媒体轮播
const carouselSkill = 'social-carousel';
const carouselPrompt = `
创建一个 3 卡片社交媒体轮播：
- 1080x1080 像素
- 电影级面板
- 连贯的显示标题
- 品牌标记
- 循环指示器
`;

// 2. 生成着陆页
const landingSkill = 'saas-landing';
const landingPrompt = `
创建一个 SaaS 着陆页：
- Hero 部分（标题、副标题、CTA）
- 特性部分（3 个核心功能）
- 定价部分（3 个计划）
- 评价部分（用户评价）
- CTA 部分（最终行动号召）
`;

// 3. 生成产品演示文稿
const deckSkill = 'guizang-ppt';
const deckPrompt = `
创建一个产品演示文稿：
- 10 张幻灯片
- 杂志风格布局
- 产品功能演示
- 使用案例说明
`;

// 4. 生成营销图片
const imagePrompt = await getImagePromptTemplate('product-reveal');
const image = await generateImage(imagePrompt, { product: 'AI 工具' });

// 5. 生成产品视频
const videoPrompt = await getVideoPromptTemplate('saa-promo');
const video = await generateVideo(videoPrompt, { productName: 'AI 工具', duration: 30 });

结果：

✅ 2 小时内完成全套材料
✅ 风格一致性
✅ 多种格式（HTML、PNG、MP4）
✅ 可直接用于营销活动

与竞品的对比分析

Open Design 不是唯一的开源 Claude Design 替代方案。让我们看看它与主要竞品的对比。

功能对比表

特性	Claude Design (Anthropic)	Open CoDesign	Open Design
许可证	闭源	MIT	Apache-2.0
形态	Web (claude.ai)	桌面 (Electron)	Web 应用 + 本地守护进程
可部署到 Vercel	❌	❌	✅
代理运行时	捆绑 (Opus 4.7)	捆绑 (`pi-ai`)	委托给用户现有的 CLI
技能	专有	12 个自定义 TS 模块 + `SKILL.md`	31 个基于文件的 `SKILL.md` 包
设计系统	专有	`DESIGN.md` (v0.2 路线图)	`DESIGN.md` × 129 个系统
提供商灵活性	仅 Anthropic	7+ 通过 `pi-ai`	12 个 CLI 适配器 + OpenAI 兼容 BYOK 代理
初始问题表单	❌	❌	✅ 强制规则，首次交互
方向选择器	❌	❌	✅ 5 个确定性方向
实时 Todo 进度 + 工具流	❌	✅	✅（来自 open-codesign 的 UX 模式）
沙盒 iframe 预览	❌	✅	✅（来自 open-codesign 的模式）
Claude Design ZIP 导入	N/A	❌	✅ `POST /api/import/claude-design`------在 Anthropic 停止的地方继续编辑
注释模式手术编辑	❌	✅	🟡 部分------预览元素注释 + 聊天附件；可靠的目标修补仍在进行中
AI 发出的调整面板	❌	✅	🚧 路线图------专用聊天端面板 UX 尚未实现
文件系统级工作区	❌	部分（Electron 沙盒）	✅ 真实 cwd、真实工具、持久化 SQLite（项目 · 对话 · 消息 · 标签页 · 模板）
5 维自我批判	❌	❌	✅ 发射前门控
工件 Lint	❌	❌	✅ `POST /api/artifacts/lint`------发现反馈给代理
Sidecar IPC + 无头桌面	❌	❌	**✅ 打印进程 + `tools-dev inspect desktop status
导出格式	有限	HTML / PDF / PPTX / ZIP / Markdown	HTML / PDF / PPTX（代理驱动）/ ZIP / Markdown
PPT 技能复用	N/A	内置	`guizang-ppt-skill` 放入（deck 模式默认）
最低计费	Pro / Max / Team	BYOK	BYOK------粘贴任何 OpenAI 兼容的 `baseUrl`

核心差异

1. 架构差异
Open Design
本地优先
用户 CLI (15+)
文件技能 (31)
可部署到 Web
Open CoDesign
桌面应用 (Electron)
捆绑代理 (pi-ai)
自定义技能 (12)
Claude Design
仅云端
仅 Anthropic 模型
专有技能

2. 技能系统差异

特性	Claude Design	Open CoDesign	Open Design
技能数量	~50（专有）	12	31
技能格式	专有	TypeScript 模块	`SKILL.md` 文件
技能添加	❌ 不可能	✅ 需要编码	✅ 拖放文件夹
技能编辑	❌ 不可能	✅ 需要编码	✅ 编辑 Markdown
技能分享	❌ 不可能	✅ GitHub	✅ GitHub
技能版本控制	❌ 不可能	✅ Git	✅ Git
技能社区	❌ 不存在	✅ 小众	✅ 快速增长

3. 设计系统差异

特性	Claude Design	Open CoDesign	Open Design
系统数量	~10（专有）	~20（路线图）	129
系统格式	专有 JSON	`DESIGN.md`	`DESIGN.md`
系统添加	❌ 不可能	✅ 需要编码	✅ 拖放文件夹
系统编辑	❌ 不可能	✅ 需要编码	✅ 编辑 Markdown
系统分享	❌ 不可能	✅ GitHub	✅ GitHub
品牌系统	❌ 不存在	✅ 部分	✅ 70+
视觉方向	❌ 不存在	❌ 不存在	✅ 5 种

快速开始指南

环境要求

Node.js: ~24
pnpm: 10.33.x
操作系统: Windows、macOS、Linux

安装步骤

bash 复制代码

# 1. 克隆仓库
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 2. 启用 corepack
corepack enable
corepack pnpm --version   # 应该打印 10.33.2

# 3. 安装依赖
pnpm install

# 4. 启动 Web 应用
pnpm tools-dev run web

# 5. 打开打印的 Web URL
# 通常格式为 http://localhost:17573

首次使用

代理检测：守护进程自动检测 PATH 中的代理 CLI
加载资源：加载 31 个技能 + 72 个设计系统
配置 API：弹出欢迎对话框，粘贴 Anthropic 密钥（仅 BYOK 回退路径需要）
自动创建 ：自动创建 ./.od/（本地运行时文件夹）

基本使用

typescript 复制代码

// 1. 选择技能
// 在选择器中选择你需要的技能（例如：web-prototype）

// 2. 选择设计系统
// 在选择器中选择设计系统（例如：vercel）

// 3. 输入提示词
// 在聊天界面输入你的需求
"创建一个现代 SaaS 着陆页，包含 Hero、特性、定价、CTA 部分"

// 4. 填写表单
// 首次交互会弹出发现表单，填写关键信息

// 5. 查看结果
// 工件会在沙盒 iframe 中实时渲染

// 6. 保存到磁盘
// 点击"保存到磁盘"按钮，保存为 HTML、PDF 或 ZIP

高级配置

bash 复制代码

# 使用固定端口
pnpm tools-dev run web --daemon-port 17456 --web-port 17573

# 后台模式
pnpm tools-dev start web

# 查看日志
pnpm tools-dev logs

# 检查状态
pnpm tools-dev status

# 停止所有服务
pnpm tools-dev stop

# 桌面应用
pnpm tools-dev  # 启动守护进程 + Web + 桌面

# 检查桌面状态
pnpm tools-dev inspect desktop status

# 截图
pnpm tools-dev inspect desktop screenshot --path /tmp/open-design.png

行业影响与未来展望

对设计工具行业的影响

Open Design 的出现标志着设计工具行业的一个重大转折点：

1. 从 SaaS 到本地优先

传统 SaaS：Figma、Canva、Adobe Creative Cloud
新趋势：本地优先、数据隐私、离线工作
Open Design：完美体现了这一趋势

2. 从封闭到开放

传统模式：专有格式、锁定生态、高昂订阅
新趋势：开放标准、互操作性、社区驱动
Open Design：Apache-2.0 许可证、开放协议、社区贡献

3. 从工具到平台

传统工具：单一功能、孤立使用
新平台：技能生态、系统集成、可扩展
Open Design：31 个技能、72 个设计系统、15 个代理

对 AI 行业的影响

Open Design 也对 AI 行业产生了深远影响：

1. 模型无关性

打破供应商锁定
支持多种 AI 模型
BYOK 成为标准

2. 提示工程标准化

从艺术到科学
可复用的提示栈
社区最佳实践

3. AI 辅助设计的新范式

从"AI 生成"到"AI 协作"
从"黑盒"到"透明"
从"一次性"到"迭代优化"

未来发展方向

短期（1-3 个月）：

✅ 更多技能（目标：50+）
✅ 更多设计系统（目标：100+）
✅ 改进的 UI/UX
✅ 更好的文档

中期（3-6 个月）：

✅ 技能市场（od skills install <github-repo>）
✅ CLI 工具（od skill add \| list \| remove \| test）
✅ Vercel 部署配方
✅ 打包的 Electron 构建

长期（6-12 个月）：

✅ 企业版（团队协作、权限管理）
✅ 移动应用（iOS、Android）
✅ 插件系统（浏览器扩展、Figma 插件）
✅ AI 训练（自定义模型微调）

常见问题

Q1: Open Design 与 Claude Design 的主要区别是什么？

A: 主要区别在于：

开源 vs 闭源：Open Design 是 Apache-2.0 许可证，Claude Design 是专有的
本地优先 vs 云端：Open Design 在本地运行，Claude Design 在云端运行
模型灵活性：Open Design 支持 15 种 AI 代理，Claude Design 仅支持 Anthropic 模型
可扩展性：Open Design 的技能和设计系统是文件，易于添加和修改
部署选项：Open Design 可部署到 Vercel，Claude Design 不能

Q2: Open Design 是否免费？

A: Open Design 本身完全免费（Apache-2.0 许可证）。但是：

你需要提供自己的 AI API 密钥（BYOK）
如果你使用 Anthropic、OpenAI 等 API，会产生相关费用
你也可以使用免费的本地模型（通过 Ollama 等）

Q3: 我需要会编程才能使用 Open Design 吗？

A: 不需要。Open Design 设计为对非开发者友好：

简单的聊天界面
交互式表单引导
预览和编辑功能
一键导出

但是，如果你会编程，你可以：

自定义技能
修改设计系统
集成到现有工作流
贡献新功能

Q4: Open Design 的输出质量如何？

A: Open Design 的输出质量取决于多个因素：

AI 模型的质量：使用更好的模型（如 Opus 4.7、GPT-4）会产生更好的结果
技能的质量：官方技能经过精心设计和测试
设计系统的质量：品牌级设计系统确保一致性
提示词的质量：清晰的提示词会产生更好的结果

Open Design 的"反 AI slop"机制确保输出不是通用的 AI 生成内容，而是符合设计原则的高质量工件。

Q5: Open Design 可以替代设计师吗？

A: 不可以。Open Design 是一个工具，而不是替代品：

✅ 快速原型设计
✅ 概念验证
✅ 迭代优化
✅ 学习设计原则
❌ 复杂的交互设计
❌ 深度的用户研究
❌ 战略性品牌定位
❌ 创意的艺术表达

Open Design 最适合与设计师协作，而不是替代设计师。

结论

Open Design 代表了 AI 设计工具的一个重要里程碑。它不仅仅是一个 Claude Design 的替代品，更是对整个设计工具行业的一次重新思考。

核心价值：

开放性：Apache-2.0 许可证、社区驱动、透明开发
灵活性：支持 15 种 AI 代理、31 个技能、72 个设计系统
本地优先：数据隐私、离线工作、完全控制
可扩展性：文件技能、Markdown 设计系统、插件架构
质量保证：反 AI slop、五维自我批判、P0/P1/P2 检查清单

对用户的建议：

如果你是一个初创公司，需要快速原型设计，Open Design 是理想的选择
如果你是一个开发者，想要自定义设计工具，Open Design 提供了完美的扩展点
如果你是一个设计师，想要探索 AI 辅助设计，Open Design 提供了强大的工具集
如果你是一个企业，需要保护数据隐私，Open Design 的本地优先架构是最佳选择

行动号召：

立即试用 ：git clone https://github.com/nexu-io/open-design.git
加入社区：在 Discord 上讨论、在 GitHub 上贡献
分享经验：告诉你的朋友和同事
提供反馈：提交 Issue、提出建议、报告 Bug

Open Design：打破 Claude Design 垄断的开源设计革命