스크립트
00:00:00Claude Code 迎来了很长一段时间内其前端设计能力的最大升级，推出了全新的 Slash Design 技能。
00:00:07现在，Slash Design 技能基本上将独立的 Claude Design 网络应用（你在这里看到的）的核心优势融入到了 Claude Code 之中。
00:00:16我们不再需要在两个不同的应用之间来回切换，或者笨拙地将设计从 Claude Design 转移到 Claude Code，现在我们鱼与熊掌兼得。
00:00:25此外，我们还获得了我们在 Claude Code 中已经使用的所有技能的附加功能。
00:00:30因此，我们可以将这个新的 Slash Design 功能与 Impeccable 或 Taste 等技能结合使用，从而获得更好的输出效果。
00:00:36所以，今天我不仅要向你展示 Slash Design 的工作原理，还要为你提供充分利用它的最佳工作流程。
00:00:42因此，如果你用 Claude Code 做任何前端设计工作，你一定会想留下来看完这期视频。
00:00:46现在，Slash Design 技能的卖点就是你眼前看到的这个。
00:00:49现在我正在使用 Claude 桌面应用，不过如果你用的是终端，情况也是一样的。
00:00:53也就是当使用 Slash Design 并让它为我创建内容时，它会生成一个非常类似于 Claude Design 网页版的画板.
00:01:02我有多个选项可供选择，当我查看这些选项时，我可以对更改的内容进行非常细致的调整。
00:01:09正如你在右侧看到的，当我点击它创建的前端设计的不同组件时，我几乎可以更改所有内容。
00:01:17最重要的是，我可以非常轻松地请求同一类输出的不同版本，一旦我喜欢某个特定版本，就可以让 Claude Code 开始工作并编写代码。
00:01:27与呆在 Claude Design 网络应用里、做完整套流程、说要传输过来、打包成 zip、放到文件夹里、在 Claude Code 中指定路径以及做所有那些繁琐的事情相比，这帮我节省了大量时间。
00:01:38而且正如我刚才所暗示的，它不仅方便，我们现在还可以叠加技能。
00:01:43当我在 Claude Design 网络应用中时，我未必能使用或调用像 Impeccable 或 Tay 这样的技能。
00:01:49但我在这里可以做到。
00:01:50所以归根结底，我的输出结果会更好，同时也更方便。
00:01:54现在，使用设计技能非常简单。
00:01:56我只需要输入斜杠 design，然后告诉它我想要创作的内容即可。
00:02:01假设我想创建一个社交媒体帖子，或者类似于 Instagram 帖子的东西，详细说明新的 slash design 技能的作用。
00:02:10假设我想用三种截然不同的设计风格创建三个变体，并且我想使用 Impeccable 技能。
00:02:19我只需打开麦克风，说出类似这样的话即可。
00:02:22那么，我们能为社交媒体帖子创建一个模型吗？
00:02:27想象一下，这是一种类似于 Instagram 的帖子，详细说明了新的 Claude Code slash design 技能的作用。
00:02:34我想要三个截然不同的变体，也就是非常不同的设计风格和非常不同的美学风格。
00:02:41当你这样做时，我希望你调用 Impeccable 技能来协助你完成创建。
00:02:45现在，如果我在 Claude 桌面应用中执行完全相同的技能，它会填充在这个侧边栏中，这也是我喜欢在桌面应用中执行此操作的原因，因为一切都在一个地方。
00:02:57而在终端里，你会发现它会创建一个工件，基本上它会在我的浏览器中打开。
00:03:02所以虽然没有桌面应用那么方便，但做事情还是相当容易的。
00:03:06现在，在查看工件之前，先听听今天赞助商（也就是我）的简短消息。
00:03:10我刚刚发布了 Claude Code 大师班的更新版本，这是从零基础迈向 AI 开发的首选途径，特别是如果你没有技术背景的话。
00:03:19我们专注于真实的用例、实用的用例，并且我每周都会进行更新。
00:03:24因此，如果你正在努力弄清楚如何实际使用这个疯狂的工具，那么这就是为你准备的。
00:03:32你可以在 Chase AI+ 里面找到它。
00:03:33置顶评论中有链接。
00:03:35以下是它创建的工件的外观。
00:03:37正如我们在桌面应用中看到的那样，我们为 Instagram 帖子提供了三种不同的设计风格。
00:03:44右侧有这个属性栏。
00:03:46我可以放大，点击某些内容，并开始获取有关我正在调整的内容的更多详细信息。
00:03:52你还会注意到右上角有一个调整（tweaks）部分，目前它是空的。
00:03:57在任何时候，我都可以提示 Claude Code 给我一个调整面板，就像你在 Claude Design 网络应用中看到的那样。
00:04:03并且我可以调整比这里看到的东西更多的内容。
00:04:07所以就实际使用这个东西而言，相对来说比较简单。
00:04:10只需输入 slash design 并询问你想要什么。
00:04:12现在，我们的工作流程到底应该是什么样的？
00:04:14我们如何才能将其效用发挥到极致？
00:04:16嗯，有一个简单的事先三步工作流程，每次你用 Claude Code 做任何前端设计时都应该使用它。
00:04:22第一步是灵感，因为我想给 Claude 的不仅仅是一个提示，说嘿，我想要三个不同的东西。
00:04:30我理想中想要给 Claude Code 的是一些示例。
00:04:33我想截取我喜欢的海报的屏幕截图。
00:04:35我想截取我喜欢的设计风格的屏幕截图。
00:04:39把它们喂给 Claude Code 并说，嘿，你能创建一个与此风格相似的东西吗？
00:04:43现在我们只在制作一张海报，但这同样适用于你创建着陆页、首屏横幅区或任何类似内容的情况。
00:04:50现在，你的下一个问题应该是，我在哪里可以找到灵感？
00:04:52幸运的是，有很多地方可以获取创意。
00:04:55一个好的网站是 Pinterest。
00:04:57我只需输入 Instagram 信息图，就能看到所有这些潜在的设计。
00:05:01另一个好网站是 Landbook，它非常适合网页设计和首屏横幅区。
00:05:06我们还有像 Dribbble 这样的网站，注意 Dribbble 有三个 b。
00:05:11核心思想是，你只需要去寻找，并且真的应该开始建立某种设计库，以便你想要设计某些东西时随时可以参考并带给 Claude Code。
00:05:21这样你就不用每次都重复这个寻找灵感的过程了。
00:05:24所以我打算截取一些我比较喜欢的图片的屏幕截图。
00:05:27我喜欢这一张。
00:05:29我觉得这个看起来挺有趣的。
00:05:31记住，你只是在寻找一种你想让 Claude 借鉴的整体美感。
00:05:36我觉得这张看起来也挺有趣的。
00:05:39所以现在我要把这三张截图拖进提示窗口中。
00:05:43现在我基本上要给它之前给过的相同提示，比如，嘿，我想要那种 Instagram 帖子。
00:05:48我想要三个不同的版本。
00:05:49只不过这次我要说，参考这些截图。
00:05:52我希望将这些用作灵感。
00:05:54每张截图都可以采用不同类型的独特设计。
00:05:59我还要说，嘿，务必使用 Impeccable 技能。
00:06:02我还要告诉它，如果它想生成外部素材，可以使用我拥有的像 Higgs field MCP 这样的东西。
00:06:09你也可以使用其他东西，比如如果你有用于其他图像生成器的 file.ai 之类的工具。
00:06:14核心理念是，因为我们现在身处 Claude code 内部，我们可以将任何我们想要的东西拉入这个设计过程中。
00:06:19再说一次，如果你不想的话，也可以不用外部图片。
00:06:23但这就是我的提示听起来的样子。
00:06:25所以让我们实际重新创建我们做过的这三个帖子。
00:06:29同样，我们使用的是 slash design 技能。
00:06:31但我在这里扔了三张截图。
00:06:33我希望将这些用作我们设计过程的灵感。
00:06:37所以我想要三个新的生成版本。
00:06:39分别生成一个汲取自每张相应截图灵感的设计。
00:06:43再次强调，使用 Impeccable 设计技能。
00:06:45请记住，你有权访问 Higgs field MCP。
00:06:48因此，如果你觉得自己需要生成可用于海报的外部素材，也请这样做。
00:06:55这由你自行决定。
00:06:56这实际上就是这个过程的第一步和第二步。
00:06:59第一步是寻找灵感。
00:07:00第二步是实际使用那些我们在 Claude design 网络应用中无法使用的附加技能。
00:07:08如果你在想，嘿，你一直在提 Impeccable，我完全不知道这是什么。
00:07:11这只是你可以添加到 Claude code 中的一个开源免费技能。
00:07:16它完全围绕着前端设计。
00:07:18本质上，它的全部绝招就是识别 AI 劣质设计的样子，将其剔除，并将更好的设计原则融入到你所创建的内容中。
00:07:26如果你想更深入地了解这一点，我有深入探讨如何最好地使用 Impeccable 的视频。
00:07:31现在来看看 Claude 使用 Slash design 创建的新海报。
00:07:35你可以看到它们绝对汲取了我们赋予它的灵感。
00:07:39并且在任何时候，就像之前一样，我都可以放大这里。
00:07:43我可以查看属性并开始编辑内容。
00:07:46现在，我们来谈谈调整（tweaks）。
00:07:49因此，这个设计目前还没有可调整的控件。
00:07:50描述你想要调整的内容，Claude 会为此添加一个调整面板。
00:07:53好吧，让我们这样做，因为现在我们处于该过程的第三步，我们要开始调整各种东西，直到我们喜欢它为止。
00:08:00所以我要做的是打开终端，你在哪，然后说，嘿，我们现在可以在这里添加一些可调整的控件吗？
00:08:10我希望这些调整能够非常激进。
00:08:12所以我希望能够使用 Claude design 内部的调整面板尽可能多地编辑几乎所有东西。
00:08:21所以现在你可以看到右侧的这个调整部分。
00:08:24我们正在看中间的这个。
00:08:25所以我可以改变纸张的颜色，对吧？
00:08:29这里我们想怎么调整呢？
00:08:30另外记住，这些微调也能给你带来一些灵感。
00:08:33所以在任何时候，你都可以回到 Claude code 中，通过提示词来做出这些不同的修改。
00:08:39再说一次，能直观地看到这一切的好处就在于，我现在可以进行快速迭代，而不必去提示 Claude code、等待生成、看看喜不喜欢、再提示 Claude code、再等待生成，对吧？
00:08:52这让整个过程变得快多了。
00:08:55所以我们可以改变文本的外观。
00:08:58它可以改变实际的大小、字重、行距等等。
00:09:03所以这里你看到的每一样东西都可以编辑。
00:09:06但也要记住，我们也能进行大幅度的修改。
00:09:08比如我就是不喜欢第二个的整体外观。
00:09:12我们也能做到这一点。
00:09:13比如我可以给它另一个提示词说：嘿，我不喜欢这里面的实际内容。
00:09:17我希望它在内容上能更深入地向人们解释 slash design 的作用。
00:09:21所以我可以说，对于第二个 dial design，我差不多想采用那个方向。
00:09:26但说实话，我还是想稍微改一下内容。
00:09:29同样，我们想要的是一个信息图表，用来解释 slash design 到底能带来什么。
00:09:34所以在你重新创建时，可以忽略另外两个。
00:09:36我现在只想专注于那一个。
00:09:38去进行网络搜索，确保你了解 slash design 到底能带来什么，并把这些内容放进这个信息图表的新版本中。
00:09:48这是该海报的更新版本。
00:09:49如你所见，其中包含了关于新 slash design 实际功能的更多信息。
00:09:53同样，由于我们使用了这个全新的 slash design 技能，编辑起来非常简单。
00:09:56哦，我不喜欢这里的文字。
00:09:59我可以把它移到任何我想去的地方。
00:10:00我可以调整实际的文本本身，诸如此类，诸如此类。
00:10:03所以从这里开始，你只需继续那三步流程：获取灵感、使用正确的技能，以及对你喜欢的任何设计进行迭代。
00:10:11因此，如果我们确实想选择中间这一个，我们只需告诉 Claude Code，嘿，我只想处理中间这一个。
00:10:16然后你只需不断迭代，直到你满意你所创造的成果。
00:10:20之后你就可以用它来做任何你想做的事情。
00:10:22总的来说，这个 slash design 技能确实让 Claude Code 内部的前端设计变得容易得多。
00:10:28通常情况下，我们不得不依赖外部工具（如 Impeccable）来进行这种网页端实时的设计。
00:10:34所以一定要花时间尝试一下这个新功能。
00:10:36我认为它非常适合那些熟悉 Claude Code 但又喜欢 cody design 网页应用、并且觉得在两者之间切换很别扭的人。
00:10:45这就是它的定位。
00:10:46这就是它所面向的受众。
00:10:48所以一如既往，请让我知道你对此的看法。
00:10:51如果你想获取我的 Claude Code 大师班，请务必查看 Chase AI Plus。
00:10:55除此之外，我们回头见。