从想法到上线：我用 AI 零代码做了一个 Axure开发模式插件

做交互设计的同学大概都遇到过这样的场景：原型在 Axure 里画好了，导出 HTML 发给前端，对方打开一看，尺寸、间距、颜色全都得靠猜。

要么截图拿取色器一个点一点量，要么在群里来回问「这个按钮多宽」「这两段文字间距多大」。

而 Axure 导出的页面本身是不提供这些信息的。它是一个能点的原型，不是一个能直接量的设计稿。每次想到 Figma 的 Dev Mode 能点一下就看到所有属性，而我这边却只能截图量，就觉得差了点什么东西。

于是就想到用Vibe Coding做一个类似于Figma开发模式的插件。

用 AI 零代码，从想法到插件

插件叫 Axure DevMode Inspect，用了两个工具写出来的：Workbuddy 和 Codex。是的，零代码——我自己不做开发，不写代码，全程靠跟 AI 描述我要什么。

过程比想象中顺，我把交互说明清楚（面板怎么布局、点选高亮怎么画、间距线怎么算、CSS 按什么规则提取），Codex 负责组织项目结构和核心逻辑，Workbuddy 处理具体的实现和调试。

两者配合，前前后后折腾了一周，大部分时间其实都在抠细节，一个功能完整的浏览器插件就出来了。

对设计师来说这个体验挺奇妙的：你不需要会写代码，但你对交互该是什么样的判断力，本身就决定了产出质量。AI 把技术门槛降下来了，剩下的是你对产品的感觉。

这个插件能干什么

无论是双击打开本地导出的 start.html，还是 Axhub、Axure Cloud 这类在线原型托管链接，都能像在 Figma 里那样点一下元素，尺寸、坐标、颜色、CSS 就都出来了。

• 点选元素看属性。 打开原型后，页面右侧会出现一个「DevMode」按钮。点开之后，在画布上点任意元素，会看到蓝色高亮框，右侧面板同步显示元素名称、类型、宽高（W/H）和坐标（X/Y）。文本元素还会列出字体、字号、字重、行高、字间距这些。

• 量两个元素之间的间距。 选中一个元素后，把鼠标移到另一个元素上，两者之间会用红色标注线标出间距，数值直接写在线上。上下排列还是左右排列都支持，部分重叠的情况也会按实际位置去画。

• 一键复制 CSS。 切到「代码」标签，能看到这个元素整理好的 CSS，按布局、文字、背景、边框、阴影分组。每条都能单独复制，也有一个「复制全部」按钮。颜色值统一显示成 Hex，跟设计工具里的写法一致。

• 颜色点一下就复制。 面板里的颜色块，点一下就把 Hex 值复制到剪贴板，不用自己把 rgb 转来转去。

• 图片资源直接下载。 元素里如果嵌了图（比如图标、切图），面板会列出资源，带缩略图和原始尺寸，点一下就存到本地，不用去导出文件夹里翻。

几个用得上的场景：

• 前端拿原型还原页面，对照着量尺寸和间距，不必再截图估算。
• 设计和开发对稿子，现场点一下就能确认「这里到底是不是 8 像素」。
• 接手别人的 Axure 项目，快速看清某个组件的样式构成。
• 原型里某个颜色想复用到别处，直接复制 Hex 值。

怎么用：

1. 在 Chrome 或 Edge 打开扩展管理页（chrome://extensions），打开「开发者模式」，把插件文件夹加载进来。记得把「允许访问文件网址」打开，不然双击本地文件时插件不会生效。
2. 在 Axure 里「生成 HTML 文件」，得到原型文件夹。直接双击里面的 start.html 用浏览器打开。
3. 如果你的原型已经托管在 Axhub、Axure Cloud 或其他在线地址上，直接用浏览器打开那个网址就行，插件同样会生效。
4. 点右侧的「DevMode」按钮，开始点元素看信息。

下载：

关注微信公众号【优职坊】，回复【标注插件】关键词，即可获得插件下载链接