Copyframe

将网页复制为可编辑 Figma 图层或独立 HTML，并可保存能打开、分享和继续开发的网页副本。

Copyframe 将你当前打开的网页转换为三种可以直接使用的结果：复制后直接粘贴到 Figma 的可编辑图层、复制后直接粘贴到代码编辑器或 AI 开发工具的独立 HTML，以及带本地资源的离线网页 ZIP。它适合把参考网页、已上线页面或灵感页面快速带进设计与开发流程，减少从零重建布局和样式的时间。 核心功能： • 复制整页：按当前真实视口保留文字、常见布局、图片和基础样式；选择 Figma 时可直接粘贴为可编辑图层，选择 HTML 时可生成完整页面 HTML。 • 选择元素：只复制你点选的区块；按住 Shift 可累计多个区块，再作为一份 Figma 设计稿或一份 HTML 一次导出。 • 独立 HTML：将选中区块的结构、样式、图片和可用资源整理为完整 HTML。点击“复制 HTML”后，可直接粘贴到 VS Code、Cursor 等代码编辑器或 AI 开发工具中继续使用，无需再次转换；也可下载为 `.html` 文件或在安全预览中检查。启用“尽量保留安全交互”后，只运行 Copyframe 重建的菜单、Tab、展开、选择、弹窗和轮播等本地交互，不执行原站业务脚本、接口或表单提交。超过 8 MB 时不会写入剪贴板，会引导改用下载。 • 响应式视口：切换桌面、平板、移动端或自定义宽度后，按浏览器真实响应式布局进行复制。 • 复杂网页保真：Canvas、视频、遮罩和部分复杂效果只将必要视觉保留为图片，周围文字、容器和布局仍保持可编辑。 • 长页面支持：检测到下方图片或卡片可能延迟加载时，会自动补齐视口外内容；采集完成后恢复原滚动位置，并对超长或无限列表设置安全上限。 • 网页副本：下载本地 ZIP，包含页面、资源、运行说明、响应式断点、设计变量候选与 AI 开发上下文；可按需要选择安全副本、脚本与媒体或完整运行包。下载流程不提供预览入口，交互/完整包使用 Copyframe Viewer 在本机打开。 使用方式： 1. 打开普通 HTTP/HTTPS 网页、localhost 前端服务，或已授权访问的本地 HTML 文件。 2. 点击 Copyframe，先选择导出目标：选择“Figma”生成可编辑设计图层；选择“HTML”生成可以直接使用的网页代码。 3. 选择“复制整页”，或点击“选择元素”后在网页中点选一个区块；按住 Shift 可以累计多个区块。第一次采集时，允许 Chrome 请求的网站访问权限，以便读取当前页面的布局和资源。 4. Figma 结果：切换到 Figma 画布，按 `⌘/Ctrl + V`，文字、图片、容器和图层会直接粘贴到画布中。 5. HTML 结果：在结果面板点击“复制 HTML”，然后直接粘贴到代码编辑器、AI 开发工具或其他接受源码的输入框中；也可以选择“下载 HTML”或“预览”。复制内容包含 HTML 元素、样式及尽量内嵌的图片等资源，不只是一个截图。 6. 如果需要保存整个网站的多文件结构和资源，点击右上角“保存网页副本”，选择模式后直接下载 ZIP；安全副本可打开 `index.html`，交互或完整包可使用 Copyframe Viewer 打开。 隐私说明：Copyframe 仅在你主动开始采集时处理当前页面内容，不会在后台持续读取网页，也不会将采集内容发送到 Copyframe 服务器。最近 5 次轻量记录及最近一次可重新复制内容仅保留在本机，每条最多 24 小时，并可随时清除。密码输入框的值不会采集；采集当前网页引用的资源时，请求由你的浏览器直接发往原网页或资源提供方。 需要 Chrome 120 或更高版本；支持 Chromium 内核的 Edge。Chrome 设置页、新标签页和扩展商店等浏览器保护页面不能采集。本地 HTML 需要用户在扩展管理页主动开启“允许访问文件网址”。 Figma 是 Figma, Inc. 的商标。Copyframe 与 Figma, Inc. 没有隶属、赞助或认可关系。