Claude绝对不想让你知道这个开源免费平替 ｜OpenDesign 8000字保姆级教程

最近有一个工具让我有点上头，而且越用越停不下来，越用越觉得这个工具太牛逼了，必须写一篇详细教程安利给大家。

它叫 Open Design。

如果你用过 Claude Design，你大概知道我在说什么。

Claude Design 是 Anthropic 4 月 17 日推出的一款 AI 驱动设计工具，搭载 Claude Opus 4.7，能帮你快速做产品原型，而且生成出来的设计效果非常哇塞。

但它有一个老生常谈的问题：贵。

你哪怕订了 20 美金甚至 100 美金的版本，基本上创建不了两个项目，周额度就用光了。

而且它只能接 Claude 自己的订阅，没有别的选择。

更让人失望的是，它上线快一个月了，几乎没有任何更新，感觉像是发布完就搁那儿了。

然后在 Claude Design 上线仅仅 11 天之后，开源社区给出了一记响亮的回答。

Open Design，于 4 月 28 日在 GitHub 上正式发布，6 天内突破 2 万 Star，目前已经近 5 万。

至于为什么这么火爆，看看 Open Design 制作的成品效果就知道了。

社交媒体矩阵数据追踪器：

产品官网：

杂志风的 PPT：

手机 App 界面：

效果完全不输 Claude Design。

Anthropic 花了数月时间打造 Claude Design，社区用了 11 天建好了它，而且是免费的、开源的。

今天这篇文章，我就带大家完整走一遍 Open Design 的使用流程。从它是什么到怎么安装，从怎么做原型到怎么改细节，每一步都会讲清楚，新手也能跟着做。

内容不少，但都是干货，一步都不跳。废话不多说，直接开始。

Open Design 是什么

先说清楚它是什么，再讲怎么用。

Open Design 本质上是一个本地优先、开源免费的 AI 设计工具。它做的事情跟 Claude Design 一样，帮你把一段文字描述变成可运行的网页原型、PPT、移动端界面、视觉物料但它的运行方式完全不同。

Claude Design 把 AI 模型锁死在 Anthropic 的服务器上，你只能用 Claude 的额度，花 Claude 的钱，在 Claude 的平台上用。

Open Design 则不同，它是一个设计工作流的壳，把你本机已经装好的 AI Agent，比如 Claude Code、Codex CLI、Cursor Agent、Gemini CLI 等，让这些 Agent 能像专业设计师一样产出设计成果。

用一句话概括：

Open Design = 你已有的 AI Agent + 专业设计工作流 + 品牌级设计体系 + 内置自我审查机制

你已经订了 Codex？那你用 Open Design 基本上就是无限用，不需要额外花一分钱。

你用的是 Cursor Agent？也行。你用 Claude Code？完全可以。它支持 16 种主流 CLI 工具自动识别接入。

除了接 CLI，它还内置了 OpenAI 兼容的 BYOK 代理，填入 baseUrl + apiKey + model 就能用，支持 Anthropic、DeepSeek、OpenRouter，甚至 Ollama 本地模型，无论你的 AI 预算是多少，它都能找到适合你的路。

再说说它的设计体系。

这些是 Open Design 真正值钱的地方。里面包含 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小红书等一线科技和消费品牌的设计语言，每套都带完整的颜色 Token、排版规范、间距系统、组件库和动效规范。

这意味着你不需要懂设计，只要告诉它我要做一个 Cursor 风格的 AI 工具官网，它就能自动套用完整的 Cursor 设计语言，出来的效果和真正的产品设计师做的几乎没有差距。

还有一个值得专门提的功能，叫 Critique Theater（设计评审机制）。

这是一个由五个虚拟设计评审组成的质检机制，每次生成内容之前，会对可及性、品牌贴合度、工艺、满足度、结构五个维度打分，如果任意维度低于阈值，AI 会自动修改并重新评分，直到通过才会把结果给你看。

换句话说，它除了生成之外，还会评估自己的输出并迭代，直到达标为止。

记住，这一点，才是它真正超越普通 AI 生成工具的地方。

二、安装配置：两种方式，十分钟以内搞定

Open Design 有两种使用方式，我都讲一遍，你根据自己的情况选。

