Open Design：开源AI设计框架，连接现有编程智能体

为什么需要一个开源的设计替代方案

Cloud Design 的核心理念很有吸引力——不让 AI 模型纸上谈兵，而是直接产出可预览的设计成品，包括原型、演示文稿、移动端界面和各类视觉页面。但问题在于，Cloud Design 依然闭源收费，深度绑定在 Anthropic 生态系统中，想要私有化部署、接入 Codex、Cursor 智能体、Gemini CLI 或在本地运行设计工作流，基本无法实现。

Open Design 正是为解决这一痛点而生。它是一款本地优先、Apache 2.0 协议开源的设计应用，核心思路不是重新造一个 AI 智能体，而是直接连接你已有的编程智能体——Claude Code、Codex CLI、Cursor Agent、Gemini CLI、Open Code、Q1 Code 等，以它们作为设计引擎。

关于 Apache 2.0 协议：Apache 2.0 是目前企业级开源项目中最受欢迎的许可证之一。与 GPL 系列许可证不同，它允许用户在商业产品中自由使用、修改和分发代码，无需开放衍生作品的源代码，同时提供明确的专利授权条款。这使得私有化部署成为可能——企业可以在内网环境中运行和修改代码，无需担心法律合规风险。相比之下，Anthropic 的 Cloud Design 作为闭源 SaaS 产品，用户数据和工作流完全托管在第三方服务器上，这对有数据主权要求的金融、医疗或政府机构而言是根本性障碍。

换句话说，如果你已经在为编程智能体付费，就没必要为了生成 UI 素材再额外订阅一个设计服务。成本完全取决于你所使用的模型和智能体配置。

19种可组合技能与71套设计系统

技能系统：告别「帮我做个好看的页面」

Open Design 不是一个带预览面板的空白聊天框。它内置了 19 种可组合的技能，覆盖了绝大多数常见设计场景：

• 网页类：SaaS 落地页、仪表盘、定价页、文档页、博客
• 移动端：移动应用界面
• 展示类：简易幻灯片、杂志封面版式
• 工作模板：PRD、设计框架、周报、会议纪要、运维手册
• 商务类：财务报表、发票、看板、OKR

每项技能会为智能体设定明确的规则约束。比如选择「仪表盘」技能，模型会偏向生成数据密集型的管理后台界面；选择「杂志封面」，则会遵循相应的排版规范。这种结构化的约束机制，正是 AI 设计工具所需要的核心架构。

编程智能体 CLI 的工作原理：Claude Code、Codex CLI、Cursor Agent 等编程智能体本质上是具备文件系统操作能力的 AI 代理程序。它们不仅能生成代码片段，还能读写本地文件、执行终端命令、管理项目结构，形成完整的「感知—规划—执行」闭环。这类工具通常通过标准输入输出（stdin/stdout）或本地 Socket 与宿主程序通信，Open Design 正是利用这一特性，将守护进程作为调度层，把设计任务分解为智能体可执行的文件操作序列，而非仅仅获取文本回复。这种架构的优势在于输出物是真实的项目文件，而非存在于对话上下文中的临时代码块。

Design.md 设计系统：71套规范开箱即用

AI 生成的界面之所以常常显得廉价，并非模型写不出 CSS，而是缺乏稳定的视觉系统——没有约束、没有检查清单，反复生成千篇一律的卡片布局。

Open Design 通过 Design.md 设计系统解决这一痛点。Design.md 本质上是一套纯 Markdown 格式的设计规范，涵盖色彩、排版、间距、布局、组件、动效、语调、品牌规则及反模式等内容。项目内置了 71 套设计系统，灵感源自 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Anthropic、Apple 等知名品牌，以及 Cursor、Supabase、Figma、Raycast、Spotify、Webflow 等工具。

Design.md 与设计令牌系统：Design.md 的核心思想与前端工程中的「设计令牌（Design Tokens）」概念高度相关。设计令牌是将视觉决策（颜色、间距、字体大小、圆角半径等）抽象为命名变量的系统，最早由 Salesforce Lightning Design System 推广，后被 Figma、Tailwind CSS 等工具广泛采用。传统设计令牌以 JSON 或 CSS 变量形式存在，而 Design.md 将这套规范转化为大语言模型可直接理解的自然语言格式。这一转化至关重要：LLM 在处理结构化 Markdown 时，能够将视觉规则内化为生成约束，而非仅仅作为参考文档。71 套设计系统本质上是 71 份经过精心标注的「视觉语言词典」，让模型在生成 CSS 和 HTML 时有明确的参照系，而非依赖训练数据中的统计平均值。

你不需要再说「让界面简洁」或「更有现代感」这种模糊指令，直接选择 Linear 或 Stripe 风格，设计就会遵循特定的视觉语言体系。

方向选择器与需求发现表单

先锁定方向，再开始生成

如果你没有预设品牌，Open Design 会通过方向选择器让你从五种视觉方向中选择：

1. 杂志风 —— 现代极简
2. 科技风 —— 实用主义
3. 野兽派 —— 大胆前卫
4. 柔和温暖风 —— 亲和友好
5. 现代极简 —— 干净利落

模型在构建前就已确定色板、字体和视觉方向，而非凭空猜测。

需求发现表单：30秒省下30分钟

当你输入设计简报时，Open Design 的提示词栈会优先输出一份需求发现表单，而不是直接生成代码。表单会询问视觉表现、受众、品牌基调、应用场景、规模及约束条件。

这听起来微不足道，但实际上非常关键。如果模型在还没搞清目标受众、品牌基调和应用场景前就开始构建，你往往需要再写十个提示词去修正最初那个错误的方向。花 30 秒回答问题，能省下 30 分钟的返工时间。

完成这些步骤后，智能体会制定执行计划，进度实时显示在界面上，随后生成最终设计成品。

底层架构与本地部署方案

简洁精妙的技术实现

Open Design 的技术架构设计非常清晰：

• 前端：Vite + React + TypeScript
• 后端：基于 Node 构建，通过 SQLite 守护进程管理项目、对话、消息及标签页
• 工作机制：守护进程拥有系统权限，负责启动你选择的 AI 智能体，并在本地目录下创建项目文件夹

技术栈选型逻辑：Vite 基于原生 ES 模块的开发服务器启动速度比 Webpack 快 10–100 倍，对于需要频繁预览生成结果的设计工具而言，冷启动延迟直接影响使用体验。React 的组件化模型便于将「技能选择器」「方向选择器」「实时进度面板」等功能模块独立开发和维护。TypeScript 的静态类型系统在处理