Transcript
00:00:00先生们，第二个 Claude Design 克隆版刚刚上线 GitHub。没错，我们又迎来了一个
00:00:06Claude Design 克隆版，但这次它带有一个实际的图形界面。本周早些时候，我发布了
00:00:13关于 Hu Washu Design 的视频，那是市场上第一个 Claude Design 克隆版。它
00:00:20表现得非常出色，我们展示了它几乎可以与标准的 Claude Design 模式
00:00:24并驾齐驱，而且没有遇到任何使用限制问题。不过，Hu Washu Design 的问题之一是
00:00:30它只能在终端里运行，没有像你们在这里看到的这种图形界面。
00:00:36而这个全新的开源设计工具几乎完全模仿了 Claude Design。我是说，看看这两款
00:00:43工具，左边是我们要讨论的 Open Design，
00:00:48右边是 Claude Design，极其相似。Open Design 最酷的一点是
00:00:54它建立在 Hu Washu Design 之上。就像你在上个视频中看到的，Hu Washu Design
00:00:59真的非常棒。我们用那个仓库制作了一些精彩的内容和优秀的前端设计。所以现在，
00:01:06我们只是在那之上增加了一个美观的图形层，让大多数用户更容易
00:01:11与之交互，并提供了我们在 Claude Design 中最初看到的很多精致感。
00:01:16更棒的是，Open Design 可以配合任何编程工具使用，不仅限于
00:01:22Claude Code。我们可以使用 Gemini，也可以使用 CodeX。同样，我们不会遇到
00:01:28在 Claude Design 原版中遇到的使用限制。今天我们将全面演示 Open Design，
00:01:34我会向你们展示它的工作原理、如何安装，以及你们应该关注哪些功能，
00:01:39因为我觉得里面确实有些累赘的东西。我们还会把它和 Claude Design 做个对比。
00:01:43剧透一下：它很不错，我觉得很扎实。我非常兴奋看到 Claude Design 的
00:01:49衍生版本不断涌现，因为我真的很喜欢 Claude Design，只是它的使用限制
00:01:53太糟糕了。这类工具出得越多，我认为 Anthropic 就会越快
00:02:00跟进并解决这个使用上的烂摊子。Open Design 是 Claude Design 的
00:02:05开源替代方案。我们可以将其连接到 Claude Code 或 CodeX，也可以自带 API 密钥
00:02:12来使用其他框架或 API。它会自动检测你电脑上安装了哪些编程 Agent，
00:02:16并且已经内置了 31 种技能和 72 个 Brain 级设计系统。当我说
00:02:24它是基于 Hu Washu Design 构建时，我不是在开玩笑。他们自己也是这么说的。
00:02:28它是 Hu Washu Design、Guzheng PowerPoint Skill、Open Code Design
00:02:34和 Multica 的集合体。把这些组合在一起，可以说这就是 Hu Washu Design 加上一个漂亮的外壳。
00:02:40仓库的其他部分深入介绍了底层原理，并提供了一些示例和演示。
00:02:45你只需要知道：这就是开源版的 Claude Design，或者说是目前最接近它的东西。
00:02:49在开始安装之前，先插播一条来自今天赞助商的信息，
00:02:53也就是我自己。我刚刚发布了 Claude Code 大师课，这是从零基础
00:02:58进阶为 AI 开发者最快的方式，尤其是如果你没有技术背景。我每周都会更新，
00:03:04我们专注于实际应用案例，教你如何使用这个工具真正推动
00:03:09你的业务或任何你正在从事的项目。你可以在 Chase AI Plus 中找到它，
00:03:14置顶评论里有链接，希望能见到你。安装方法有两种：你可以前往
00:03:18这个 GitHub 仓库，打开终端，然后把这一串命令粘贴进去。第二种选择是
00:03:23直接复制这个链接（我会在描述栏提供链接），将其粘贴到
00:03:28Claude Code 或 CodeX 中，告诉它“帮我在新目录下安装这个”，它就会
00:03:32帮你运行起来。安装并运行后，它应该会给你一个
00:03:36本地开发服务器的链接。如果没有，就告诉 Claude Code“为 Open Design 启动开发服务器”，
00:03:42然后你应该会看到这样一个页面。很可能会弹出一个窗口问你：
00:03:46“你想使用本地 CLI、Anthropic API，还是其他 AI 系统方案？”
00:03:51你应该选择“本地 CLI”，这意味着它会调用 Claude Code、CodeX 或 Open Code，
00:03:56特别是 Claude Code 和 CodeX。这样你就不用支付 API 费用，一切都直接
00:04:01调用你的月费账户。模型方面，你可以直接选默认的 CLI 配置。接着我们
00:04:06还可以添加媒体提供商，因为正如你所见，我不仅可以制作原型、幻灯片
00:04:13和模板，还可以生成图像和视频。我可以直接在这个界面上生成，
00:04:18但为了生成视频和图像，我需要向支持这些功能的模型添加 API 密钥。
00:04:24我可以添加 MiniMax、OpenAI、ElevenLabs 等等。这非常实用，也是
00:04:30你在 Claude Design 中找不到的功能。顶部有设计、示例、设计系统、图像模板和
00:04:36视频模板。设计系统里的这些模板具体是什么呢？
00:04:40它类似于你可能见过的 awesomedesigns.md。他们基本上是找了一个
00:04:46像 Airbnb 这样的网站，然后从色调、排版、
00:04:52组件、视觉主题和氛围等方面拆解了该网站的构成。所以，如果我想
00:04:58创建一个风格类似于 Airbnb 的网站，我可以利用这个提示词并将其包含进去，
00:05:06效果会很接近。我觉得实际效果可能因人而异。虽然这个
00:05:13设计系统部分看起来很酷，但我不知道它在现实中到底有多有效。这些图像模板
00:05:18也类似，只是向我们展示了示例图像以及你可以用来获得类似效果的 JSON 提示词。
00:05:23我觉得这有点累赘。视频模板也是一样，华而不实，
00:05:29你不会从中获得太多价值。这里有一些示例也挺酷的，但要明白，
00:05:35这仅仅是他们使用单行提示词得到的结果。背景里并没有什么
00:05:42花哨的提示词，提示词就明明白白写在这里。
00:05:47所以如果我点击“使用此提示词”，它就会自动填入。这只有一行：为 X（推特）用户设计一个
00:05:53名为 Mutuals 的约会网站。包含每日精选摘要仪表板、统计数据、共同匹配项和社区滚动条。
00:06:00所以，别被这里面的一些示例给唬住了。这只是一行字，
00:06:07只是一行提示词，并没有发生什么疯狂的事情。所以让我们关注
00:06:12你真正应该关心的部分，那就是创建原型、幻灯片以及这类
00:06:16你在 Claude Design 原版中常见的标准交付物。它的工作方式
00:06:22几乎一模一样。你只需要命名演示项目，选择一个设计系统。
00:06:28你可以选择一个或多个。再说一次，我们这里有所有内置设计系统的列表。
00:06:32我们决定是要做线框图还是高保真。我们甚至还能导入
00:06:37Claude Design 的 ZIP 文件。假设你在 Claude Design 中创建了一个设计系统，
00:06:44我可以把它转成 ZIP 文件并在这里导入，然后点击创建即可。我想先快速
00:06:51展示一下这个例子。在这里，我让 Open Design 创建了和之前 Hu Washu Design 视频里
00:06:57演示的一模一样的东西：我想要一个虚构的 SaaS 产品 Landing Page，名叫 Lighthouse。
00:07:03它面向小团队和个人创始人，我想要三个示例以便进行横向对比。
00:07:11我有这种经典的堆叠式布局，还有一种更偏社论风格的，以及一种更
00:07:17张扬和醒目的。当我们直接把它与 Claude Design 生成的结果进行对比时，
00:07:21你会发现很多相似之处。字体风格很像，颜色也非常接近，
00:07:26特别是在背景方面，尤其是因为我们选择了社论风格。你还会看到，在
00:07:32Open Design 的左侧，它经历了与 Claude Design 内部类似的
00:07:37问答简报过程。它会问我问题，给我提供选择按钮等等。它几乎就是
00:07:43完全相同的产品。不过值得注意的是，我发现 Open Design 与
00:07:49Claude Design 的一个区别在于：Open Design 稍微慢一些。这个过程大约用了 10 分钟，而
00:07:56Claude Design 只用了一半的时间。另外，虽然我们看到了评论、编辑和绘图功能，但
00:08:01在 Open Design 中目前还无法实际使用，尽管它们已在路线图中。如果你想要
00:08:06弹出调整面板，你必须直接提示 Open Design 说：“嘿，你能创建一个
00:08:13调整面板吗？这样我就可以快速手动修改一些参数”，比如
00:08:18开关某些功能，这和我们在 Hu Washu 中做的非常相似。所以 Open Design 稍微慢一点，
00:08:24也缺少一些提升生活品质的小功能，但除此之外，它已经非常接近
00:08:30Claude Design 了。现在谈谈如果你想使用自己的设计系统，因为这是
00:08:35我们需要绕过的一个点。如果我想创建一个幻灯片，使用我自己的
00:08:40Agentic Dashboard OS 设计系统（供参考，这就是我所说的视觉风格），
00:08:46这是我追求的视觉美学。在 Claude Design 原版中，我有针对
00:08:51这种风格的设计系统。如果我想在 Open Design 中复现这种东西，该怎么做？
00:08:56再说一次，不一定非得是我的仪表板。假设你有一个网站，你有自己的资产、
00:09:01排版等等，你想在这里复现。目前还没有非常直接的办法，
00:09:08比如我不能直接进入“设计系统”里去创建，完全没有这种按钮。
00:09:14相反，你需要做的是导入 Claude Design 的 ZIP 文件。所以如果我
00:09:20已经在 Claude Design 里创建了这个设计系统，我可以前往那个设计系统
00:09:25页面（就是我现在所在的位置），点击分享，然后选择“下载项目为 .zip”。
00:09:32接着我回到 Open Design，选择那个设计系统的 ZIP 文件并上传。你可以看到，
00:09:39这里显示了所有刚刚上传的设计文件。如果你正尝试做
00:09:45类似的事情，但还没在 Claude Design 里把它变成设计系统，那我建议
00:09:51你先去那儿弄。这是最简单的办法。或者你也可以尝试在 CodeX
00:09:55或 Claude Code 里自己重建这种设计系统设置，但有点麻烦。这是 Open Design 的
00:10:00一个缺点。在这一点上，我觉得 Hu Washu Design 反而让事情变得简单了，
00:10:04因为我们在终端里操作，而不是在图形界面上。我可以简单地
00:10:08在终端的 Claude Code 里说：“嘿，去看看那个目录，看一眼里面的所有内容，
00:10:14然后按照那种风格重建这个幻灯片。”这就是被强迫使用 UI 的一个弊端。
00:10:20现在我在提示词里说：创建一个幻灯片，介绍我的虚构 SaaS 产品 Lighthouse，
00:10:25它是一个面向小团队的分析工具。根据需要问我任何问题。我们可以
00:10:29稍微放大一点，让你看得更清楚，这是它问我的问题：
00:10:34“这份幻灯片是给谁看的？”假设是产品发布会。“现场都有谁？”我们说产品相关人员。
00:10:44“要做多少页？”我们保持简短。“保真度？”我要高保真。“需要演讲者备注吗？”不需要。
00:10:51“视觉色调？”用新野兽主义风格，并使用 Agentic OS 设计系统。接着让它决定
00:11:00故事节奏。我们发送答案。就像正常的 Claude Code 分解任务一样，它会
00:11:04给你一个待办事项清单，然后慢慢开始处理。这是它最终为我们生成的第一页，
00:11:08看起来很不错。我觉得这绝对符合我们提供给它的设计系统品牌风格。
00:11:13然而，你可能注意到了，我无法在各页幻灯片之间实际切换，
00:11:20要么就是它把所有页都做成一样的了。所以我告诉 Open Design 我只能看到第一页，
00:11:25无法在各页间切换。我们看看它能否修复。这就是 Open Design 最终给我们的
00:11:29幻灯片。我还把它导出了为 PowerPoint 格式，这样你们就能看到
00:11:34导出过程是什么样的。因为东西通常在 Claude Design 和 Open Design 里看着很好，
00:11:39但当你把它导出到 PowerPoint 时，可能会出现一些偏差。所以，
00:11:43第一页看起来不错。第二页也没问题，虽然这里可以看到数值部分
00:11:52可能需要稍微调整一下。第三页……这里有点偏差，我们需要手动
00:11:58修改一下分隔方式和它们之间的间距。第四页看起来不错。
00:12:04这页也很好。第六页……我们可能需要把这个位置往上挪一点。然后第七页，
00:12:13又出现了一点格式问题，没能完全保持在框内。但我认为
00:12:18这是一个完成了 90% 的解决方案，你只需要花大概五分钟就能修好它，而且它完美契合了
00:12:24我们追求的设计系统。但我想你也能发现，在我们创建这份幻灯片的过程中，
00:12:29与更成熟的项目（如 Claude Design）相比，它在细节处理上还有点粗糙。
00:12:33这也在意料之中，Open Design 毕竟这周才刚发布。所以希望他们
00:12:37能继续迭代并使其更加完善。但总的来说，作为一个刚刚面世
00:12:42且处于初代版本的工具，我认为 Open Design 是一个非常扎实的工具。如果你
00:12:48想使用 Claude Design 的功能，并且需要一个图形界面来操作，而且正
00:12:54被使用限制折磨得不轻，那么它非常适合你。如果你不需要图形界面，但喜欢 Claude
00:13:00Design 的核心逻辑和工作方式，我觉得 Hu Washu Design 可能仍然更好一些。它更快捷，
00:13:05而且因为是在终端里运行，我觉得它更灵活。但如果你觉得
00:13:10“我一定、一定、一定要这种界面”，那我认为这就是 Claude Design 的一个
00:13:15可靠替代品。因为我是说，别误会，我也很爱 Claude Design，只是那个使用限制太荒唐了。
00:13:21就像我之前说的，我希望明天就能冒出 1000 万个这类工具，这样就能
00:13:26在 Anthropic 的背后点一把火，让他们赶紧解决这个使用限制问题。这简直太离谱了。
00:13:31今天就聊到这里。我觉得这是一个很酷的工具，绝对值得你自己去尝试一下。
00:13:34设置简单，而且在支持的编程 Agent 方面非常灵活。请在评论区
00:13:40告诉我你的想法。如果你想参加大师课，请务必查看 Chase AI Plus。
00:13:43我们下次再见。