Domscribe
Domscribe · 程式設計
Domscribe 是一款開源的前端除錯工具，讓 AI 程式碼代理能看見你正在執行的前端。把它想成為單一任務而生的開源開發者工具：拉近程式碼所說的話，與瀏覽器實際渲染結果之間的距離。它以雙向方式連接瀏覽器與原始碼：你點擊某個 DOM 元素並描述想要的變更，或者你的代理查詢某個原始碼檔案，看見即時的 DOM 快照、元件 props 與狀態。在底層，它靠著建置時期建立的 DOM 對應原始碼機制運作，所以每個元素都能指回確切的檔案與行號。它支援任何相容於 MCP 的代理與任何打包工具，以 MIT 授權釋出，並在正式建置中移除所有注入的偵測程式碼。沒有付費方案。沒有人數限制。
關於 Domscribe
Domscribe 是什麼
Domscribe 是為 AI 輔助前端工作打造的像素轉程式碼橋樑。程式碼代理能讀取你的原始碼檔案，卻看不見瀏覽器實際渲染出什麼，這就是它們只能猜測版面、樣式與元件結構的原因。Domscribe 在 DOM 與你的原始碼樹之間建立雙向連結，補上這道落差。
這款工具在建置時期透過 AST 解析注入具決定性的 data-ds 屬性。它把每一筆對應記錄在清單檔中。在執行時期，它擷取即時的 props、狀態與 DOM 快照。接著你的代理問一個簡單的問題：這一行渲染出什麼？它得到真實的答案，而不是一張還得自己解讀的截圖。
最大的限制在於涵蓋範圍。Domscribe 目前支援 React、Vue、Next.js 與 Nuxt，並為其他設定提供自訂轉接器，因此不受支援的技術堆疊上，框架專屬的內部細節無法精準對應。它同時假設你的代理說 MCP，這排除了只接受純文字提示的工具。
開始使用
- 安裝套件，並在專案根目錄執行
npx domscribe init。 - 為你的建置工具加入對應的打包外掛（Vite 5-7、Webpack 5 或 Turbopack），讓原始碼檔案被注入穩定的
data-ds識別碼。 - 把你相容於 MCP 的代理，例如 Claude Code、GitHub Copilot、Cursor 或 Gemini，指向 Domscribe 的 MCP 端點。
- 啟動開發伺服器，開啟應用程式，點擊任一個元素，提出以白話描述的變更需求。
- 讓代理查詢原始碼位置、完成編輯，再對照即時 DOM 確認結果。
產品資訊
快速了解 Domscribe 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：加快 UI 編輯速度，因為代理直接編輯確切的檔案與行號，不必在元件之間翻找，前提是專案跑在受支援的框架上。
- 與 AI 代理協作的全端工程師：讓代理緊貼真實的執行狀態，當錯誤只在渲染後才出現時，幫助最大。
- 已經在用 Claude Code 或 Cursor 的團隊：在既有的 MCP 流程中補上前端感知能力，不必更換工具。
任務
- 修正版面與樣式錯誤：直接指向出問題的元素並描述視覺問題，勝過寫一長串座標。
- 調整元件 props 與樣式：代理看見即時的 prop 值，所以會改到正確的變數，而不是別處同名的變數。
- 檢視某一行原始碼渲染出什麼：當元件在程式碼裡看起來正常，在畫面上卻渲染出意料之外的東西時特別有用。
情境
- 開發功能時的快速 UI 迭代：變更需求從瀏覽器送出，開發伺服器持續熱重載。
- 除錯由狀態驅動的渲染：當輸出取決於 props 與狀態時，代理看得見產生當前畫面的那些值。
- 熟悉陌生的程式碼庫：點擊元素並詢問它們渲染出什麼，比從頭到尾讀檔案更快建立心智地圖。
主要功能
建置時期的穩定識別碼
Domscribe 在建置期間解析每個原始碼檔案，以 xxhash64 注入具決定性的 data-ds 屬性，接著把每一筆對應記錄在清單檔中。這些識別碼在熱模組替換與快速重新整理之間保持穩定，意即它們能撐過定義了大多數前端工作的編輯、儲存、重載循環。它們不會在你一編輯檔案時就失效。沒有執行時期的推測規則。不必猜哪個元素是哪個。
DOM 與原始碼的雙向連結
這款工具雙向都能運作。點擊某個 DOM 元素並描述你想要的變更，Domscribe 會把它解析成你的代理應該編輯的確切原始碼位置。或者讓代理查詢某個原始碼檔案與行號，看看那裡現在渲染出什麼。你要用哪個方向取決於任務。兩邊都不必猜測另一方。
深度執行時期擷取
除了原始 HTML 之外，Domscribe 透過走訪 React fiber 與檢視 Vue VNode，擷取即時的 props、狀態與元件中介資料。你的代理得到某個已渲染元素背後的完整元件脈絡，不只是標記。這很重要。它意味著代理能推敲某個東西為何長成那樣。
支援 MCP 並具備 REST 層
標註以 JSON 檔案形式存在於你儲存庫內的 .domscribe/annotations/ 資料夾中，並透過 REST API 對外開放，再由 MCP 伺服器包裝供代理存取。Domscribe 透過 MCP 提供 12 項工具與 4 個提示，並支援 Claude Code、GitHub Copilot、Cursor、Gemini、Kiro 以及任何其他 MCP 用戶端。一切都留在本機，沒有外部相依。
個資遮蔽
電子郵件、權杖與敏感樣式在資料離開瀏覽器之前就會自動清除。這是實實在在的防護。對於開發處理真實使用者資料的應用程式的團隊來說，這決定了這款工具能不能跑在預備環境上。
對正式環境零影響
每一個 data-ds 屬性、覆蓋層指令碼與中繼連線都會從正式建置中移除，並由 CI 強制執行。你出貨的打包檔保持乾淨，所以不必犧牲打包大小，也不會把偵測程式碼暴露給終端使用者。
優缺點
優點
- 免費且以 MIT 授權開源，沒有付費方案也沒有人數限制。
- 把 DOM 元素對應到確切的原始碼位置，代理不再改到錯的檔案。
- 擷取即時的 props 與狀態，給代理截圖無法提供的脈絡。
- 在支援清單內不綁框架，並相容於任何以 MCP 為基礎的代理。
- 個資遮蔽與正式環境清除機制，讓敏感資料與打包大小都受到控制。
缺點
- 需要受支援的框架（React、Vue、Next.js、Nuxt）或自訂轉接器；不受支援的技術堆疊無法精準對應。
- 只有搭配相容於 MCP 的代理才有用，純提示工具無法使用。
- 設定會動到你的打包設定與開發伺服器，在它開始做事之前多了一道步驟。
常見問題
它在你的執行中前端與你的 AI 程式碼代理之間建立橋樑。代理可以回應對某個 DOM 元素的點擊，或查詢某一行原始碼以看見即時的 DOM、props 與狀態，然後帶著完整脈絡進行編輯。
相關內容
探索與 Domscribe 相關的工具、技能與文章。
Domscribe 替代方案
Forefront
Forefront · 程式設計Forefront 是一個用來打造開源 AI 的網頁平台。你可以用自己的資料微調主流的開源語言模型、評估它們的表現，再透過 API 執行，或匯出後自行架設。想要封閉式平台的便利、卻堅持要自己擁有模型與資料的開發者，就是這裡的目標客群。
Startkit
StartKit.AI · 程式設計Startkit 是一套用來打造 AI SaaS 與 AI 包裝產品的樣板。可以把它想成一個 AI 新創樣板，把枯燥的部分都先接好了：驗證、Stripe 與 Lemon Squeezy 付款、用量限制、交易型電子郵件，以及一套能與 OpenAI、Anthropic、Groq 或 Llama 溝通的 AI API 啟動套件。你複製儲存庫、設定價格，然後專心在產品中使用者真正願意付費的部分。它建構於 React 與 Tailwind 之上的 Next.js，所以大部分的樣板程式碼對你來說並不陌生。
Testim
Tricentis · 程式設計Testim 是專為網頁、行動與 Salesforce 應用程式打造的 AI 測試自動化平台，用來建立並執行端到端測試。它靠機器學習在介面變動時維持測試穩定，團隊因此少花時間修補壞掉的定位器。對於一款今天就能開始使用的自動化測試工具來說，這表現不算差。你透過在瀏覽器錄製動作來建立測試，需要更多控制時再補上 JavaScript。對忙碌的 QA 團隊來說，這是個可靠的選擇。