方式一：电脑客户端（推荐新手）

这是最简单的方式，下载一个安装包，双击安装，完成。

第一步：打开官网：open-design.ai

大概感受一下它的设计审美，然后找到下载跳转页。

第二步：跳转到 GitHub 下载页

点击 Download 之后会跳到 GitHub 的 Releases 页面。往下滚，你会看到 macOS 版本和 Windows 版本。

今天我们以 Windows 版本为例演示。

第三步：安装并打开

下载完成后双击安装包，按照提示完成安装。打开客户端，你会进入主界面。如果你是新用户，设计区域是空的，什么都没有，这完全正常，接着走下一步。

第四步：配置你的 Agent（最关键的一步）

打开设置，找到 Agent / CLI 配置区域。这里要选择你想让 Open Design 调用的 Agent。如果你已经有了某个 CLI 工具，按下面的对应关系配置：

装了 Claude Code → 选择 Claude Code

装了 Codex CLI → 选择 Codex CLI

装了 Cursor Agent → 选择 Cursor Agent

装了 Gemini CLI → 选择 Gemini CLI

配置完成后，点击测试连通性，如果提示连接成功，你就可以正常使用了。

如果你一个 CLI 都没装，也完全没关系。Open Design 内置了 OpenAI 兼容的 BYOK 代理，只需要填入三个参数就能用：

baseUrl：你的 API 服务地址

API：你的 API 密钥

model：你想使用的模型名称

支持 Anthropic、DeepSeek、Groq、OpenRouter、自托管 vLLM，甚至 Ollama 本地模型都可以接入。

也就是说，你只要有任意一个 AI API 账号，就能让 Open Design 跑起来，剩下的就看各个模型的能力了。

整个安装和配置流程，前后大概十分钟以内可以搞定，即便是完全没有技术背景的新手，也能顺利完成。

方式二：从源码运行（适合开发者）

如果你是开发者，想要自己编译或者二次开发，可以选择从源码运行。把下面三行命令依次输入终端：

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

这个方式相对复杂一些，如果在配置环境这个步骤遇到问题，可以把报错截图发给你在用的 AI Agent（比如 Codex），让它帮你解决，或者你直接把今天这篇文章丢给你的龙虾也好，爱马仕也罢，都行，就让它看，让它去装。

Open Design 能做哪些事

安装完成、Agent 配置好之后，我们来认识一下 Open Design 的主界面，搞清楚它到底能做什么。

打开客户端，你会看到主界面上有几个核心功能区域。Open Design 能做的事情，比大多数人想象的要多：

1. 原型图（Prototype）

这是目前完成度最高、最值得掌握的核心功能。

你可以用自然语言直接口喷，Open Design 会生成完整的 HTML/CSS 网页原型，包含真实交互逻辑，能在浏览器里直接跑。

注意，不是截图，不是静态图片，是真的可以点击、有交互效果的网页。

2. 幻灯片（Slides）

可以生成杂志风格的 PPT 幻灯片。如果你见过那种排版精美、视觉冲击力强的产品 Deck，它基本上就能做到这种水准。输入你的主题和内容要点，它会自动生成完整的幻灯片结构和视觉设计。

3. 实时制品（Live Artifacts）

这个功能是直接开发真实项目用的，生成的不是原型，而是可以直接集成到真实代码库里的代码。

不过这个功能目前还是 Beta 版，整体效果还不如原型稳定，等它成熟了之后会是非常强大的功能，目前建议先了解一下即可。

4. 媒体生成（图片 / 视频）

Open Design 内置了三大主流媒体生成模型：

gpt-image-2：用于生成海报、信息图等图片素材

字节跳动 Seedance 2.0：生成电影感短视频

HeyGen 开源的 HyperFrames：配有 93 个开箱即用的提示词模板

当然，使用这些媒体生成功能需要自己配置对应的 API Key。

如果你有相关账号，可以在设置里填入；如果暂时没有，跳过这部分完全不影响原型图功能的使用。

5. 丰富的技能（Skills）

Open Design 内置了大量可组合的技能模块，涵盖排版优化、色彩方案、动效设计、响应式布局等各个维度。

