Open Design：为什么 4 万名开发者选择弃用 Claude Design

中文العربية Deutsch English Español Français हिन्दी Bahasa Indonesia 日本語 한국어 Português Русский

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00这是 OpenDesign，它是 Claude Design 的一个开源替代品，让你能够使用你已安装的任何代理

00:00:05或模型来生成完整的网页原型、移动应用，甚至是 HTML 格式的幻灯片。

00:00:11内置了 72 个品牌级设计系统，所有项目都留在你的机器上，

00:00:17所以没有任何东西被发送到云端。但我们已经知道 Claude Opus 4.7 在前端

00:00:23设计方面非常出色，因此允许用户选择他们想要的任何模型并没有意义，因为它们中的大多数

00:00:27可能在设计方面表现很差，点击订阅，让我们一探究竟。

00:00:33Anthropic 的 Claude Design 于上个月早些时候发布，并立即走红。它让人们

00:00:38能够使用一个令人印象深刻的模型制作出非常漂亮的设计，它为人们提供了

00:00:43Lovable vZero 和类似工具的替代品。但它是一个专有的云端工具，锁定于

00:00:49单一模型，并且每月花费 20 美元才能使用，这基本上意味着它并不适合所有人。

00:00:54所以，11 天后，Tom 和 Nexa 团队发布了一个非常受欢迎的开源替代品。

00:01:00这让我想起了源自 Claude Code 的 OpenCode，而现在的 OpenDesign 则源自 Claude

00:01:05Design。Anthropic 接下来会制作什么东西，而又会有人在前面加上“Open”呢？

00:01:09但是，这个开源工具是如何能够创造出与 Claude Design 一样好的设计的呢？好吧，

00:01:14这是因为有两件事在协同工作。第一是设计系统。OpenDesign 包含许多

00:01:18具有完整品牌规范、排版、间距和颜色标记的设计系统，灵感来自 Linear、

00:01:24Stripe 和 Spotify 等品牌。第二是技能。针对每种输出类型都有大量的技能。因此，仪表盘

00:01:30技能知道如何布局图表，而幻灯片技能知道如何构建幻灯片。甚至还有一个反 AI

00:01:35检查清单内置在每个提示词中，在生成任何东西之前，它会询问你的受众、

00:01:41语气和品牌内容。如果你看过我关于 Impeccable 的视频，这看起来会非常熟悉，

00:01:45但它有所不同，我们稍后会在视频中介绍这些差异。但现在，

00:01:49让我们先看一个简单的演示。那么要开始使用，你可以下载适用于 macOS 或 Windows 的 OpenDesign，

00:01:54克隆存储库并使用 Docker 安装，或者从源码运行，这就是我决定采取的方式。

00:01:59项目运行后，我可以访问浏览器中的这个端口，从而进入这个用户界面，

00:02:04对于那些不习惯 Claude Design 的人来说，这看起来相当令人不知所措，但让我们来看一看。

00:02:08如果你点击这里，你可以看到它已经识别出我安装的代理套件，

00:02:13比如 Claude Code Codex 和 OpenCode。如果我点击 Claude Code 并向下滚动，

00:02:17我们就可以选择模型。默认情况下，它会选择 CLI 中选定的那个，但我可以在这里选择

00:02:21一个。我也可以对 Codex 执行同样的操作，但 Codex 允许我更改推理强度，

00:02:26这是一个很棒的功能。但我打算选择 OpenCode。我向下滚动并将模型更改为

00:02:31GLM 5.1。在这里，我还可以选择记忆，即添加到每个提示词中的指令、

00:02:36媒体提供商。默认情况下，它识别出了我的 OpenAI 密钥，并且将使用

00:02:41GPT Image 2 来生成图像。但我也可以连接我的 ElevenLabs API 密钥来处理文本转语音，

00:02:46或者为网站上可能拥有的动画添加不同的音效。然后

00:02:50在这里，我可以查看所有可用的技能。我可以查看所有的设计系统，

00:02:54我们稍后会进行了解。我甚至可以选择一只宠物，这是 Codex 所具备的功能。

