Domscribe

让 AI 真正"看见"你的前端界面

Domscribe 解决了 AI 编码助手在修改前端代码时的根本痛点：它们无法感知运行时的真实界面。通过建立代码与界面之间的双向映射，AI 不再需要盲目猜测或依赖截图，而是能够精准定位元素并理解其完整上下文。

💡 核心洞察：每一次 AI 辅助的前端修改，本质上都是搜索问题——在修改之前，AI 必须首先找到正确的文件和代码行。Domscribe 将这个"寻找"的过程自动化、精确化。

---

双向桥接：从代码到界面，从界面到代码

🎯 代码 → 界面（Code to UI）

你的 AI 助手可以通过 MCP 协议查询任意源代码位置，实时获取对应的 DOM 结构、组件属性和状态数据。修改前查看现状，修改后验证结果——无需截图，无需人工介入。

✨ 界面 → 代码（UI to Code）

在浏览器中点击任意界面元素，用简单的语言描述想要的修改（例如"将这个按钮改为蓝色"），Domscribe 会自动解析出该元素在源码中的精确位置（文件、行号、列号），让 AI 直接定位并编辑正确的目标。

---

技术特性一览

• 🛡️ 构建时稳定 ID：通过 AST 注入确定性的 data-ds 属性，基于 xxhash64 算法生成，在 HMR 和热更新过程中保持 80% 以上的缓存命中率
• 🔍 深度运行时捕获：通过 React Fiber 遍历和 Vue VNode 检查，获取真实的 props、state 和 DOM 快照，而非仅捕获 HTML 表层
• 🔒 隐私保护：邮箱、Token 和敏感模式在离开浏览器前自动脱敏，确保数据安全
• 📁 本地化存储：映射关系以 JSON 格式存储在 .domscribe/annotations/ 目录，通过 REST API 暴露，无外部依赖
• ⚡ 实时同步：WebSocket 中继将 AI 的响应实时推送到浏览器覆盖层，即时查看修改效果
• 🚫 零生产影响：所有数据属性、覆盖层脚本和中继连接在构建生产版本时自动剥离，由 CI 流程强制执行

---

工作原理

1. 注入阶段（Inject）：构建工具插件（Vite、Webpack、Turbopack）在编译时解析源码 AST，为每个 JSX 或 Vue 模板元素注入稳定的 data-ds ID，并将映射关系写入 .domscribe/manifest.jsonl
2. 捕获阶段（Capture）：框架适配器（React Fiber / Vue VNode）在运行时提取实时属性、状态和组件元数据；浏览器覆盖层支持点击任意元素查看完整上下文
3. 中继阶段（Relay）：本地 Fastify 守护进程通过 REST、WebSocket 和 MCP stdio 连接浏览器与 AI 代理，文件锁机制防止开发服务器重启时的重复实例
4. 代理阶段（Agent）：AI 编码助手通过 MCP 协议连接，支持按源码位置查询实时渲染状态，或处理来自浏览器覆盖层的修改请求

---

兼容性与生态

Domscribe 采用框架无关设计，支持 React、Vue、Next.js、Nuxt 等主流前端框架，兼容 Vite 5-7、Webpack 5、Turbopack 等构建工具。

任何支持 MCP（Model Context Protocol）的 AI 编码助手均可接入，包括 Claude Code、GitHub Copilot、Cursor、Gemini CLI、Amazon Kiro 等。提供 12 个专用工具和 4 个预设提示词，实现开箱即用的集成体验。

授权方式：MIT 开源协议，可自由用于个人或商业项目。