Transcript
00:00:00良好的设计真的非常重要，因为如果你想要吸引客户，网站的视觉效果就是他们评估的
00:00:05第一要素。市面上有很多工具可以提供帮助，而 Claude Design 就是目前最强大
00:00:09的工具之一。但好的设计不仅仅是通过向工具发送提示词就能实现的。所以在
00:00:14这个视频中，我们将带你了解一个可以亲自在 Claude Design 中运行的
00:00:18五阶段流程。无论你从未打开过 Claude Design，还是已经使用了几个月，
00:00:22这里都有适合你的内容。如果你以前从未打开过它，也没关系，因为我们会从介绍该
00:00:27工具本身开始。如果你已经在使用它进行设计，我们会深入探讨如何将 Claude Design
00:00:32与 Claude Code 结合使用，使其变得更加强大。请使用下方的的时间戳直接跳转到相应内容。
00:00:37如果你是频道的新朋友，欢迎来到这里。我们其实是一家软件公司，并且围绕
00:00:41Claude Design 并基于我们的内部流程为你构建了一套完整的系统。废话不多说，
00:00:47让我们直接进入视频。本节专为那些不知道 Claude Design 是什么的人准备。所以
00:00:52如果你已经了解它，可以跳到下一节。它最初是作为研究预览版推出的，
00:00:57当时 Claude 推出了他们的 Opus 4.7 模型。它本质上是一个设计工具，拥有非常易于使用的
00:01:02界面，让任何人（甚至是没有任何技术背景的人）都能通过简单的提示词
00:01:07创作出优秀的设计。它在所有付费计划中均可使用。它的功能不仅限于网站。你还可以
00:01:12用它设计幻灯片、文档，甚至创建动画。此外，Claude Design 在
00:01:17Claude 桌面端和 Claude 网站上均可使用。所以你不一定要安装桌面应用。
00:01:22如果你想在应用上使用，只需下载它，运行安装程序，然后登录你的账户即可。
00:01:27然后打开侧边栏，点击设计，其界面就会打开，你就可以开始使用了。
00:01:32Claude Design 提供了所有 Claude 模型供你选择，甚至包括 Fable（他们功能最强大的
00:01:37模型），不过你对它的访问权限有限。他们用于常规用途的旗舰模型仍然是 Opus，
00:01:42并且它依然是设计的最佳选择。但这些 Opus 模型的问题在于它们会消耗
00:01:46大量的 Token。相比之下，Haiku 消耗的 Token 少得多，但可能需要更多的
00:01:51微调才能获得好的设计。最重要的是，你还可以为每个
00:01:55模型设置努力程度（effort level）。努力程度基本上控制了模型在执行任何操作之前思考的深度。我们
00:02:01在设计任务中使用目前最新的 Opus 5 模型，并设置为中等努力程度，因为这使我们能够
00:02:06轻松进行设计，而不会浪费太多 Token。它还允许你引入所有的 MCP 和技能（skills），这使得
00:02:12在其中直接使用你自己的系统变得容易得多。对于不了解的人来说，MCP 基本上是让
00:02:18智能体连接外部事物（如其他工具和服务）的桥梁，而技能是一组
00:02:23指令，通过分步指导和可遵循的参考资料，教导智能体如何更好地完成某项工作。
00:02:28在开始之前，有一点需要记住。你可以创建的设计数量是有限制的。
00:02:33Claude Design 的运行基于 5 小时的限制，但这不仅仅针对你的设计。你在 Claude 上做的
00:02:38所有其他事情也都计入其中。在该 5 小时窗口内，你可以消耗的 Token 数量是有限额的，
00:02:44一旦耗尽，你就必须等待这 5 小时结束才能再次使用。
00:02:49尽管它比刚推出时改进了很多，但 Claude Design 依然非常
00:02:53消耗 Token，所以如果你频繁使用，你的额度会耗尽得更快。因此，为了
00:02:59应对大量的 Token 消耗，你在直接开始输入提示词之前需要采取一些步骤。
00:03:04这些步骤非常重要，因为它们能确保你在不浪费太多 Token 的情况下
00:03:09获得想要的设计。你需要做的第一件事是创建 design.md 文件。这是一种
00:03:15由谷歌开创的格式，其中包含你品牌设计的所有细节。你的 AI 编码智能体在编写任何代码之前会读取该文件，
00:03:20因此它提供的每个界面都符合品牌调性。它永远不需要猜测，
00:03:25所以它绝不会偏离品牌风格。现在 Claude Design 有一个功能，允许你创建设计系统。
00:03:30设计系统基本上是一组会出现在你整个网站中的样式选择。它包含你的字体、
00:03:35你的颜色以及构成你设计的所有其他细节，它允许你利用这些来构建
00:03:40更多设计。因此，所有使用设计系统构建的设计都将遵循相同的风格，并看起来像
00:03:46同一个网站的一部分。但你想要从预定义的 design.md 文件开始的主要原因是，
00:03:51所有这些模型输出的设计看起来都一模一样。如果你让 Claude Design 自行构建设计系统，
00:03:57它就会退回到 Opus 模型到处使用的通用颜色和样式，正因如此，
00:04:02你的网站最终看起来会和其他所有 AI 构建的网站一模一样。但是，如果你
00:04:07交给它一个 design.md 作为设计系统的基础，该文件就会明确告诉它你想要什么，因此控制力会强得多，
00:04:12并且不会退回到那些默认设置。正如我们已经提到的，另一个
00:04:17原因是一致性。既然整个设计系统都基于那一个文件，每个页面就会遵循
00:04:22完全相同的风格，这就是保持你的多页面网站外观一致的关键。为此，我们制作了一个技能，
00:04:27可以为你规划出 design.md。要在 Claude Code 中运行此技能。而 Claude
00:04:33Code 基本上是 Anthropic 的另一款工具。它本质上是一个在终端中运行的 AI 编码工具，
00:04:39可以为你构建整个应用程序。要安装它，你只需前往他们的官方网站，复制安装命令，
00:04:45并在终端中运行该命令。完成后，你在终端中输入 claude，
00:04:49然后输入提示词即可开始使用。由于我们打算在 Claude
00:04:54Code 中构建应用，我们只需将这个技能放入 .claude 文件夹内的 skills 文件夹中，
00:04:59这里基本上是 Claude Code 的所有设置和配置所在的位置。你可能没有这个文件夹，但你只需
00:05:05在提示框中告诉 Claude Code 你需要在项目中安装技能，它就会为你设置好，
00:05:10甚至会自动把技能放进去。当你用 Finder 打开时，.claude 文件夹是不可见的。
00:05:15这是因为它的名称以点开头，以点开头的的文件会被当作
00:05:20系统文件，所以 Finder 默认会隐藏它们。因此，要访问那里，你需要一个代码编辑器，
00:05:25它基本上是一个让你能在同一个有条理的地方查看所有项目文件的应用。我们使用的是
00:05:31微软的 VS Code，这也是大多数开发者都在使用的工具，因为它的操作实在太简便了。
00:05:36要安装它，你只需前往他们的官方网站，下载适合你所用系统的安装程序，
00:05:40并运行安装。然后你只需在其中打开你的项目文件夹，就能
00:05:45看到所有内容，包括隐藏文件。此后，每当你想要构建应用时，只需
00:05:49通过斜杠命令（slash command）调用此技能，这基本上是一个带斜杠的快捷方式，
00:05:54可以触发它并给它一个提示词，告诉它你想构建什么。它会与你进行访谈，并详细规划出
00:05:59产品的视觉识别，一旦获取了所有信息，它就会写出
00:06:03整个 design.md，并且还会通过运行脚本来对照谷歌的标准进行验证。这个技能
00:06:09还包含防平庸（anti-slop）参考资料，其中基本上涵盖了所有容易暴露网站是 AI
00:06:15构建的常见模式。因此，先规划一个 design.md 绝对是最好的选择。另外，如果你想知道去哪里
00:06:21获取这个技能，别担心，我们会在视频后面告诉你。现在，我们在本视频中构建的应用
00:06:26是一个项目管理应用，你可以在其中一站式管理所有的编码项目。所以要开始的话，
00:06:31首先你需要给 Claude Code 一个带有技能斜杠命令的提示词，大致描述你
00:06:36想要构建的应用以及它的用途，它就会从分析你想法的视觉识别开始。
00:06:41一旦有了这些，它就会开始向你提问，比如你对网站是否有心仪的
00:06:46颜色。如果你已经决定了品牌颜色，你可以提供给它，
00:06:51或者你也可以让它自己选择。由于你使用了这个技能，它不会默认使用平庸的颜色，
00:06:55所以你无需担心那种千篇一律的外观，但最好还是提前
00:07:00把它们确定下来。我们通常的做法是使用 coolers，这是一个生成并可视化
00:07:05调色板的网站，这样你就可以看到这些颜色搭配在一起的效果。一旦你找到了喜欢的
00:07:09颜色组合，就可以点击导出，然后选择代码选项，它就会
00:07:14给你一段文本，你可以直接复制并粘贴到 Claude Code 中。Claude Code 会将这段代码
00:07:18放入你的 design.md 文件中。此后，它将创建 design.md 文件并运行
00:07:24一些验证步骤。生成的设计文件完全符合谷歌设定的格式。
00:07:29谷歌的这种格式虽然方便 AI 模型理解，但你自己却很难
00:07:33想象出由此生成的设计究竟长什么样，因此你无法判断这是否是你要最终确定的设计
00:07:38或者是否需要修改。但不要在 Claude Design 内部进行测试。你在那里生成
00:07:43设计，假设你不喜欢它们。现在你必须回到 design.md 中，
00:07:48进行修改，然后重新生成所有内容。每一轮这样的操作都会消耗你的 Token。有很多
00:07:53工具都可以为你可视化 design.md，我们使用过的一个是 design.md.space。任何
00:07:59这类工具都能让你看到设计文件的外观，以及它为不同区域挑选的各种颜色
00:08:04是如何搭配的。它还会将所有元素可视化，这使得做决定变得容易得多。当然，这
00:08:10只是创建 design.md 的方法之一，还有其他方法。如果你不想自己制作，
00:08:15可以直接复制某个热门网站的设计作为样本。说实话，将现成的设计复制过来
00:08:19作为参考是很多人已经在做的事情。你把它作为起点并进行修改
00:08:24来打造属于你自己的设计，就像许多人借鉴 Notion 简洁的外观，
00:08:29经过一番微调后融入到他们自己的设计中一样。为此，有一个名为 getdesign.md 的网站，上面列出了
00:08:34列出了许多品牌及其所有样式作为 design.md 文件，你可以自行获取。
00:08:39既然我们已经有了自己的 design.md，就可以继续使用 Claude Design 并据此创建一个新的
00:08:44设计系统。当你创建一个新系统时，它会询问产品详情。但既然你
00:08:49已经有了 design.md，只需将其作为资产上传即可。然后它就会通过读取文件、
00:08:55创建待办事项并逐个处理来开始生成新系统。过一会儿，Claude Design
00:09:00就会创建好设计系统并为你将所有内容可视化，构建出将在其所用应用中作为组成部分的不同元素。
00:09:06现在，为了让你能跟着这个工作流一起操作，你需要这个
00:09:10技能。我们已经把它放到了 GitHub 上，并在简介中附上了链接，你可以免费获取。
00:09:14所以要使用它，只需将这个链接发给 Claude Code 并让它为你设置，它就会自动安装
00:09:19并将其放入 .claude 文件夹中，无需你做任何事情。现在，一旦设计系统
00:09:24敲定且到了实际使用的时候，在开始构建网站之前，还有另一个非常重要的步骤。
00:09:29那就是为你想要构建的内容创建线框图。线框图基本上是一个
00:09:34粗略的草图，能让你看到所有元素的位置以及它们的摆放是否正确。现在你
00:09:39也可以直接构建网站，但这会导致问题。你得等很长时间，
00:09:43因为 Claude Design 生成设计速度较慢；如果经历了这一切后设计却不是你
00:09:48需要的，你就得重做整个事情。所以要在 Claude Design 中做到这一点，只需选择你
00:09:53刚刚制作的设计系统，选择线框图选项，并输入包含你想要多少个屏幕等详细信息的提示词。
00:09:58在此之后，它还允许你为每个屏幕创建多个选项，以便Claude为你提供
00:10:03每个屏幕的几种不同风格供你选择。生成它们不会花太长时间，然后你可以
00:10:08查看结构并浏览它为同一页面制作的所有变体。它还
00:10:12具备评论功能，因此要更改任何单个内容，只需在其上方放置一条评论。评论基本上
00:10:18会将该元素的准确细节连同你的提示词一起发送出去，以便 Claude 确切知道哪个区域需要
00:10:23更改以及如何更改。这使得它比单纯地输入提示词并让 Claude 自行摸索你指的是哪个区域要好得多。
00:10:28要添加评论，只需选择评论功能，点击你想要更改的确切
00:10:33对象并输入所需的更改。你可以根据需要添加任意数量的评论。
00:10:38你可以逐个发送它们，但最好将它们分组并一次性全部发送，以便它能
00:10:42一起处理并在一次操作中修复所有问题。这样可以将你的等待时间降至最低。所以只需不断
00:10:48微调，直到你对结构满意为止；一旦这里完成了，你就可以继续下一步。如果
00:10:52你目前为止很喜欢这个视频，请订阅频道并点击点赞按钮。这个小小的支持举动
00:10:57对我们意义重大。现在，一旦你设计好了线框图，就该来设计真正的
00:11:03设计本身了。你也可以使用相同的设计来创建一些变体。由于你通常会
00:11:06要求 Claude 为同一设计制作几个变体，因此你首先要从刚刚制作的变体中
00:11:10挑选出你想要的一个。这些页面中的每一个都通过其代码编号来识别，所以你只需通过它来选择。
00:11:15在此之后，你给它一个提示词，告诉它你希望将这些屏幕变成真正的完整
00:11:20细节设计，并告诉它保持线框图的布局和结构，同时具备整洁的间距
00:11:26和层级。然后，Claude design 会读取它在构建设计系统时制作的所有元素。
00:11:31并利用这些元素构建出整个网站，使其完全符合设计系统
00:11:36和线框图的要求，正合我们所需。就像在线框图上一样，你也可以在这里进行评论并修复问题。
00:11:41而且你可能需要做很多更改，因为它往往无法正确选择按钮颜色。
00:11:46有些按钮需要吸引眼球，应该采用醒目的粗体颜色以脱颖而出，因此你可以要求它
00:11:50修复这些问题。而且因为它是在线框图的基础上构建的，所以网站本身出来时会显得有点空白，
00:11:55只有在粗略草图上添加了基本部分，因此你可以要求它添加纹理
00:12:00和元素以获得更饱满的外观。你也可以直接在设计上应用编辑，所以如果你有诸如删除某些元素之类的微小更改，
00:12:05你可以直接在设计上完成，而无需为此向 Claude 发送提示词。
00:12:10这样一来，更改就能应用进去，而你无需等待，也不会在这么小的改动上浪费令牌。
00:12:15一旦你完成了修改，你可以让 Claude design 润色整体外观，
00:12:20它会对设计做出微妙而有意义的修改。至此，应用的第一版就
00:12:25完成了，但还少了一些东西，那就是动画。这些动画之所以重要，是因为它们
00:12:29能让网站用起来感觉更好，并引导视线关注真正重要的事物。诸如滚动
00:12:35进入视口或任何其他小点缀之类的效果，会让网站感觉更有生气。因此，为此我们给 Claude design
00:12:40下达了一个提示词，要求在所有屏幕上添加动画，比如滚动进入视口或任何其他
00:12:45让网站感觉更有生气的小点缀。我们还告诉它要保持微妙，不要让
00:12:50任何东西显得过于有弹性，因为那样会让人觉得不自然。一旦 Claude design 完成，你就能看到滚动进入
00:12:55视口和文本弹出动画，这让整个网站感觉互动性强得多。一旦你
00:13:00对设计满意，就可以进入下一步，即交接。Claude design 中的设计
00:13:05现在已经定稿了，是时候通过将其转化为我们最终交付的真实产品来赋予它生命了。
00:13:10Claude design 以前没有这个功能，但现在你可以将你的设计直接导出到 Claude code 中。
00:13:15它使用 Claude design MCP，这基本上是让 Claude design 和
00:13:21Claude code 能够相互对话的机制。而且它不仅是单向的，而是双向的。所以你可以将
00:13:26设计从 Claude design 移到 Claude code 中，也可以用同样的方式将它们带回来。你再次打开 Claude
00:13:31code 并粘贴从 Claude design 获取的这个提示词。它首先会读取元数据，
00:13:36也就是关于设计的汇总信息，然后列出项目文件。它首先读取设计系统，
00:13:42因为那是定义设计的地方，然后逐个读取所有元素。
00:13:47一旦获取了完整的设计，它就会在你的项目中将其构建出来，并带有 Claude design 中的所有动画。
00:13:52但我们必须仔细检查这个转换过程，以确保其正确完成。在视觉上，
00:13:57一切看起来都很好，但当 Claude design 的原始代码
00:14:02变成真正的应用时，仍可能存在内部问题。因此我们请求进行深入审查，它开始对照实际构建的内容
00:14:08来检查 design.md，看两者是否匹配。这次审查发现了多个问题，
00:14:12比如响应式问题，这也就是指应用在手机或平板等不同屏幕尺寸上时看起来不太对劲。
00:14:17Claude design 构建的内容往往会有这个问题，因为这
00:14:22仍然是一个早期版本，所以它设计出的东西最适合其原本制作的特定场景。为网站
00:14:27制作的设计在那里看起来很棒，但在其他屏幕尺寸上则不然，所以我们运行了修复程序，
00:14:32之后应用的视觉部分就能正常工作且具备响应式了。现在，为了真正完成这个
00:14:36应用并让它运转起来，我们需要将它连接到一个名为数据库的东西上。所以目前的问题是，
00:14:41尽管应用完全功能正常，并且如果我们点击按钮，它会正常工作并在新项目中添加
00:14:46详细信息。但如果我们再次打开应用，我们在应用中所做的所有进度都会
00:14:51消失。这就是为什么我们需要数据库，以便所有这些数据都存储在应用内部，人们才能
00:14:57真正使用它。为此，我们使用了 Supabase。它是当今最流行的后端提供商之一，
00:15:02也是管理用户和所有数据的最佳方式之一。Supabase 对我们来说并不陌生。我们几乎在构建的
00:15:08每一个应用中都会使用它，无论我们为谁构建，甚至我们的许多内部工具
00:15:12都在其整个设置上运行。这是因为它为我们省去了很多本需要自己去做的
00:15:17繁重工作。它也是使用最广泛的数据库之一，仅仅因为它与 Claude Code 等 AI 代理
00:15:22连接是多么容易。Supabase 还有一个代理技能，其中包含
00:15:28代理可用于更可靠地使用 Supabase 的指令、脚本和资源。这样一来，
00:15:33它就知道充分利用 Supabase 工具所需的一切。要安装它，你只需复制
00:15:39安装命令并将其交给代理，该包中包含两个技能。一个是
00:15:43Supabase 技能，基本上是关于如何使用它的指南，另一个是最佳实践技能，
00:15:48其中包含优化应用性能的最佳方法。安装完成后，
00:15:53你会看到两个新技能都添加到了你的项目中。每当有任何
00:15:58数据库或登录任务时，Supabase 技能就会触发；而如果你想让 Claude Code 通过在提示词中提及
00:16:04"optimize performance"（优化性能）一词来让你的应用运行得更快时，最佳实践技能就会生效。
00:16:08所有这些都有针对各种问题的庞大参考库作后盾。一旦这些技能安装完毕，
00:16:13你就可以向 Claude Code 发送提示词来构建后端并将现有设计连接到它上面，
00:16:18从而让整个应用真正运转起来。现在，因为我们不想让代理去干预应用数据组织方式的结构，
00:16:22我们已经自己预先做好了这些，并将其添加到了
00:16:27项目的主文件夹中。由于该技能只是一堆指令包，它无法触及 Supabase 服务器上的项目
00:16:32并在那里进行更改。它只是告诉代理该做什么的文本，
00:16:36因此它不自带任何能让其处理代理之外事物的工具。这就是为什么 Supabase
00:16:41技能要求你连接它们的 CLI（即你从终端运行的工具）
00:16:46或者 MCP。无论哪种，都可以为代理提供直接处理 Supabase 项目的工具，
00:16:51这样你就不用手动做什么了。我们选择了 MCP，因为它更容易设置，
00:16:56并且我们不必处理允许 CLI 登录你账户的密钥。要连接它，
00:17:01你前往他们的官方网站，复制你正在使用的代理的安装命令，
00:17:05并在项目文件夹中打开的终端中运行它。之后，你在 ClaudeCode 内部运行 /mcp 命令，
00:17:10就会看到它已连接，但你不能立即使用它，因为它
00:17:15尚未登录。因此，一旦你选择“Authenticate”（验证），你就会被引导至浏览器进行登录，
00:17:20然后 MCP 就连接成功了。MCP 连接后，ClaudeCode 便加载了该技能
00:17:25并开始着手开发应用。它做了很多更改，并针对这些数据库请求运行了测试，
00:17:30以确保构建出最佳版本。它还确保锁定了所有
00:17:34不应向所有用户开放的区域，这多亏了技能中的那些准则。就这样，
00:17:39Supabase 通过该技能为你处理了整个后端。现在整个应用已经构建完毕
00:17:44并实际运行起来了。只剩最后一步，即部署，也就是将其上线，
00:17:49以便外面的任何人都能使用它。但我们不会在这里深入探讨这一点，所以请留意
00:17:53我们将详细讨论它的后续视频。现在，我们提供的这个技能其实是我们
00:17:59在项目中实际内部使用的一个更大设计系统的一部分。所以如果你想获取该系统，
00:18:04你可以在我们的社区 AI Labs Pro 中获取它。在那里你还可以找到
00:18:08我们在视频中展示的其他技能和资源，以及一个与我们的团队互动的场所。
00:18:14因此，如果你在我们的工作找到了价值并想支持频道，这就是最好的方式。
00:18:18链接在简介中。这就到了本视频的尾声。如果你想支持
00:18:23频道并帮助我们继续制作这样的视频，你可以使用下方超级感谢 (Super Thanks)
00:18:28按钮来做到这一点。一如既往，感谢观看，我们下期再见。
Community Posts
No posts yet. Be the first to write about this video!
Write about this video