将任何网站、页面或元素作为完全可编辑的图层复制到 Figma 中 — 一键将 HTML 转换为干净的 Figma 设计。
从任何网页捕获真实的 UI 并将其转换为干净、结构化的 Figma 图层。跳过屏幕截图和手动重建。
🚀 它的作用
• 将任何网站转换为 Figma 图层、整页或特定部分
• 将登陆页面、仪表板或竞争对手的设计复制到 Figma 中
• 无需代码即可检查版式、颜色、间距、填充、边距和 CSS
• 一键提取徽标、SVG、图像和资源
• 审核调色板、字体系列和 WCAG 对比度
• 根据实际产品构建设计系统参考
• 生成 DESIGN.md 和 SKILL.md 设计规范以供 AI 编码代理和开发人员使用
• 使用内置滴管选取屏幕上的任何颜色（像素精确的十六进制）
• 右键单击任何页面或元素将其直接发送到Figma
• 捕获嵌入的 iframe、跨源内容、本地主机和本地 HTML 文件
🎯 非常适合设计师和开发商
• 将网站复制到 Figma 中，无需手动重建
• 重新设计现有网站或使其现代化
• 将 HTML 和 CSS 转换为 Figma
• 使用竞争对手的登陆页面作为可编辑的参考
• 在几秒钟内提取品牌颜色、字体和资产
• 直接使用真实产品而不是屏幕截图
• 为 Cursor、Claude、GitHub Copilot 和 Windsurf 等 AI 工具生成设计系统文档和令牌
• 将像素精确的设计规范从真实 UI 移交给您的开发或 AI 编码工作流程
⚡ 运作原理
1.安装Chrome扩展程序
2.打开任意网页
3. 单击“导出到Figma”并捕获整个页面或一个元素
4.直接粘贴到Figma（Cmd/Ctrl + V），不需要额外的Figma插件
获得一个真正的 Figma 框架，其中包含可编辑的文本、字体、颜色、图像和干净的图层结构，而不是平面屏幕截图。
✨ 特点
• 全页和元素级捕获
• 可编辑、有组织的图层结构
• 保留布局、样式、字体和文本
• 直接粘贴到 Figma 中，无需配套插件
• 具有间距、填充和边距覆盖的检查模式
• 颜色提取器（HEX、RGB、HSL、OKLCH、Tailwind）
• 带有字体使用详细信息的版式扫描仪
• 下载图像、SVG、视频、GIF 和 Lottie 文件
• WCAG 可访问性对比检查器
• 适用于人工智能生成的网站（v0、Lovable、Bolt、Replit、Framer 等）
• 桌面、平板电脑、移动设备和自定义视口预设
• 带放大像素放大镜 (HEX) 的吸管颜色选择器
• DESIGN.md + SKILL.md 生成器 - 将标记、品牌、间距、可访问性和规则设计为支持 AI 的 Markdown
• 右键单击上下文菜单捕获
• 跨源和嵌入式 iframe 捕获
• 适用于本地主机和本地 HTML 文件 (file://)，用于进行中和离线设计
💡 常见用例
• 客户网站重新设计
• 竞争对手研究和分析
• 将现有网站迁移到Figma
• 从生产现场提取设计系统
• 快速原型设计和模型
• 根据真实网站构建风格指南
• 研究生产 UI 和 UX 模式
• 为 AI 编码代理和设计到代码工作流程生成 DESIGN.md 上下文
• 记录现场站点的设计标记和品牌指南
• 捕获本地主机原型和人工智能生成的网站
