Domscribe
赋予AI编码助手实时前端视角，实现代码与界面之间的无缝连接，加速开发流程。
Domscribe 连接代码与前端，让AI编码助手能读取代码并观察前端界面。通过点击DOM元素，或让助手查询源代码位置，查看浏览器实时显示。
更多关于 Domscribe 的信息
Domscribe
一款让你的 AI 编码助手能够“看到”前端的工具。通过点击 DOM 元素来指示助手进行更改，或者让助手查询任何源代码位置以准确查看其在浏览器中的呈现效果。适用于各种框架，帮助开发者更高效地进行前端开发。
- •构建时稳定ID:通过 AST 注入确定性 data-ds 属性，在 HMR 和快速刷新中保持稳定。无需运行时启发式方法，确保代码和 UI 之间的精确关联。
- •深度运行时捕获:通过 React fiber 遍历和 Vue VNode 检查，捕获实时的 props、state 和 DOM 快照。提供完整的组件上下文，而不仅仅是 HTML，让助手能够理解代码的动态行为。
- •双向代码-UI交互:点击运行中的应用程序中的任何元素，用简单的英语描述你想要的变化，即可让助手编辑正确的文件和行。无需搜索，无需上下文切换，实现代码和 UI 之间的无缝连接。
- •实时反馈:通过 WebSocket 转发，将助手的响应推送到浏览器叠加层，实时查看助手的工作成果。让开发者可以立即验证和调整，提高开发效率。
- •PII 数据清洗:在数据离开浏览器之前，自动清除电子邮件、令牌和敏感模式，保障数据安全。保护用户隐私，让开发者可以放心地使用该工具。
- •零生产环境影响:在生产构建中，所有 data-ds 属性、叠加脚本和中继连接都会被移除，由 CI 强制执行。确保工具不会对生产环境的性能造成任何影响。
- •注释存储:注释以 JSON 文件形式存储在 .domscribe/annotations/ 中，并通过 REST API 供 MCP 访问。没有外部依赖，方便管理和维护。
在当今的前端开发中，Domscribe 帮助开发者解决了 AI 编码助手无法“看到”前端的问题。通过双向的代码-UI 交互，深度运行时捕获和构建时稳定 ID，Domscribe 显著提升了开发效率。选择 Domscribe，让你的 AI 编码助手拥有“眼睛”，从而更高效地进行前端开发，释放你的创造力。
