Transcript
00:00:00市面上有一百万种技能和插件，都声称能解决
00:00:03Claude 的前端设计问题。
00:00:05但作为一个几乎测试过其中数百种工具的人，
00:00:08其中有一个脱颖而出，而且它刚刚迎来了巨大的升级。
00:00:12我说的就是 Impeccable 4.0，它是赋予 Claude 代码能力的王者，
00:00:17能够创造出真正好看的前端设计和网页设计，
00:00:21并在操作过程中让你拥有掌控权。
00:00:24所以在本视频中，我将详细拆解这个工具是什么、它是如何工作的，
00:00:27以及你该如何充分利用它。
00:00:30这样你就可以开始构建你真正喜欢的前端设计了。
00:00:33在我的上一期设计相关视频中，我们稍微触及了一下 Impeccable，
00:00:36但那是在“如何本质上将审美注入网页设计流程”的大背景下探讨的，
00:00:41这样我们就能摆脱那些千篇一律的 AI 平庸产出。
00:00:44如果你还没看过那部视频，我强烈建议你去看一下，因为我不会
00:00:48重复所有关于注入审美和在设计过程中
00:00:53避免 AI 平庸化你需要了解的基础知识。
00:00:57相反，我们将把 Impeccable 作为一个具体的工具来进行深度剖析。
00:01:01现在，内容会有一些重叠，但了解这些背景对你接下来的学习很有帮助。
00:01:05在对工具本身进行全面深入探讨之前，我们先来谈谈它的一些改动，
00:01:09因为很可能你们中的许多人在几个月前使用过这个工具，
00:01:12现在正纳闷：既然到了 4.0 版本，到底有什么实际变化？
00:01:15过去几个月里最大的变化就是实时模式（Live Mode）。
00:01:17这在它们 2.0 阶段时还处于类似 alpha 测试的阶段，
00:01:21而现在它已经变得更加完善了。
00:01:23它运行得更加流畅。
00:01:24它响应更快，并且再次允许我们跳出终端，
00:01:28开始进行可视化的迭代，这让设计过程变得简单了许多。
00:01:32另一个重大变化是世界（Worlds）。
00:01:34他们谈到在这个技能中添加了 177 个高评价的世界。
00:01:39这到底是什么意思呢？
00:01:40嗯，这意味着他们本质上创建了 177 个不同的设计模板、
00:01:46以及各种你可以用来从头开始创建网站的美学风格。
00:01:50这有点像我们在上一期视频中手动做的那样，
00:01:54Impeccable 将向你展示它拥有的第一种设计构想，
00:01:59然后它会为你提供其他几种截然不同的选项。
00:02:03关于他们如何本质上创建了这个功能，以确保
00:02:05每次出来的都不是平庸的垃圾，他们有一整篇文章专门介绍。
00:02:09我不会在这里深入探讨，因为那会变成一场长达 15 分钟的讨论。
00:02:12但它赋予我们的是选项，而且是我们可以直观看到的选项。
00:02:17当我们将诸如 Higgsfield MCP 之类的工具连接到它时，
00:02:20我们实际上可以看到它在我们特定网站上的呈现效果。
00:02:23你稍后就会看到。
00:02:24这样它就不再只是一个普通的通用模板。
00:02:25你会看到你的东西在这些不同的视觉主题中会是什么样子。
00:02:31这两点——实时模式和世界，是过去几个月里
00:02:35最大的区别。
00:02:36我认为它们可不是小改动，因为它们全关乎迭代，
00:02:39并在整个设计过程中为我们提供选择。
00:02:42现在，让我们快速概览一下 Impeccable 本身，
00:02:45因为你们当中可能有些人从未使用过这个应用。
00:02:47所以我们到底在说些什么呢？
00:02:48嗯，Impeccable 是一个免费的开源技能，在 GitHub 上大约有 50,000 个星标。
00:02:53GitHub 自身甚至将其整合到了他们自己的 AI 工具中，因为他们太喜欢它了。
00:02:57这个技能的核心论点是：我们要识别 AI 平庸化（slop）的模式。
00:03:02他们将大约 40 种不同的东西视为 AI 平庸化，比如紫色渐变、
00:03:05蓝色渐变以及诸如此类的东西。
00:03:07取而代之的是，我们用可以说是更好的设计来取代它们。
00:03:12Impeccable 本身是一个技能，但包含了 23 个不同的命令，涵盖了设计连续体的不同部分。
00:03:18这包括形状、打磨、变安静、动画制作、新手引导、配色、排版等等等等。
00:03:25虽然这些功能中的每一个所做的事情略有不同，但重点是这样的。
00:03:28你可以在右侧看到这一点。
00:03:30Claude 给我们的是那种有点平庸、有点无聊的东西。
00:03:32我们一眼就能看出这是 AI 做的。
00:03:34而 Impeccable 给我们的东西更干净、更少套路，对用户来说整体更好。
00:03:39至于那 23 个不同的命令，如果你访问它的官网 impeccable.style，
00:03:44你就可以亲眼看到它们的实际效果。
00:03:46所以，你知道的，我们这里有 Claude code 版本，这里有 impeccable 版本。
00:03:50你可以逐一查看，对这些功能实际做出的效果有一个直观的概念。
00:03:54网站上的文档写得很深入，而且我刚才关于 AI 平庸化的说法其实有口误。
00:03:58实际上有 64 种不同的模式，他们认为这些模式暴露了 AI 的默认设置和生产缺陷。
00:04:04你可以看到这些年它是如何变化的。
00:04:07就像我们都还记得 ChatGPT 的早期一样，对吧？
00:04:10而现在，你知道的，AI 的平庸产出看起来更像是这样。
00:04:14即便如此，这些仍然是我们想要摒弃的东西。
00:04:16简而言之，这就是 Impeccable。
00:04:18识别平庸，然后给我们更好的选项，让我们能够通过其实时工具进行迭代，甚至是可视化迭代。
00:04:23现在，要实际使用这个东西，安装起来非常简单。
00:04:26只需要运行 npx impeccable install 即可。
00:04:29如果你觉得这太让人困惑，你也可以访问 impeccable 的 GitHub 页面。
00:04:33你可以复制这个 URL，把它粘贴到 Claude code 里并说：嘿，你能帮我安装一下 impeccable 吗？
00:04:39现在，一旦你安装了 impeccable，正如我之前所说，你想要安装的另一个东西是 Higgsfield MCP，
00:04:44当 impeccable 为我们构建该世界的特征或本质上为我们的网站展示所有不同的美学风格时，它将能够调用该工具。
00:04:51现在，要设置 Higgsfield MCP——它同样是市面上几乎所有 AI 图像和视频生成器的聚合器——
00:04:57你只需访问 Higgsfield.ai，前往顶部标有 MCP and CLI 的地方，
00:05:03来到这里打开 Claude code，你只需复制这里的提示词，它就会引导你完成身份验证过程。
00:05:09在那之后，我们要做的第一步就是简单地运行 impeccable init。
00:05:15在这种情况下，我打开了一个新文件夹，并把它命名为 impecc-test。
00:05:19你可以创建任何你想要的文件夹或目录，但命令是斜杠 impeccable init。
00:05:23一旦你这样做了，它就会开始询问关于你正试图构建什么的问题。
00:05:27所以我打算说我正在构建一个真正的落地页。
00:05:31然后它会询问这个项目应该使用什么技术栈。
00:05:33如果你不知道，你可以直接让它使用默认技术栈，这也是我们今天要做的事情。
00:05:36然后它会询问关于素材（evidence）的问题，本质上就是你希望这个网站上有什么内容？
00:05:40如果你有可以提供的截图，如果你有实际的数据，那就太好了。
00:05:43如果你没有其他任何东西，你基本上可以告诉它全部凭空捏造。
00:05:47所以我先让它生成虚拟数据，看看它会返回什么，以后随时可以修改。
00:05:52所以在我们回答了这些问题之后，impeccable 随后调用了 Higgsfield MCP 来创建那些不同的世界，
00:05:58本质上就是为我们的网页创建那些不同的设计美学。
00:06:02它正在询问我们想要选择哪一个。
00:06:04它的做法是将它在本地主机（localhost）中调出，以便你实际看到它。
00:06:07所以它看起来像是这样的。
00:06:09所以这是它想出的第一个。
00:06:13这本质上将是 Pathfinder 的英雄区（首屏）。
00:06:15然后我们看到了所有这些其他的选项。
00:06:17同样，这非常让人想起我们在上一期视频中所做的事情。
00:06:20我们当时就像是：嘿，为我们想出不同的选项，这样我们才能真正看到它。
00:06:23所以我们有这个，我们有那个。
00:06:26再说一次，这就像是一个关于它会是什么样子以及你想去哪里的高层级草图。
00:06:31我们有这个选项。
00:06:33如果我们不喜欢这些，我们可以在右下角重新滚动生成（re-roll）。
00:06:36我们还可以给它一个可选的引导（steer）。
00:06:38所以我们可以说：嘿，我挺喜欢第三个的，但让我们针对那个做更多变体，或者诸如此类的话。
00:06:44在这种情况下，在这些选项中，我有点喜欢它想出的第一个。
00:06:48所以我只要说构建这个。
00:06:50所以我点击这个，它就会被发回终端。
00:06:53所以现在它将开始以我们选择的风格构建该落地页的原型。
00:06:58作为该构建过程的一部分，它随后将向我们展示该特定风格的多个变体。
00:07:03所以我们在开始时有一堆不同的风格。
00:07:06我们选择了一种风格，现在我们有了这种风格的变体。
00:07:09所以它给我们提供了星座选项（constellation option）。
00:07:12它给了我们类似档案拆分（dossier split）的东西，然后还有寻找原因（find the why）。
00:07:17再次强调，就像之前一样，如果我们想给它一个可选的引导，我在底部有一个提示窗口可以指向它。
00:07:23但对于这个，我大概觉得，我想我们还是选第三个吧，然后说构建这个。
00:07:30你可以在终端里看到它通过了。
00:07:31它说时间线已批准。
00:07:33在表面简介中记录批准，然后加载工艺楼层并开始构建。
00:07:37这就是我喜欢 Impeccable 的地方，事实证明它在做出决策的方式上非常视觉化。
00:07:41并且在每一步，我们都有引导它的选项。
00:07:43它不是一个极度教条死板的技能。
00:07:46你也见过那种情况，比如：来自某个GitHub仓库的随机技能。
00:07:51它制作的网站看起来真的很酷，但那是它唯一能创建的网站类型。
00:07:55这有点像是一招鲜。
00:07:57像 Impeccable 这样的东西非常通用，这意味着我认为它有较低的下限。
00:08:02像这种所谓的单面手技能，做出来的网页确实挺炫酷，但也就局限于那种风格。
00:08:08而 Impeccable 留给你的犯错空间要大得多，但我们可以把它做得更加定制化。
00:08:14最后，如果我们真的去打磨它，我想你最终会得到一个更好的产品。
00:08:18所以 Impeccable 实际上完成了网站的创建。
00:08:20它在第一轮迭代结束时做的是，它启动了一个名为“Impeccable 完成审阅者”的子代理（sub-agent）。
00:08:26所以它本质上在检查一切，以确保在构建这个东西的过程中，
00:08:31我们实际上没有（你知道的）搬起石头砸了自己的脚，添加了一些所谓的 AI 平庸化模式。
00:08:36因此，它使用了一个带有全新上下文窗口的独立子代理来进行额外的跑通检查。
00:08:41所以它应该扮演第二双眼睛的角色，以确保我们着手构建的东西正是我们实际构建出来的东西。
00:08:46这就是它为我们构建的网站。
00:08:47请记住，我们给 Impeccable 的信息非常少。
00:08:51我只说，嘿，我希望它是 Pathfinder。
00:08:52我没有给它任何参考图片。
00:08:53我甚至连号召性用语（CTA）都没给它。
00:08:55我只是说，这是一个虚构的 AI 分析公司。
00:08:58为它创建一些信息。
00:09:00这就是我们得到的结果。
00:09:02如果你把这个和如果我们只使用诸如前端设计技能之类的东西、用同样的提示词所能得到的结果进行比较，两者的产出截然不同。
00:09:09主要在于，这不是你会看到的那种平庸的通用产出。
00:09:13现在，这很棒吗？
00:09:14这真的是我们一步到位想要的东西吗？
00:09:16可能不是。
00:09:17但我想，当我们使用 AI 和 Claude 进行任何创造性工作时，你真的必须抛弃“这必须是一步到位的东西”这种想法。
00:09:24它总是一个迭代的过程，这也是为什么 Impeccable live 功能如此棒的原因。
00:09:29所以要使用 Impeccable live 功能，我们只需要输入 impeccable 斜杠，然后输入 live。
00:09:35它就会为我们调出这个功能。
00:09:37现在，一旦我们这样做了，它就会把网站重新调出来，我们会在底部看到这个小栏。
00:09:40现在，你主要想用的是拾取元素（pick element）功能，我们在正下方可以看到它。
00:09:45所以，你知道的，我有插入（insert），但我可以点击拾取（pick），然后我可以看到所有不同的组件。
00:09:49所以假设我想调整这个。
00:09:51我点击它，然后我有一个提示词窗口。
00:09:53现在，我可以在这里添加任何我想要的东西，并且我可以查看我想要多少个变体。
00:09:57你可以有一个变体、两个变体，一直到四个。
00:10:00你还可以使用麦克风。
00:10:02你也可以准确选择你想要做什么。
00:10:04所以，比方说，如果我想让它更大胆、更安静，或者进行打磨（polish）或排版（typeset）等特定领域的操作，我们也可以指定这一点。
00:10:12现在，请记住，这些都与 Impeccable 命令有关。
00:10:16如果我回到 Impeccable 网站，我可以在这里看到所有这些，对吧？
00:10:19你知道的，更安静（quieter）、超速（overdrive）、赋予特色（characterize），所有这些诸如此类的事情。
00:10:25好的，所以如果你在想：哦，它到底在问我什么？
00:10:26这有什么用？
00:10:27来这里查阅一下就行。
00:10:28所以假设我只是想让这个更大胆一点，对吧？
00:10:31我只想把它变得更大胆。
00:10:32我甚至不需要给它提示词，我想要三个不同的变体。
00:10:35我只需要点击那个，按回车，它就会开始生成这些变体。
00:10:39如果你跳回终端，你会看到该命令被发送到了那里，因为你所在的会话一直在轮询实时模式事件。
00:10:47现在，在它工作的同时，我们来谈谈这里还在发生什么。
00:10:50所以我们有一个检测（detect）按钮，它基本上可以检测到任何那些 AI 平庸化反模式。
00:10:56如果你是从头开始做这个，它在创建过程中其实已经做过那一步了。
00:10:59这个按钮更多是为你已经在其他地方生成的网站上使用 Impeccable Live 准备的。
00:11:03我们有 design.md。
00:11:06我把这个稍微移开一点。
00:11:07这是我们的整个设计文件。
00:11:09我们所有的颜色、组件、我们为按钮所做的设置。
00:11:13再次强调，这与 Google Stitch 非常相似，也和你在如今的 Claude design 内部看到的一样。
00:11:19如果我们愿意的话，我们也可以查看实际的原始文件。
00:11:23我们还具有插入内容的能力，我们这里也有一个提示词窗口，也就是你在引导页面。
00:11:28所以这几乎和你打开终端说“嘿，我们把 X、Y 和 Z 做得稍微有一点不同”完全一样，而不是试图去挑选一个特定的组件并做我刚刚向你展示的那三种变体。
00:11:38说到那三个变体，这是我们告诉它让它更大胆时它给我们的结果。
00:11:42所以这是变体一，变体二我们有点像加了红线，然后我们有变体三。
00:11:50我们也有微调这些东西的能力，所以我可以稍微摆弄一下填充（fill）。
00:11:56我想要开启还是关闭邮票边框（stamp border）？
00:11:58所以我不但有三个变体，我还有每个变体自身的变体，老实说我太喜欢这个了，这比起不得不提示 Claude Code 自己去创建某种微调部分要省事得多。
00:12:09一旦你喜欢它，你所需要做的就是点击接受（accept）。
00:12:12再说一次，那会做些什么呢？
00:12:13它只会把该信息发回终端。
00:12:15现在到了这个阶段，剩下的全部工作就是迭代、迭代、再迭代。
00:12:19现在，我们不必在 Impeccable Live 内部完成所有事情，尽管这就是我一直在展示的内容。
00:12:23Impeccable Live 的用例正如你所见，是用于特定组件的微调和变体。
00:12:30如果我们想考虑大局，我们想要大的、宏观的布局改变，或者完全朝着另一个方向发展，我们就需要为此使用终端。
00:12:37所以如果是这样的话，假设我一点也不喜欢这个设计。
00:12:40我就想：嘿，就像我们做了变体一样，结果发现这不是我喜欢的。
00:12:44好吧，那我们就做我们在设计过程中通常会做的事情，给它喂入一些不同的参考资料。
00:12:48所以这里的这个东西有点像是我的灵感库，里面收集了我喜欢并在全网各处看到的各种英雄页和设计。
00:12:57所以如果我现在想要一个新的变体，它看起来像是这样的，那我接下来要做的就是将 Claude Code 指向这个库，或者丢入截图并说：嘿，让我们尝试一个新的变体，做一些看起来像这样的东西。
00:13:10所以假设我们反而想要采用类似 ASC2 那种网页版块、我们正在追求的那种氛围。
00:13:17所以我可以复制这张图片，将其粘贴进去，然后像这样给它一个提示词。
00:13:23所以看一下我给你的这张参考图片。
00:13:26这也是我的品味库（taste vault）里的东西。
00:13:28这目前正在 4610 本地主机端口上运行。
00:13:33我有点想在我们创建的落地页上换一个新的方向。
00:13:38我想要采用这种 ASC2 类型的风格。
00:13:42请记住，我们仍然可以访问 Higgsfield MCP。
00:13:44所以如果我们需要为背景英雄页创建素材，我们也可以做到这一点。
00:13:48但请继续，创造一个这样的变体。
00:13:51所以同样，这是一个巨大的颠覆性改变，并不是我们一定会用实时工具去做的那种事。
00:13:56这是我们网站的第二个版本。
00:13:58再次强调，这与我们之前看到的有很大出入。
00:13:59它根据我们的参考确实带有一个 ASC2 主题，但这仍然是一个基于 impeccable 的产品。
00:14:05它运行了 impeccable 审阅者，确保其中没有平庸的套路。
00:14:08所以在这个案例中，我们能够鱼与熊掌兼得。
00:14:11正如你之前看到的，我们可以再次调出 Impeccable Live。
00:14:14我们可以开始做一些事情。
00:14:16我认为看起来很酷的一点是，如果我们对其中每一个部分基本上都运行动画（animate）功能，给它赋予一点点微小的运动感。
00:14:23这样它就不会显得那么静态，但这正是你想要去接近它的方式。
00:14:27宏观大局交给 Claude Code，微观细节则真正通过 impeccable 来搞定。
00:14:33事实上，现在当我看着这个时，如果你仔细观察，这个首屏上的数字进进出出确实有一些动态效果。
00:14:39这就是我今天要留给大家的内容。
00:14:41Impeccable 是你工具箱里用于任何前端设计工作的绝佳工具。
00:14:46正如你所看到的，如果你 100% 呆在 impeccable 生态系统内，你其实可以走得很远。
00:14:51我认为它最好的用例是采取更广泛的设计方法，引入我们在最后看到的外部来源（例如参考资料）。
00:15:00而整个那种工作流正是我在上一期关于如何击碎 AI 平庸化的视频中一步步详细介绍的。
00:15:08但我认为深入剖析我认为目前业内最好的前端设计技能是很棒的。
00:15:13所以一如既往，请让我知道你们的想法。
00:15:15如果你想上手我的 Claude Code 大师班，请务必查看 Chase AI Plus。
00:15:19它本周实际上会有一个巨大的更新推出，这让人很兴奋。
00:15:23除此之外，我们回头见。