Transcript
00:00:00"AI 没有品味，这完全是你的错。"
00:00:03你的视觉输出之所以如此平庸，
00:00:05是因为你的提示词太平庸了。
00:00:08你没有使用那种术语、
00:00:10语言和命名法，
00:00:11真正的设计师会使用的那种。
00:00:13但幸运的是，我找到了一个解决方案。
00:00:16它叫 Impeccable。
00:00:17这是一个开源的 GitHub 仓库，
00:00:20实际上它是一个单一技能，
00:00:23我们可以将其导入 Cloud Code，
00:00:25用来解决这个确切的问题。
00:00:27它为 Cloud Code 提供了一种设计语言，
00:00:29教会它什么才是真正的好设计，
00:00:32同时告诉它要避免什么样的糟糕设计。
00:00:36今天，我不仅要向你们展示这个技能是如何运作的，
00:00:39我们还要用它来构建一个全新的网站，
00:00:42并编辑我现有的一个网站。
00:00:45所以，看完这个视频后，你就再也没有借口
00:00:48去创建那些平庸的前端设计了。
00:00:51Impeccable 是一个开源的 GitHub 仓库，
00:00:54它为我们提供了一种单一技能，
00:00:55让我们能够创建出
00:00:58不会让人觉得糟糕的前端设计。
00:01:00虽然它只是一个单一技能，
00:01:01但这样说有点低估它了，
00:01:03因为这一个技能包含了 23 个不同的命令。
00:01:07它有七个领域特定的参考文件。
00:01:10它告诉我们要避免什么样的反模式，
00:01:13甚至允许我们在浏览器中编辑内容。
00:01:17所以这实际上是一个非常强大的工具。
00:01:20这不仅仅是一个前端设计技能，
00:01:22只用几段话
00:01:24告诉 Cloud Code 应该做什么。
00:01:26但这其复杂性可能会让人有点不知所措，
00:01:28因为这里确实有 23 个不同的命令，
00:01:31它们在你的设计相关方面，
00:01:34执行许多不同的操作。
00:01:35仓库里已经把它们全部拆解分析了，
00:01:37但说实话，你永远记不住所有这些。
00:01:40不过有两件事会有所帮助。
00:01:42第一，显而易见，Cloud Code 会做得很不错，
00:01:44它能弄清楚你应该使用哪一个命令。
00:01:46第二，他们有一个完整的网站，
00:01:49展示了这 23 种技能中每一个的作用。
00:01:53GitHub 链接指向了那个网站，
00:01:54也就是 impeccable.style。
00:01:56很酷的一点是，对于每一个适用的技能，
00:01:59我们都能看到使用前是什么样子，
00:02:02也就是普通的 Cloud Code，
00:02:03以及使用该特定 Impeccable 命令后
00:02:05呈现出的效果。
00:02:07所以，这非常巧妙。
00:02:09Impeccable 确实有七大设计支柱，
00:02:12排版、色彩、空间设计、响应式、
00:02:15交互、动效和用户体验文案。
00:02:17所以它不仅仅是针对色彩之类的东西。
00:02:21它非常全面。
00:02:22在这里，我们可以滚动查看
00:02:25所有这些不同的命令。
00:02:27正如我所说的，可以看看它们
00:02:29使用和不使用该技能时的视觉差异。
00:02:31所以如果你问，‘这到底有什么用？’
00:02:34‘我能看到它的实际操作吗？’
00:02:35那么，这里就是查看的地方。
00:02:37该网站还包括一个案例研究，
00:02:39展示了他们如何利用 Impeccable
00:02:40和一张单一图片来创建这个网站。
00:02:42我觉得它看起来很酷。
00:02:43最后，他们展示了这种实时模式，
00:02:45我们稍后会进行一番尝试，
00:02:47它目前处于 Alpha 测试阶段，
00:02:48让我们能够像之前说的那样，
00:02:51直接通过浏览器处理我们的网站。
00:02:53它还有一个 Chrome 扩展程序和命令行工具 (CLI)，
00:02:56但老实说，
00:02:56我们通过这个技能本身就能获得 99% 的价值。
00:02:59所以这就是我们今天关注的重点。
00:03:01安装这个工具只需一行代码，
00:03:04你所要做的就是复制它，
00:03:06进入你的终端并粘贴进去。
00:03:07现在，当涉及到使用 Impeccable 时，
00:03:09确实有两种路径可供选择。
00:03:11一个是绿地项目 (Greenfield)，
00:03:12也就是从零开始构建网站，
00:03:14第二个是编辑现有网站。
00:03:17今天我们要兼顾这两者，甚至更多，
00:03:20因为我不但会向你们展示
00:03:22如何从零开始构建，
00:03:23我还会展示当我们配合某种参考图片，
00:03:25比如心情板 (mood board)，
00:03:27从零开始构建时是什么样子。
00:03:30在那之后，我们会进入我实际的网站，
00:03:33看看 Impeccable 对它有什么看法，
00:03:36以及我们能在我的作品中找出哪些‘烂摊子’。
00:03:41最后，我们将看看 Impeccable Live，
00:03:43它正处于 Alpha 测试阶段，
00:03:44看看它目前的实际表现到底有多好。
00:03:48但在我们深入实际构建之前，
00:03:50先简短地介绍一下每个人最喜欢的赞助商，也就是我。
00:03:54上个月我发布了 Cloud Code 大师班，
00:03:56这是从零基础到 AI 开发者的第一途径，
00:03:59特别是如果你没有技术背景的话。
00:04:02我每周都会更新这门课程，
00:04:05所以这是找出
00:04:07如何真正使用这个强大工具的最佳场所。
00:04:10我们专注于真实的用例。
00:04:12我刚刚发布了我的整个
00:04:13Cloud Code 代理操作系统 (Agenic OS) 课程计划。
00:04:16所以如果你想上手尝试，
00:04:18可以在 Chase AI Plus 中找到它。
00:04:20置顶评论中有相关链接。
00:04:23那么让我们开始吧，
00:04:24我们将从这个绿地项目开始。
00:04:27所以我们要从零开始构建一个网站。
00:04:29再说一次，命令太多了，
00:04:31这可能会让人感到有点困惑。
00:04:32如果你要从头开始做某件事，
00:04:35我建议从 impeccable craft 开始，
00:04:39因为它会包含
00:04:41一些像 impeccable teach 这样的辅助命令。
00:04:44现在，所有这些都意味着什么？
00:04:45嗯，impeccable craft 的意思基本上就是
00:04:48它会经历它自己版本的计划模式 (plan mode)，
00:04:50并询问有关我们网站、产品的信息，
00:04:53以及我们到底想要构建什么。
00:04:55在这个过程中，它会创建两个文件。
00:04:59它会创建一个 product.markdown
00:05:01和一个 design.markdown。
00:05:02现在，这个 design.md 基本上
00:05:07和我们在 Google Stitch 中看到的是一样的。
00:05:09你们还记得 Google Stitch，对吧？
00:05:11谷歌的免费设计工具。
00:05:13你有这整套设计系统，
00:05:14并且拥有这个 design.md 文件，
00:05:16这是一个非常深入的 Markdown 文件，
00:05:20告诉 AI 如何构建东西。
00:05:21这整个 design.md 的构建方法
00:05:24正在成为某种行业标准，可以这么说。
00:05:27你现在到处都能看到这种形式。
00:05:29而 Impeccable 也遵循这种方法。
00:05:31所以本质上它会采访我们，
00:05:32弄清楚我们正在构建什么，
00:05:34以及我们希望它看起来是什么样子。
00:05:36一旦采访结束，
00:05:37它就会继续为我们构建着陆页。
00:05:39所以，在 Cloud Code 中，
00:05:41我在一个名为 impeccable-test 的新目录里。
00:05:44命令是 impeccable-spacecraft。
00:05:47提示词是：‘让我们为我的伪 SaaS 产品 Lighthouse 构建一个着陆页。’
00:05:49‘它是一个面向独立开发者/小团队的分析平台。’
00:05:51‘你想问什么问题尽管问。’
00:05:54‘你想问什么问题尽管问。’
00:05:56这和我在上一期视频中
00:05:58给 Huashu Design 的提示词基本一样。
00:06:01如果你还没看过那个视频，一定要去看一下，
00:06:03那本质上是一个 Cloud Design 的克隆版。
00:06:06所以看看 Impeccable 如何对标那个设计系统，
00:06:08将会非常有趣。
00:06:11如果你还没看过那个视频，
00:06:13我会把它链接在上面。
00:06:14它反馈了 13 个问题。
00:06:16前四个都是关于产品的，
00:06:18比如谁是实际的客户？
00:06:19你如何描述 Lighthouse？
00:06:21访问者的心态是什么？
00:06:22主要的行动号召 (CTA) 是什么？
00:06:23这个着陆页的实际意义是什么？
00:06:25接下来的几个问题都是关于语气和外观的，
00:06:28然后在深入探讨范围之前。
00:06:29我们只是做首屏吗？
00:06:30完整滚动，真实截图？
00:06:32比如，你还有其他资产给我吗？
00:06:34我喜欢这里问题的深度。
00:06:36这比 Huashu Design 在上一个视频中问我们的问题还要多，
00:06:40非常接近你从 Claude Design 之类的工具
00:06:41那里得到的问题数量。
00:06:43这种深度让我感到非常欣慰。
00:06:44所以我打算把这些问题都填好。
00:06:46我会保持得很标准。
00:06:49我不需要做什么疯狂的事情。
00:06:50我们要请求一个完整滚动页面。
00:06:52所以这是 Impeccable 在几乎没有指导的情况下
00:06:53首次尝试给我们的结果。
00:06:56我们所做的真的只是回答了它的问题。
00:06:57我们没有给它任何资产甚至示例。
00:06:59现在，立刻，
00:07:01当我看到这个的时候，我绝对不认为是 AI 垃圾，
00:07:02虽然你开始在这些更现代的前端设计中，
00:07:05到处看到这种奶油色和衬线字体，
00:07:08特别是像 Claude Design 那样的东西。
00:07:11我确实喜欢它出来的这个仪表盘，
00:07:13我绝对喜欢这个。
00:07:16我喜欢我看到的不仅仅是你在每个 AI 设计网站上
00:07:18都能看到的标准四方格 (bento boxes)。
00:07:20这部分看起来很不错。
00:07:23我们有引用、完整的价格方案，
00:07:25然后是类似‘嘿，去把你的电子邮箱给我们’的部分。
00:07:26所以作为第一次尝试，相当不错。
00:07:30但我最近在用 Cloud Code
00:07:32所以第一版来说，还挺不错的。
00:07:35但我最近真正想做的是
00:07:37在使用 Claude Code 进行网页设计时
00:07:40我不会只让它给我一个像这样的单一输出。
00:07:44所以我告诉 Impeccable，也就是 Claude code
00:07:47我不想要网站的单一布局。
00:07:50就像你在这里看到的，这是它给我的第一版。
00:07:52我想要看到三种不同的变体供我选择。
00:07:56而且我希望它们之间有明显的区别。
00:07:59最重要的是，我希望能够点击浏览它们
00:08:01并且我想并排看到它们。
00:08:03所以我想要看一些宏观布局
00:08:05在我们真正深入细节
00:08:08并开始摆弄组件之前。
00:08:09于是 Impeccable 给了我这个。
00:08:11我们有刚才看到的编辑版。
00:08:15它还创建了一个称为“沉浸式”的版本。
00:08:17绝对是不同的风格，颜色丰富得多。
00:08:20然后我们还有粗野主义风格。
00:08:22这是“沉浸式”版本的样子，
00:08:24确实非常不同。
00:08:26我不得不说，在正面有一些重叠，
00:08:29但它看起来与大多数人工智能生成的内容大不相同。
00:08:34当我们浏览时，你知道，我确实有点喜欢这个网站的
00:08:39大胆风格，尽管我不太了解这些颜色。
00:08:43但我得说我确实喜欢这个粗野主义风格的。
00:08:44它非常有灰度感，
00:08:46但我喜欢数字的设置方式。
00:08:48我喜欢这些方块那种偏移的感觉。
00:08:52线条没有完全对齐。
00:08:54我其实非常喜欢这个。
00:08:56我认为这看起来非常酷，而且非常独特。
00:08:58所以我想我们要做的就是现在
00:09:02选择这一个。
00:09:04而且你要知道，这种三重设计
00:09:07以及一次性全部看到的效果，
00:09:08那并不是 Impeccable 原生自带的功能。
00:09:12这是我自己的做法。
00:09:13这只是一个简单的提示词。
00:09:14我强烈建议你无论使用什么设计或技能
00:09:17都这么做。
00:09:19我想这是我从 Google Stitch 那里学到的
00:09:23因为 Google Stitch 让这种操作变得非常简单，
00:09:25你可以在同一个页面上看到
00:09:26所有这些不同的变体，
00:09:29并进行比较和对照。
00:09:30对我个人来说，我必须看到这些视觉效果，
00:09:33才能知道我想往哪个方向发展。
00:09:37所以我强烈建议你这么做。
00:09:38你不必只做三个。
00:09:39你可以做六个，你可以做一百万个。
00:09:41而且当你提示 Claude code
00:09:42做这种事情时，只需告诉它，
00:09:44我希望能在同一页面上看到所有三个。
00:09:47我希望能够逐个全屏打开它们。
00:09:50你还可以让它为你提供一堆
00:09:53不同的宏观选项，
00:09:55然后你就可以从中选择，
00:09:57再让它创建这些内容。
00:09:57因为显然生成这些内容需要一点时间。
00:09:59所以现在我们有了一个喜欢的落地页，
00:10:01现在是时候开始编辑一些东西了，
00:10:03这就是全新的 Impeccable Live 发挥作用的地方。
00:10:06所以我们要做的就是说，
00:10:07嘿，让我们在这个粗野主义页面上运行 Impeccable Live。
00:10:10现在，一旦你运行该命令，
00:10:12Claude code 就会告诉你实时模式已启动。
00:10:14它应该会给你一个本地主机的链接，
00:10:18你需要进入该链接，或者你可以直接刷新浏览器。
00:10:20在里面，你可以看到
00:10:22当我滚动时，内容现在被高亮显示了。
00:10:26在底部，我们也有一些内容。
00:10:29首先，我们有 design.md。
00:10:32它在右侧弹出了侧边栏。
00:10:35如果我点击原始数据，我就能看到它实际创建的所有内容。
00:10:39现在，如果我点击一个特定的组件，
00:10:41比如这个主要文案，就会弹出一些选项。
00:10:45首先，我们有自由格式，即，
00:10:47嘿，我只需给它一个文本提示，
00:10:50或者我基本上可以使用
00:10:52所有这些不同的 Impeccable 命令。
00:10:54所以更粗体、更安静、提炼、润色、适配。
00:10:56这些只是我们之前谈到的那 23 个 Impeccable 命令的一部分。
00:11:00所以假设我做类似“更粗体”的操作。
00:11:02所以“更粗体”本质上是一个预设计的提示词。
00:11:04如果我们看这里的 Impeccable 文档，
00:11:09“更粗体”要做的是让它变得更粗体。
00:11:12所以这是之前，这是之后。
00:11:15它只是让它看起来更显眼一点。
00:11:18具体的定义是它推动安全设计
00:11:21向更有影响力的方向发展，同时又不会陷入混乱，
00:11:26它会说明何时使用以及如何工作等等。
00:11:28所以如果我们在上面使用“更粗体”，说实话，
00:11:31我觉得这已经够粗体了。
00:11:32我不知道这是否是最好的选择。
00:11:34我可以进一步细化它。
00:11:35所以我可以在“更粗体”的基础上加上任何我想要的提示词。
00:11:37假设我写上“添加颜色”。
00:11:40然后我有这个显示“乘以三、乘以四、乘以二”的地方。
00:11:43那是它要向我展示的变体数量。
00:11:46然后我们点击开始。
00:11:47所以这在某种程度上有点像是
00:11:50我们之前所做的变体操作的微观版本，
00:11:51我在这里说，好吧，给我这个东西。
00:11:56改一下，给我看看变体。
00:11:58现在我们在微观层面做这件事，
00:12:00而且我们在想要达到的目标方面可以更加具体，对吧？
00:12:03在这种情况下，我们正在使用“更粗体”。
00:12:06我们可以选择那 12 个选项中的任何一个，
00:12:08这是它想出来的结果。
00:12:09所以是的，与其他选项相比非常大胆。
00:12:10这是变体一，变体二，
00:12:13稍微柔和一点，
00:12:14然后变体三有点狂野，对吧？
00:12:17还有这个调整变体的能力。
00:12:21所以如果我点击“调整”，对吧，
00:12:22我们可以稍微改变偏移量。
00:12:25例如这个，像狂野风格，你希望它看起来是什么样？
00:12:27你希望颜色看起来是什么样？
00:12:30所以再次，如果我们回想我的上一个视频
00:12:31或者你回想 Claude design 的调整，
00:12:36这基本上就是微调，
00:12:39这适用于所有变体。
00:12:42隐藏密钥，显示密钥，所以我们可以做很多事情。
00:12:44假设我们想选择这个。
00:12:47所以如果我想选择它，我该怎么做？
00:12:50我只需要点击接受，它就应用了。
00:12:53现在如果你点击接受，它像那样出现故障，
00:12:54只要检查 Claude code，
00:12:56它基本上是在应用你的更改并重新加载它。
00:13:00这就是更改生效后的样子。
00:13:02现在我没谈到的另一件事是“检测”。
00:13:03如果我在这里点击检测，它要寻找的
00:13:06本质上是它试图看看，这里有没有任何 AI 的垃圾内容？
00:13:09它是否检测到我们之前谈到的任何反模式？
00:13:10现在，因为这是由 Impeccable 完整创建的，
00:13:13我非常怀疑它能找到任何东西，
00:13:17这就是为什么我们没有看到任何显示出来的东西。
00:13:19但我们稍后在看我自己的网站时会看到
00:13:20是否如此。
00:13:24但这基本就是实时系统的工作方式。
00:13:26我认为这部分真的很酷，也是我认为它
00:13:28与其他前端设计技能和代码库不同的地方，
00:13:31尤其是我们可以创建额外变体的事实。
00:13:32我非常看好能够一次看到
00:13:34所有这些不同的变体，
00:13:37并以这种非常细微、细微、细微的层面来调整它们。
00:13:41所以我喜欢这个，但同样，它是 alpha 版本。
00:13:42所以，你知道，也许你会遇到一些错误。
00:13:45看起来有几件东西
00:13:47似乎有点粗糙，
00:13:49就像你刚才看到的重新加载一样，但嘿，
00:13:52我认为这超级酷。
00:13:54所以如果你使用 Impeccable，一定要检查一下。
00:13:57不要只是让它创建完就结束了。
00:13:59进入实时模式并摆弄它。
00:14:01现在，一旦你把网页弄到你喜欢的样子，
00:14:03你还有更多命令可以运行。
00:14:04所以我们可以运行类似“润色”的命令，
00:14:07它会进行最终的设计系统优化。
00:14:09我们可以做类似“加固”的操作，
00:14:11它会查看边缘情况和错误，
00:14:13确保一切正常。
00:14:16就像我说的那样，这非常、非常复杂，
00:14:18而且就我们可以运行的命令数量而言非常深入。
00:14:20但为了节省时间，我们现在要做的
00:14:22是我将向你展示如何从零开始构建，
00:14:24但这次我们将要使用
00:14:25本质上像是一个情绪板或一个样机，
00:14:28是我们想要推送到 Impeccable 的愿景类型。
00:14:30因为我想看看当我们复制他们的案例研究时这看起来是什么样，
00:14:33因为他们所做的是他们拿了这张图，
00:14:35塞进 Claude Code，放进 Impeccable，
00:14:38然后好，创建了这个网站，
00:14:40他们能够得到一些看起来非常棒的东西。
00:14:43所以我去创建了一些图像，
00:14:45与 Impeccable 在其案例研究中使用的美学相匹配，
00:14:48但我们改用 Lighthouse，
00:14:50这样我们至少可以进行一次
00:14:52某种意义上的一对一比较。
00:14:53所以我有点喜欢这个，所以我认为我们会选择这个。
00:14:54就像之前一样，我正在运行 Impeccable craft 作为技能。
00:14:55它随后问了我一系列与之前类似的问题，
00:14:58而我基本上告诉它，就坚持
00:15:02那种从我给你的图像中得到的基调和氛围。
00:15:04所以这是它想出来的结果，
00:15:07坦率地说，还有点不尽如人意。
00:15:09我认为只是把这种情绪板扔给它
00:15:11并告诉它，“嘿，让我们从这里创建一个网站，”
00:15:15它挣扎了。
00:15:18我认为它尽力了。
00:15:21像这样，我们仍然得到了仪表盘，它有颜色，
00:15:22但它不如他们创建的好，
00:15:24因为我想既然我只给了它那个资产
00:15:26并且我没有包含额外的资产，
00:15:29它并没有真正像 Impeccable 在他们的案例研究中那样去切分它，
00:15:33但这可能是一个提示词问题。
00:15:35但即使这样，你也能看出
00:15:37在这里会有用的东西的骨架。
00:15:38我确实喜欢他们做仪表盘的方式。
00:15:41但它并没有他们创建的那么好，
00:15:43因为我觉得我只给了它那一个素材，
00:15:46而且我没有包含额外的素材，
00:15:48它并没有像 Impeccable 在他们的案例研究中那样，
00:15:51真正地对其进行拆解，
00:15:52但这可能是一个提示词的问题。
00:15:55但即便如此，你还是能看出这里有些可行的
00:15:57雏形。
00:15:59我确实喜欢他们处理仪表盘的方式。
00:16:01所以，我觉得它肯定没有我们刚开始做的
00:16:05那个原始版本那么令人印象深刻，
00:16:09但嘿，我心想还是试一试吧。
00:16:11现在让我们看看它在编辑现有网站时的表现。
00:16:14我们将使用我的网站，也就是我实际的 AI 代理网站，
00:16:18并在其上运行一些命令。
00:16:21我们将运行 Impeccable 文档
00:16:23让它能够从代码中反向工程出一个 design.md 文件，
00:16:26然后我们做一些事情，比如运行审计
00:16:29并进行评估，我们实际上会在
00:16:32我真实的网站上再次进行实时操作，看看
00:16:36我们能做出什么样的修改。
00:16:37作为参考，这是我 AI 代理的网站。
00:16:41我有一个比较标准的首页横幅部分。
00:16:43我介绍服务内容，讲述我对于
00:16:47如何进行 AI 实施的理念，
00:16:49然后会有一个号召性用语，
00:16:51给人们提供一个填写信息的地方，
00:16:54如果他们想和我合作的话。
00:16:55我还有一些额外的页面，比如博客，
00:16:57但目前我们只关注主页。
00:17:00所以我做的第一件事就是说，
00:17:02让我们在这个代码库上运行 Impeccable 文档，
00:17:05看看 Impeccable 对我现在的网站有什么评价。
00:17:08所以它会遍历整个代码库，
00:17:11并为我们现有的内容创建一个 design.md 文件，
00:17:16正是基于这个基础，
00:17:18我们可以开始修改内容了。
00:17:19Impeccable 在遍历完代码库后，
00:17:21它编写了三个文件，基本上是
00:17:23关于当前情况的战略背景。
00:17:26它谈到了亮点、北极星目标，
00:17:29但它也谈到了它发现的七个不同的违规点。
00:17:33比如蓝色球体，它说服务卡片的样机
00:17:37基本上就是一种剪贴画大杂烩，
00:17:40有意为之的卡片网格。
00:17:43它讨厌毛玻璃效果，所以它不喜欢那个。
00:17:47它说我们加载了某种字体，但从未使用过，
00:17:50以及其他一些东西。
00:17:53所以有一些功能
00:17:54实际上是在代码里的，
00:17:55但并没有在实际的 UI 中显示出来。
00:17:58还有一些关于颜色的问题。
00:18:02它还谈到了战略差距，
00:18:04也就是我基本上没有在网站上
00:18:07多放一点关于我本人，Chase 的信息，这很中肯。
00:18:10现在我们可以进行更深入的评估，
00:18:12如果我们运行评估命令的话。
00:18:15那么现在就开始吧。
00:18:16所以我告诉它运行评估命令。
00:18:18甚至连 critique 这个词都没拼对。
00:18:20告诉它在落地页上运行评估命令。
00:18:23所以它运行了评估，结论是，
00:18:25是的，处于 AI 敷衍作品的边缘。
00:18:27它从 10 个不同的方面给了我一个设计健康评分，
00:18:33每一项满分是四分，
00:18:34没有一项超过三分，
00:18:37但好在我没有得到一分，所以还不错。
00:18:39总分是 25 分（满分 40 分），评级为合格。
00:18:43在认知负荷方面，给了我 5 分（满分 8 分），不及格。
00:18:46它说背景动态与内容竞争注意力。
00:18:51确实，我觉得它有点暗淡，
00:18:54但我明白它的意思。
00:18:56这里有两个权重相等的 CTA，优先级模糊。
00:19:00服务部分有四种不同的视觉模式，
00:19:03还有其他一些问题。
00:19:05它总体印象是框架不错，
00:19:08但还有提升空间。
00:19:10最后，它把它分解成
00:19:11三个不同的部分。
00:19:14老实说，我喜欢这个评估。
00:19:16这非常、非常深入，给了我们很多参考，
00:19:19而且非常具体地指出了它认为哪里出了问题。
00:19:22至于我是否同意其中一些观点，
00:19:24我觉得那倒在其次，
00:19:26但它确实给了我们值得思考的东西。
00:19:29你知道，我不是盲目地认为
00:19:31它告诉我的每件事都是对的，
00:19:32但我们可以浏览这些，如果我想的话，
00:19:35我可以把这些都过一遍。
00:19:36比如，好吧，让我们修改这个和那个。
00:19:37来看看如果执行 B 会发生什么，
00:19:40比如我想尝试摆弄一下
00:19:42它所谓的装饰准则，
00:19:44看看它会做出什么改变。
00:19:46在我们看到它做出的改变之后，
00:19:48我们就会进入实时会话，
00:19:51就像我们之前构建的第一个落地页一样，
00:19:54然后在那里做些改动。
00:19:55所以让我们看看它做的一些改变。
00:19:57这些改变非常微妙。
00:19:59我们可以在服务部分看到，
00:20:03这是更新后的版本。
00:20:04他们调暗了颜色，并保持在
00:20:07这种类似赤陶橙色和白色。
00:20:09你会注意到左下角不再有
00:20:13那种蓝色的雾气了。
00:20:14作为参考，这是之前的版本，
00:20:17在左下角有这种蓝色，
00:20:18然后是蓝色，然后是绿色。
00:20:20所以它基本上保持在两种颜色，对吧？
00:20:23白色，其实是三种颜色，
00:20:25我想说是白色、灰色，然后是橙色。
00:20:28你也可以在下方的流程部分看到。
00:20:32当我划过这些卡片时，依然有那种橙色的光晕，
00:20:36但在原始版本里，这里下方也有橙色。
00:20:41卡片上方有那种线条，
00:20:43它认为那是一种 AI 敷衍的感觉。
00:20:47这就是装饰准则变化的全部内容。
00:20:51非常微妙，它还有其他一些
00:20:53想尝试的改动。
00:20:54主要与信任和转化有关，
00:20:56比如增加头像之类的。
00:20:58但我们现在跳过这些，
00:21:00进入实时模式。
00:21:02让我们看看现在的网站在实时模式下的样子。
00:21:05假设我想稍微修改一下这些卡片，
00:21:08和之前一样，我该怎么做？
00:21:10我可以自由输入，也可以选择
00:21:13其中一个预设命令。
00:21:17那就试试“令人愉悦”（delight）这个指令吧。
00:21:19然后我们选择三个变体。
00:21:22“令人愉悦”的作用是为那个特定的组件
00:21:26增添一些实际的个性。
00:21:27这是它给出的一些变体。
00:21:30这个稍微大了一点，
00:21:32右下方有这个东西。
00:21:35它改变了这里的实际文字。
00:21:37并且还添加了这个小东西。
00:21:40显然像这些，我们也有调整的余地
00:21:43可以去折腾。
00:21:45那本该是个数字，有点偏差。
00:21:49所以，是的，和我们创建的第一个网站
00:21:53完全一样的情况。
00:21:55我觉得 Impeccable 的这个实时功能
00:21:57绝对是它目前最强大的工具。
00:22:00我们可以从图形界面进行这些微调，
00:22:02而不必在命令行里做所有事情。
00:22:04所以我很高兴看到即便是对于现有的代码库，
00:22:06它的设置也是
00:22:08完全一样的。
00:22:09所以我真的很喜欢 Impeccable。
00:22:12我认为它 100% 是你应该加入技术栈的技能，
00:22:13在进行下一轮前端设计时绝对值得一试，
00:22:17无论你是从零开始创建网站，
00:22:20还是针对现有网站。
00:22:21而且 100% 要尝试一下实时工具。
00:22:23这是他们刚添加的功能，
00:22:26大概是一周前吧。
00:22:29我觉得这是它与众不同的地方。
00:22:31当你将这些微调
00:22:32与我之前让你通过提示词进行的宏观布局相结合时，
00:22:34你会拥有一个非常强大的工作流。
00:22:35一如既往，让我知道你的想法。
00:22:38指向该仓库的链接会在描述栏里。
00:22:41置顶评论里还有通往 Chase AI+ 的链接，
00:22:43如果你想入手我的 Cloud Code 大师课的话。
00:22:45除此之外，回头见。
00:22:47（此处应无内容，原文索引567-570已包含，共171条）
00:22:49（此处应无内容，原文索引567-570已包含，共171条）
00:22:52期待下次再见。
00:22:55（此处应无内容，原文索引567-570已包含，共171条）