曾经我们会在截图上画红圈,写上"这里的间距调小一点"。Paper Snapshot 把截图这个环节直接干掉了。它把实时网站整体捕获下来,作为可编辑的图层粘贴到画布上。
这是什么?
Paper Snapshot 是 Paper 团队推出的 Chrome 扩展。 用法其实很简单:在 Chrome 里打开任意网站,启动扩展后,它会把该页面的一段区域捕获下来,作为可编辑的 HTML/CSS 图层,直接粘贴到 Paper 画布里。这不是截图。真实的 HTML 结构和 CSS 样式原封不动地被搬过来。
简单介绍一下 Paper:它是 Radix UI 的作者 Stephen Haney 在 2024 年创立的设计工具,由 Accel 领投拿到 420 万美元种子轮融资,目前处于公开 Alpha 阶段。 核心理念很明确——画布本身就是以 HTML/CSS 运行的。它不像 Figma 那样使用私有格式,而是基于 Web 标准,所以设计好的东西可以直接导出为 React 或 Tailwind 代码。
Snapshot 把 Paper 画布的能力又往前推了一步。以前你只能从空白画布开始设计,或者让代理(Agent)帮你生成;现在你可以从一个已经在跑的生产网站出发。"起点来自生产环境"——这就是关键所在。
和 Google Stitch 有什么不同?
Google 最近发布了一个叫 Stitch 的 AI UI 设计工具。Stitch 是通过文本提示生成 UI 的工具,而 Paper Snapshot 是把已有网站捕获后进行编辑的工具。方向刚好相反——Stitch 做的是 0→1,Snapshot 做的是 1→1.1。
有什么不同?
到目前为止,把实时网站搬进设计工具的方法只有截图。截图、粘到 Figma、在上面叠图层标注修改方向。问题是,那张截图就是一张图片。挪动一个按钮,你得重新画一遍。
| 截图方式 | Paper Snapshot | |
|---|---|---|
| 捕获结果 | 平面图片(PNG/JPG) | 可编辑的 HTML/CSS 图层 |
| 文本修改 | 不可(需在图片上重写) | 可直接修改 |
| 布局变更 | 不可(需重画) | 可移动、删除、新增元素 |
| 导出代码 | 不可 | 可直接导出为 React / Tailwind |
| 接入 AI 代理 | 不可 | 通过 MCP 对接 Cursor、Claude Code 等 |
Paper 官方路线图对 Snapshot 的描述也很直接——"No more drawing on screenshots." 在截图上画来画去的时代结束了。因为捕获的网站的 HTML/CSS 会原样加载到 Paper 画布里,你可以直接操控真实的元素。
想想这在实际工作中意味着什么。设计师说"这个落地页的 Hero 区间距再调一调,CTA 按钮换个颜色"时,以前的流程是:截图 → 在 Figma 里仿着重画 → 做修改方案 → 交给开发。有了 Snapshot 呢?捕获网站 → 在 Paper 里直接改 → 代理把修改反映到代码。中间的翻译环节被消灭了。
从生产环境出发、再回到生产环境的闭环就此成型。 Paper 团队在博客里强调的"双向工作流"——把实时应用的片段拉到画布上进行空间性的探索,决定确定后再把改动推回代码里——最后一块拼图就是 Snapshot。
上手指南
- 安装 Paper Snapshot Chrome 扩展
从 Chrome 应用商店安装 Paper Snapshot。只有 301KB,是个很轻量的扩展。 - 准备 Paper 账号
在 app.paper.design 免费注册账号。装上桌面端 App 还能用 MCP 连接。公开 Alpha 阶段,免费使用。 - 打开要捕获的网站
在 Chrome 里打开你想改造的网站——自家公司的、竞争对手的、启发你的网站,都可以。 - 用 Snapshot 捕获
点击扩展图标,框选要捕获的区域。捕获出来的 HTML/CSS 图层会直接粘贴到 Paper 画布上。 - 在画布中编辑 → 导出代码
文本、颜色、布局都可以自由修改,然后用 Copy as React 或 Tailwind 导出。如果接入了 AI 代理,直接说"把这些改动同步到代码里"就搞定了。
注意
Paper 目前还是公开 Alpha。 团队协作、组件系统(Slot、Props)、CSS Grid 都还在开发中。 如果期望达到 Figma 级别的成熟度,可能会失望。但对于前端开发者或 1-2 人团队做快速原型,现在的功能已经足够好用。
