上个月 Anthropic 发了 Claude Design，用自然语言描述，直接生成网页、幻灯片、App 界面，截图在 X 上刷了好几天。

我当时第一反应是：这不就是我一直想要的东西吗——不用打开 Figma，不用手写 HTML，说一句话就出来一个能看的页面。

订阅页面打开一看，收费。而且只能用 Anthropic 自己的模型，数据在云端，想私有化部署？没有。

然后过了没几天，GitHub 上出现了一个叫 Open Design 的项目。README 第一行写的是「Claude Design 的本地优先开源替代」。

我把它跑起来用了一周，这篇是完整的安装和上手记录。

跟 Claude Design 比，差在哪、好在哪

说实话，没用过 Claude Design 正式版（没订阅），只能从功能描述上对比。

Open Design 明显的优势是：完全免费、本地运行、数据不出门、支持把 DeepSeek / Gemini / Qwen 这些模型接进来当引擎。对国内用户来说最后这点挺关键，Claude API 在国内用起来麻烦，但 DeepSeek 的 API 直接填进去就能用。

劣势也有：界面还比较粗糙，生成质量对描述的依赖比较重，写得含糊就出来个糊弄人的东西。现在版本迭代很快，每天都有新 PR 合并，这篇基于的是 v0.7.0。

核心差异：

	Claude Design	Open Design
价格	付费	免费
模型	仅 Anthropic	16 种 CLI + OpenAI 兼容接口
数据	上传云端	全本地
部署	云端	本地 / 私有化 / Vercel
开源	否	Apache-2.0
内置设计系统	未知	129 个
内置技能	未知	31 个

值得单独说一下设计系统这件事。129 个不是随便堆的数字——里面有 Linear、Stripe、Vercel、Airbnb、Notion、Apple、Cursor、Supabase、Figma、小红书等真实产品的视觉规范，以 DESIGN.md 格式描述了配色、字体、间距、组件风格。选不同的设计系统，同一段描述生成出来的页面视觉语言会完全不一样。

能生成什么

技能分两大类：

Prototype 模式（27 个）——生成单页 HTML 产物，从落地页到手机界面到 PM 文档都算这一类。比较常用的有：

技能	适合生成
web-prototype	落地页、SaaS 首页、活动页（默认）
saas-landing	Hero + 功能 + 定价的标准营销页
mobile-app	iPhone / Pixel 设备框架内的 App 界面
dashboard	带侧边栏的数据仪表盘
social-carousel	三张 1080×1080 的社交媒体轮播图
magazine-poster	杂志风海报
motion-frames	带 CSS 循环动效的 Hero 区
email-marketing	兼容 table 布局的 HTML 邮件
pm-spec	带目录和决策日志的 PM 需求文档
finance-report	财务摘要
eng-runbook	事故处理手册

Deck 模式（4 个）——水平滑动的演示文稿：

技能	说明
guizang-ppt	杂志风网页 PPT，默认选项，效果最惊艳
simple-deck	极简横滑 deck
replit-deck	产品演示风格
weekly-update	周报格式

除了 HTML，同一个对话界面还能生成图片（接 gpt-image-2）、视频（接 Seedance 2.0）、以及 HTML 转 MP4 的动态展示（HyperFrames）。不过那些需要额外配置对应的 API，这篇先聚焦在网页生成上。

安装

三种方式，按自己情况选。

桌面客户端——最省事

适合就想用、不想配环境的情况。

去 GitHub Releases 页下载，或者直接访问官网：

https://github.com/nexu-io/open-design/releases
https://open-design.ai

macOS 下载 .dmg，双击拖进 Applications；Windows 下载 .exe，双击按提示装。

装完打开，第一次启动是这个样子：

源码运行——开发者或有兼容问题时用

要求：Node.js v24 + pnpm 10.33.x

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

如果用 nvm 管理 Node 版本，先切到 24：

nvm install 24 && nvm use 24

然后安装依赖：

corepack enable
corepack pnpm --version    # 输出应该是 10.33.2
pnpm install

启动：

pnpm tools-dev run web

Docker——部署到服务器或团队共用

要先装好 Docker Desktop（或 Docker + Compose），注意 clone 后要进 deploy 目录：