00:02:58基本上，这里有很多选项，但我打算关闭它并开始设计。所以，

00:03:03我要给我的项目起个名字，然后挑选一个设计系统。现在，如果你对这些

00:03:08设计系统一无所知，你可以点击设计系统选项卡来查看它们全部，它们数量繁多。

00:03:13但在录制视频之前我浏览过它们，我想我喜欢 Miro 的那个，它看起来

00:03:17像这样，并且提供了设计标记的详细信息，以及设计 MD 文件中的信息。

00:03:22注意我现在在原型选项卡中，但也有针对你想要根据数据变化进行更新的情况的实时人工制品，

00:03:27或者是生成基于 HTML 的幻灯片的演示文稿，或者从模板构建。

00:03:33所以，我可以点击这里的模板选项卡并选择一个我想要的模板。现在我们只坚持

00:03:38使用原型并点击创建。从这里，我们被带到另一个页面，可以在那里输入

00:03:42提示词。现在，我打算在这里尝试一些独特的东西。所以我现在已经让我的 YouTube 频道

00:03:47搜索应用运行起来了，我想创建一个看起来好得多的版本。所以我打算

00:03:52给它这个 URL，看看 GLM 是否能够搜索标签页和

00:03:57输入框，并将该信息用于它的设计。所以我在这里给它一个提示词，让我制作一个设计精良、简单的

00:04:02网站，用于搜索 YouTube 频道。我还给了它网站的链接，

00:04:07以便它可以使用代理浏览器或任何它认为合适的工具来访问。这样它就可以

00:04:12查看输入内容并浏览所有页面。让我们看看它会做什么。所以现在它问了我一些

00:04:15关于视觉色调、品牌上下文以及其他一些方面的问题，我将会回答。

00:04:20然后我们将继续设计过程，看看这个。它能够运行 curl 命令

00:04:24来使用 Chrome 打开网站。现在它正在使用代理浏览器连接到该网站。所以我没有

00:04:29打开任何这些内容或转到 URL，它正在浏览器中浏览该网站。我们可以看到更多

00:04:34代理浏览器命令来了解它是如何工作的。好的。此时，它仍在运行。

00:04:38它还没有完全完成。它还有一些事情要做，但我喜欢事情发展的方向。

00:04:43我喜欢它制作的搜索页面，下方的进阶筛选器，并且我可以切换

00:04:48视频标题和频道名称来进行搜索。我们得到了搜索结果，这看起来

00:04:52非常令人印象深刻，而且它使用了来自实际网站的数据。所以我不确定它做了什么，

00:04:57它是抓取并保存在了某个地方吗，但除了缺失缩略图外，这些都是真实的数据。我们也

00:05:01有收藏页面。所以如果我在这里收藏了一个人，他们就会去到那里，我可以生成

00:05:06一封电子邮件来联系他们或者将他们移除。这里还有一个隐藏页面。例如，

00:05:11如果我按了 X，那么一个人就会被送到这个页面。看起来在大约 20 分钟后。没错。

00:05:17GLM 5.1 并不是速度最快的模型。一切都已完成。所以这就是它告诉我的内容。

00:05:23它给了我它制作的所有五个文件。我想它将所有内容导出到了临时

00:05:28位置。所以我现在可以做的是给它另一个提示词。如果我想添加深色模式，

00:05:33我可以这样做，但我也可以点击完成设计包，它会将

00:05:37一切综合到一个单独的设计 MD 文件中。即转录内容、设计系统以及任何生成的

00:05:42人工制品，基本上就是这五个页面。我还可以点击分享以导出为不同的格式。

00:05:48我甚至可以导出为独立的 HTML，并将其交给 Claude Code 以在我实际的项目中实施，

00:05:53甚至将其部署到 Vercel 或 Cloudflare Pages，这是一个非常好的功能。

00:05:57所以这就是 Open Design 的快速概览。它值得使用吗？好吧，如果你已经安装了代码

00:06:02代理并且你支付了 VanClaude 的订阅费，那么尝试一下是

