Open Design

Open Design (OD) 是一个开源的 Web 应用，旨在复刻 Anthropic Claude Design 的核心体验——即“Artifact-first”的设计交付模式，但彻底打破了其闭源、云端绑定和模型锁定的限制。

OD 不内置 AI Agent，而是作为一个技能驱动的设计工作流外壳，直接调用你本地已安装的 Coding Agent（如 Claude Code, Codex, Cursor Agent, Gemini CLI, OpenCode, Qwen 等）。它通过本地 Daemon 进程管理文件系统交互，结合 19 个可组合 Skills 和 71 套品牌级 Design Systems，让你能在本地或 Vercel 上部署属于自己的“AI 设计总监”。

核心理念：BYO-Agent & Local-First

• 不造轮子，只造轨道：OD 认为你笔记本上最强的 Coding Agent 已经足够优秀。它的任务是提供一套标准化的设计哲学、品牌规范和自检流程，让通用 Agent 像高级设计师一样工作。
• 完全开源与自托管：支持 pnpm dev 本地运行或一键部署到 Vercel。每一层都支持 BYOK (Bring Your Own Key)，数据存储在本地 SQLite 中，隐私完全可控。
• Skill 即文件：遵循 Claude Code 的 SKILL.md 规范，新增一个设计能力只需添加一个文件夹，重启 Daemon 即可生效。

核心功能与资产

1. 19 个内置 Skills

覆盖从原型设计到办公文档的全场景，每个 Skill 都包含 SKILL.md、资产库及自检清单：

2. 71 套品牌级 Design Systems

基于 awesome-design-md 标准，将 Linear, Stripe, Vercel, Apple, Tesla, Notion 等顶级产品的设计语言转化为可移植的 Markdown (DESIGN.md)。

• 即时切换：在下拉菜单中选择 System，Agent 将自动读取对应的色板、字体、间距和组件规范。
• 反 AI Slop：内置“反廉价感”检查清单，确保输出具备专业设计的克制与质感。

3. 初始化问题表单 (Discovery Form)

借鉴 huashu-design 的“初级设计师”工作流，在生成第一个像素前，强制 Agent 通过表单确认：

• 视觉调性：从 5 大流派（Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm）中选择。
• 品牌上下文：受众、规模、约束条件。
• 目的：用 30 秒的勾选项锁死方向，避免后续昂贵的返工。

技术架构：六个底层设计

1. Agent agnostic：Daemon 启动时扫描 PATH，自动适配 claude, codex, cursor-agent 等 CLI。若无 CLI，则通过 Anthropic API (BYOK) 兜底。
2. Skill 是文件：每个 Skill 是一个遵循规范的文件夹，包含 assets/ 和 references/，易于 Fork 和扩展。
3. Design System 是 Markdown：摒弃 JSON Theme，采用 9 段式 DESIGN.md，使设计令牌对人类和 AI 都可读、可编辑。
4. Discovery First：强制前置需求澄清，结合品牌资产协议（定位 -> 下载 -> grep hex -> 写 spec），确保输出有据可依。
5. Daemon 与真实文件系统：Agent 在 .od/projects/<id>/ 目录下拥有真实的 Read/Write/Bash 权限，能直接操作文件、生成图片、打包 ZIP/PDF。
6. 提示词栈即产品：动态拼装 Discovery 指令、身份宪章、激活的 Design/Skill 规范及项目元数据，形成确定性的输出契约。

快速开始

1. 环境准备

• Node.js & pnpm
• 至少安装一个 Coding Agent CLI (如 npm install -g @anthropic-ai/claude-code)

2. 安装与运行

git clone https://github.com/nexu-io/open-design.git
cd open-design
pnpm install
pnpm dev:all

• daemon 将运行在 :7456
• Vite 前端将运行在 :5173

3. 首次使用

1. 打开 http://localhost:5173。
2. 系统自动检测 PATH 中的 Agent CLI。
3. 输入需求（如：“帮我做一份杂志风的种子轮 pitch deck”）。
4. 填写弹出的 Discovery Form。
5. 观察 Todo 卡片流动，等待 Artifact 在沙盒 iframe 中渲染。
6. 点击 Save to disk 或将整个项目导出为 ZIP。

4. 数据管理

所有数据存储在根目录下的 .od/ 隐藏文件夹中（已 gitignore）：

• app.sqlite: 项目、对话、消息记录。
• projects/<id>/: 每个项目的真实工作目录，也是 Agent 的 cwd。
• artifacts/: 保存的历史渲染版本。