00:00:00嘿，今天的视频是关于 Paper 的。Paper 基本上就像是 UI 设计界的 Figma，但它是专为 Claude Code 或
00:00:05Cursor 打造的。这里你可以看到一个例子。我们正在运行 Paper 桌面版，然后你可以
00:00:10通过 Claude Code 来控制一切，就像你在这里看到的一样，而且它
00:00:14非常出色，因为你可以轻而易举地在组件
00:00:19和代码之间进行转换。你可以看到像 Vercel、Z、Dub 这样的公司都在使用它。所以
00:00:24很多非常酷的产品都在用它。这是你刚开始使用时应用程序的样子。
00:00:28这是你第一次打开时看到的演示项目。你可以
00:00:31从 paper.design/downloads 下载这个应用，接下来的步骤
00:00:35是你需要安装一个 MCP 服务器。如果你想在
00:00:40Cursor 中安装它，只需点击这个按钮，实际上我已经点过了，但现在我们
00:00:43要在 Claude Code 中尝试一下。所以我们要把这个复制过来。这
00:00:47将添加 Paper MCP 服务器的 scope user 权限，这意味着
00:00:53电脑上的每个项目都可以访问它。通常当你添加 MCP 服务器时，它是针对特定项目的，
00:00:57这里你可以看到传输方式实际上是本地的。这
00:01:01这将会连接到 Paper 桌面应用。所以我现在要在这里安装它
00:01:06既然已经安装好了，我们要打开 Claude。我已经在 Cmux 中打开了四个窗口。
00:01:11它基本上是在 Tmux 模式下运行 Ghosty，
00:01:17我们有四个不同的窗口，所以我们要进行几个
00:01:19不同的演示。我想既然有四个窗口，干嘛不都用上呢。所以接下来
00:01:22我们要把这段提示词复制到终端。所以我们
00:01:28要在 Paper 中做一个记账应用。让我们看看效果如何。你可以
00:01:33看到类似这样的演示会生成，但我们要看看实际效果。与此同时，我实际上要运行另外几个任务。
00:01:36在 Paper 中为我创建一个演示落地页，要让我感到惊艳。看看它表现如何。
00:01:40为我创建一个金融应用的仪表盘。所以让我们开始做这个，并且
00:01:44为一个类似 Twitter 的社交应用创建设计系统。所以我要
00:01:48并行运行所有这些任务。我其实不知道它们会生成什么样，
00:01:53所以让我们看看效果如何。在这里你可以看到我们之前运行的
00:01:56进度。我们有一个设计简报，一个调色板。这是 Claude Code 在
00:02:00思考并将其添加到我们已有的 Paper 欢迎应用中，但让我们看到最下面。
00:02:04好的，它完成了。让我们看看这个长什么样。我们要缩小画面，
00:02:08看看它是不是在这附近。噢，我们可以看到我们的其他应用
00:02:13实际上正在构建中，这里你可以看到我们的费用录入应用，
00:02:17这真的很酷。它的设计非常扎实，而且事实上，当我之前运行它时，
00:02:22它生成了一个略有不同的应用。在这里你可以看到其他这些应用
00:02:25都在并行运作，这个 Paper 应用最酷的一点是
00:02:30它基本上就是 Figma。所以任何你习惯于 Figma 的操作，
00:02:34它看起来都非常相似。在这里我可以去修改东西，我甚至可以回头
00:02:39进行一些编辑。删掉上传部分，在那个位置放点别的东西。
00:02:43让我们看看这样做会发生什么，你可以看到所有这些任务仍在
00:02:53后台运行。如果我们回到这里，希望那个上传部分
00:02:56会被移除。你可以看到我们的落地页，它看起来相当不错。
00:03:00“有目的地设计，无限制地创作”。顺便说一下，在这里我们可以看到所有其他的
00:03:04组件正在成型。这个设计系统看起来非常酷且专业。
00:03:09我觉得你可能得付给设计师几千美元才能得到这种
00:03:12一模一样的东西。非常酷且精美，当然它也可以完全
00:03:16像在 Figma 中那样被编辑。这就是落地页最后的样子，
00:03:20稍后我们要配合 Tailwind 将其转换为 React。这是
00:03:24仪表盘，另一个任务也完成了。在这里你可以看到分栏宽度，
00:03:28那个部分也已经进行了调整。所以你拥有了这些非常专业外观的
00:03:33设计，而我们所做的只是通过提示词将其“召唤”出来，而且对于这一切，我们都可以使用
00:03:36Claude Code 或 Cursor 已经提供给我们的现有技能生态系统，
00:03:42如果我们愿意，甚至可以使用前端设计技能来设计这一切。
00:03:46所以我现在要一个基于此设计的 HTML 页面，直接在我的
00:03:50浏览器中显示，让我们看看效果。回到 Paper，我还要向你们展示
00:03:54其他几件事。在这里我有一个组件，我实际上可以做的是
00:03:58我可以点击“复制为 Tailwind”或“复制为 React CSS”，这样我通常可以直接复制并
00:04:03粘贴进去，但我认为我们马上就能看到
00:04:08Claude Code 也能为我们加载这些内容，所以我们将能够直接在浏览器中打开它，
00:04:13哇，你可以看到它真的做到了，这确实很神奇，
00:04:17看这个按钮，我是说，这真的很棒。老实说，如果我们去
00:04:20检查页面，让我们看看实际上生成了什么，所以你可以看到这里
00:04:24只是使用了 HTML 和 CSS，但我们也可以让它用
00:04:29React 和 Tailwind 来完成。你可以像在 Figma 中那样构建东西，
00:04:35这完全是一回事，你可以看到在侧边栏我们可以去修改东西，可以改变
00:04:40颜色，这基本上和 Figma 一模一样。但我还去
00:04:44组装了这个组件，因为我想看看如果
00:04:48我把它直接复制粘贴到一个常规应用中会是什么样子，这里你可以看到这正是
00:04:51它所做的，基本上完全达到了我的预期。这里你可以
00:04:55看到被复制粘贴进来的内容。这是背景组件，我将
00:05:00再次向你展示我是怎么做的，所以我要点击“复制为 Tailwind”，然后
00:05:05进入 Cursor，直接把它粘贴进去，你可以看到这就是它给我的内容。
00:05:10现在我要撤销其中一些操作，这实际上是我之前
00:05:14为了记账应用粘贴进来的组件。你可以看到顶部栏、金额展示区等等，
00:05:20所以这实际上是基于 React 和 Tailwind 实现的，基本上就是
00:05:26我们刚才做的那个。这里你可以看到这是我们应用中实际的 React 代码，这是
00:05:29另一个变体，这是我 20 分钟前输入的提示词生成的，所以这是
00:05:34版本一，这是另一个我们用常规 HTML 和 CSS 制作的版本，
00:05:40两个效果都非常好。我其实想看看如果我们
00:05:44在 Claude Code 中操作，其他应用会是什么样子。所以我正要求它把刚才设计的
00:05:49所有页面都转换成 HTML 版本。我还做的是，我点击
00:05:53右键“复制为 React CSS”，我去了 Cursor 把它粘贴进去，这是一个真实的应用，
00:05:58你可以看到它正在 localhost:3001 上运行，这是 Inbox Zero 的一部分，只是我
00:06:04添加的一个演示页面，你可以看到它运行得非常完美，
00:06:09这真的很棒。第一次尝试它实际上不是响应式的，但除此之外它非常
00:06:13扎实。这里你可以看到它需要一些工作来实现响应式，但我认为这个概念
00:06:18至少是非常酷的。而这实际上是刚刚加载出来的
00:06:22HTML 版本，也是我们通过提示词生成的。这个版本稍微更有响应性一些，
00:06:26虽然在这里开始出现一些问题，但至少它比另一个版本
00:06:33要好。所以，没错，这很酷。现在我想向你展示的是你也可以让它
00:06:36生成图像。如果你按下 Command + I，让我们看看能不能做到，
00:06:41我们要让它为我们生成一张图像。所以我写的提示词是
00:06:46“为 Inbox Zero 创建一个精美的广告，它是一个 AI 邮件助手，帮助你
00:06:50快速达到收件箱清零”。你可以看到这里有不同的模型可以使用，比如 Nano Banana
00:06:54Pro。我们先做一个“综合包”试试，希望它能搞定，
00:06:59好的，你可以看到它已经开始创建四张图像了，我
00:07:05实际上想再试一次，因为我很好奇如果用 Nano Banana Pro 会发生什么。
00:07:10让我们选择“创建图像”。现在另一张图像正在创建中，我希望很快
00:07:14它们就能出来了。噢，你看广告图开始生成了，虽然
00:07:19它们看起来还算不错，显然还需要一些打磨，但作为初步尝试，
00:07:25这已经很酷了。看看这个 Inbox Zero 的设计，有些人类设计师
00:07:29做出来的设计还没这个好呢。然后在四张图中，我可能最喜欢
00:07:35这一张。但你可以看到，显然这只是一次生成的，你可以
00:07:39对它进行多次迭代。让我们看看 Nano Banana Pro 生成了什么，那个
00:07:43可能会最令人印象深刻。没错，“通往平静的快车道，AI 邮件助手”。
00:07:47老实说，我觉得这张图作为一次生成的作品非常扎实。我也
00:07:51觉得很有趣，它竟然知道 Logo。是 AI 识别出了
00:07:55Inbox Zero 的 Logo，还是只是随机生成的，凑巧看起来很像
00:08:00我们 Logo 的文字。现在在结束之前，我想再给你们展示两件事。如果我点击
00:08:04这张图片并按下 's' 键，我可以赋予它不同的特效。这里你可以看到
00:08:09这张图片的这种水波纹效果。如果我再按一次 's'，会出现这种液态金属效果。
00:08:13我其实不确定它是如何运作的，也不确定它是否与我们的图像有任何关联，
00:08:18但你可以看到你能创建这些非常酷的特效，你实际上可以
00:08:21把它们用在你的落地页上。这是我们刚才创建的图像的
00:08:24另一个版本。还有一件很棒的事情是，颜色据称是
00:08:27一致且准确的。Paper 拥有全球首个统一颜色选择器，
00:08:33让颜色处理变得简单。如果大家还不熟悉这个问题，你在 Figma 中可能看到一种颜色，
00:08:37但在你的网站上却是另一种颜色，它们不是一一对应的，
00:08:41这真的很烦人。我们网站上的蓝色就遇到过这种情况，Figma
00:08:45显示的是一种，网站显示的却是另一种，尽管它们在
00:08:48十六进制色值上应该是完全一致的。所以
00:08:52如果你像我们一样也遇到过这个问题，那这个功能确实
00:08:56非常实用。最后我想给你们展示的是这个：从我们现有的代码库
00:08:59在 Paper 中创建一个设计系统。你可以看到它开始
00:09:04分析代码库了，这只是常规的 Claude Code 操作。你可以看到它已经抓取了我们的
00:09:08字体。现在我们遇到了一点麻烦，因为显然在录制这个视频时，我们已经达到了
00:09:12Paper Pro 每周的 MCP 工具限制。所以我们无法实际看到
00:09:17它生成后的样子。但简而言之，我们本来可以导入现有的
00:09:20代码库，然后在 Paper 中看到它的样子，接着我们可以在 Paper 中
00:09:23编辑它，然后将代码导回我们的项目中。我觉得这是一个非常
00:09:28非常棒的功能。我认为有一个场景特别需要它，那就是
00:09:32当我们在制作这些演示设计组件时，比如
00:09:35为落地页截取一张图。通常我们会觉得直接截图最方便，
00:09:39但我经常想对它做一点点修改，修改页面上的文字，
00:09:43隐藏一些真实的电子邮件。而在 Figma 或 Paper 中修改
00:09:47要容易得多，因为我可以根据需要直接输入和编辑。而且
00:09:50它不再只是截图，我可以将其导出为真实的图像，
00:09:55PNG、JPEG 或任何格式。这是我们正在构建的
00:09:58Twitter 社交应用，这些设计也非常酷。总之，希望你们喜欢这个
00:10:03视频，希望没有跳跃得太快。我现在编码的时候经常是
00:10:07多个任务并行运行，所以这种习惯可能
00:10:10也带到了视频里。但我希望你们觉得它有用。请告诉我
00:10:14你们决定用 Paper 构建什么。我认为它是一个非常有用的工具。我估计
00:10:17我自己很快也会升级到专业版。请务必
00:10:20订阅以观看未来的视频。
00:10:24订阅以观看未来的视频