domscribe
活跃·★ 169·MIT·更新于 2026-05-29
★ 时下流行★ 代码助手★ 开发者工具
Domscribe 是一个桥接 AI 编码代理与前端界面的工具，支持通过点击 DOM 元素向代理传达修改指令，或让代理查询源代码在浏览器中的实时状态。
Domscribe 将 AI 编码代理与运行中的前端应用连接起来。它提供构建时稳定的 ID、深度的运行时上下文（props、state、DOM）以及源代码与实时浏览器之间的双向查询。它兼容多种框架，并支持任何兼容 MCP 的代理。
#人工智能#Claude Code 插件#copilot-cli-plugin#cursor-plugin#开发者工具#devtools#gemini-cli-extension#kiro-power
01
功能特性
01通过 AST 注入构建时稳定的 ID（data-ds 属性）
02深度运行时上下文捕获（props、state、DOM 快照）
03源代码与 UI 的双向查询（代码→实时 DOM，UI→代码注解）
04框架无关，支持 React、Vue、Next.js、Nuxt 等
05提供 MCP 工具用于代理集成（12 个工具、4 个提示）
02
兼容性
React
React 18–19
已通过文档验证
Vue
Vue 3+
已通过文档验证
Next.js
Next.js 15–16
已通过文档验证
Nuxt
Nuxt 3+
已通过文档验证
Any Framework
任意框架（仅转换）
已通过文档验证
03
快速开始
1
$ npx domscribe init
04
使用场景
↳让 AI 代理“看到”浏览器：代理查询源代码，获取实时 DOM 快照、props、state，以在编辑前后验证更改。
↳点击并指示 UI 更改：开发人员在浏览器覆盖层中点击元素，输入指令，代理获取注解并实现更改。
↳注释元素以进行 AI 驱动的重构或样式调整，提供完整的源位置和运行时上下文以实现精确修改。
05
同类工具
相关搜索
评论
登录后发表评论
- AAspen Harris2026年3月21日
Pixel-to-code development tool that bridges running apps and code generation.
- EEmerson Zhang2026年3月18日
Works as a bridge between what the app looks like and what the code should say.
- TTaylor Davis2026年3月14日
Good for front-end developers who want AI to understand their running app's actual state.
- HHarley Jackson2026年3月7日
Live app state as code context is more accurate than static file analysis.