Axhub 一键复制网页到 Figma 与 Axure 中
一款 Chrome 扩展，让你在浏览器里完成 AI 网页编辑、原型发布、设计稿导出——全流程无缝衔接。
一、Axhub Extension 是什么？
Axhub Extension（当前版本 v2.5.0）是一款面向设计师和产品经理的 Chrome 浏览器扩展，核心定位是 "AI 协作设计的起点"。
它解决了三个实际痛点：
- AI 生成的网页没法改 —— 用 v0、Bolt 等 AI 工具生成的页面，想微调却要回到代码里改
- 网页转设计稿太麻烦 —— 看到一个好看的网页，想搬到 Figma 或 Axure 里当参考，手动还原耗时耗力
- Axure 原型分享不便 —— 做好的原型要导出 HTML、上传服务器、发链接，流程繁琐
一句话总结：Axhub Extension 是连接「网页/AI 生成页面」与「专业设计工具」之间的桥梁。
二、核心功能详解
2.1 编辑 AI 生成的网页
AI 代码生成工具（如 v0、Bolt、Cursor 等）产出的页面，本质上是 HTML/CSS。Axhub Extension 提供了两种编辑方式：
TNT（Touch And Talk）式编辑
- 指哪打哪：直接在网页上点击选中元素，通过语音或图片标注告诉 AI 你想要的修改
- 适合快速迭代，不需要懂代码
像 Figma 一样编辑
- 提供类似 Figma / Axure 的可视化编辑能力
- 可以直接拖拽、调整布局、修改样式
- 适合对细节有要求的设计师
典型场景：用 v0 生成了一个落地页初稿，打开 Axhub Extension 直接在浏览器里调整间距、换颜色、改文案，不需要重新生成代码。
2.2 发布 Axure 原型
这是 Axhub 的老牌核心功能，扩展让发布流程更顺滑：
| 功能 | 说明 |
|---|---|
| 一键发布 | 在 Axure 预览页面按 Alt+X 或点击侧栏按钮，直接同步到 Axhub 云端 |
| 智能增量上传 | 只上传变更部分，不是每次全量上传，大幅提升发布速度 |
| 加密分享 | 支持设置访问密码，适合企业内部分享敏感原型 |
| 私有部署 | 企业可私有化部署，不限人数和空间，内网也能用 |
一键同步原型操作步骤
- 安装 Chrome 扩展
- 在 Axure 中打开本地
.rp文件，点击预览（必须用 Chrome 浏览器打开预览） - 按
Alt+X，或点击侧栏同步按钮（RP 8 在左侧，RP 9/10 在右上角） - 选择已有项目或新建项目，确认同步
💡 注意：同步前需要先登录 Axhub 账号。首次使用建议先测试一个小文件熟悉流程。
2.3 导出任意网页到 Figma / Axure
这是最实用的功能之一，支持三种导出方式：
方式一：导出到 Figma
- 安装 Chrome 扩展（v1.5.8 及以上）
- 访问你想导出的网页
- 点击扩展图标，选择「导出网页」
- 打开 Figma 设计稿，运行 Drafito 插件
- 导入下载的设计稿数据 JSON
亮点：HTML 结构会智能转换为 Figma Auto Layout，不是简单的图片贴进去，而是可编辑的图层结构。
方式二：复制到 Axure
- 访问目标网页，点击扩展图标导出
- 直接复制粘贴到 Axure 中
- 粘贴后为可完全编辑的 Axure 原型组件
亮点：无需通过 Figma 中转，网页 → Axure 一步到位。
方式三：导出页面数据供 AI 还原
- 导出页面数据：压缩的页面结构、样式和素材，便于 Cursor 等 AI 工具理解并还原页面
- 导出页面主题：自动分析页面的颜色、字号、间距，生成 Design Token JSON
💡 适用场景：前端开发想还原一个竞品页面，导出 Design Token 后喂给 AI，比手写样式快 10 倍。
三、安装方法
Chrome 浏览器
方式一：Chrome 商店安装（推荐）
访问 Chrome Web Store 搜索 "Axhub"，点击安装。
方式二：离线安装（无法访问商店时）
- 下载离线包：axhub.crx
- 打开 Chrome，地址栏输入
chrome://extensions/ - 开启右上角「开发者模式」
- 将
.crx文件拖入浏览器窗口完成安装
详细安装教程参考：飞书文档
Edge 浏览器
直接在 Edge 扩展商店搜索 "Axhub" 安装，国内可直连，无需翻墙。
兼容性
支持 Chrome 内核浏览器，包括：
- Google Chrome
- Microsoft Edge
- 360 浏览器
- QQ 浏览器
四、进阶玩法
4.1 AI 工作流串联
Axhub Extension 的真正价值不在于单独使用，而在于串联 AI 工作流：
这条链路把原本需要 3-4 个工具切换的工作，压缩到了浏览器内完成。
4.2 竞品分析 / 灵感采集
看到好的网页设计：
- 用 Axhub Extension 导出页面数据
- 在 Figma 里拆解图层结构
- 提取 Design Token 应用到自己的项目
4.3 设计走查（Design QA）
开发还原度不够？用 Axhub Extension 把实际页面导出到 Figma，和设计稿叠在一起对比，像素级走查。
五、Axhub 生态
Axhub Extension 不是孤立产品，它是 Axhub 生态的一部分：
| 产品 | 定位 |
|---|---|
| Axhub 托管 | Axure 原型在线托管，国内 CDN 加速 |
| Axhub Make | AI 辅助设计工具 |
| Axhub Skills | 开源技能库，社区贡献的 AI 设计技能 |
| Axhub Extension | 本文介绍的 Chrome 扩展 |
| tooys | 高保真组件库 |
| 数据可视化 | 图表 / 数据看板工具 |
六、学习资源
| 类型 | 费用 | 内容 |
|---|---|---|
| 在线自学 | 免费 | 官方文档 + 视频号/公众号教程，每月约 2 场直播，平均学习周期 2 个月 |
| 社群交流 | ¥49/年 | 飞书社群，问答互助 + AI 资源分享，每月约 4 场直播 |
| 专业训练营 | ¥199/期 | 1 对 1 指导 + 15 项实战任务 + 专属视频课程，1 个月内掌握实战技能 |
七、常见问题
Q：无法访问 Chrome 商店怎么办？
A：下载离线 .crx 包手动安装，或改用 Edge 浏览器（Edge 商店国内直连）。
Q：如何同步到团队服务器？
A：需要先进行私有化部署，详见官方私有部署文档。
Q：导出到 Figma 后图层可以编辑吗？
A：可以。导出的不是图片，而是保留了 Auto Layout 的可编辑图层结构。
Q：免费吗？
A：Chrome 扩展本身免费。Axhub 托管等增值服务有免费额度，超出需付费。
八、总结
适合谁用？
- 设计师：快速采集网页灵感，导出到 Figma 编辑
- 产品经理：一键发布 Axure 原型给团队，告别导出-上传-发链接的循环
- 前端开发：导出页面数据和 Design Token，配合 AI 快速还原页面
- AI 玩家：在 v0/Bolt 生成的基础上微调，不用反复重新生成
核心价值：Axhub Extension 做的不是替代 Figma 或 Axure，而是降低它们与网页之间的转换成本。在 AI 生成内容越来越多的今天，这种"桥梁型工具"的价值会越来越明显。
📎 官网：axhub.im/chrome
📎 离线包下载：axhub.crx
📎 安装教程：飞书文档