不用画原型了！这个免费插件，让任何 HTML 页面秒变可编辑原型

做产品、做政务系统的朋友，是不是都有过这种经历：

画原型太费劲——Axure 上手门槛高，画一页线框图小半天；

AI 生成的原型——布局不满意想微调，发现无从下手，改一个元素要重新生成一遍；

拿到一个现成的 HTML 页面——想改改文案、调调布局，得打开编辑器啃代码。

今天分享一个我们自己打磨的免费小工具：html原型编辑器，一个浏览器插件。装上之后，任何 HTML 文件都可以直接在浏览器里拖拽编辑，所见即所得。

它能干什么？

拖拽移动

：页面里任意元素，按住直接拖到想放的位置，自动转为绝对定位，位置随心。

边框缩放

：选中组件，四周出现 8 个手柄，拖拽即可调整大小。

辅助线

：拖动时自动显示对齐参考线和间距标注，对齐强迫症福音。

Ctrl+拖动=复制

：符合 Axure/墨刀操作习惯，上手零成本。

双击改文字

：不用找代码，双击元素直接改文案。

组件库

：文本、标题、按钮、输入框、下拉框、表格、容器等 20 多个组件，点击或拖拽即可添加到页面。

交互事件编辑

：选中元素即可查看、修改、新增 onclick 等事件，支持中文描述，代码模板一键填充。

撤销/重做

：Ctrl+Z / Ctrl+Y，改错了不怕。

面板自由拖拽

：属性面板、组件库都能拖动，不遮挡内容。

保存/另存为

：编辑完一键导出完整 HTML，交付给同事直接可用。

阻止交互模式

：编辑时防止误触跳转，专注改页面。

适合谁用？

产品经理：快速改原型、调页面结构；

政务/项目人员：拿到系统导出的 HTML 页面，直接改文案、调布局，不用求开发；

前端开发：把设计稿 HTML 快速调整、标注、导出。

怎么获取？

安装只要三步：

Chrome/Edge 地址栏输入chrome://extensions，打开右上角"开发者模式"；

点"加载已解压的扩展程序"，选择该文件夹，并勾选"允许访问文件网址"。

然后用浏览器打开任意 HTML 文件，点浏览器右上角的插件图标，开始编辑。

重要说明：本工具完全本地运行，页面数据不出本机，无需联网，政务内网也能放心用。