网页转 Figma：一键把网站、页面或元素复制为可编辑图层，将 HTML 转换为真正的 Figma 设计稿。
网页转 Figma。捕获任意网页的真实界面，转换成干净、结构清晰的 Figma 图层。不用截图，也不用手动重搭。
🚀 功能简介
• 把任意网站转换为 Figma 图层，整页或指定区块都可以
• 把落地页、后台仪表盘或竞品设计复制到 Figma
• 无需看代码即可查看字体、颜色、间距、内边距、外边距和 CSS
• 一键提取 Logo、SVG、图片和素材
• 检查配色方案、字体家族和 WCAG 对比度
• 从线上真实产品中沉淀设计系统参考
• 生成 DESIGN.md 与 SKILL.md 设计规范，供 AI 编程助手和开发者使用
• 用内置取色器拾取屏幕上任意颜色（像素级精确 HEX）
• 右键点击任意页面或元素，直接发送到 Figma
• 支持嵌入式 iframe、跨域内容、localhost 和本地 HTML 文件
🎯 设计师与开发者的理想工具
• 无需手动重建，直接把网站复制进 Figma
• 改版或现代化已有网站
• 把 HTML 和 CSS 转换为 Figma
• 把竞品落地页变成可编辑的参考稿
• 几秒钟提取品牌色、字体和素材
• 基于真实产品工作，而不是截图
• 为 Cursor、Claude、GitHub Copilot、Windsurf 等 AI 工具生成设计系统文档与 tokens
• 把真实界面的精确设计规范交付到开发或 AI 编程流程中
⚡ 使用方法
1. 安装 Chrome 扩展
2. 打开任意网页
3. 点击「Export to Figma」，捕获整页或某个元素
4. 直接粘贴到 Figma（Cmd/Ctrl + V），无需额外的 Figma 插件
你会得到一个真正的 Figma 画框，文本、字体、颜色、图片都可编辑，图层结构清晰，而不是一张扁平截图。
✨ 功能特性
• 整页捕获与元素级捕获
• 可编辑、有条理的图层结构
• 保留布局、样式、字体和文本
• 直接粘贴到 Figma，无需配套插件
• Inspect 模式，叠加显示间距、内边距和外边距
• 颜色提取器（HEX、RGB、HSL、OKLCH、Tailwind）
• 字体扫描器，附字体使用详情
• 下载图片、SVG、视频、GIF 和 Lottie 文件
• WCAG 无障碍对比度检查
• 支持 AI 生成的网站（v0、Lovable、Bolt、Replit、Framer 等）
• 桌面、平板、移动端和自定义宽度预设
• 带像素放大镜的取色器（HEX）
• DESIGN.md + SKILL.md 生成器：设计 tokens、品牌、间距、无障碍和规则，输出为 AI 可直接使用的 Markdown
• 右键菜单捕获
• 跨域与嵌入式 iframe 捕获
• 支持 localhost 与本地 HTML 文件（file://），适合进行中和离线的设计
💡 常见用途
• 客户网站改版
• 竞品调研与分析
• 把已有网站迁移进 Figma
• 从线上站点提取设计系统
• 快速原型与视觉稿
• 用真实网站沉淀风格指南
• 研究线上产品的 UI 与 UX 模式
• 为 AI 编程助手和设计转代码流程生成 DESIGN.md 上下文
• 从线上站点整理设计 tokens 和品牌规范
• 捕获 localhost 原型和 AI 生成的网站