00:00:00Claude Design 是自技能出现以来
00:00:01前端开发领域出现的最棒的事。
00:00:05但如果你不知道自己在做什么，
00:00:06你会在做出登录页面之前
00:00:09就耗尽所有的使用配额。
00:00:11但这个 Claude Design 大师班
00:00:12将帮你解决这个问题，
00:00:14因为我会向你展示哪些功能真正值得投入时间。
00:00:17除此之外，我们将进行一场正面测试，
00:00:19对比普通 Claude Code 和 Claude Design。
00:00:22我们还会讨论一些有趣的用例，
00:00:25不仅仅是简单的登录页面制作。
00:00:27这是一个很棒的工具，我们要涵盖的内容很多。
00:00:30让我们开始吧。
00:00:31Claude Design 是 Anthropic 对谷歌 Stitch 的回应。
00:00:35它在 Claude Code 中无法使用。
00:00:37它赋予了我们为网页应用、移动应用
00:00:40甚至演示文稿创建大量视觉模型的能力。
00:00:43要访问 Claude Design，必须通过网页应用。
00:00:45也就是 claud.ai/design。
00:00:47它在 Claude Code 中不可用，
00:00:48在桌面应用中也无法使用。
00:00:51说到局限性，
00:00:52我们必须立刻指出的一个重大局限
00:00:54就是使用限制。
00:00:56它有自己的每周限制，而且无论你是在
00:00:59Pro、Max 5 还是 20X 版本，限制都是一样的。
00:01:02而且这东西是个资源消耗大户，
00:01:05特别是如果你使用了我们在视频后面
00:01:08会讨论到的某个功能。
00:01:10但即使有这些限制，
00:01:11Claude Design 仍然是一个巨大的飞跃，
00:01:14尤其是在使用 Claude 进行前端设计工作时。
00:01:17像调整系统这样的功能，让你非常容易看出
00:01:20不同的更改会如何调整网页应用的
00:01:23整体质感。
00:01:23“编辑”之类的功能让你能非常快速地深入细节，
00:01:28并在粒度级别上进行更改，
00:01:30而无需依赖文本提示。
00:01:31但如果你想坚持使用评论系统，
00:01:33也是可以的。
00:01:34他们有一个实际的评论按钮，
00:01:35我可以选择网页应用的各个部分，
00:01:39并留下直接发送给 Claude Code 的评论，
00:01:42或者添加到评论队列中供团队其他成员
00:01:46补充他们的想法，因为这非常具有协作性。
00:01:48你可以与其他人分享这些设计，
00:01:50你们所有人都能在不同地方协同工作。
00:01:53我可以在应用上绘图来展示我想改变的地方。
00:01:56我非常容易就能以全屏方式查看演示。
00:02:00而最重要的是，
00:02:02我可以非常轻松地将其导出到 Claude Code。
00:02:05这种以视觉为中心的设计设置，让获取你想要的
00:02:09前端输出变得容易多了，
00:02:11而不是完全局限在 Claude Code 内部，
00:02:13还要进行那种一直以来都有的
00:02:18代码开发服务器刷新回代码的动态操作。
00:02:19但要充分利用这个工具，
00:02:21有一些事情你必须知道。
00:02:22所以我们将首先从网页应用的
00:02:25前端设计工作开始，这也是大多数人想要的。
00:02:29我们还将展示 Claude Code 会给我们带来什么，
00:02:33对比 Claude Design。
00:02:34这样你就能大概看出我们得到的是什么，
00:02:37以及这是否值得。
00:02:38但在做这些之前，先插播一条赞助信息，来自我本人。
00:02:42我们刚刚发布了 Claude Code 大师班，
00:02:44就在 Chase AI Plus 里。
00:02:45这是从零成为 AI 开发者的第一渠道，
00:02:48特别是如果你没有技术背景的话。
00:02:51最近我们一直专注于大师班里的
00:02:54智能体 OS 系统，
00:02:55我们把 Claude Code 当作引擎，
00:02:58并用 Obsidian 作为内存来补充它，
00:03:00用 GWS 来附加整个谷歌套件。
00:03:03然后在这个基础上，
00:03:05附加任何和所有定制的技能包，
00:03:09我们可以根据用例想出适合我们的方案。
00:03:12我们甚至讨论了如何将这一切打包
00:03:14并卖给客户。
00:03:15所以如果你对此感兴趣，
00:03:17一定要去看看。
00:03:18它在 Chase AI Plus 里面，
00:03:19置顶评论里会有链接。
00:03:21那么让我们来聊聊 Claude Design 和你的网页应用，
00:03:24因为在我们开始提示这个工具之前，
00:03:26有一些决定我们需要做出。
00:03:28在这个视频中，我会在屏幕上到处移动，
00:03:31所以请见谅。
00:03:32现在，我们要问自己的第一个问题是，
00:03:35我们要使用设计系统吗？
00:03:38在这里对我来说，你看到的是“无”
00:03:40和一个智能体 OS 设计系统。
00:03:42你刚开始时会显示“无”。
00:03:44如果我们想创建一个设计系统，
00:03:47我们需要来到这里，
00:03:48进入设计系统。
00:03:50所以这里可能什么都没有，
00:03:52你会点击创建。
00:03:53那么什么是设计系统？
00:03:56嗯，本质上它就像一个视觉模板，
00:04:00你可以将其应用于以后创建的任何项目。
00:04:03所以如果你有特定的字体、使用特定的标志、
00:04:07任何特定的东西，即使只是一个大致的风格，
00:04:10你都可以在这里完成。
00:04:11这就是你进行设置的地方。
00:04:12这样你就不用为每一个单独的项目
00:04:13重复同样的操作。
00:04:15如果你在设计视觉方面有某种
00:04:17统一的基调。
00:04:20输入你的公司名称，
00:04:21然后提供示例。
00:04:23现在，这些示例可以是代码。
00:04:25所以我可以链接一个 GitHub 仓库。
00:04:27我可以把一个文件夹拖到这里。
00:04:29我可以上传文件。
00:04:30我可以添加字体、资产等等。
00:04:33这是你定义品牌的地方。
00:04:36现在，有一点提醒。
00:04:39这就是我刚才说的“代币消耗大户”。
00:04:42所谓的代币消耗大户，我的意思是运行一个设计系统
00:04:45A，会花费大约 5 到 15 分钟，
00:04:47因为需要摄入所有内容，具体取决于大小。
00:04:50B，这会立即占用你大约 20% 到 25% 的配额。
00:04:55从一开始就是这样。
00:04:56所以要理解这一点，不要进来后觉得，
00:04:57哦，我第一件要做的事
00:04:58就是搞定五个设计系统。
00:05:00绝对不行，绝对不行。
00:05:02如果你知道自己想做什么，就做一个，
00:05:05等我们设置好后，我会展示它看起来是什么样的。
00:05:07但不要做超过这个数量的。
00:05:08至少在未来他们提高限制之前不要这样做。
00:05:09所以它是资源消耗大户、资源消耗大户、资源消耗大户，
00:05:11别被这个给坑了。
00:05:12现在，如果你确实想这样做，
00:05:16你只需把这些全部填好，
00:05:17然后点击继续生成，
00:05:19会弹出一个窗口显示类似的内容，
00:05:20嘿，这需要 5 到 15 分钟。
00:05:21一旦它完成了对所有资产的摄入，
00:05:24你就会得到类似这样的结果，
00:05:26它要求你审阅它生成的草拟设计系统。
00:05:29我输入的是我的智能体 OS 仪表板的代码，
00:05:30就是我刚才向你展示的那个。
00:05:33它有一种这种 Claude 的配色主题。
00:05:34它有特定的字体，所有这些。
00:05:38所以我喂给它的是这类视觉效果。
00:05:40它最后返回了所有这些。
00:05:43嘿，这个看起来不错。
00:05:45这个看起来不错。
00:05:46嘿，看那个吉祥物。
00:05:48看起来很眼熟。
00:05:49那个看起来不错。
00:05:53语音会遍历所有颜色。
00:05:53所以它会深入到非常非常细微的地方，
00:05:54例如：好吧，你希望这些颜色是什么样的？
00:05:55你希望卡片看起来是什么样的？
00:05:57它非常具体。
00:05:59真的很棒。
00:06:03而且再次强调，这让人非常容易想起 Stitch。
00:06:06非常非常容易想起这类东西。
00:06:07所以我继续批准了所有内容。
00:06:08它说缺少品牌字体。
00:06:09所以如果我有总是想使用的特定字体，
00:06:11我也可以上传它们。
00:06:14而且在任何时候，我都可以回到这里，
00:06:16因为它已经分解了所有的组件内容，
00:06:17点击它，然后根据需要查看和编辑。
00:06:20就像你稍后将看到的，
00:06:21关于实际的登录页面、幻灯片演示，
00:06:23以及所有这些，我们可以分享它，对吧，
00:06:26给团队或其他什么人，或者我可以导出它。
00:06:30比如 PowerPoint、PDF，我们可以发送到 Canva、HTML、
00:06:31Claude Code，真的非常容易，只需一键点击。
00:06:33此外，我们还有实际的设计文件。
00:06:36所以我可以在这里查看里面，看看正在发生的一切，
00:06:39所以这里有很多东西可以让你自定义和尝试。
00:06:42所以这里有很多你可以自定义和玩转的东西。
00:06:44它根本不是一个黑盒，不像那种感觉：
00:06:46嗯，我希望 Claude Design 生成了一些好的东西。
00:06:50谁知道表面之下发生了什么？
00:06:52不，你可以洞察一切。
00:06:55因为这全是代码。
00:06:57这是它生成代码的一种很酷的方式，
00:06:59我们可以随时把这些代码带到我们自己的本地机器上。
00:07:01我们并没有被困在这里。
00:07:03所以回到 Claude Design 和网页应用，
00:07:04这是我们要回答的第一个问题。
00:07:06我们要使用设计系统吗？
00:07:09这在视觉上是否与我们过去做过的东西
00:07:10属于同一范畴？
00:07:11更重要的是，
00:07:13你是否根本没有创建设计系统？
00:07:15你是否已经把每周 20% 的配额
00:07:16上缴给了 Anthropic 之神，甚至都没拥有这个选项？
00:07:18现在，对于这个演示，我们只保持“无”。
00:07:19这样我们大家都在同一水平线上。
00:07:20接下来的问题变成了，嘿，
00:07:22我是想做线框图还是想做高保真原型？
00:07:25并把这百分之二十的周令牌额度
00:07:28献给Anthropic众神，甚至拥有了这个选项？
00:07:30在这个演示中，我们先选择不使用。
00:07:32这样我们就都在同一条起跑线上了。
00:07:33接下来的问题是，嘿，
00:07:37我是想做线框图还是想做高保真原型？
00:07:39大概率你会想做高保真。
00:07:41这样你就能看到它最终的样子。
00:07:43但同样，嘿，如果你想做线框图，
00:07:44你随时可以在两者之间切换。
00:07:45你并没有被局限于某一种形式。
00:07:47但在这里，我们选择高保真。
00:07:50我们就把它命名为CD demo然后创建。
00:07:53接着它会带我们到这里并向我们索要上下文。
00:07:56所以，你是有设计系统，还是仅仅一张截图，
00:07:58或者一个代码库，又或是Figma文件？
00:08:01无论如何，如果你是从零开始的第零步，
00:08:03或者如果你有一个代码库，
00:08:05理想情况下，你需要给它提供一些东西。
00:08:07如果你有一个像我们刚才谈到的那种代码库，
00:08:09你已经在开发一个应用了，把它喂给它。
00:08:10把它喂给Clod Design。
00:08:12它会工作得更好。
00:08:14但即使你没有，并且是从零开始，
00:08:16我强烈建议你至少，
00:08:18去外面世界找一些你喜欢的灵感，
00:08:20无论是来自Dribbble、Awwwards还是Godly网站，
00:08:23任何东西，对吧？
00:08:25从白板开始，却指望Clod Design
00:08:27来完成所有的重活，
00:08:28因为我敢说你的提示词会写得很烂。
00:08:30只要明白你提供的上下文越少，
00:08:33你就越有可能陷入平庸的境地。
00:08:35所以在开始前要明白这一点。
00:08:36我们有画草图的能力。
00:08:38所以，你知道，我们实际上可以在这里画，
00:08:40然后说，好的，这是我们的图片。
00:08:44我想要文字在这里。
00:08:48然后我想要英雄图。
00:08:53英雄图在这里。
00:08:59然后再来个滚动横幅。
00:09:10我们会给它一些内容，
00:09:12哪怕就像这幅绝妙的艺术作品一样。
00:09:15而且你做的远不止这些。
00:09:16我们可以切换画笔，对吧？
00:09:18我们可以添加文本。
00:09:19我可以添加不同的，比如，我可以添加便签。
00:09:21所以这里有很多事情可以做。
00:09:25从这里开始，你只需要提示它。
00:09:28你也有能力更换模型。
00:09:30我会建议使用Opus 4.7，
00:09:33因为特别是如果你要添加截图之类的东西，
00:09:35Opus 4.7拥有最高的保真度
00:09:37以及截图的最高分辨率。
00:09:40是你在Opus 4.6上能获得的三倍。
00:09:42那么，让我们给它一个提示词。
00:09:44我说为Argus构建一个登陆页面，
00:09:46这是一个社交媒体情报平台，
00:09:48帮助创作者在特定领域的话题
00:09:49火起来之前发现它们。
00:09:51那是一个布局，你知道，
00:09:53基本反映了你在这里写的内容。
00:09:55所以，这是一个我们能给出的最平庸的提示词了。
00:09:58基础的SaaS类型的东西。
00:10:00所以让我们看看它能做出什么。
00:10:02这就是Clod Design做出来的东西，
00:10:03只用了一个非常简单的提示词，且除了我们
00:10:06在页面上涂鸦之外，没有提供任何上下文。
00:10:08就是这样，我觉得对于第一版来说还不错。
00:10:13在使用方面，使用量提醒，4%。
00:10:16花费了我们总周用量的4%
00:10:18来生成这个登陆页面。
00:10:20这是Clod Code给我们的结果，
00:10:21使用了完全相同的提示词，
00:10:22同时也使用了前端设计技能。
00:10:25还不赖。
00:10:26我的意思是，有一些小问题我们可以直接指出，
00:10:28比如，嘿，文字在这里被切掉了。
00:10:32这个版本出的错没那么多。
00:10:35文字确实在这里有重叠。
00:10:39它在下面显示了“正在崛起”之类的，
00:10:41也有些重叠，但已经很接近了。
00:10:45老实说，
00:10:46我稍微更喜欢设计版一点，
00:10:47但我也可以看到有人也会
00:10:49更喜欢这一版。
00:10:50所以初次尝试，没有太大区别。
00:10:52那么为什么要使用Clod Design？
00:10:54它的优势在哪里开始显现呢？
00:10:55嗯，它开始显现优势
00:10:56是在我们开始谈论变体
00:10:59以及能够进行迭代的时候。
00:11:00你马上就能在微调中看到这一点。
00:11:03所以，我能做这件事是一件大事。
00:11:07我能够非常快地更改标题
00:11:10或者查看跑马灯。
00:11:13我们也可以在此基础上进行扩展。
00:11:16所以我写的是积极增加微调的数量。
00:11:18我希望能够尽可能多地摆弄它。
00:11:20所以让我们看看它会返回什么。
00:11:22好了，现在我们可以看到它增加了更多微调
00:11:26供我们折腾。
00:11:27那么使用率是多少？
00:11:30添加所有这些微调增加了7%。
00:11:32所以你可以看到，仅仅是从添加登陆页面
00:11:36和大约14个微调，我们就已经用掉了，那是多少？
00:11:39大约总量的11%。
00:11:40现在，我认为微调很重要。
00:11:43我在开头谈过了，
00:11:44当谈到Clod Design时，我们真正想聚焦的特征是什么？
00:11:47因为当我们刚才只做了一次生成时，
00:11:48它并没有比我从
00:11:49前端设计技能获得的结果疯狂得多。
00:11:51嗯，这些微调以及能够处理
00:11:52所有这些事物和这些细微的变化，
00:11:55对吧，这才是Clod Design真正的力量。
00:11:59所以我要稍微缩小一点，
00:12:02这样我们就能更好地看到微调的效果，
00:12:03但我现在可以做从调色板到强调色的一切，
00:12:05圆角、背景网格、取消背景网格、
00:12:10字体、强调、标题差异、布局切换，对吧？
00:12:14这就是这里的力量所在。
00:12:19力量并不在于，哦，它可以一键搞定UI设计
00:12:21而且UI设计一出来就非常棒。
00:12:23不，事实是我可以进行非常快速的迭代，
00:12:25非常快，这，想想我做这个有多快，
00:12:29再想想在Clod Code里运行所有这些需要多快。
00:12:33我的意思是，我们甚至可以改变它正在查看的
00:12:34社交媒体事物的领域，
00:12:36在这张来自AI和科技的图片中，到游戏，到金融。
00:12:39谢天谢地，我可以调整跑马灯速度，
00:12:41因为这东西飞得太快了，但是的，这太棒了。
00:12:46这是第一部分，我觉得有两件事。
00:12:47嗯，实际上不止这些，
00:12:52但我认为微调是设计带来的第一价值增长点，
00:12:54因为它关乎视觉迭代。
00:12:56而在我看来，Clod Design第二个最有影响力的特征
00:12:59是网页的变体。
00:13:01所以微调是非常微观的，对吧？
00:13:04我们说的是颜色，我们说的是强调色，
00:13:07我们说的是字体，但如果我想要整个登陆页面的
00:13:09变体，像疯狂地那样。
00:13:11我指的不是不同的字体，
00:13:14我指的是完全不同的设计
00:13:18而且我想能够把它们堆叠起来看。
00:13:19再次，就像我对Stitch所做的那样。
00:13:21我想要能够做到这一点。
00:13:23嗯，我们可以在Clod Design里做到，
00:13:25而且非常容易。
00:13:26我们只需提示它去做这件事。
00:13:28所以我提示了设计并说，
00:13:29你现在能为这个登陆页面多创建两个变体吗？
00:13:32我可以在它们之间点击，而且是风格迥异的，
00:13:33先向我建议不同的变体风格。
00:13:36所以它为我返回了六种不同的选项。
00:13:39我们可以做终端彭博、终端风格、
00:13:42超大极致编辑、粗野主义、合成波、柔和粉彩，
00:13:44或印刷报纸。
00:13:48走吧，是的，有点像一和二。
00:13:53所以我说，让我们做一和二
00:13:56当然，也要保持当前布局。
00:13:59所以Clod Design完成了变体。
00:14:03所以这是编辑版，我们开始的版本。
00:14:08我们现在有一个终端选项。
00:14:10以及编辑极致选项，
00:14:13这有点意思，有些不同。
00:14:18现在，如果你不告诉它，
00:14:21它只会为最初版本做微调。
00:14:24所以当你做这些变体时，
00:14:25我认为通用的工作流应该是，
00:14:28你先从变体开始。
00:14:30所以在宏观层面上，你思考的是，好的，
00:14:33我倾向于朝这个方向发展。
00:14:35然后一旦你选择了这些宏观选项中的一个，
00:14:37假设我们决定坚持我们喜欢的，
00:14:39然后你会进入非常激进的微调阶段。
00:14:42所以你可以看到一切
00:14:44并深入钻研你想要的东西。
00:14:47因为按照现在的使用设置方式，
00:14:49如果你走宏观路线并说，
00:14:51我不想要只有三个选项。
00:14:54我想要四、五个变体，而且我想要它们都带微调。
00:14:56你只会耗尽你的使用量。
00:14:57因为添加这两个变体，极致和终端，
00:15:00那是额外的5%。
00:15:02所以这带来了，
00:15:04我想我们现在是17%，为了登陆页面，
00:15:05两个登陆页面变体加上微调。
00:15:07我知道我一直在纠结使用量，
00:15:11但对很多人来说，这是一件大事，
00:15:13而且理应如此。
00:15:14我想在未来，
00:15:16这可能会改变整个使用机制，
00:15:17但先放在心上。
00:15:18所以这两件事结合在一起，
00:15:19这种变体进入微调，
00:15:20是允许我们达到80%的解决方案，90%的解决方案。
00:15:23现在我可以对这个更加超专注了。
00:15:26我们可以像我开头展示的那样上去。
00:15:31我们可以做编辑。
00:15:35就像我一开始展示的那样，我们可以回到这里。
00:15:37我们可以进行编辑。
00:15:39所以我可以点击这个顶部标题。
00:15:42我可以更改不透明度。
00:15:43我可以更改宽度、颜色等等。
00:15:45所以如果我们想的话，可以做得非常非常具体，
00:15:47但真正的力量来自于达到那个 90% 的解决方案，
00:15:50然后感觉，好的，我喜欢第一个编辑版本。
00:15:54我喜欢把重点放在那个标记上，
00:15:55那个环看起来很糟糕，作为一个标记。
00:15:59我喜欢这个特定的副标题，这个标题，随便什么都行。
00:16:04然后就像，好的，我们就用这个。
00:16:05我们喜欢这些调整。
00:16:06现在让我们搞定登陆页面的其余部分，
00:16:09因为这只是首屏部分。
00:16:11我觉得这种工作流
00:16:14比我们之前用 Claude Code
00:16:15处理同样的提示词要快得多。
00:16:17要是用 Claude Code 的话，
00:16:20我们得一点点去调颜色。
00:16:22还得试好几个不同的方案。
00:16:25还得去改标题，再做几个方案。
00:16:28那可能要花上几小时，而这种方法只需几分钟。
00:16:29至少对我来说，我需要直观地看到效果。
00:16:32现在让我们来调整颜色。
00:16:35让我们做几个变体。
00:16:36现在让我们来修改标题并做几个变体。
00:16:39那样可能需要几小时，而这个只花了几分钟。
00:16:44对我来说，我需要看到东西，
00:16:47我需要看很多选项，
00:16:48才能真正知道我喜欢什么。
00:16:50而且更好的是，一旦我看到了，
00:16:53我可能还会改变它。
00:16:54说实话，如果他们看到这个，
00:16:54我有点喜欢那个超垂直的。
00:16:56也许我们在这里加点图标什么的。
00:16:58我只是想不断迭代。
00:17:00我只是想看不同的东西。
00:17:02所以，这就是我能给你的关于网页应用部分
00:17:05的两个最大的最佳实践。
00:17:08宏观上，要求提供变体。
00:17:11微观上，要求进行更多微调。
00:17:13我们在这里没有做的一件事，
00:17:15我们会在幻灯片演示之类的事情中展示，
00:17:18就是让它基本上运行它自己的计划模式。
00:17:19所以我们给了它提示词，它马上
00:17:22就把它吐给我们了。
00:17:24我们本来可以做的却是说，
00:17:25嘿，我其实想和你一起做个计划模式。
00:17:26我要你问我一堆问题。
00:17:28它反而会带你经历
00:17:30大量的问题，
00:17:32比如五、八、十个问题，关于比如，
00:17:33好的，你这里想要什么？
00:17:35你那里想要什么？
00:17:36你那里想要什么？
00:17:37这样你就不必做那么多迭代，
00:17:38最终它还能为你节省使用量。
00:17:40我在创建代理操作系统仪表板的
00:17:42前端时，也经历了同样的过程。
00:17:44你可以看到上面，
00:17:46这是我最初开始的版本。
00:17:47然后我能够经历
00:17:48所有这些不同的选项。
00:17:51我最终选择了这个，驾驶舱那个，
00:17:52虽然我也考虑过做那个有酷炫精灵图的版本。
00:17:53然后我只是把这个版本带回了 Claude Code，
00:17:56然后对边距做了微小的调整，
00:17:58并且实际上把它连接了起来。
00:18:01所以它成了一个像样的网页应用。
00:18:03现在让我们做 Claude 设计和幻灯片演示。
00:18:04所以我们过得快一点，
00:18:06因为我们在网页应用方面讨论过的
00:18:08很多基础知识也同样适用于幻灯片演示。
00:18:09所以我不会啰嗦这些点。
00:18:13这一次我们将展示设计系统在工作中的表现。
00:18:16记住，该系统基于我们
00:18:17代理操作系统的视觉效果。
00:18:21所以我们继续点击创建。
00:18:24我们看到了什么？
00:18:26和之前一样的设置。
00:18:27并且有东西在要求你提供上下文，
00:18:28无论是截图、代码库还是 Figma 文件。
00:18:30现在，我们将给它的唯一上下文
00:18:32就是已经存在的设计系统。
00:18:35以及一个提示词说，
00:18:37我们想要一个讲述 Claude 设计和 Google Stitch
00:18:39之间差异的幻灯片演示。
00:18:41我在另一个窗口用了 Opus 4.7 和 Claude Code，
00:18:45想出了这个提示词。
00:18:48所以我必须做一次网络搜索。
00:18:53好的，这是两者之间的一些差异。
00:18:54最后，我写道：在你构建任何东西之前，
00:18:55问我你有的任何问题。
00:18:57这样我们就在同一页面上了。
00:19:01所以某种意义上，我们几乎是在强迫它
00:19:02进行类似计划模式的操作。
00:19:05所以你看到这个在这里填充。
00:19:07同样，当你做网页应用时，
00:19:08这种强制计划模式完全可以发生。
00:19:10只要确保把它放在初始提示词中即可。
00:19:12那么这个演示是给谁看的？
00:19:14假设它是为了公开演讲。
00:19:16我们会说，保持简短。
00:19:18设为六，我们做五分钟。
00:19:20我们会做五张幻灯片。
00:19:24我们会做稍微有点主观的、标题风格、中心化的设计。
00:19:28我们说只要二维定位图。
00:19:30呼叫价格，好的。
00:19:34然后我们继续处理其余部分。
00:19:37没有笔记。
00:19:39总而言之，它问了我们一、二、三、四、五、
00:19:43六、七、八、九、十、十一、十二、十三、十四个问题。
00:19:44加上，你知道，下面有一个小全覆盖，
00:19:47我真的很喜欢。
00:19:52再说一次，Claude Code 的计划模式有时候会做，
00:19:56我觉得最多，你知道，几个，
00:19:58比如两次迭代，每次四个问题。
00:20:00所以这很棒。
00:20:03这是幻灯片演示的样子。
00:20:05我把它全屏显示，仅供参考，
00:20:06这占了我们使用量的 5%。
00:20:07所以每张幻灯片大约 1%。
00:20:10我们有标题页，关于幻灯片
00:20:12是由 Claude 设计生成的小脚注。
00:20:15我们有了数据，你知道，它们落在哪里。
00:20:19有一个图表显示它们在成本方面
00:20:22落在了哪里。
00:20:26显然，Claude 设计要贵得多。
00:20:30现场报告。
00:20:31然后给我们一个，
00:20:34嘿，这里有个小图表显示
00:20:37你应该在什么用例下使用什么。
00:20:38所以我觉得幻灯片演示看起来相当酷，
00:20:40说实话。
00:20:43但比那更重要的是，
00:20:45它坚持了设计系统。
00:20:46整个设计系统建立的这个代理操作系统
00:20:48绝对反映在了幻灯片中。
00:20:49这两件事看起来像是来自同一个地方。
00:20:53就像网页应用一样，
00:20:55我们可以经历同样的工作流程。
00:20:59这是它给我们的原始版本。
00:21:00现在我们可以要求宏观变体并说，
00:21:03好的，我们真的想坚持，你知道，
00:21:05我们的设计系统吗？
00:21:07还是我们想走一个完全不同的方向？
00:21:09好的，我们看到，你知道，两个、三个、四个不同的变体。
00:21:11好的，让我们聚焦在一个上面。
00:21:13现在让我们引入调整，
00:21:16并真正微调这个东西。
00:21:17这就是我建议你
00:21:19处理幻灯片演示的方式。
00:21:20和我们处理网页应用的方式一样。
00:21:22现在仅供参考，这是 Claude Code
00:21:23为我们制作的幻灯片演示。
00:21:24我给了它完全相同的提示词，
00:21:27并且我从同一个目录创建了这个，
00:21:29即代理操作系统现场系统。
00:21:31所以它对同一个设计系统拥有完全访问权限，
00:21:34可以这么说。
00:21:36最重要的是，我还让它问我问题。
00:21:38它只问了我七个。
00:21:39而且说实话，这些问题没那么好。
00:21:42它们在比如，幻灯片数量方面
00:21:43稍微表面了一些。
00:21:46以及你想要什么样的宽高比，
00:21:47这与我们在设计中看到的相比。
00:21:49我认为这反映在了整体上，
00:21:51一个更加平淡的输出。
00:21:52我很惊讶它在视觉风格上
00:21:55与设计给我们的相比没有更接近。
00:21:57我的意思是，它还不赖。
00:22:00我的意思是，颜色很接近，文字很接近，
00:22:02但是我的意思是，让我们认真一点。
00:22:05如果我们要诚实的话，
00:22:07这个真的把它比下去了。
00:22:10最后，让我们谈谈移动应用设计。
00:22:12你这里有两个选择。
00:22:13第一，你直接做移动端。
00:22:15你什么网页应用的东西都不做。
00:22:17而且非常简单。
00:22:19你只需要做我们在视频开头
00:22:21对网页应用部分所做的事情。
00:22:22你只需要在开头说，
00:22:25这是给移动应用用的。
00:22:26确保视觉效果反映这一点。
00:22:28但如果你有一个网页应用，
00:22:29然后你想把它翻译成移动平台，
00:22:32这非常简单。
00:22:33虽然我们可以呆在我们所在的这个提示词窗口，
00:22:35事实上，好的，现在在移动端上把它展示给我看。
00:22:36拥有一个有着完全相同内容的
00:22:40独立项目可能更有意义。
00:22:42但现在我们在我们正在做的网页应用
00:22:45与移动端之间有了一个清晰的界限。
00:22:46所以要做到这一点，你只需要来到右上角，
00:22:48那里写着分享。
00:22:51然后点击复制项目。
00:22:53一旦你这样做了，它会把你带到一个像这样的页面。
00:22:54但如果你回到主页，
00:22:57我们现在可以看到有一个 CD 演示重混。
00:23:00那个重混就是被复制的项目。
00:23:02所以现在我只是要提示它说，
00:23:05你能以移动格式展示相同的设计吗？
00:23:08这是它给我们的移动版本。
00:23:10它继续创建了所有三个的变体。
00:23:13我没有具体说明，但它确实做了。
00:23:15所以它给了我们总共九个模型，
00:23:18总成本是使用量的 5%。
00:23:19所以和往常一样的流程。
00:23:21它把宏观版本放在了这里。
00:23:25所以我们会挑选我们喜欢的那个，
00:23:27显然会是你为你的网页应用决定的那个。
00:23:29然后从那里，我们会说，
00:23:30嘿，我喜欢那个编辑版本。
00:23:32现在带出一堆调整，让我能真正搞定这个。
00:23:34但说实话，
00:23:36如果你在网页应用版本上完成了一切设置，
00:23:38很可能你已经做过调整了。
00:23:39所以这时候应该没有太多
00:23:42你需要改变的东西了。
00:23:44但总会有那么一点，
00:23:47当你从标准网页应用
00:23:48转向移动设计时，总是会遇到问题。
00:23:51但就像你在这里看到的，非常容易做到，
00:23:53只需要一个提示词。
00:23:55这就是我今天留给你们的东西。
00:23:57我希望我能够消除
00:23:58Claude 设计和 Claude Code 之间的差异，
00:23:59特别是强调了
00:24:02我可以尝试无数种不同的版本
00:24:04去实现我想要创建的内容
00:24:06直到最终得到令我满意的方案。
00:24:09我可以经历我正试图创造的
00:24:11东西的大量不同版本，
00:24:15这样我最终能落脚在我喜欢的东西上。
00:24:17一旦我这样做了，
00:24:19我就把它拉进 Claude Code 生态系统。
00:24:21我希望我能通过调用
00:24:22我们每次迭代和创建后丢失的百分比，
00:24:25让使用成本更清晰一些。
00:24:27所以一如既往，让我知道你的想法。
00:24:31一定要寻找更多的 Claude 设计材料，
00:24:33因为我觉得这是一个超级酷的工具。
00:24:35祝大家一切顺利。
00:24:38一定要去看看 Chase AI+，
00:24:40我之后会再见到你。
00:24:42...
00:24:45...