另外，可以看到在界面右边，原型图、实时制品、幻灯片、媒体生成（图片 / 视频）都有丰富且优质的模板案例。

每个模板都配有详细的提示词，可以直接拿来用，对新手来说非常友好，不知道怎么写提示词？没关系，先看看模板是怎么写的，照着改就行。

实战：做一个网页原型

现在进入最重要的部分：实际操作。我带大家完整做一遍原型图，每一个步骤、每一个选项我都讲清楚，包括为什么这样选、不同选项意味着什么。

Step 1：新建原型，填写基本信息

在创建页面，项目名称随便起一个，能让你自己认出来就行。

Step 2：选择设计体系（Design System）

这是整个配置里最值得花时间理解的一个选项。很多人看到设计体系这个词就觉得高大上、不好理解，但其实说白了就是一套提前约定好的产品设计规范。

一套完整的设计体系包含三个核心要素：

基础视觉规范：颜色、字体、间距、圆角、阴影这些最底层的规则，决定了整体视觉风格

组件库：按钮、表单、卡片、导航栏这些可以反复复用的 UI 积木块

使用规范：什么场景用什么组件，用多少，怎么组合，有没有禁止事项

有了这三个要素，才叫一套完整的设计体系。

Open Design 目前内置了超过 140 种设计体系，包括 Claude 风格、Ant Design 风格、Hugging Face 风格、MiniMax 风格，以及 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma、小红书等一线品牌的设计语言。

这里要提醒一点：这些设计体系并不是完整的企业级设计系统，更准确的说法是风格模板，它帮你快速起步，对快速做原型来说已经完全够用了。

选哪个？我给新手一个简单粗暴的建议：如果你没有特别明确的方向，直接找一个你觉得视觉风格漂亮的大厂品牌，照着选。

比如说用 Cursor 风格做科技感网站、用 Stripe 风格做金融产品页、用 Linear 风格做工具类产品，一般不会错。

Step 3：选择目标平台（Target Platform）

这个选项决定你要做的是什么平台的界面：

Responsive Web：响应式网页，可以根据屏幕宽度自动调整布局，适配桌面端和移动端。这是最常用的选项。

Desktop：专门针对桌面端优化的界面，不会随屏幕缩小自动调整布局

iOS：针对 iPhone 屏幕尺寸和交互规范的移动端界面

Android：针对安卓屏幕的移动端界面，遵循 Material Design 规范

不确定选哪个？大多数情况下，选 Responsive Web 就对了。

Step 4：配套界面开关

这里有两个可选的开关：

Include landing page：是否同时生成一个介绍/入口页

打开之后通常会多一个像官网首页、产品介绍页、欢迎页之类的额外页面。如果你只是想生成主要应用界面，关着就行；如果你想要一个完整的产品展示，可以打开。

Include OS widgets：是否同时生成系统小组件风格的界面

比如手机桌面小组件、状态卡片、快捷信息块这类更像操作系统组件的东西。一般新手用不到，保持关闭即可。

Step 5：选择精度线框图 vs 高保真原型

这是最后一个关键选项。

线框图（Wireframe）：只有基本的布局和结构，没有颜色和精细视觉，适合产品方向还没想清楚、只是想梳理页面结构和交互逻辑的阶段

高保真原型（High-fidelity）：完整的视觉设计，颜色、字体、图片、动效全部到位，看起来接近真实产品

建议：大部分情况下直接选高保真。高保真更直观，更容易发现问题，也更有成就感，能让你一眼看出最终效果是否符合预期。

配置全部填好之后，点击创建，进入对话页面。

Step 6：描述你的需求（关键！）

进入对话页面之后，Open Design 会让你描述你想要做的东西。这里有两种输入方式：

1.直接用文字描述你的需求，越详细越好；

2.上传设计参考截图，让它根据截图的风格来生成

发送需求之后，它不会直接开始生成，而是会先问你几个补充问题：

产品是为谁设计的？视觉风格偏好是什么？大概做多少内容？需要哪些功能？品牌方向是什么？有其他特殊要求吗？

这些问题不是固定的，会根据你的具体需求动态调整。认真回答这些问题，它生成的结果会更准确。如果你不确定怎么回答，也可以大概说一下方向，剩下的让它自己决定。

