不用交一分钱月费，让 AI 设计彻底自由——你本地的编码代理就能做到

🔍 发现问题：云端设计的美好与枷锁

2026 年 4 月，Anthropic 推出 Claude Design，震惊了整个设计圈。用户只需在聊天框里输入需求，就能得到一个完整、可交互的 HTML 设计稿。听起来像是未来？

但现实给了所有开发者一记闷棍：Claude Design 仅对 Pro/Max/Team 付费用户开放，且处于预览阶段，需要管理员手动开启。更糟糕的是，你的所有设计数据都必须上传到 Anthropic 的云端，生成逻辑完全被锁死在一家公司的模型上。你无法换用 GPT-5、Gemini 2.0，也无法让数据保存在自己的服务器里。

当一个工具用“便利”把你圈入付费墙，再用“封闭”阻止你离开——这已经不再是工具，而是牢笼。

🔊 找到工具：开源社区的暴力反击

就在 Claude Design 发布后不久，GitHub 上出现了一个名为 Open Design 的项目（nexu-io/open-design）。它没有选择从头训练一个 AI 模型，而是走了一条更聪明、更暴力的路径：

不创建新的 AI 代理，而是让你电脑上已有的编码代理（Claude Code、Codex、Cursor Agent、Gemini CLI 等）直接变身设计狂魔。

项目发布仅一周就收获了超过 1.5k stars，被开发者称为“Claude Design 的真正开源杀手——甚至更强”。

🚀 介绍工具：Open Design 是什么？

Open Design 是一个本地优先的 Web 应用，可以部署在 Vercel 上，也可以直接在本地运行（pnpm dev）。它的核心是一个 Prompt Stack（提示词堆栈）：当你输入“帮我设计一个 SaaS 定价页”后，AI 不会立刻生成，而是依次走完五个阶段：

1. 交互式需求确认 – 弹出一个问题表单，引导你明确目标、受众和风格偏好。
2. 方向推荐 – 从 5 个预置的视觉方向中推荐最合适的一个，你也可以手动调整。
3. 计划生成 – 在 UI 中显示一张 TodoWrite 计划卡片，同时在本地磁盘真实创建项目文件夹（含种子模板、布局库等）。
4. 强制自检 – AI 自动执行 Pre-flight 检查，按五维标准（一致性、可访问性、响应式等）评审自己的输出。
5. 最终输出 – 生成一个完整的 HTML 代码块，在沙箱 iframe 中即时预览。

这一切都在你的本地设备上完成，无需上传任何数据到第三方云端。

💎 核心优点 & 实现逻辑

① BYOK（自带密钥）与模型中立

Open Design 不做自己的 AI 代理，而是调用你本地已有的编码代理（Claude Code、Codex、Cursor Agent、Gemini CLI、OpenCode、Qwen 等）。你自带的 API Key 或本地模型直接驱动整个流程。这意味着你永远不需要为“Open Design 本身”付费，也永远不会被某个模型供应商锁定。

② 19 个可组合技能 + 71 个品牌级设计系统

项目内置了 19 个 Skill 模块（例如：生成 PPTX、仪表盘、落地页、SVG 图表等）和 71 个 Design Systems（包含 Stripe、Notion、Vercel 等品牌的设计 Token）。你可以像搭积木一样组合这些模块，AI 会按照真实的品牌设计规范生成产物，而不是随意“猜测”。

③ “前置化”设计流程（杜绝 AI 幻觉）

大多数 AI 设计工具都是一次性生成，错了就全部重来。Open Design 通过 强制性的自检清单 和 分步计划卡片，把设计师的质量审核习惯编码进了工作流。生成的每个设计都经过一致性、可访问性、响应式、性能和品牌对齐的验证——这不再是“AI 随便画个草图”，而是能直接交付的成品。

④ 本地运行 + 可选云端部署

你可以用 pnpm dev 在本地完全离线使用所有功能，也可以一键部署到 Vercel。无论哪种方式，所有设计历史、生成代码、配置文件都保存在你控制的地方，你的数据永远是你的。

🛠️ 安装教程（5 分钟上手）

第一步：环境准备

确保你的电脑上已安装：

• Node.js（v18 或更高）
• pnpm（npm install -g pnpm）
• 一个支持的编码代理（例如 Claude Code：npm install -g @anthropic-ai/claude-code）

第二步：克隆项目

git clone https://github.com/nexu-io/open-design.git
cd open-design

第三步：安装依赖并启动

pnpm install
pnpm dev:all

这条命令会同时启动守护进程（端口 7456，负责与你的编码代理通信）和前端开发服务器（端口 5173）。

第四步：开始你的第一个设计

打开浏览器访问 http://localhost:5173。在输入框中尝试：

“做一份面向种子轮投资者的单页产品介绍，风格现代、深色主题、包含定价卡片和 FAQ。”

你会依次看到：

• 一个弹窗让你确认设计细节
• 一张实时的 TodoWrite 计划卡片
• 几秒钟后，一个完整的 HTML 设计稿出现在预览区

第五步：导出产物

点击“Export”按钮，可以将当前设计保存为 HTML（独立文件）、PDF 或 PPTX。所有文件均可直接用于展示或二次开发。

🌈 结束语：把设计权还给开发者

Open Design 不是 Claude Design 的廉价克隆，而是一次 设计工具民主化 的暴力实验。它证明了：不需要订阅费、不需要供应商锁定、不需要把数据交给云端——用你本地的编码代理和一套优秀的技能模块，同样能生成高质量的设计产物。

如果你也厌倦了每个月为十几个工具续费、担心数据泄露、被单一模型绑架——现在就去 GitHub 下载，亲手运行它。设计本应自由，而自由，已经在你的终端里等待。

开源地址：github.com/nexu-io/open-design/