00:00:00Paper 可能是目前针对 AI 原生设计师最热门的设计工具之一，
00:00:05它专注于 AI 代理工作流。
00:00:06它允许你在画布中进行设计并将其导出为代码，
00:00:11反之亦然。
00:00:13所以这是一个双向的完整工作流。
00:00:15我将向你展示如何使用它以及如何安装它。
00:00:17此外，这是我 30 天 AI 原生设计系列的一部分，
00:00:22在这个系列中，你将面临挑战去采用这个设计，
00:00:25也就是我们在上一个挑战中完成的那个，
00:00:27并使用 Paper 来集成和完成设计的这个部分。
00:00:32在开始挑战和讲解如何参与之前，
00:00:36让我先展示如何安装 Paper。
00:00:38访问 paper.design，进入 Docs（文档）部分。
00:00:41第一步是下载 Paper 桌面应用，明白吗？
00:00:46就是一个简单、快速安装的应用。
00:00:48然后，你是在用 Cursor 吗？
00:00:50还是在用 Claude Code？
00:00:51或者是 Codex、Copilot 之类的？
00:00:54我个人使用的是 Claude Code。
00:00:55安装极其简单。
00:00:57在终端输入 Claude 并运行后，
00:01:00只需复制这一行代码，
00:01:03粘贴进去，它就会自动安装。
00:01:05输入这个命令 "/mcp" 就能确认是否安装成功，
00:01:10你会看到 Paper 就在那里。
00:01:13你还能看到 Pencil，我们近期也会介绍它。
00:01:17好了，这就是 Paper 应用。
00:01:19你需要保持它处于打开状态。
00:01:21然后，当然也要运行并打开 Cursor 或 Claude Code，
00:01:24并连接好 MCP。
00:01:26那么，下一步是什么？
00:01:27其实你有几种不同的方式来使用 Paper。
00:01:31你可以使用框架工具在里面开始设计，
00:01:35创建你的布局。
00:01:37这里有一个大家熟悉的区域。
00:01:39如果你已经了解 Figma 的自动布局（Auto Layout），
00:01:41你就能理解如何根据需要在这里手动从头构建布局。
00:01:46但我们不打算采用那种方法。
00:01:48我们基本上会要求 Claude 之类的工具，
00:01:52无论你用的是 Cursor 还是别的，
00:01:53我们会要求它调用 Paper 的 MCP 服务，
00:01:58为我们设计一个布局。
00:02:00然后我们会提升这个设计，
00:02:02在 Paper 中进行自定义修改，
00:02:05最后再将其导回代码。
00:02:06现在我们要让它为一个虚拟业务
00:02:09创建一个布局。
00:02:10在此之前，我想在 coolers.co 做个快速实验。
00:02:14这个网站已经存在很久了。
00:02:16点击 "Start the Generator"（开始生成），
00:02:18然后按下空格键，
00:02:20你就能得到不同的配色主题，
00:02:22或者说是应用自动生成的。
00:02:24你也可以根据需要自己定制颜色。
00:02:28对我来说，我打算继续尝试，
00:02:31好的，这个看起来很有意思。
00:02:32这是一个比较明亮的配色方案。
00:02:33色彩很丰富，等等。
00:02:36我要做的是直接截屏。
00:02:39底部带有颜色代码，
00:02:41我们可以把这些代码作为上下文粘贴到 Claude Code 或你使用的任何工具中。
00:02:46我们将要求它在为虚拟业务
00:02:51创建布局时使用这些颜色。
00:02:53关于提示词，我打算使用 Claude Code 里的前端设计技能。
00:02:59它通常能产生更好的效果。
00:03:01但如果你描述得不够具体，
00:03:04它通常会给出一个非常平庸的结果。
00:03:08让我们看看它会生成什么，
00:03:10然后我们会在 Paper 中优化那个设计。
00:03:12首先，我输入 "/front-end design"，
00:03:15就像你在这里看到的一样。
00:03:17我相信现在 Claude Code 已经自动附带这个功能了，
00:03:19如果没有，我在说明栏里链接了一个视频，
00:03:22会教你如何将这个作为一项技能集成进去。
00:03:25好了，"/front-end design"。
00:03:28现在我要指定提示词。
00:03:29这是一个非常简短的提示词：
00:03:32使用 Paper MCP 服务。
00:03:34提出这个要求非常重要。
00:03:36为一家将 AI 技术用于产品制造质量保证的
00:03:39虚拟业务设计一个现代的 SaaS 布局。
00:03:43听起来有点枯燥。
00:03:43它应该是为桌面端设计的，并包含导航栏和英雄图（Hero）区域。
00:03:47就这样。
00:03:47我希望你使用这个配色方案。
00:03:49十六进制颜色值显示在附带截图中每种颜色的底部，
00:03:53就在这里。
00:03:54你不一定要用到所有颜色。
00:03:56只需确保对比度合适，并且看起来美观即可。
00:03:59就这样。
00:04:00我现在按下回车，
00:04:02我们会看到它开始输出关于访问 Paper MCP 服务的信息，
00:04:07我们可以实时加载 Paper 来查看发生了什么。
00:04:11不幸的是，我的这台 Windows 11 电脑有个特定问题，
00:04:15它会出现这种闪烁。
00:04:16我已经联系过创始人并反映了这个问题，
00:04:18你们大概率不会遇到这种情况。
00:04:21好了，这就是它生成的成果。
00:04:23在我看来，水平比较一般，
00:04:25你一眼就能看出来，
00:04:27“嘿，这多半是 AI 生成的。”
00:04:30所以，我们要使用 Paper 对这个设计进行视觉上的调整，
00:04:34然后再把它导回去。
00:04:36那么我该怎么做呢？
00:04:37首先，我想稍微增加一下这个。
00:04:39好的，给这边留出一些留白。
00:04:42下一步，好，
00:04:45你必须熟悉并理解这边的图层。
00:04:48在这个部分，你可以看到这边的图层，
00:04:51我们可以看到英雄区域包含左右两栏。
00:04:56我不想要那种。
00:04:57我想要的是像这样的一个区域，
00:05:01它只是一个居中的单栏部分，
00:05:05我们要在它后面做一个有趣的背景部分。
00:05:08但首先，我们要选中这个，
00:05:11我们要把所有的文本居中，
00:05:15并且增加它的宽度。
00:05:17在上方，你可以看到宽度被设置为 "auto"（自动）。
00:05:20我们可以把它设为固定宽度，
00:05:23或者设为 "fill container"（填充容器），
00:05:25或者设为 "fit content"（适应内容）。
00:05:26适应内容的效果是一样的。
00:05:28填充容器。
00:05:29好的，它会填充这里的可用空间，
00:05:33然后我要选中这个，
00:05:36在这里，
00:05:38我们可以看到它已经被设为 Flexbox 容器，元素间距为 32。
00:05:44如果我们调整这个，
00:05:46你会看到所有东西都散开了。
00:05:48我要确保所有内容都在那个空间内居中。
00:05:53现在一切还没有达到完美状态，
00:05:55因为我们还得做些别的调整。
00:05:57如果表现不如预期，就继续深入检查。
00:06:01比如这个区域。
00:06:04让我们把它居中。
00:06:06我还是点击这个居中按钮。
00:06:08这是文本，所以我们可以让文本居中。
00:06:10好的，进展顺利。
00:06:12这边的这些东西，让我们也把它们居中。
00:06:15然后我也要把这个居中。
00:06:18好了，我可以右键点击，选择 "Frame Selection"（将所选内容放入框架）。
00:06:21啊，这就自动生效了。
00:06:24所以，你必须愿意去尝试布局的所有功能。
00:06:30这和 Figma 是一样的。
00:06:31你必须理解如何操作布局，
00:06:35因为这工具正试图在画布中呈现真实的浏览器效果。
00:06:40所以移动东西有时会有点棘手，
00:06:43你可能不确定它们是怎么运作的。
00:06:44所以，多花点时间熟悉一下。
00:06:46接下来，我要给这个截个图，
00:06:49目的是以一种比它自动集成的效果更好的方式来运用这些颜色。
00:06:55因为，注意看，它确实取用了一些颜色，但并没有全部采用。
00:06:58倒不是说我们非得全部用上。
00:07:00但我只是想展示在这里做进一步调整的过程。
00:07:05例如，如果我们想让页眉部分有一个特定的背景颜色。
00:07:10我要使用这个填充工具，
00:07:13我们要用到最上面的那个颜色。
00:07:15色值是 FC6471。
00:07:19好的，看起来丑爆了，因为文本颜色现在不协调了，对吧？
00:07:23我要选中这个区域，查看选择颜色。
00:07:27我们要把这个改成白色。
00:07:28也要把那个黑色的改成白色。
00:07:31如果需要的话，我们可以按住 CTRL 并左键点击来选中它，
00:07:35然后把它设为粗体。
00:07:37好的，Spectral AI。
00:07:39我要把这个黑色的部分变白。
00:07:43至于这个，我真的很不喜欢这个渐变。
00:07:45是的，这里显然支持渐变。
00:07:48也许我会把这个颜色调浅。
00:07:51这只是一个通用的奇怪 Logo，也没什么大不了的。
00:07:56我不太在意它。
00:07:57把它移过来。
00:08:00好了，最后，这边的这些东西对比度太差了。
00:08:04也许我们可以，把这个变白。
00:08:11这个可以变成黑色，然后这行文本我们也把它调浅。
00:08:20好的，如你所见，调整起来非常快速简单。
00:08:23现在，假设我们要在这个背景上加点酷炫的东西，
00:08:29比如某种着色器（Shader）效果。
00:08:30就在这里，点击这里，你可以看到 "shaders"。
00:08:34这是这个工具最酷的功能之一，
00:08:38我们可以创建非常有趣、独特的某种着色器。
00:08:42比如这里的这个烟圈（smoke ring）。
00:08:45好，试一下这个。
00:08:46我点击它。
00:08:47当你这样做时，它会作为一个新元素添加到 DOM 中，
00:08:51也就是文档对象模型。
00:08:53这些是你可能以前没听说过的前端开发概念。
00:08:57在这种时候，具备技术背景会很有帮助。
00:09:00我们要做的就是把它设为 "position absolute"（绝对定位）。
00:09:05当你这样做时，它就打破了所谓的传统盒模型限制。
00:09:09我们可以把它移动到任何地方，不过要小心，
00:09:11因为如果你悬停在某些东西上，它会把它放进去。
00:09:14我们要对它进行结构化，让它位于最左上角，
00:09:20并填满整个英雄区域。
00:09:23为此，在上方，我们首先把 X 轴坐标设为 0，
00:09:28然后 Y 轴坐标也设为 0。
00:09:31然后宽度设为 100%，高度也设为 100%。
00:09:35这样做之后，我们就把所有内容都挡住了，对吧？
00:09:39哎，遗憾的是，这里我看不到 Z-index 的设置选项。
00:09:42Z-index 是绝对定位元素的 CSS 属性，
00:09:47你可以通过它来控制堆叠和层流。
00:09:50不是层流，而是顺序。
00:09:52它应该位于所有这些元素的下方。
00:09:54遗憾的是，我在这里没看到那个选项，
00:09:57但当我们将其导入 Claude Code 并在浏览器中恢复为 HTML 和 CSS 代码后，
00:10:04我们可以在那里进行修复。
00:10:05不过现在，如果我们在这里调整参数，还是能看到它的。
00:10:10所有的着色器都有各自的参数，可以在右侧进行调整。
00:10:15所以，你可以更改速度以及其他所有内容。
00:10:18现在你可以看到，这里有一个黑色的填充色。
00:10:21如果我们把它改为 0%，啊，好了，现在我们能看到后面的东西了。
00:10:26但我们还不太能看清前景。
00:10:28至于前景，我们先选取这个颜色，然后抓取我们的烟雾环。
00:10:36我们要将填充色改为那个颜色。
00:10:39噢，不对，应该是把前景改为那个颜色。
00:10:43哦，好吧，这看起来还是有点离谱，对吧？
00:10:46那我们来更改一下这里的其他元素。
00:10:50我们有缩放，有厚度。
00:10:54哦，这很有趣。
00:10:56还有半径。
00:10:58如你所见，玩转这些参数真的非常有意思。
00:11:03这看起来其实挺酷的。
00:11:04我再稍微调整一下。
00:11:07嗯，我对此还挺满意的。
00:11:09不过，让我们换一个着色器尝试一下。
00:11:11这里很酷的一点是，如果我们把这些值中的任何一个改为 0% 不透明度，
00:11:18我们就能看到背后的内容。
00:11:19当然，我不希望这是最终在浏览器中呈现的效果。
00:11:23所以，一旦我们能修复那个问题，就会用到 Z-index 属性，
00:11:27因为目前我还没看到在哪里可以调整它。
00:11:30好了，我就用这个了，
00:11:32等修复了 Z-index 问题后，我们再看看效果如何。
00:11:35我想我们就直接用这一个吧。
00:11:39操作方法是选中它，以便将它
00:11:43传回 Cursor 或者 Claude Code 之类的工具中。
00:11:46然后我们回到终端。
00:11:48我是这样说的：使用 Paper MCP 服务器
00:11:50将 Paper 中选中的设计转换为可运行的原生 HTML、
00:11:53CSS 和 JavaScript，并保存在 index.html 文件中。
00:11:56确保一切都转换得完美无缺。
00:11:58我附上了一张着色器设置的截图，以确保你处理正确。
00:12:01这一步很重要，因为我和创始人聊过，
00:12:04目前它还没有传递所有必要的信息，
00:12:08至少在我对着色器进行的初步测试中是这样。
00:12:11现在，让我们按下回车键，看看它的表现。
00:12:14好了，完成了。
00:12:15来看这里。
00:12:16就是这个。
00:12:17虽然它不是百分之百完美的还原，尤其是背景里的
00:12:22那个着色器效果。
00:12:24我那个看起来稍微有点不同。
00:12:28有点像那种更大的、流动线条的效果。
00:12:31你所要做的就是在这里截个图。
00:12:34确保截取了渐变设置
00:12:36和你使用的网格渐变设置等，
00:12:38然后尝试让它迭代改进。
00:12:42我相信这个问题很快就会得到解决，
00:12:44因为他们正在完善着色器的集成，以及
00:12:47MCP 处理此类信息转换的方式。
00:12:51那么现在，我想请大家访问 designcourse.com。
00:12:56链接就在下方，去加入我们的 30 天 AI 原生设计师
00:13:01挑战赛系列。
00:13:04我希望你们能使用 Paper。
00:13:06你可以注册一个完全免费的账号来完成这个设计。
00:13:11这就是我们在上一次挑战赛中完成的那个作品。
00:13:14在你们看到的这个深色区域，
00:13:17上面写着 "此处放置你的设计"，
00:13:18我希望你们按照我们刚才演示的流程来使用 Paper。
00:13:24在挑战页面下载相关素材，
00:13:27里面包含了你们看到的这些 HTML 代码，
00:13:30然后使用 Paper 完成下方的设计。
00:13:33这是 Figma 上的挑战页面。
00:13:35如果需要的话，你可以参考它。
00:13:38当然，你也可以不参考。
00:13:39具体指令如下：
00:13:40只需创建一个免费账号。
00:13:42在挑战页面下载 index.html 素材。
00:13:45使用 Paper 在这一部分的空白区域完成设计。
00:13:49这就是你的设计所在的位置。
00:13:52你可以随心所欲地设计，内容也完全由你决定。
00:13:54只要确保它是无缝衔接的即可。
00:13:56此外，下一部分你也可以自由发挥，
00:13:59并且欢迎加入动画和交互效果。
00:14:02如果你做了这些效果，请在提交时上传录屏视频，
00:14:04因为我们的系统支持视频上传。
00:14:07我非常期待看到你们的作品。
00:14:09我会像之前一样，挑选大约 8 到 10 个作品进行回顾，
00:14:13我会做视频点评，看看大家能想出什么创意。
00:14:16设计的未来真的很酷。
00:14:18我们知道现在涌现出了许多这类基于 AI 代理的工作流工具。
00:14:24Paper 是其中之一，Pencil 是另一个，我觉得还会出现更多。
00:14:28所以，让我们拭目以待谁能脱颖而出。
00:14:30会是 Figma 吗？
00:14:31我不知道。
00:14:32我们走着瞧吧。
00:14:33很快再见。
00:14:34再见。