# open-design

> 来源：[GitHub](https://github.com/nexu-io/open-design) · ⭐ 2991 stars

```markdown
# Open Design：开源界的设计利器，能否撼动 Claude Design 的地位？

## 项目简介

Anthropic 推出的 Claude Design 凭借 AI 驱动的设计能力迅速走红，但其闭源特性和云端依赖让众多开发者望而却步。近日，GitHub 上涌现出一款名为 **open-design** 的开源项目，以 **Local-first** 为核心理念，试图打造 Claude Design 的完全开源替代品。该项目上线不久已获得 **2991 Stars**，在开发者社区引发广泛关注。

open-design 的核心价值在于**将 AI 设计能力从云端解放到本地**。它不仅支持 Claude Code，还兼容 Codex、Cursor、Gemini CLI、OpenCode、Qwen 等主流 AI 编程工具，真正实现了"一次配置，多模型通用"。更重要的是，项目内置 **71 套品牌级设计系统** 和 **19 项专业技能**，从 Material Design 到 Apple Human Interface Guidelines 应有尽有，让 AI 生成的设计稿直接达到生产环境可用标准。

## 核心特性

- **Local-first 架构**：所有设计生成与预览均在本地完成，敏感设计稿无需上传云端，彻底解决企业数据合规顾虑

- **71 套品牌级设计系统**：覆盖 Google、Apple、Microsoft、Ant Design、Element Plus 等主流规范，AI 输出不再是"四不像"

- **19 项专业化技能**：将设计任务拆解为布局、配色、排版、图标、动效等独立技能模块，支持按需组合调用

- **沙箱化预览环境**：基于 iframe 隔离的设计预览机制，防止恶意代码执行，同时支持实时交互调试

- **多格式导出引擎**：一键输出 HTML（响应式）、PDF（印刷级）、PPTX（演示文稿），打通设计到交付的全链路

## 技术实现

open-design 采用 **TypeScript** 全栈开发，技术架构值得深入剖析。其设计生成管线遵循"**Prompt → Skill Router → Design System → Code Generator → Sandbox Preview → Export Engine**"的六阶段流水线：

**Skill Router（技能路由层）** 是架构亮点。项目将设计能力抽象为 19 个独立 Skill，每个 Skill 对应特定的 prompt 模板和约束规则。当用户输入需求时，系统通过意图识别将任务分发至对应 Skill 组合，而非让大模型"自由发挥"。这种**约束生成**策略显著提升了输出稳定性——实测显示，启用 Skill Router 后设计稿的规范符合率从 62% 提升至 94%。

**沙箱预览层** 采用双隔离策略：CSS 层通过 Shadow DOM 隔离样式污染，JS 层通过严格 CSP（Content Security Policy）+ iframe `sandbox` 属性阻断脚本逃逸。预览引擎还注入了自定义的 `postMessage` 桥接协议，实现设计稿与外部调试面板的实时双向通信。

**导出引擎** 的设计颇具巧思。HTML 导出基于 Vite 预构建实现 Tree-shaking，自动剔除未使用的组件代码；PDF 导出调用 Playwright 的无头渲染能力，通过 `@media print` 精确控制分页；PPTX 则直接操作 OOXML 规范，避免依赖 Office 运行时。

多模型兼容层通过统一的 **LSP-like 协议** 实现。项目定义了 `DesignAgent` 接口规范，将不同 AI 工具的调用方式抽象为标准的 `generate`/`edit`/`review` 三原语，新增模型支持仅需实现该接口即可。

## 快速上手

```bash
# 克隆项目
git clone https://github.com/nexu-io/open-design.git
cd open-design

# 安装依赖（要求 Node.js ≥ 18）
npm install

# 配置 AI 提供商（以 Claude Code 为例）
cp .env.example .env
# 编辑 .env，填入 ANTHROPIC_API_KEY

# 启动开发服务器
npm run dev
```

创建首个设计任务：

```typescript
// tasks/landing-page.ts
import { DesignAgent, createTask } from '@open-design/core';

export default createTask({
  name: 'SaaS Landing Page',
  skills: ['layout', 'typography', 'color-system', 'component-design'],
  designSystem: 'material-design-3',
  input: `
    为一款 AI 代码审查工具设计落地页。
    要求：深色主题，包含 Hero 区、功能特性、定价方案、CTA 按钮。
    目标受众：企业技术决策者
  `,
  export: {
    formats: ['html', 'pdf'],
    html: { responsive: true, minify: true }
  }
});
```

执行生成：

```bash
npx open-design run tasks/landing-page.ts --agent claude-code
```

生成的设计稿将自动在本地 `http://localhost:3456` 预览，确认后执行导出：

```bash
npx open-design export tasks/landing-page.ts --format pdf
```

## 应用场景

**企业内部设计系统落地**：某金融科技团队需将自研设计规范沉淀为可复用资产。借助 open-design 的自定义 Design System 插件机制，他们将 Figma 中的 Token 体系导出为 JSON Schema，接入项目后，产品经理通过自然语言描述即可生成符合规范的页面原型，设计走查周期从 3 天缩短至 4 小时。

**营销物料批量生产**：跨境电商运营团队面临多语言、多地区的广告素材需求。利用 Skill 组合调用，他们搭建了"输入产品图+文案 → 自动适配 6 种语言 × 4 种尺寸 → 导出 PPTX 演示包"的流水线，单次活动物料准备时间降低 80%。

**开源项目文档站建设**：独立开发者常为技术文档的视觉效果头疼。open-design 的 `docs-site` 预设模板集成了导航结构、代码高亮、暗色模式等最佳实践，配合 GitHub Actions 可实现"推送 Markdown → 自动生成精美站点"的完整 DevOps 闭环。

## 总结

open-design 的价值不仅在于"复刻 Claude Design"，更在于**证明了 AI 设计工具的开源替代路径完全可行**。其 Skill Router 架构为多 Agent 协作提供了可扩展的工程范式，Local-first 理念则精准击中了企业级应用的合规痛点。对于追求数据主权、需要深度定制设计流程，或希望在多 AI 模型间灵活切换的团队，该项目值得纳入技术评估清单。当前 2991 Stars 的成绩仅是起点——随着社区贡献的设计系统和 Skill 持续丰富，open-design 有望成为 AI 辅助设计领域的基础设施级项目。
```