aigcbar - null

Claude绝对不想让你知道这个开源免费平替 ｜Open...

type
status
date
slug
summary
tags
category
icon
password
网址
notion image
最近有一个工具让我有点上头，而且越用越停不下来，越用越觉得这个工具太牛逼了，必须写一篇详细教程安利给大家。
它叫 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 跑起来，剩下的就看各个模型的能力了。
整个安装和配置流程，前后大概十分钟以内可以搞定，即便是完全没有技术背景的新手，也能顺利完成。
方式二：从源码运行（适合开发者）
如果你是开发者，想要自己编译或者二次开发，可以选择从源码运行。把下面三行命令依次输入终端：
这个方式相对复杂一些，如果在配置环境这个步骤遇到问题，可以把报错截图发给你在用的 AI Agent（比如 Codex），让它帮你解决，或者你直接把今天这篇文章丢给你的龙虾也好，爱马仕也罢，都行，就让它看，让它去装。
Open Design 能做哪些事
安装完成、Agent 配置好之后，我们来认识一下 Open Design 的主界面，搞清楚它到底能做什么。
打开客户端，你会看到主界面上有几个核心功能区域。Open Design 能做的事情，比大多数人想象的要多：
  1. 原型图（Prototype）
这是目前完成度最高、最值得掌握的核心功能。
你可以用自然语言直接口喷，Open Design 会生成完整的 HTML/CSS 网页原型，包含真实交互逻辑，能在浏览器里直接跑。
注意，不是截图，不是静态图片，是真的可以点击、有交互效果的网页。
  1. 幻灯片（Slides）
可以生成杂志风格的 PPT 幻灯片。如果你见过那种排版精美、视觉冲击力强的产品 Deck，它基本上就能做到这种水准。输入你的主题和内容要点，它会自动生成完整的幻灯片结构和视觉设计。
  1. 实时制品（Live Artifacts）
这个功能是直接开发真实项目用的，生成的不是原型，而是可以直接集成到真实代码库里的代码。
不过这个功能目前还是 Beta 版，整体效果还不如原型稳定，等它成熟了之后会是非常强大的功能，目前建议先了解一下即可。
  1. 媒体生成（图片 / 视频）
Open Design 内置了三大主流媒体生成模型：
gpt-image-2：用于生成海报、信息图等图片素材
字节跳动 Seedance 2.0：生成电影感短视频
HeyGen 开源的 HyperFrames：配有 93 个开箱即用的提示词模板
当然，使用这些媒体生成功能需要自己配置对应的 API Key。
如果你有相关账号，可以在设置里填入；如果暂时没有，跳过这部分完全不影响原型图功能的使用。
  1. 丰富的技能（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、小红书等一线品牌的设计语言。
Loading...

没有找到文章