DOMagic：把 AI 修改绑定到页面节点的前端开发态插件

作者：小飞飞、蓝羽｜灏仟亿前端技术团队

前端开发里，有些问题并不复杂，却很消耗时间。比如看到页面上的一个 DOM 节点后，很难快速反查到对应源码；改样式时，需要在页面和编辑器之间来回切换；把 AI 引入开发流程后，又常常遇到"AI 知道要改，但不知道该精准改哪里"的问题。

DOMagic插件关注的正是这类开发态问题：让开发者可以在浏览器页面中直接选中目标节点，发起"AI 修改样式"或"AI 修改业务"，并把修改写回源码文件。

一、为什么需要 DOMagic

DOMagic 解决的是前端开发中一个典型但长期低效的问题：页面、源码和 AI 修改之间缺少足够精准的连接。

具体来说，核心痛点有三个：

页面 DOM 很难反查源码位置。
样式修改或者细节业务修改需要频繁在"页面"和"编辑器"之间切换。
AI 修改无法精准绑定到具体代码。

这些问题单独看都不大，但叠加在日常开发里，会让一次看似简单的样式调整或业务修改变得割裂。开发者需要先定位页面节点，再找到源码位置，然后再描述给 AI 或自己手动修改。

二、DOMagic 是什么

DOMagic 是一个开发态插件。

它的使用方式很直接：在浏览器页面中，对目标节点发起"AI 修改样式"或"AI 修改业务"，然后把修改写回源码文件。

下图是domagic的一个使用过程展示：

当我们执行完毕后本次需求改动就会写入源码，整个过程我们不需要打开编辑器。

以上图中是执行结果，右侧面板也会展示本次改动的地方。

也就是说，DOMagic 希望把页面上的具体节点、AI 修改意图和源码文件连接起来，让修改不再停留在泛泛的描述里，而是能落到具体代码上。

三、DOMagic技术实现原理

🏗️ 总体架构

L2. 源码定位层不同框架的实现机制

L3. 页面运行时层核心能力

L35. 页面运行层和后台 agent 通信实现：Dev Server 中间件

L4. 编辑引擎层

简介：编辑引擎层是 DOMagic 的核心 Harness。
它负责把用户在页面上的自然语言需求，转换成一次可执行、可校验、可回滚的代码修改流程。
AI 主要负责理解需求和生成修改方案；DOMagic 编辑引擎负责约束输入、约束输出、执行写入、校验结果和失败回滚。

主流程

构建源码上下文协议 = 给 AI 的输入包

它的意思是：当你在页面上选中一个 DOM 节点并说"帮我改这里"时，DOMagic 会把这个节点反查到源码，然后整理成一份上下文发给 AI。

json 复制代码

{
  "file": "要改哪个文件",
  "line": "大概在第几行",
  "prompt": "用户想怎么改",
  "framework": "react/vue 等",
  "styleSystem": "tailwind/css module 等",
  "fullSource": "当前文件完整源码",
  "snippet": "目标元素附近代码片段",
  "target": "页面上选中的 DOM 信息",
  "importedFiles": "相关引用文件内容"
}

// 例子
{
  "file": "src/pages/customer-list/index.tsx",
  "line": 128,
  "prompt": "把客户名称和客户ID列调换位置",
  "editMode": "business",
  "framework": "react",
  "styleSystem": "tailwind",
  "projectRoot": "/Users/project/crm",
  "fullSource": "当前文件完整源码",
  "snippet": {
    "startLine": 120,
    "endLine": 140,
    "code": "目标元素附近的源码片段"
  },
  "target": {
    "tagName": "button",
    "preferredStyleTargets": ["self", "className", "style"]
  },
  "importedFiles": [ 
    {
      "file": "src/pages/customer-list/columns.tsx",
      "source": "./columns",
      "code": "关联引用文件内容"
    }
  ]
}

输出协议 EditPlan = AI 返回的修改计划

EditPlan 是 AI 不能随便输出一段解释，而必须返回一个机器能执行的结构：

css 复制代码

{
  "summary": "这次改了什么",
  "edits": [
    {
      "file": "src/pages/customer-list/index.tsx",
      "startLine": 12,
      "endLine": 12,
      "newCode": "替换后的代码"
    }
  ]
}

// 例子
{
  "summary": "把按钮背景色改成黄色",
  "edits": [
    {
      "file": "src/pages/customer-list/index.tsx",
      "startLine": 12,
      "endLine": 12,
      "newCode": "  return <button style={{ backgroundColor: 'yellow' }}>查询</button>"
    }
  ]
}

命中流程

支持能力（基本所有的样式属性都支持）

CLI Agent 层

输入协议

可以理解成：DOMagic 调用本地 AI 编程工具时，传给它的标准入参格式。

arduino 复制代码

{
  file,
  line,
  framework,
  userPrompt,
  snippet
}

// 示例
{
  "file": "src/pages/customer-list/index.tsx",
  "line": 128,
  "prompt": "把客户名称和客户ID列调换位置",
  "editMode": "business",
  "framework": "react",
  "styleSystem": "tailwind",
  "projectRoot": "/Users/project/crm",
  "fullSource": "当前文件完整源码",
  "snippet": {
    "startLine": 120,
    "endLine": 140,
    "code": "目标元素附近的源码片段"
  },
  "target": {
    "tagName": "button",
    "preferredStyleTargets": ["self", "className", "style"]
  },
  "importedFiles": [
    {
      "file": "src/pages/customer-list/columns.tsx",
      "source": "./columns",
      "code": "关联引用文件内容"
    }
  ]
}

Agent 执行流程

Provider 优先级

rust 复制代码

codex -> claude-code -> gemini -> generic-cli

源码校验：

php 复制代码

// 一个React/TSX语法校验场景
const nextSource = applyEditPlan(context.fullSource, plan)

parse(nextSource, {
  sourceType: 'module',
  plugins: ['jsx', 'typescript'],
})

四、极速体验

不同打包工具的前端项目的安装指南：

vite版本：www.npmjs.com/package/dom...
webpack版本：www.npmjs.com/package/dom...
turbopack版本：www.npmjs.com/package/dom...