概述
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. 没有隶属、赞助或认可关系。
来自商店的评价 (0)