用 Open Design 设计一个匹配你现有品牌的网站

本指南聚焦 Open Design 的一个招牌技巧：把它指向你现有的网站，代理会把你真实的品牌——字体、配色、语气——提炼成一份规范，然后用你的风格来设计。本文还会介绍一键桌面安装，以及为什么你会想选择一个开源替代方案的坦诚解读。它跟随 Brendan O'Connell 在他的演示中进行的实操构建，经过重写并依据当前版本更新。观看上方视频可看实时操作，或继续阅读文字版。

在预览中呈现的真实生成原型——一个深色、富有电影感的代理公司落地页。

什么是 Open Design？

Open Design 是一个开源、本地优先的设计平台，它运行在你已经在用的编码代理之上——Claude Code、Codex、Cursor、Gemini、OpenCode 等等——或者用你自己的 API 密钥。它本质上是一个 Claude-Design 风格的工作区，运行在你自己的机器上，既不会被锁死在某一家厂商的云端，也没有那个工具的用量上限。它采用 Apache-2.0 许可，自带一个庞大的技能与设计系统库，并在此之上加入了媒体生成（图像、视频、音频）。

为什么要选一个开源替代方案

Brendan 的动机很具体，值得复述，因为对很多人来说这就是决定性因素。他在那个封闭的云端工具里生成了一个设计系统，就吃掉了大约 75% 的每周用量上限——让他被卡住，直到下一周。这个上限独立于正常套餐额度之外，这让整套工作流对真正的迭代而言几乎不可用。运行在你自己的 Claude Code（或任何）订阅上就能移除这堵墙：你不会撞上一个单独的设计上限，也不会被锁死在某一个生态里。

第 1 步——安装（一键路径）

最简单的途径，也是 Brendan 推荐的，是桌面应用：前往 open-design.ai/download 下载 macOS 或 Windows 的可执行文件。应用很快就能跑起来，并会自动检测你机器上已有的代理 CLI——Brendan 什么都没配置；它认出了他的 Claude Code 订阅，立刻就准备就绪。

更喜欢用终端？从源码安装：

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

打开它打印出来的本地 URL（端口是动态的——别写死）。在右侧你会看到设置：检测到的代理，外加媒体提供方（图像用 OpenAI，视频用 MiniMax，配音用 ElevenLabs）、连接器（Composio MCP），甚至还有桌面宠物。你也可以为任何提供方使用自带的密钥。

第 2 步——从你现有的品牌出发设计

这就是值回票价的那个技巧。创建一个项目，选择高保真，然后在你的需求说明里告诉它为你现有的网站来设计。代理有一个网页抓取工具，所以它会去读取你的线上网站，然后从中推导出一份品牌规范。

在视频里，Brendan 把它指向自己的网站，Open Design 便：

1. 抓取页面并爬取真实内容。
2. 写出一份 brand-spec.md，捕捉到他实际使用的字体（它正确识别出了 Fig Tree）、他的配色以及他的设计取舍——“不用胶囊按钮，不用全圆角卡片，强调色克制使用，留白充裕”——再加上他的语气（“不要那种喘不过气的营销腔”）。
3. 生成一份 DESIGN.md，并用那种风格构建页面，把他现有的品牌与一套更干净的布局融合在一起。

Open Design 工作区：描述你想构建的东西，选择一种模式，剩下的交给你的智能体完成。

在动手构建之前，Open Design 会跑一个简短的探索表单（单页还是几页？视觉方向？是否匹配当前网站？要逼真的占位内容吗？），这样它就能锁定正确的方向。结果保留了他的标语、他的蓝色和他的字体，然后在上面叠加一套更利落的布局——多页输出，你可以逐页点击浏览。

第 3 步——查看反敷衍自检并导出

在收尾时，Open Design 会跑一个反敷衍自检——Brendan 看到它确认“没有表情符号，单一字体，一处果断的点睛之笔，全文都是真实的定位文案”。这就是那道护栏，让输出不至于看起来像机器生成的。

HyperFrames 画廊：由代码驱动的动效与视频作品，你可以复刻并二次创作。

浏览示例和设计系统标签页寻找起点（每套设计系统都会给你一份完整可编辑的 DESIGN.md），满意之后，把成果导出为 HTML、PDF 或一个 ZIP。因为一切都在你自己的代理上本地运行，迭代时不会撞上任何单独的设计上限。

小贴士

• 把它指向你的线上网站，以继承你真实的字体、配色和语气——这是获得贴合品牌输出的最快方式。
• 使用桌面应用走零配置路径；它会自动检测你的代理。
• 运行在你自己的 CLI 订阅上，以躲开封闭工具那个单独的每周设计上限。
• 读一读生成的 brand-spec.md / DESIGN.md——它们是可编辑的文件，所以可以更正抓取出错的任何地方。
• 在提示词上多花点心思——更丰富的需求说明会带来明显更好的初稿。

常见问题

它真的能从我现有的网站来设计吗？ 能——代理有一个网页抓取工具。告诉它为你的网站设计，它就会把你的字体、配色、布局取舍和语气爬取进一份 brand-spec.md，然后用那种风格来设计。

我必须配置我的代理吗？ 通常不用。桌面应用会自动检测已经安装的代理 CLI（Claude Code、Codex、Gemini 等等）。你也可以使用自带的密钥。

它有那个封闭工具的用量上限吗？ 没有单独的设计上限——生成依托于你连接的任何代理/订阅，所以你不会在做完一个设计后就被挡住。

它免费吗？ 这个应用是 Apache-2.0 许可下的开源软件，可免费在本地运行。你只需为你所连接的那个代理和那些提供方的模型与媒体用量付费。

---

这篇文字指南基于 Brendan O'Connell 的实操演示。观看上方完整视频，并订阅 Brendan O'Connell 获取更多开源工具拆解。