git clone https://github.com/nexu-io/open-design.git
cd open-design/deploy
docker compose up -d

起来之后确认状态：

docker compose ps

如果需要看日志：

docker compose logs -f

打开浏览器访问 http://localhost:7456：

连接模型

装好之后第一件事是配模型。

点顶栏右侧的齿轮图标，打开 Settings：

进入 Settings → Execution & model，这里会自动扫描电脑上装了哪些 CLI 工具：

目前支持自动检测 16 种：Claude Code、Gemini CLI、Codex、Cursor Agent、Qwen、DeepSeek TUI、GitHub Copilot CLI、Kimi、Hermes、Devin、Kiro、Kilo、Mistral Vibe 等。

没装任何 CLI？用 API Key 直接接也行。

同一页面找到「OpenAI-compatible endpoint」区域，国内用户直接填 DeepSeek：

Base URL : https://api.deepseek.com/v1
API Key  : sk-xxxxxxxxxxxx
Model    : deepseek-chat

也支持 Anthropic、Azure OpenAI、Google Gemini 的原生接口，以及本地跑的 Ollama / LM Studio。

如果刚装了某个工具但列表里没出现，点页面里的「Rescan」按钮重新扫描：

实操：生成一个落地页

环境配好了，走一遍完整流程。

第一步：选模式和设计系统

v0.7.0 桌面版的入口在左侧面板，没有独立的技能下拉了：

• 顶部 Tab 选 Prototype（网页原型）或 Slide deck（幻灯片）

• Design system 点下拉箭头选 Linear

• Target platforms 选 Responsive web

• Fidelity 选 High fidelity

第三步：输入描述，发送

左侧对话框输入：

帮我做一个 AI 写作助手的 SaaS 落地页。
 
包含：
- Hero 区：大标题 + 副标题 + 两个 CTA 按钮
- 3 个功能卡片（智能续写 / 多语言翻译 / 风格迁移）
- 定价：Free / Pro ¥39 / Team ¥99
- Footer
 
风格：Linear，深色，极简

点发送后，注意看——它不会立刻开始生成页面，而是先弹出一个问题表单：

填完表单提交，这时候模型才开始工作：

第四步：等生成

右侧预览区会跟着代码实时渲染，大概 30~60 秒出结果。

生成完毕之后：

第五步：导出

右侧底部点导出：

选「导出 HTML」，拿到一个独立单页文件。

进阶：接入 Cursor，让模型读着设计稿写代码

Open Design 内置了 MCP Server，接进 Cursor 之后可以直接在编辑器里让模型参考设计稿生成组件，省去「导出再粘贴」这一步。

配置方式现在不用手写 json——Open Design 里有内置向导。

在 Open Design 里打开 Settings → MCP server：

以 Cursor 为例，复制页面上的配置片段，粘贴进 .cursor/mcp.json：

重启 Cursor，打开 Chat 面板（Cmd+L），在工具列表里确认 Open Design 已出现：

然后直接在 Chat 里说「参考当前 Open Design 项目的设计风格，帮我写一个 React 导航组件」：

常见报错

Claude Code 没被检测到

终端执行：

claude --version
claude auth status --text

如果显示 401 或 apiKeySource: "none"，需要重新登录：

claude    # 进入交互模式后输入 /login 重新授权，退出后重启 Open Design

docker compose up 失败

先确认 Docker 本身在跑，同时确认你在 open-design/deploy 目录里而不是项目根目录：

docker info
pwd    # 应该显示 .../open-design/deploy

pnpm install 卡住或报错

先查版本：

node --version    # 要是 v24.x
pnpm --version    # 要是 10.33.x

最后

用下来的感受：生成网页原型这件事，比我预期的好用。选个好看的设计系统，描述写清楚，出来的东西比大多数人随手写的 HTML 好看多了。另外问题表单这个设计挺务实的——生成前先把模糊的需求问清楚，确实比直接开干少走弯路。

不好用的地方是：越想精细控制就越费劲，复杂交互逻辑基本还得手改，更像个「快速出图」工具，不是「完整交付」工具。

项目地址：https://github.com/nexu-io/open-design