domscribe
连接AI编码助手与前端DOM的桥梁，实现所见即所改
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：domscribe。 它的用途是：连接AI编码助手与前端DOM的桥梁，实现所见即所改 完整的 Skill 内容见：https://321skill.com/skills/domscribe/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我把首页这个按钮的颜色从蓝色改成品牌主色红色。” AI通过Domscribe能精确知道你点击的是哪个按钮及其当前的样式代码，直接给出修改建议。或者
对AI说：“查看一下`components/Header.tsx`第45行的`NavItem`组件在页面上的实际渲染效果。” AI可以通过Domscribe查询并返回该组件在浏览器中的实时截图和上下文信息。
介绍
AI编码助手在修改前端代码时，往往无法直接看到运行时的页面效果，导致定位和修改困难。Domscribe解决了这一痛点，它通过构建时生成稳定ID，在运行时捕获DOM元素、组件状态等上下文信息，并反馈给AI助手，实现双向通信。
使用非常简单，通过npx domscribe init初始化，它会引导你连接你的AI编码助手（如Claude Code、GitHub Copilot等），并集成到你的前端构建流程中。之后，你可以直接在浏览器中点击页面元素，将上下文发送给AI助手进行精准修改；或者让AI助手查询源代码位置，查看其对应的实时渲染效果。
它非常适合前端开发、全栈开发以及智能体开发人员，特别是那些频繁使用AI助手来辅助编写或修改React、Vue、Next.js等现代前端框架代码的开发者。
建议在开发环境中使用，它被设计为零生产影响，但请确保按照官方文档正确配置构建工具插件，并与你常用的AI助手兼容。
核心特点
与仅提供代码片段或静态分析的AI助手插件不同，Domscribe实现了前端运行时（DOM、状态）与AI编码助手的实时、双向交互，让AI能“看到”并“理解”页面实际效果，从而进行精准的上下文感知式代码修改。
注意事项
主要适用于现代前端框架（React、Vue等）的开发环境，对于纯后端或无UI的代码修改场景作用有限。
常见问题
Domscribe支持哪些AI编码助手？
支持所有MCP兼容的助手，如Claude Code、GitHub Copilot、Cursor、Gemini、Kiro等。
它会影响我的生产环境构建吗？
不会，Domscribe被设计为零生产影响，其构建时逻辑和运行时SDK通常只在开发模式下启用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/domscribe/raw/index.md 读取 domscribe 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/domscribe/raw/index.md（查看排版版本）