domscribe

概述

Domscribe 是一个像素到代码的开发工具，提供 AI 编码代理与运行中 Web 应用之间的双向通信。它允许代理通过源位置查询 DOM 元素，同时让开发者点击 UI 元素来引导代理到达精确的代码位置。该工具支持多种框架（React、Vue、Next.js、Nuxt）和打包工具（Vite、Webpack、Turbopack），并通过构建时仪器剥离确保对生产环境零影响。

试试问 AI

装完之后，这里有 5 个你可以让 AI 做的事：

• domscribe.query.bySourcedomscribe.query.bySource(file: string, line: number)

  Query live DOM snapshot, props, state, and attributes from a specific source file location

  试试:Check what the button at src/components/Button.tsx:15 looks like in the browser试试:Show me the props and state of the component at src/components/Header.tsx:23
• domscribe.process.annotationsdomscribe.process.annotations()

  Process annotations submitted via the browser overlay for implementing changes

  试试:Process any pending UI change requests试试:Check if there are any new annotations to implement

说明：The README mentions '12 tools and 4 prompts via MCP' but only details two main functions (query.bySource and process.annotations). The other 10 tools aren't explicitly named in the provided text.

可对比工具

安装

npx domscribe init

npm install -D @domscribe/react

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { domscribe } from '@domscribe/react/vite';

export default defineConfig({
  plugins: [react(), domscribe()],
});

{
  "mcpServers": {
    "domscribe": {
      "command": "npx",
      "args": ["domscribe", "mcp"]
    }
  }
}

FAQ

这个工具适用于生产环境的应用吗？

不，Domscribe 专为开发设计，在生产构建中会被完全剥离，对运行时零影响。

支持哪些 AI 编码代理？

Domscribe 为 Claude Code、GitHub Copilot、Gemini CLI、Amazon Kiro 和 Cursor 提供插件，并通过 MCP 接口支持任何兼容的代理。

Hacker News 讨论

开发者社区最近的相关讨论。

• Show HN: Domscribe – Deterministic DOM-to-source mapping for AI coding agents▲ 2
  帖子 by NarratorTD · 2026-03-31

domscribe 对比