Transcript
00:00:00Claude Design 绝对是我用过最棒的工具。
00:00:02但实际上它根本无法使用。
00:00:05尽管我每月向 Anthropic 支付 200 美元订阅他们的 20 倍计划。
00:00:10我在不到一小时内就耗尽了 Claude Design 的每周使用限额。
00:00:14这简直令人沮丧，但幸运的是，
00:00:17还有一个刚发布的全新开源仓库，
00:00:22给我们带来了希望，
00:00:23它本质上克隆了 Claude Design 并将其变成了一个我们可以使用的技能。
00:00:28它叫 Huashu Design，构建在与 Claude Design
00:00:32完全相同的系统提示词之上。
00:00:33今天我们将把它与 Claude Design 进行直接对比测试，
00:00:37看看它是否真的值得我们花时间。因为如果值得的话，
00:00:41我们或许真的能摆脱 Claude Design 的使用限制了。
00:00:45Huashu Design 解决了 Claude Design 虽然强大，
00:00:50但使用不到一小时就会达到限制
00:00:54的问题。
00:00:55所以他们所做的是提取了 Claude Design 的所有系统提示词和设计理念，
00:00:58并将其转化为一个开源的 GitHub 仓库，
00:01:02这本质上只是我们可以加载到 Claude Code、Codex
00:01:07或者任何编码代理中的一个技能，就像 Claude Design 一样。
00:01:10它能够制作网页应用或移动应用的交互式原型。
00:01:13我们可以制作幻灯片、动态设计、信息图表等等。
00:01:17它之所以能仅凭单一技能完成所有这些，是因为它
00:01:21底层有很多东西。例如，
00:01:24它有权访问 20 个深度解析的 Markdown 文件，解释了如何制作幻灯片、
00:01:28不同的设计风格和动画最佳实践。
00:01:31所以虽然表面上它是一个技能，
00:01:33但它实际上可以访问 20 个小型技能。
00:01:35它还可以访问许多组件、媒体和资产，
00:01:40当它为你进行设计时可以调用这些资源。
00:01:42而且它拥有完整的可执行工具链。
00:01:44这使它能够将 HTML 文件转换为 MP4，
00:01:50或者使用 Playwright 来实际检查它在纸面上为你设计的内容
00:01:53是否在现实中有效。就像 Claude Design 一样，
00:01:56我们能够看到不同的变化方案。我们拥有完整的微调系统。
00:02:00最棒的部分是，因为它是一个技能，如果我在 Claude Code 中，
00:02:05它的使用是基于我订阅的是 5 倍还是 20 倍计划，
00:02:08我不会受到 Claude Design
00:02:13看似随意的限额约束。但让我们来实际测试一下。
00:02:16所以我们要做的，是看看它在从零开始设计落地页方面
00:02:18到底表现如何。
00:02:22然后我们看看如果给它一些资产来辅助构建，
00:02:24类似于 Claude Design 的设计系统，它会表现如何，
00:02:29最后，我们将看看它在幻灯片制作上的表现。一路走来，
00:02:33我们将把它与 Claude Design 进行直接对比。
00:02:36这样我们就能知道它是否真的值得。但在我们开始之前，
00:02:39先简短地介绍一下大家都喜欢的赞助商，也就是我。上个月，
00:02:43我推出了 Claude Code 大师课，这是从零基础到
00:02:46AI 开发者的第一途径，特别是如果你没有技术背景的话。
00:02:51我每周都会更新这门课程。
00:02:53我刚刚发布了 Claude Code 智能体 iOS 模块。
00:02:56所以如果你是想了解如何最好地利用这个工具的人，
00:03:01那么你一定要去看看。你可以在 Chase AI 中获取它。
00:03:04置顶评论中会有链接。那么，让我们开始吧。
00:03:08我给 Claude Code 的提示词是，
00:03:09在整个过程中它都将使用这个 Huashu Design 技能，即：使用
00:03:13设计技能为我的虚构 SaaS 产品 Lighthouse 创建一个落地页，
00:03:17在开始之前询问你需要知道的问题。现在，
00:03:21我也给了 Claude Design 完全相同的提示词。
00:03:24所以 Huashu 回复了六个问题，询问 Lighthouse 的功能、目标
00:03:29受众氛围、所需的板块和方案变化。你知道的，
00:03:34是应该直接创建一些虚构内容，还是我有文案？
00:03:37Claude Design 有类似的问题，
00:03:40尽管它深入得更多，而且显然由于其图形化性质，
00:03:44它在视觉方向上给了我一些实际的选择，
00:03:48让我可以直观地看到。所以对于 Huashu，我告诉它，
00:03:50我们做一种分析风格。目标是针对独立开发者。
00:03:54我说我想看到多种氛围和风格，
00:03:57这样我才能对比这些方案。我还想要它自己生成文案。对于 Claude Design，
00:03:59我基本上告诉它同样的事情，并且我要求提供三个方案，
00:04:02我可以进行横向对比。
00:04:05所以，这是 Claude Design 和 Huashu 的对比成果。
00:04:06我会关掉摄像头，这样我们能看得更清楚一些。
00:04:11先来看看 Huashu 的页面，它把所有内容都放在了一个页面上。
00:04:16我们原本可能需要做三个独立页面，
00:04:19但这种方式让我们能一次看到所有内容。好吧，其实我收回这句话。
00:04:22我们右上角有能力查看所有三个方案。
00:04:25所以这就是我们用这个技能得到的成果。
00:04:29这个 Ledger 版本看起来确实很酷。你知道，
00:04:31它给了我们整个网页。我们有终端版本，
00:04:35同样的风格，还有纸面版本。
00:04:40我能一次看到全部三个。老实说，表现相当好。
00:04:44这比我们只使用 Claude Code 本身要好得多。
00:04:49我们甚至使用了前端设计技能，
00:04:52要求提供三个版本，效果相当扎实。现在来看看 Claude Design。值得注意的是，
00:04:55Design 一开始就给了我们微调选项。我们先不看那个，
00:04:59来看看它的终端版本，你知道，
00:05:03它完成了整个流程，再次强调，
00:05:07与这边的编辑器版本非常相似。
00:05:11空间感非常、非常相似。
00:05:15这看起来确实很丑。这肯定让人有种“典型的 AI 页面”感觉。我想这与渐变色有很大关系。
00:05:19我还能对比这三个版本。现在，
00:05:24我希望你现在做的不是去想“哦，一个肯定比另一个在真空中更好”，
00:05:28而是真正看看这个技能有多接近我们看到的 Design 原生方案。非常、
00:05:32非常相似，这对 Huashu 的技能来说是一个巨大的认可。
00:05:34现在，在我看到这些宏观变化之后，我想做的是专注于一个，
00:05:37然后开始进行细节微调。
00:05:42为了保持相似性，以便我们有更好的对比，
00:05:46我会选择 Design 中的编辑器版本，
00:05:51也就是该技能中的 Ledger 版本。
00:05:54我们将看看它们如何处理微调。在 Claude Design 中，
00:05:59微调选项已经存在了。对于编辑器版本，
00:06:03我们可以在深色和浅色模式之间切换。我可以更改强调色。
00:06:06它提供了几乎我能想到的任何颜色，这很酷。
00:06:09我可以更改实际的标题，
00:06:11但它在空间和全局之间进行了拆分。
00:06:15所以我要做的是，告诉它扩展微调功能，只针对编辑器版本。
00:06:18当这些正在进行时，
00:06:21我跳进 Claude Code 并说，
00:06:25使用 Ledger 变体并进行大量的微调。
00:06:29这样我们就能在那方面进行对比。
00:06:31Claude Design 已经为我们添加了一堆微调项。值得注意的是，
00:06:33此时此刻，仅从你在视频中看到的，
00:06:36我已经用掉了大约 15% 的 Claude Design 使用量。然而，
00:06:38在技能那一端，
00:06:42我们只使用了单次对话上下文窗口的 13%。
00:06:44也就是 13 万 Token，甚至不到我每周使用量的 1%，
00:06:49当然我是在 20 倍计划下，但差异是惊人的。尽管我们应该注意到，
00:06:49这还在处理那个内容的微调。
00:06:54所以它确实慢一点，而 Claude Design 的微调按预期工作。
00:06:59坦白说，微调是我最喜欢的部分。
00:07:03我认为 Claude Design 的力量不一定在于“哦，设计很棒”。我确实认为它们高出一筹，
00:07:05别误解我的意思，
00:07:10但事实是我可以非常快速地浏览各种内容，查看效果，并迅速迭代。
00:07:12我们需要注意的一点是，由于 Claude Design 的运作方式，
00:07:16像这样点击特定部分并处理排版或留下特定评论的能力，
00:07:20并不是我们可以在设计技能内部真正做到的。
00:07:22我当然不能在设计技能上画草图并说，嘿，看看这个，
00:07:24处理这个，把这个向左移一点，
00:07:28向右移一点。这些事情，
00:07:31你需要一个图形界面，
00:07:36这显然是 Claude Design 的领先之处。
00:07:36所以让我们把它与我们在 Huashu Design 中得到的微调进行对比。
00:07:40值得注意的是，
00:07:43这些微调与页面本身的风格相匹配。
00:07:47我可以更改预设。
00:07:51我可以更改显示字体系列、稍微不同的深色模式。
00:07:54我可以更改强调色，看起来我可以更改很多东西，比如
00:07:57布局密度。我们有信任条吗？
00:07:58信任条消失了吗？是的。就是那样的东西。所以绝对是可比的。
00:08:01这里的微调像 Claude Design 那样多吗？没有，
00:08:05但我距离获得更多微调仅仅只需要一个提示词。我想这里的关键在于，带有这种设计技能的 Claude Code
00:08:07绝对能够与你在 Claude Design 原生中获得的效果竞争，并且
00:08:10总 Token 使用量仅为 17 万左右，基本上没有使用
00:08:13我任何每周使用量，而我烧掉了 15% 的 Claude Design 额度。所以对于这个例子，
00:08:18也就是纯提示词、没有设计系统、没有资产的情况下，
00:08:22看看它能拿出什么成果。我觉得这个技能表现很棒。
00:08:26所以让我们进入下一个演示，看看如果
00:08:30我们实际上给它一些东西来构建——某种设计系统、
00:08:32某种设计示例，并把这个技能进行测试，表现如何。
00:08:34因为我知道 Claude Design 可以做得很好。
00:08:38当我们观察 Claude Design 及其设计系统时，
00:08:42它在获取我们给它的任何内容方面做得相当不错。
00:08:47那可以是代码库之类的东西，并提取出大量信息，
00:08:51从间距到组件、仪表、按钮、Hero 区，
00:08:56所有这些。所以当我把这个设计系统加载到 Claude Design 时，
00:08:59我知道它将能够跨不同类型的交付物维持这种一致性。
00:09:02例如，
00:09:06这个 Agentic OS 设计是我制作成设计系统的东西。
00:09:10虽然我们在 Claude Design 里面看到它是一个仪表盘，
00:09:13但复制那个设计主题非常容易。
00:09:16所以你看这个在幻灯片中，例如，
00:09:19它看起来像是来自同一个地方，这是因为 Claude
00:09:23Design 设计系统非常强大。缺点是创建这种
00:09:27设计系统会吃掉你 30% 的每周
00:09:31使用量。
00:09:34所以我刚刚告诉 Claude Design 使用那个 Agentic OS 仪表盘
00:09:36重新创建这个 Lighthouse 落地页。
00:09:39我然后告诉 Claude Code 几乎同样的事情，
00:09:42我想使用与那个仪表盘相匹配的美学/设计系统。
00:09:45然后我告诉它在哪里可以在单独的
00:09:47目录或参考中找到所有这些信息。这基本上就是它正在使用的
00:09:50灵感，作为其美学。
00:09:55所以显而易见，这边的精灵图正在发疯，
00:10:00但其他部分基本合理。嗯，
00:10:00它继续重新创建了一个仪表盘，
00:10:04这与这个非常相似。我觉得看起来很甜。
00:10:07至于字体、颜色，
00:10:11所有这些都非常符合它应该做的。
00:10:14我唯一的真正抱怨是这边的那个小角色。
00:10:18我不知道发生了什么，
00:10:22但那可能是一个相对简单的修复。
00:10:25现在让我们看看 Huashu 技能的表现。供参考，
00:10:28该技能用了 11 分钟和大约 7 万 Token，Claude Design
00:10:33用了大约 3 分钟，但占用了其每周使用量的 10%。
00:10:37这是我们得到的成果。我会关掉我的摄像头，这样我们能看得更清楚。
00:10:41我们得到了一个小 Claude，
00:10:44这边有一个小图标 Logo。值得注意的是，
00:10:47这个 Logo 与上方的精灵图有点不同，
00:10:52但嘿，它很合适。颜色和字体乍一看似乎有道理。
00:10:54我们在 Lighthouse 旁边的顶部也确实有我们的小精灵。
00:10:56这看起来挺酷。这就像一个小动态条。
00:10:59所有这些内容在通用设计方面看起来都和仪表盘非常相似。
00:11:04这边的感觉有点不对劲。
00:11:08我希望这个终端部分能被向上移，与我们左侧的内容居中对齐，
00:11:10但这很容易修复。总的来说，
00:11:15表现相当不错。我想说我更喜欢 Claude Design 一点点，
00:11:18特别是它创建了自己的仪表盘并将其放入其中。
00:11:22但嘿，它完成了设计任务，对吧？它符合标准。
00:11:26它有相同的字体，相同的颜色。绝对感觉它来自同一个设计家族。所以对于这次测试，
00:11:30这看起来挺酷的，就像一个小小的行情滚动条。
00:11:35所有这些内容在仪表盘设计方面看起来都非常眼熟。
00:11:40但这一块感觉有点怪怪的。
00:11:43我希望这个终端区域能向上挪一点，
00:11:47和左边保持居中对齐，不过这很容易修复。总的来说，
00:11:51相当不错。我想说我更喜欢 Claude Design 的设计，
00:11:56特别是它能自动创建仪表盘并直接放入其中。
00:12:00但嘿，它确实完成了设计工作，对吧？它符合所有标准。
00:12:04它用了相同的字体和配色。
00:12:06绝对感觉是出自同一个设计系列。所以对于这次测试，
00:12:11我认为该功能又是一次巨大的胜利，必须点赞。没错。
00:12:14虽然花的时间稍微长了一点点？确实。
00:12:15但它基本上是靠自己从零构建了这套设计系统。
00:12:18它没有预设模板。它有 Claude Design 那么好吗？嗯，也许不完全是，
00:12:22但已经非常接近了，而且成本低得多。所以，非常、
00:12:27非常令人印象深刻。现在进行最后一项测试，我们来看看幻灯片。
00:12:29我已经让 Claude Design 做好了。
00:12:31你现在看到的正是它的第一版成品。
00:12:33它使用了同样的设计系统，内容是关于我们那个虚构的 SaaS 产品。
00:12:37所以在保持设计风格一致性方面，
00:12:41显然它完成得相当出色，所有这些看起来都
00:12:46挺不错的。唯一的抱怨是，顶部的小精灵图标有点被拉伸了。
00:12:50但话说回来，这并不是什么难处理的问题。
00:12:52我真正关心的是，它看起来够酷吗？确实挺酷的。
00:12:56它符合 Claude Design 的设计系统吗？是的，
00:13:00而且它只用了几分钟就完成了，资源占用仅为 6%。
00:13:04现在来看看 Claude Code 使用该功能的效果。
00:13:07这就是我们的成果。上手第一感觉，非常像网站的设计。
00:13:11它直接就生成出来了，顶部同样有那个小精灵图标，
00:13:15放在了上面。
00:13:16然后右侧还有我们 Claude Code 的小图标。
00:13:20这是封面页。第二页，
00:13:23看起来有些文字重叠了，但不是什么大问题。
00:13:27第三页看起来不错。第四页。这里有点被截断了，
00:13:32但这也完全可能是一种设计方案。
00:13:34有些滚动文字，看起来还行。最后一页，
00:13:38这里又出现了一点重叠，
00:13:40但这些都是小问题，通过一条提示词就能轻松修复。
00:13:44所以总的来说，对比一下这两种设计和该功能生成的内容，
00:13:49又是非常相似，
00:13:50这已经是我们连续测试的第三个案例，该功能能够
00:13:54与 Claude Design 的水平相媲美。
00:13:56我觉得这正是本视频最大的收获。
00:13:58我们现在有了一个选择，既能得到 Claude Design 的输出结果，
00:14:03又不必受困于那些严苛的使用限制，这对普通用户来说太棒了。
00:14:07那么，抛开一切，我依然认为 Claude Design 更好吗？是的，当然。
00:14:12因为该功能只是在模拟 Claude Design 的一切操作。
00:14:15而 Claude Design 拥有一些独特的优势，比如绘图、编辑、评论，
00:14:19以及能够让团队中的每个人都使用它。
00:14:21因此，凭借其图形用户界面，
00:14:24它能做到该功能永远无法实现的事情。但对于很多人来说，
00:14:29你刚才所看到的已经绰绰有余了。这比使用
00:14:34前端设计功能有了巨大的飞跃。别忘了，
00:14:37该功能不仅能做网页和幻灯片。
00:14:40它还能做动态设计、信息图表等各种东西。
00:14:43所以一定要去试试。你真的没什么可损失的。
00:14:46这就是今天我要和大家分享的内容。我希望通过这段视频，
00:14:50我能为你不断扩展的工具箱里再添一件利器。一如既往，
00:14:54欢迎告诉我你的想法。
00:14:55如果你想获取 Claude 大师课，记得去看看 Chase AI Plus，
00:14:58我们下次见。