00:00:00Claude Code 内部潜伏着一个怪物，它被称为“AI 垃圾”。
00:00:03紫色渐变、所有内容都用 Inter 字体，以及每个网站上
00:00:09都一模一样的卡片布局。你知道我指的那种“AI 垃圾”，
00:00:12但今天我要给你们 10 种不同的工具来帮你斩杀这头巨兽，
00:00:16而且它们都不是前端设计技巧。事实上，
00:00:20其中很多工具都非常新。
00:00:22所以，即使你在 Claude Code 设计领域待过一段时间，
00:00:26我保证你今天也会学到新东西。
00:00:28我们今天介绍的所有这些工具基本上都服务于同一个目的，
00:00:31那就是让你有机会利用 Claude Code
00:00:35创造出高质量的前端网页设计，因为尽管 Claude Code 很出色，
00:00:39但在这个领域，它确实非常欠缺。
00:00:42列表中的第一个工具是 Impeccable。
00:00:44这是一个包含 18 个命令的单一技能。
00:00:46我会把它的链接以及今天涉及的其他所有工具都放在描述栏里。
00:00:50。
00:00:51我很喜欢 Impeccable，因为它能实现的功能非常广泛。
00:00:55它虽然只是一个技能，却包含了 18 个命令。
00:00:58如果我们点击 GitHub 上的链接访问 impeccable.style，
00:01:01就能看到他们所有命令的实际效果。更棒的是，
00:01:05我们可以看到通用的 AI 输出——嘿，Inter 字体、紫色渐变——
00:01:09以及使用不同命令后的对比图像。例如，
00:01:15我们有像 clarify 这样的命令，
00:01:16它专门处理 UX 错误和错误提示信息。
00:01:19你可以在这里看到两者的区别。
00:01:21它还有一个 Chrome 浏览器扩展程序，
00:01:23可以直接在你的网页上高亮显示那种“AI 垃圾”美学，
00:01:28就像这个例子。我很喜欢这个技能利用反模式的方式。
00:01:32它本质上是在教大型语言模型
00:01:34真正的“AI 垃圾”长什么样：这些边框装饰、
00:01:38到处可见的侧边栏装饰边框，还有你知道的，
00:01:42迷你图、毛玻璃效果，对吧？
00:01:45我们一次又一次地看到这些东西。
00:01:47所以，为什么不使用一个直接告诉 LLM 这就是“AI 垃圾”的技能呢？
00:01:52而不是用前端设计技能，那种只会说“请不要做成 AI 垃圾”，
00:01:54那样是行不通的。如你所见，
00:01:58这个技能内容非常丰富，我会继续往下翻。
00:02:03因为它针对每个具体的设计领域都有
00:02:07多个参考案例。
00:02:08你可以把它们看作子技能和前面提到的 18 个不同的
00:02:13命令。现在，
00:02:14查看这些命令实际效果的最简单方法就是访问 Impeccable 文档。
00:02:17就像你在首页看到的一样，
00:02:21你可以看到修改前后的对比示例。
00:02:25通过视觉直观地看到效果，远比只看文字描述
00:02:29并指望 Claude Code 做出你想要的效果要好得多。
00:02:33而且它不仅仅是视觉层面的东西。
00:02:35当你查看 adapt 等技能时，
00:02:37它能确保设计在移动端和平板等不同平台上都能正常工作，
00:02:41而不仅仅是桌面端。强烈建议你去试试。
00:02:45它才刚推出一个月。在介绍第二个工具之前，
00:02:48插播一条我上个月刚发布的 Claude Code 大师课广告。
00:02:52我已经发布了大量更新。
00:02:54这是让你从零基础晋升为 AI 开发者的首选之地。
00:02:57课程价格在几天内就会上调。
00:03:01如果你想入手，请务必关注一下。
00:03:04置顶评论里有链接。现在来聊聊第二个工具，
00:03:06它叫 Skill UI。这是我今天早上才发现的工具。
00:03:12上线还不到 24 小时，已经有 7 个星标了。
00:03:15我们正处于早期阶段。这不是我做的，我也不认识作者。
00:03:18我只是刚好在 Twitter 上看到他发布的动态。
00:03:21当时我正在刷推，心想：这看起来是个很酷的技能。
00:03:24它允许我们将任何设计系统逆向工程为 Claude 就绪的技能。
00:03:29这意味着什么？意味着我们使用这个技能，
00:03:31将它指向某个已经存在的网站，
00:03:34它本质上会分析该网站的构建方式，并将其
00:03:39转化为一个模板，本质上是一个技能。让我演示一下。就在这里，
00:03:45我们有 Stripe 的官网，一个很酷的网站，内容非常丰富。
00:03:49显而易见，它有很多自定义的图形和元素。
00:03:52在没有这些图形和素材的情况下，Claude Code 几乎不可能
00:03:56完美复刻它。至少目前是这样。假设我喜欢它的整体设计，
00:04:00仅仅是它在卡片和布局方面的设置方式。
00:04:03我想用它作为我网站的基础。那么，
00:04:06我们在之前的视频中讨论过实现方法。
00:04:08比如分析 HTML 等等，但你知道，
00:04:11那通常只能达到 60% 到 70% 的还原度。于是我使用了 Skill UI 技能。
00:04:15我把它指向 Stripe，然后说：嘿，
00:04:17按照这种风格给我做一个假的 Stripe 网站。
00:04:21这是它一次性生成的。我就告诉了它这么多。
00:04:25我没有提供任何额外信息，它就生成了这个。
00:04:27它确实有一种 Stripe 的感觉。再强调一下，
00:04:32Stripe 上那些是自定义图形。
00:04:34它不可能仅凭一段提示词就复刻出来，但你知道，
00:04:39这已经很棒了。真的，如果你问我的话，
00:04:44它虽然还有一些标准的 AI 痕迹，
00:04:47比如布局方式和图标，
00:04:50但它并没有只做一个简单的 2x2 斑马纹卡片盒。
00:04:55我挺喜欢它使用的颜色和图形，但是看这里，
00:04:59这真的很棒，毕竟我只是说：嘿，参考 Stripe 的
00:05:03网站，给我打个底。由于它将其转化为了技能，
00:05:06我现在就拥有了一个 Stripe 设计技能，虽然目前仅在项目级别，
00:05:10但我随时可以调用它。
00:05:12比如我想做另一个同样采用 Stripe 风格的网站。
00:05:16我可以做到，而且我可以让 Skill UI 指向任何目标。
00:05:18你可以在他在 GitHub 上的示例视频中看到它的效果，
00:05:22他在视频里把工具指向了 Notion。
00:05:24然后他告诉 Claude Code 给我做一个 Notion 克隆版。
00:05:27这就是你现在看到的。要使用这个技能，
00:05:30你只需按照 GitHub 页面上的安装命令操作即可。
00:05:33它有两种不同的模式。如果你想要一些本质上
00:05:38能捕捉所有内容的功能，比如滚动截图和各种交互，
00:05:41当鼠标悬停时的效果，它会使用 Playwright
00:05:45来分析这些。所以它不只是看 HTML 代码，
00:05:48不像传统的工具，比如我过去用的自定义站点分析技能。
00:05:52如果你使用“Ultra 模式”，它实际上会引入 Playwright。
00:05:55所以它具备一定的先进性。总而言之，
00:05:58这是一个非常聪明的技能，你正处于早期阶段。如果你开始用它，
00:06:00那你就是 GitHub 技能库里的先锋用户了。
00:06:03如果你正在启动一个新网站，而你完全不知道
00:06:07该从何开始，我强烈建议你试试这个，因为再次强调，
00:06:10这是一个极好的起点。我可以在此基础上编辑任何我想要的内容。
00:06:13现在，工具三是我必须坦白承认稍微超出我
00:06:17专业领域的一个，但我发现它非常有趣。
00:06:19我正试着更多地了解它并亲自使用它。
00:06:21那就是 Web GPU 技能。
00:06:23Web GPU 基本上就像是一种网页设计组件，
00:06:28通过网页与你的显卡进行交互。
00:06:30这允许我们创建超级酷的动画。就像你在这里看到的，
00:06:34以及这些效果。
00:06:36当我们在讨论——如果你看过我的《Claude Code 网页设计七个等级》视频，
00:06:40我们甚至看过了像第七级里的 Igloo 网站，
00:06:44它们使用了 WebGL 和自定义着色器。
00:06:47这就是我所说的那个领域。
00:06:49这个技能就是教 Claude Code
00:06:52如何编写实现这些效果的代码。
00:06:54它告诉它如何设置渲染、对着色器进行编码，
00:06:58如何创建基于节点的材质。通过使用这个技能，
00:07:00我只需给它几个文本提示，它就能生成这个。
00:07:06虽然这没有这个酷吗？并没有，
00:07:08但我在两分钟内就做出来了——其实加上 GPU 渲染大约花了 10 分钟，
00:07:13但只用了几句提示词，而且我之前完全不懂怎么做。
00:07:16所以，如果你对这类东西感兴趣——在我提到的所有工具中，
00:07:19这可能是最超前的一个，
00:07:22但我很喜欢。如果你感兴趣，
00:07:26你应该去看看这个技能，因为它会带你朝那个方向迈进。
00:07:28当然，这显然比仅仅更改
00:07:29卡片样式或调整网站字体要高级得多，
00:07:32但值得记住这一点。
00:07:35工具四是过去一个月最热门的 AI 仓库之一。
00:07:37那就是 Awesome Design.md。就是这个，目前已经有超过 5 万个星标了。
00:07:41所以它的人气一直在飙升。
00:07:46在某些方面，它与我们讨论过的 Skill UI 工具类似，
00:07:48因为它是一个允许我们参考其他现有网站，
00:07:52并将其作为我们要构建的网站模板的技能。不过，
00:07:57Awesome Design 受到了 Stitch 的启发。
00:08:01我们稍后会详细讨论 Stitch。
00:08:04Stitch 提出了 design.md（设计 Markdown 文件）的概念，
00:08:06它们只是描述你该如何构建网站的提示词。
00:08:11区别在于 Google 在创建这些提示词方面做得非常好。
00:08:14就像你在这里看到的。它非常具体地规定了概述是什么、
00:08:18核心目标是什么、如何使用颜色。它增加了极佳的结构化信息。
00:08:22而不是像 Claude Code 的前端设计技能，
00:08:26那种只是随性地做做。这种方式要具体得多。
00:08:29。
00:08:32它借鉴了这种非常具体的涉及系统的提示词理念，并
00:08:34针对一大堆不同领域的不同网站进行了创建。
00:08:39比如 11 Labs，
00:08:43我点击这里。
00:08:47我基本上可以看到 11 Labs 的整个设计理念，
00:08:50包括表单元素、卡片示例、按钮、标题、
00:08:55排版、颜色等等。而且不仅仅是实时预览。
00:09:00我们看到的是实际可以喂给 Claude Code 的提示词。再次强调，
00:09:04他们这里有大量的网站，包括非文字类的，
00:09:07比如 Bugatti（布加迪），对吧？这本质上是
00:09:10给你一些你喜欢的网站的构建块，这样你就可以
00:09:15使用同样的构建块来构建你自己的网站。
00:09:19虽然我们之前看到的 Skill UI 工具可以直接分析任何网站并为你构建，
00:09:21但这个工具更像是拆解组件部分。
00:09:25然后由我们自己决定如何构建。现在，在吹捧完 Awesome Design 之后，
00:09:26第五个工具理应介绍一下启发了它的应用。
00:09:29那就是来自 Google 的 Stitch 本身。Stitch 非常棒。
00:09:33如果你想在实际动手构建网页之前先从视觉方法入手。
00:09:35。
00:09:38你要做的就是进入 Stitch，然后输入一个关于你想构建什么的提示词。
00:09:41这可以包括灵感截图。
00:09:46它会做的是创建你在之前看到的同种 design.md 文件，
00:09:48但这才是它的原生环境。
00:09:50它为我们提供了颜色、字体排版、标签、
00:09:53按钮的详细分解，然后我们可以在这边看到整个设计系统，
00:09:57也就是你之前看到的 design.md，
00:09:59但现在它是根据你的提示词定制的。一旦完成这些，
00:10:04它就会为你准备构建的网站类型提供一系列变体。
00:10:08它不仅仅是英雄部分。它处理整个页面。
00:10:11生成原型后，我可以随意编辑。我可以点击它、
00:10:14右键点击，获取特定变体。
00:10:18我可以自定义不同的变体。我可以把变体数量从
00:10:20三个改成五个。我可以设定创意范围、
00:10:25指令等等。
00:10:28我基本上有一大堆方法来快速生成我潜在网站的大量视觉方案。
00:10:31这非常棒，因为在 Claude Code 内部，
00:10:34每次你想做视觉调整都很困难，对吧？它需要写代码，你需要启动开发服务器。
00:10:35你需要去网页上查看效果。而且通常当我们做这些事时，
00:10:40特别是从前端设计的角度出发，
00:10:43我想看到摆在我面前的选项，对吧？
00:10:46同时看到这三个选项，然后说：好吧，我不喜欢这个，
00:10:48也不喜欢那个，或许我喜欢这个。这比“好吧，Claude Code，再试一次”
00:10:52“不行，再来一遍”“还是不行，再试一次”要容易得多。而且这个也是免费的，
00:10:56这太棒了。无论我在这里构建了什么，
00:10:58都很容易转移到 Claude Code，因为只要点击我喜欢的那个，
00:11:02选择“更多”，我就可以查看代码。
00:11:06Nope. Try again. 所以这也是免费的，
00:11:11这太棒了。而且无论我在这里构建了什么，
00:11:13都很容易转移到 Claude Code 中，因为如果我点击我喜欢的一个，
00:11:16点击更多，我就可以查看代码。
00:11:19然后我可以复制代码，并将其带入 Claude Code。
00:11:23你甚至可以做些类似复制到 Figma 的操作。
00:11:25你也可以把它带入 AI Studio，
00:11:27但最简便的方法就是导出然后复制到剪贴板。
00:11:31有一个 MCP。所以你可以通过 Claude Code 终端完成这一切。
00:11:35但老实说，我不明白这到底有什么实际价值。
00:11:39我觉得亲手操作这种视觉感知工具是值得的。
00:11:43现在我其实有一个关于在 Claude Code 中使用 Stitched 的深度解析，
00:11:46如果你想看更多实操，我会把链接放在上方。现在，
00:11:49我一直在纠结是否要在视频中放入第 6 个技能，
00:11:52因为我觉得它已经变得无处不在了。几乎每个人都知道它的存在，但很难说。
00:11:55这可能是某些人第一次见到它。那就是 UI UX Pro Max 技能。
00:12:00我认为这是精神继承者，或者说是
00:12:05Anthropic 前端设计技能应该有的样子。所以想象一下，
00:12:09一个 Anthropic 前端设计技能，如果它实际上是基于
00:12:14针对不同领域的不同网站风格进行训练的，
00:12:19因为并不是每个网站都需要看起来像某种 SaaS，某种 B 级 SaaS。
00:12:23而这就是这个技能的意义所在。
00:12:25它是一个智能设计系统生成器。
00:12:27所以它实际上会问你问题。
00:12:29它会弄清楚你的网站是关于什么的，
00:12:31你的服务是关于什么的，然后根据其功能进行设计。
00:12:35所以它拥有 161 条特定行业的推理规则。
00:12:39所以他们真的把这个东西做全了。
00:12:43你不会得到那种没有技术含量的通用 AI 废话，
00:12:47也不会得到正慢慢变成 Claude Code 版 AI
00:12:51废话的前端设计技能。
00:12:52它还内置了大量针对特定技术栈的指导。
00:12:55所以你不会被强迫只使用像 React 这样的东西，最终
00:13:00如果你完全不知道该往哪个方向走，它就是一个很棒的技能。
00:13:04我们已经讨论过的很多东西都要求你对自己想要什么
00:13:09有一定的感知，特别是如果你已经有一个参考网站的话，对吧？
00:13:12当我们看到 Skill UI 时，如果我有一个例子，
00:13:15我基本上可以复制它，Awesome Design 也是一样。
00:13:19就像我是从这些现有的网站中挑选。
00:13:21如果你不想走那条路，
00:13:22但你仍然对自己该怎么做感到困惑，那就用这个技能。
00:13:26伟大的起点。
00:13:28现在，第 7 号工具是关于组件的，以及如何真正打磨
00:13:33我们网页的细节。这就是我们要引入 21st.dev 的地方，
00:13:36这是一个拥有数百万个不同组件供我们选择的网站，
00:13:40并且可以直接整合到我们的网站中。例如，
00:13:43假设我想为我们的 Hero 页面设计点什么。那么，
00:13:46我就去 21st.dev 的 Hero 部分搜索一个。
00:13:51我喜欢这个，这个使用了 Spline 的 Hero 页面。
00:13:56它有一个实际上会跟随我鼠标的机器人。那么，
00:14:00与其去琢磨如何使用 Spline 并编写代码，
00:14:04我直接去 21st.dev。
00:14:06我点击上面的复制提示词按钮来复制提示词。
00:14:09我去 Claude Code 把提示词粘贴进去，嘭。我就有了我的 Hero 区域。
00:14:14现在，
00:14:15显然 Hero 区域可能是我们能导入到网页中的最重的东西，
00:14:19因为如果我们有一个带着机器人到处乱看的 Hero 页面，
00:14:22我们整个网站的审美就必须与之匹配。所以幸运的是，
00:14:26我认为当涉及到较小的组件和微小的装饰（比如按钮）时，
00:14:29你能从 21st.dev 获得最大的价值，对吧？
00:14:33仅仅是这个按钮上带有这束小光这一事实。
00:14:36当我在它周围移动鼠标时，它与标准按钮的对比会让
00:14:39你的网站看起来更好，或者带有这种跟随我鼠标移动的
00:14:43灯光动画效果的卡片等等。再说一次，
00:14:46就是这些微小的细节，这些发光的阴影。
00:14:49这些就是那种能提升你网页档次的东西，
00:14:52让它看起来更高级，也显得你很用心。
00:14:56而且你确实努力过了。退一步说，
00:14:59这应该至少能给你带来灵感，因为
00:15:03并没有说你不能为这些组件中的任何一个复制提示词，
00:15:07无论是边框还是 Hero 区域还是其他的，
00:15:09然后用 Claude Code 根据你的心意进行调整。
00:15:12这不是一种全有或全无的关系。
00:15:14我认为特别是对于我们这些没有网页设计背景的人来说，
00:15:17我肯定没有，你知道的，
00:15:19你只是不知道自己不知道什么，而接触这些所有不同的
00:15:23创建按钮的方式会让你的思路朝不同的方向转动。
00:15:26随着时间的推移，这会很有帮助。
00:15:29你接触得越多，就越能培养自己的品味，并弄清楚
00:15:32自己喜欢什么。但在看到这些东西之前，
00:15:34你甚至根本不知道自己喜欢什么。
00:15:36你所看到的只是 Claude Code 给你提供的。
00:15:39所以强烈建议你看看这个，几乎所有的东西都是免费的，
00:15:43你应该至少把其中一些小东西，
00:15:46比如他们设计按钮和卡片的方式，整合进你的下一个网页中。
00:15:49现在，你这些天反复听到的一句话是 AI 没有品味。
00:15:53那么，如果我们把品味作为一种技能赋予它呢？
00:15:56这就是我们在工具 8 中尝试做的事情。
00:15:59那就是 Taste Skill 代码库。
00:16:01这是一组技能的集合，试图或尝试给 Claude Code
00:16:06一些衡量品味的标准，也就是摆脱那些 AI 废话，
00:16:11这是你反复看到的一个主题。
00:16:13现在，这个 Taste Skill 包含许多不同的子技能，就像你在这里看到的，
00:16:17它有不同的设置。所以你可以调整，你知道的，
00:16:21相对于正常的 AI 生成，它的抽象程度如何。
00:16:24你在这里看到的是一些使用该技能
00:16:28创建的网站示例。立刻，
00:16:31你会注意到它有一点点不同，对吧？我是说，它并不惊人，
00:16:36但它立刻就显得与众不同，而与众不同是件好事。
00:16:38它看起来越不像千篇一律的 SaaS 模板就越好。
00:16:41而且其中很多都包含滚动动画之类的，
00:16:46我们看到的不再是反复出现的 Bento Box。
00:16:47所以这是一个很酷的边缘技能，你可能想要
00:16:52至少尝试一下，看看它与普通的 Claude Code 生成效果相比如何。
00:16:56现在工具 9 对你们很多人来说可能非常简单，
00:16:59但你会惊讶于竟然有那么多人不知道
00:17:03Google Fonts 的存在。
00:17:05Google Fonts 是一个巨大的免费资源库，拥有数万亿
00:17:10种不同的字体，你可以将它们用于几乎所有的编程项目。
00:17:14你不需要非得受困于 Inter 字体，或者
00:17:18Claude Code 在所有事情上使用的那五种字体。
00:17:20你可以直接去 Google Fonts，它按外观、
00:17:24感觉，你知道的，按族群分类。告诉 Claude Code 用这个，
00:17:29用那个，Claude Code 也可以访问所有这些字体。
00:17:31因为排版是你的设计外观和感觉的很大
00:17:34一部分。此外，
00:17:38你可以使用 Claude Code 来帮助你搜索 Google Fonts。
00:17:42所以只需告诉 Claude Code 你正在构建的网站类型，
00:17:45以及你追求的感觉类型。
00:17:47它应该会给你提供一个或五个左右的参考字体。
00:17:50你可以在这里实时看到。再说一次，
00:17:53你不希望凡事都听天由命，只取决于 Claude Code
00:17:57那天心情如何来决定给你什么字体，因为
00:18:01那感觉会一直是 Inter 字体，永远是 Inter。最后但同样重要，
00:18:05工具 10，Playwright CLI。
00:18:06Playwright CLI 本身并不是一个设计工具，
00:18:10虽然我们过去在谈论 Skill UI 时已经提到过它
00:18:13以及它去网页截图的能力。
00:18:15所以你可以把它作为一种研究构思工具。
00:18:19但我真正想强调的是，
00:18:21形式与功能的理念，以及当我们在前端构建东西时，
00:18:25想想简单如表单提交页面的东西，
00:18:27我们必须对它进行测试。
00:18:29我们必须确保这些东西真的能用。
00:18:32而大规模实现这一点的最简单方法是 Playwright CLI，而不是 Playwright MCP。
00:18:36CLI 要有效得多。
00:18:38我们的做法是，一旦你完成了前端设计，
00:18:41在安装 CLI 工具后，你只需告诉 Claude Code，
00:18:44“我希望你使用 Playwright CLI 测试该网页上的每一个交互”。
00:18:49它将创建一堆不同的 Chrome 实例。
00:18:52如果你想实际看到它们，可以让它有界面模式，也可以是无界面模式。
00:18:55这样它就是隐形的，它会自动进行测试。
00:18:57这让整个前端设计过程快得多，因为我想
00:19:02我们都经历过这样的情况：添加了某些东西，然后想看看它。
00:19:05然后我们想测试它，结果花了很长时间，
00:19:06特别是像表单提交这样的事情，
00:19:08因为会有很多边缘案例，比如某些奇怪的用户会进去
00:19:13并输入他们的信息。
00:19:15以上就是我最喜欢的 10 个与 Claude Code 设计相关的技能、
00:19:20插件和 CLI。我希望其中至少有一些对你来说是新鲜的。我是说，
00:19:24大概只有三个人知道 Skill UI 这个东西。所以，呃，
00:19:29但是，是的，前端设计领域，
00:19:31我发现用 Claude Code 做这块非常有趣，因为从品味的角度来看，
00:19:36它表现得非常糟糕。
00:19:37虽然我这些天甚至讨厌说“品味”这个词，因为所有人都在谈论这个，但正因为
00:19:40Claude Code 在这方面表现不佳，
00:19:42这对你个人来说反而应该是件好事，对吧？
00:19:46因为这是一个你现在可以将自己与众人区分开来的空间，
00:19:50任何时候只要能将你与现在都在涌入
00:19:55Claude Code 的其他人区分开来，就是件好事。
00:19:57这些技能和工具可以帮助你做到这一点。所以一如既往，
00:20:00让我知道你的想法。
00:20:01如果你想了解大师课的内容，请务必查看 Chase AI Plus，
00:20:04我们回头见。