Domscribe 是一款专为 AI 编程智能体设计的前端开发辅助工具，旨在解决智能体在修改 UI 时难以定位源代码位置的问题。AI 编程智能体擅长读取和编辑源文件，但当被要求修复 UI 缺陷时，它往往不知道当前看到的元素属于哪个文件，只能猜测、搜索，甚至修改错误的内容。Domscribe 通过双向桥接源代码与浏览器 DOM，让智能体能够精确、高效地完成前端修改。
主要能力
- 构建时稳定 ID：Domscribe 在构建阶段遍历 JSX 和 Vue 模板，为每个元素分配稳定的 ID，并生成清单文件，将每个 ID 映射到确切的文件、行和列。智能体读取清单后即可瞬间解析元素，首次尝试就能编辑正确的文件。
- 运行时深度上下文：智能体在修改前可查询 Domscribe，查看指定源代码位置实际渲染的内容，包括实时 DOM 快照、组件 props 和状态。修改后还能验证结果，无需截图或人工介入。
- 双向查询：既可以通过点击 DOM 元素告诉智能体要修改什么，也可以让智能体查询任意源代码位置以查看实时渲染结果。
- 框架无关：支持 React 和 Vue，通过 React fiber 遍历和 Vue VNode 检查提取实时 props、状态和组件元数据。
- 兼容任意 MCP 智能体：任何兼容 MCP 的智能体均可使用。
- 零生产影响：所有 data-ds 属性、覆盖层脚本和中继连接在生产构建中都会被剥离，并由 CI 强制执行。
使用方式
- 安装向导：交互式向导可自动检测框架、配置打包器并安装智能体插件，不到一分钟即可完成。
- 添加到应用：安装 Domscribe 插件，并配置 MCP 和技能。
- 连接智能体：通过 MCP 连接智能体，使其能够按源代码查询或处理注释。
- 指向 UI 并描述需求：在运行中的应用里点击任意元素，用自然语言输入修改需求并提交。Domscribe 将元素解析到确切的源代码位置，智能体编辑正确的文件和行。
技术实现
- 打包器插件解析每个源文件，通过 xxhash64 注入 HMR 稳定的 data-ds ID，并将映射记录在 .domscribe/manifest.jsonl 中。
- 框架适配器提取实时 props、状态和组件元数据，覆盖层允许点击任意元素查看完整上下文。
- 本地 Fastify 守护进程通过 REST、WebSocket 和 MCP stdio 连接浏览器与智能体，文件锁防止开发服务器重启时出现重复实例。
- 注释以 JSON 文件形式存储在 .domscribe/annotations/ 中，通过 REST API 暴露，由 MCP 封装供智能体访问，无外部依赖。
- WebSocket 中继将智能体响应实时推送到浏览器覆盖层。
适用场景
- 智能体辅助的前端 UI 修改与缺陷修复。
- 需要将浏览器中的视觉元素快速映射到源代码位置的开发工作流。
- 使用 React 或 Vue 框架，并希望集成 MCP 智能体的开发团队。
限制
- 官方资料未提供具体的收费模式、价格、平台支持范围或性能数据。
- 目前明确支持 React 和 Vue，其他框架的支持情况暂未提供。
- 需要兼容 MCP 的智能体才能使用。