我这里选了 Cursor 设计体系，然后说生成一个叫 WANGHEI 的 AI 工具官网下载页面，然后就开始回答它的问题。

回答之后，它就开始生成过程，完成后，界面右边会直接显示预览效果。

建议全屏看一下，因为我选的就是 Cursor 设计体系，你会发现它生成的结果和 Cursor 官网的设计语言高度吻合，是真的接近专业产品设计的水准。

一个浅色 Cursor 风格的中文下载官网，首屏下载入口带有系统选择区，产品功能预览区展示 AI 写作卖点；版本说明区清晰标注各版本差异；底部行动区引导用户下载。

页面里不仅有视觉，还有真实可用的交互：系统切换、复制下载链接、下载提示、常见问题展开，这完整度非常哇塞。

如何微调

生成出来之后，大概率会有一些地方不太满意，或者想要调整，这非常正常。Open Design 提供了几种不同的调整方式，我分别讲一遍。

方式一：Tweaks 区域快速切换主题风格

在界面上方的 Tweaks 区域，你可以直接切换主题颜色风格，比如把原来的白色风格变成偏紫色系，或者其他颜色，快速预览不同的视觉方向。

这个功能非常适合在早期阶段快速比较不同色彩方案，不需要告诉 AI 任何指令，一键切换，实时预览。

方式二：Comments 模式精准指令修改

如果你想修改某一个具体的区域，这个方式最精准。

点击界面上的 Comments 按钮，再点击 Picker，然后用鼠标选中你想修改的那块布局区域，就能框起来，然后出现一个输入框，在输入框直接用文字告诉 Agent 你想要改成什么效果。

比如可以选择文字，要求字间距宽一点。

切换到 Pods 模式，就是手动框选某个区域，然后告诉 Agent 你想改这个区域的什么。

方式三：深度编辑

点击编辑后进入更细粒度的编辑状态，你可以直接修改具体的文案内容、调整样式参数（颜色值、字号、间距等）、修改跳转链接等等。

这个模式的高阶玩法需要你对 HTML 和 CSS 有一定了解，才能精准调整样式属性和链接逻辑。

如果你是纯新手，用来改文案内容没有问题；深度样式调整建议找有开发背景的朋友帮忙，或者借助 AI 解释具体的参数含义。

多端预览：检查不同屏幕下的效果

在右上方预览区域，你可以随时切换桌面端、iPad 端和移动端，查看不同屏幕尺寸下的布局效果。

这个功能强烈建议每次生成之后都看一下，因为桌面端效果好看，不代表移动端也同样好看，提前检查可以避免后期返工。

另外，点击设计文件可以查看和打开具体的源代码文件；

点击右上方的分享按钮，可以生成一个链接分享给其他人预览。

当然，同样支持部署到 Vercel 和 Cloudflare 发布成可访问的页面。

进阶技巧

技巧一：导入 Claude Design 项目继续编辑

如果你之前在 Claude Design 上做过项目，不需要从头重来。

在创建页面下方有一个导入 Claude Design的选项，将你在 Claude Design 上导出的 ZIP 文件上传进来，Open Design 会自动解析成可编辑的项目，你的 Agent 可以接着在原来的基础上继续编辑。

这个无缝迁移的设计，是 Open Design 团队对 Claude Design 用户的一个体贴设计，现在不是都流行挖墙脚嘛。

技巧二：用 @ 命令调用技能模块

在对话输入框里，输入 @ 符号可以唤出技能列表，直接点击选择你需要的技能模块。

技巧三：用 / 命令快速切换功能

在输入框里输入 / 符号，可以快速切换功能模式，比如切换宠物设置、通过 OD Research 命令搜索网页获取灵感，或者调出 MCP（Model Context Protocol）功能。

MCP 的按钮在左下角也能直接点击打开，它允许你连接外部服务和数据源，是扩展 Open Design 能力的重要入口。

技巧四：善用模板，新手最快的上手路径

Open Design 内置了大量高质量模板，每个模板都配有详细的提示词说明。

如果你不知道怎么写提示词，最快的学习方式就是直接去翻这些模板，看它们是怎么描述需求的，然后照着改成你自己的内容。

