Paper：这款人人都在谈论的新型 AI 设计应用

하이라이트

• Paper 是一款专为 AI 时代设计的 UI 工具，被誉为针对 Claude Code 和 Cursor 优化的 "Figma"。

• 支持通过 MCP 服务器连接，让 AI 代理（如 Claude Code）可以直接在 Paper 桌面应用中生成和修改设计。

• 具备强大的代码转换能力，可将设计一键复制为 Tailwind CSS、React 或 HTML/CSS 代码。

• 内置 Nano Banana Pro 等多种 AI 图像生成模型，支持直接在设计稿中创作高质量广告素材。

• 拥有全球首个统一颜色选择器，解决了 Figma 与实际网页开发中十六进制色值不一致的痛点。

• 能够分析现有代码库并自动生成对应的设计系统，实现从代码到 UI 设计的反向同步。

타임라인

1. 00:00 - 01:10

   Paper 简介与安装配置

   视频开篇介绍了 Paper 的核心定位，即专为开发者打造的 AI 设计协作平台，类似于 UI 界的 Figma 但更侧重于与 AI 编码工具的协同。主讲人展示了 Paper 桌面版界面，并指出像 Vercel 和 Dub 这样的一流公司已在使用该工具。随后演示了从官网下载应用以及安装 MCP 服务器的具体流程，这是连接 Paper 与 Claude Code 的关键桥梁。通过在终端运行特定指令，用户可以授予 AI 访问本地项目的权限。这一章节强调了 Paper 的易用性以及它如何通过本地传输方式实现与开发环境的无缝集成。

2. 01:11 - 03:53

   多任务并行生成演示

   主讲人利用 Tmux 和 Ghosty 终端同时启动了四个并行任务，展示了 AI 处理复杂设计需求的高效性。这些任务包括创建记账应用、落地页、金融仪表盘以及类似 Twitter 的社交应用设计系统。视频中可以清晰地看到 Claude Code 在后台思考并实时在 Paper 界面上“召唤”出精美的 UI 组件和调色板。即便是在没有详细说明的情况下，AI 也能生成具有专业水准且可编辑的设计稿。这种并行工作的流程体现了现代开发者如何利用 AI 极大提高原型设计的产出速度。最终生成的落地页和组件展示了极高的视觉完成度，几乎可以媲美专业设计师的作品。

3. 03:54 - 06:34

   设计到代码的转换与验证

   这一部分重点演示了 Paper 最具威力的功能：将视觉设计直接转化为可运行的前端代码。主讲人通过“复制为 Tailwind”或“复制为 React”选项，将生成的组件快速粘贴到 Cursor 编辑器中。他在本地服务器上运行了一个实际项目，证明了生成的 React 代码能够完美渲染且保持了设计的原貌。虽然在响应式布局上仍存在一些微小的改进空间，但其转换精度和速度依然令人惊叹。此外，视频还展示了如何通过 Claude Code 直接在浏览器中预览生成的 HTML 页面。这种闭环流程消除了传统开发中设计与实现之间的隔阂，实现了“所见即所得”的开发体验。

4. 06:35 - 08:57

   AI 图像生成与特效处理

   除了 UI 布局，Paper 还集成了强大的 AI 绘图能力，主讲人演示了如何使用 Nano Banana Pro 模型为应用创建广告插画。他通过简单的文本提示词生成了多张高质量的广告图片，甚至发现 AI 能够识别并融入品牌 Logo 的视觉元素。视频还介绍了一些趣味性功能，例如按下快捷键即可为图像添加水波纹或液态金属等动态特效。更重要的是，主讲人解释了 Paper 的统一颜色选择器如何解决跨平台色差问题。这对于追求视觉一致性的开发者来说是一个巨大的福音，因为它确保了十六进制颜色在设计稿和最终网页中呈现效果一致。这些功能使 Paper 不仅仅是一个绘图工具，更是一个全方位的素材创作平台。

5. 08:58 - 10:25

   从代码库反向生成设计系统

   在视频的最后，主讲人尝试演示一个名为“从代码创建设计系统”的高级功能，旨在将现有项目代码反向导入 Paper 进行可视化编辑。虽然在录制过程中触发了 Pro 版本的 API 限制，但他详细解释了该功能的实际应用场景和巨大价值。这种能力允许开发者在 Paper 中修改现有 UI 的文字或隐藏敏感信息，然后将修改后的效果重新导回代码库或导出为图片。这种双向同步机制对于维护大型项目的 UI 一致性非常有帮助。主讲人总结道，Paper 正成为他日常编码流中不可或缺的一部分。他鼓励观众通过订阅来关注该工具的后续更新，并对 AI 驱动的设计未来表达了乐观态度。