首页效率与自动化可视化编辑扩展

可视化编辑扩展

Chrome 扩展「AI 编程纠正器」：把修改意图从「文字描述」升级为「所见即所得的圈选」。在任意外部网站上拾取元素、改样式、加批注，一键把结构化修改指令发回 Mougen Code。

Chrome MV3圈选纠偏直投输入框JSON 重放
Why

「那个按钮再大一点」不再靠猜

口头描述「右上角那个卡片」容易指错目标；圈选让用户直接在真实页面上指出改哪里、改成什么样，AI 拿到的是精确到选择器的结构化意图。

  • 元素拾取 — 悬停高亮、点击锁定，像 Figma 一样选中任意元素。
  • 实时样式编辑 — 间距、颜色、字号、圆角即改即预览。
  • 批注 — 对元素补充文字说明，意图更完整。
  • 同选择器批量应用 — 改一处，同类元素统一生效。
Mougen Visual Editing
已连接 39217
client-site.com/landing
button.cta · primary
圆角6px → 14px
内边距8px 16px → 12px 28px
背景--brand → #8b5cf6
批注：主按钮更醒目一些，hover 保持同色系
直投 Mougen Code复制 Prompt导出 JSON
↑ 代码渲染：圈选元素 + 样式 diff + 三种输出
Output

三种输出去向

直投 Mougen Code

经本机桥（127.0.0.1:39217 + 配对令牌）把结构化修改指令直接投进 Mougen Code 聊天输入框，回车即执行。

复制结构化 Prompt

生成结构化 Markdown Prompt 剪贴板输出，可粘贴给任意 AI 编码工具使用，不被生态锁定。

导出 JSON 存档

修改意图导出 JSON 存档，可重放：同一批修改指令可在项目演进中反复注入。

扩展与桌面端内置浏览器的「Mougen Visual Editing」面板功能对齐——站内页面用内置面板，站外任意网站用扩展，构成「可视化反馈 → 修正代码」闭环的完整延伸。
Flow

从圈选到代码落地的链路

圈选元素任意外部网站
编辑 + 批注实时预览
结构化指令选择器 + 样式 diff
直投输入框39217 桥
智能体修改定位代码落盘