Domscribe 是如何工作的？

Domscribe 分 4 個步驟工作：1) 注入 - 通過捆綁器插件添加穩定的 data-ds ID，2) 捕獲 - 通過框架適配器提取實時 props、state 和組件元數據，3) 中繼 - 通過 REST/WebSocket 連接瀏覽器和代理，4) 代理 - 允許編碼代理通過 MCP 查詢和實施更改。

Domscribe 支持哪些框架和捆綁器？

Domscribe 支持多個框架，包括 React、Vue、Next.js 和 Nuxt。對於捆綁器，它適用於 Vite、Webpack 和 Turbopack。它是與框架無關的，並且可以擴展以與任何 MCP 兼容的代理一起使用。

Domscribe 在生產中使用是否安全？

是的，Domscribe 對生產沒有任何影響。所有 data-ds 屬性、覆蓋腳本和中繼連接都會在生產版本中自動剝離，並且這是由 CI 強制的。它還包括 PII 編輯，可在離開瀏覽器之前自動清除敏感數據（如電子郵件和令牌）。

如何開始使用 Domscribe？

您可以通過運行 'npx domscribe init' 開始，它會啟動一個交互式嚮導，處理所有事情 - 框架檢測、捆綁器配置和代理插件安裝。設置過程不到一分鐘。

Domscribe 的當前狀態是什麼？

Domscribe 目前處於 alpha 版本。一些測試仍然失敗，並且 API 可能在未來版本中更改。但是，它是開源的，並且在 MIT 許可下可用。

Domscribe

WebsiteFreeAI Code Assistant AI Web Scraper

Domscribe 是一個開源的像素到程式碼開發工具，它透過使 AI 編碼代理能夠直接查看和修改前端元素，彌合了正在執行的 Web 應用程式及其原始程式碼之間的差距。

訪問網站

宣傳此工具

https://domscribe.com/?ref=producthunt&utm_source=aipure

概覽
替代方案

產品資訊

更新時間：2026年03月31日

什麼是 Domscribe

Domscribe 是一個開發工具，透過允許 AI 編碼代理與前端元素即時互動，解決了程式碼和 UI 之間的不連貫性。它充當您正在執行的 Web 應用程式及其原始程式碼之間的橋樑，具有建置時穩定的 ID、深度執行階段上下文捕獲和框架無關的實作。Domscribe 在 MIT 許可下獲得許可，可與任何 MCP 相容的代理整合，並支援 React、Vue、Next.js 和 Nuxt 等主要框架。

Domscribe 的主要功能

Domscribe 是一個開源工具，透過在 DOM 元素和原始碼之間提供雙向通訊，彌合了前端 UI 和 AI 編碼代理之間的差距。它在構建時注入穩定的 ID，捕獲運行時上下文（props、state、DOM），並允許代理查詢即時 UI 狀態並使用精確的原始碼位置映射來實現 UI 更改，同時保持框架無關性並維持零生產影響。

構建時穩定的 ID: 透過 AST 解析注入確定性的 data-ds 屬性，確保在熱模組重新載入和快速刷新期間的穩定性，而無需運行時啟發式

深度運行時上下文捕獲: 透過 React fiber walking 和 Vue VNode 檢查提取即時 props、state 和 DOM 快照，提供完整的元件上下文

雙向 UI 程式碼映射: 允許點擊 UI 元素以定位原始碼，並查詢原始碼位置以查看即時 UI 渲染

框架無關整合: 適用於多個框架（React、Vue、Next.js、Nuxt）和打包器（Vite、Webpack、Turbopack），同時保持 MCP 相容性