00:06:07无需思考的选择。设计系统和技能的结合意味着它实际上可以产生一些

00:06:12相当不错的东西，无论使用什么套件或模型。但是它与像 Impeccable 这样的工具相比如何呢？

00:06:16嗯，个人而言，我更喜欢 Impeccable 的规划方式。它会预先询问你一切内容，

00:06:22并使用你可以选择和迭代的图像模型来设计不同的模型图。

00:06:27所以你可以在开始时对设计外观一无所知，

00:06:32但最终却能得到相当不错的结果。而在 Open Design 中，你必须

00:06:37在进入之前了解一点设计知识。我的意思是，在开始之前，它确实会询问你想要什么设计系统，

00:06:42我知道模型可以生成一个，但它询问这一事实意味着它更适合

00:06:48了解更多设计知识的人。但我必须承认，Open Design 确实拥有很棒的界面，

00:06:53让你能够查看响应式视图、导出到任何你想要的地方、添加技能、MCP 工具，

00:06:58甚至宠物，这对于习惯使用 Codex UI 或 Claude 桌面应用的人来说很不错。

00:07:04而且它在使用 GLM 5.1 设计应用方面做得很好，这并不是

00:07:10那里最好的设计模型。所以如果我想快速设计一些东西，并且对于我想去的方向

00:07:15有一点想法，那么我肯定会尝试 Open Design。但如果你

00:07:19不介意花一点钱，Claude Design 相当不错。我的意思是，

00:07:22看看它使用完全相同的提示词能够完成什么。

Key Takeaway

OpenDesign 作为 Claude Design 的开源替代方案，通过本地部署、灵活的模型选择以及多品牌设计系统，为用户提供了云端工具之外的免费且高度可定制的设计原型生成体验。

Highlights

OpenDesign 提供 72 个内置品牌级设计系统，且所有项目数据均保存在本地，不发送至云端。
该工具允许用户连接本地代理套件（如 Claude Code Codex）并选择自定义模型进行设计生成。
OpenDesign 通过特定技能模块（如仪表盘、幻灯片生成）针对不同输出类型进行优化。
GLM 5.1 模型结合 OpenDesign 的代理浏览器能力，能够通过读取真实网站 URL 生成具备动态数据的原型。
生成的项目可导出为独立 HTML，或直接部署至 Vercel 及 Cloudflare Pages 进行实施。

Timeline

OpenDesign 的定位与功能基础

OpenDesign 是 Claude Design 的开源本地替代品，支持网页原型、应用和幻灯片生成。
内置 72 个设计系统，包含排版、间距和颜色规范，灵感来自 Linear、Stripe 等品牌。
每个提示词内置反 AI 检查清单，用以确认受众、语气和品牌内容。

该工具旨在解决 Claude Design 作为云端专有工具的局限性，特别是 20 美元的月费锁定。它通过集成设计系统与特定输出技能（如针对仪表盘的布局能力），在本地机器上运行以确保隐私。

配置与演示流程

用户可配置 OpenCode 或 Codex 等代理套件，并自定义推理强度与模型选择。
OpenDesign 识别本地 OpenAI 密钥以生成图像，并支持集成 ElevenLabs API 进行音效处理。
在实际测试中，GLM 5.1 模型能通过代理浏览器访问给定 URL，获取真实网站数据以构建原型。

用户可以通过 macOS 或 Windows 安装，或通过 Docker/源码运行。在演示中，输入 YouTube 频道链接后，系统成功抓取数据并生成了包含搜索页面、收藏夹及进阶筛选功能的界面。

导出选项与工具对比

系统提供将所有设计内容及转录文件合并导出为设计 MD 文件的功能。
生成的原型可导出为独立 HTML，或直接部署至 Vercel 和 Cloudflare Pages。
相比于 Impeccable，OpenDesign 更适合对设计系统有一定了解且偏好使用自定义模型及代理界面的用户。

OpenDesign 提供了良好的响应式视图与多格式导出能力。尽管模型生成速度因选择而异，但其通过整合现有代理技术与设计模板，为开发原型提供了高效的替代工作流。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video