这比自己摸索快得多，毕竟每个人都是从模仿开始的，这就是活人感学习法：先看懂别人怎么做的，形成肌肉记忆，再发展出自己的套路。

技巧五：遇到问题，先截图给 Agent 问

在使用过程中，如果遇到任何看不懂的报错、或者不知道某个选项是什么意思，最直接的解决方式就是截图，发给你正在使用的 AI Agent，让它帮你解释或解决。

其实不只是今天介绍的这个工具，很多时候我看到后台留言问问题，其实问我真不如问你的 AI，99%的时候都会比我答得好，这是效率最高的方法。

常见问题

Q：生成结果不符合预期，是提示词的问题吗？

大多数情况下，是的。提示词越详细，结果越准确。建议你在描述需求的时候，明确说出：目标用户是谁、核心功能有哪些、视觉风格偏向什么、大概需要几个页面或几个区块。回答它的补充问题时也不要太随意，这些问题直接影响生成质量。

Q：生成速度很慢，正常吗？

生成速度取决于你接入的 Agent 和网络状况。用本地 CLI 工具的速度通常比调用远程 API 快。如果速度明显偏慢，可以检查一下网络连接，或者尝试换一个 Agent 测试对比。

Q：我没有任何 AI API，能用吗？

如果你完全没有任何 AI 账号或 API Key，那暂时无法使用 Open Design，因为它本质上是一个设计工作流层，底层还是需要 AI 模型来驱动。

Q：Open Design 跟 Claude Design 相比，差距大吗？

对于日常原型和产品设计需求来说，两者几乎没有可感知的差距，甚至在灵活性上 Open Design 占有明显优势，毕竟它支持 16 种 Agent 接入，不把你锁死在某一个平台上。

Claude Design 在极致的生成质量上可能有一定优势，毕竟它是 Anthropic 亲自调优的，但这种差距不足以支撑它每月几十美金的额外成本。

结语

在收尾之前，我想聊一个更大的话题，为什么 Open Design 能在 6 天内拿下 2 万 Star，这背后说明了什么？

这其实有一个规律可循：Anthropic 发布的每一个封闭产品，开源社区都会迅速做出响应，而且响应速度越来越快。

从 Claude Code 到 OpenCode，从 Claude Design 到 Open Design，这个模式不是一次性事件，它代表的是开源世界对封闭 AI 产品的系统性反应。

更值得注意的是，Open Design 并不只是便宜版的 Claude Design，它在某些维度上已经超越了原版：它支持 16 种 Agent 接入，而 Claude Design 只能用 Claude；

它有 Critique Theater 这样的自我审查机制，让 AI 不只是生成，而是评估和迭代；它还在高速迭代，社区活跃度远超 Claude Design 上线一个月几乎没有更新的状态。

这不是说 Anthropic 不好，Claude Design 的原创性和完成度依然值得尊敬。但这个现象告诉我们：当一个强大的封闭工具出现，开源社区会用自己的方式给出答案，而且这个答案往往更灵活、更包容、对普通用户更友好。

你可能不从事设计，但你总会接触到设计、用到设计、或者需要设计。Open Design 不会让你变成设计大师，但它可以让你的审美品味跃升一个台阶，从说不清楚自己想要什么，到能做出接近专业水准的原型。

而这一切，都是免费的。

技术普惠，就应该是这个样子的。

如果你是第一次接触 Open Design，建议你今天就去装好，先把 Agent 配置跑通，然后随便想一个你最近需要做的东西，一个产品介绍页、一个活动落地页、一个个人简历网站，扔进去试一试。

第一次看到生成结果的时候，你大概会跟我有一样的感受：这个东西，以前是要花钱请设计师才能做到的。

现在，你自己就可以。

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

官网：open-design.ai

这一周都在折腾这篇教程，越研究越发现这不是简简单单就能介绍清楚的一个工具，所以，就尽可能想写详细点，大家就少一点问题，目的就是想让大家了解它，去用它。结果写完发现，8000多字了，如果这篇对大家有帮助，那就多多点赞和转发收藏，谢谢大家。

文章来自于微信公众号 “网罗灯下黑”，作者 “网罗灯下黑”