DOM2Prompt: AI Element Capture for Devs

DOM2Prompt 是一款为前端开发者打造的网页元素捕获工具。它可以帮助你在页面上快速点选按钮、输入框、链接、卡片、菜单等 UI 元素，并生成适合粘贴给 AI 编程助手的结构化 Prompt。 当你使用 Cursor、ChatGPT、Claude、Copilot 等 AI 工具修改前端页面时，经常会遇到一个问题：你知道页面上哪里需要改，但 AI 不知道它对应哪段源码。DOM2Prompt 正是为了解决这个问题。 通过 DOM2Prompt，你可以： 在网页上直接点选目标元素；捕获多个元素，并用 Element 1、Element 2 等编号区分；获取可见文本、元素语义、稳定属性和干净 HTML 片段；过滤动态 class、运行时生成 id 和无用 XPath；生成更适合 AI 理解和定位源码的上下文；一键复制生成的 Prompt，发送给 AI 编程助手。 适合使用场景： 让 AI 修改页面上的某个按钮、文案、输入框或菜单；快速描述复杂页面中的目标 UI 元素；在 React、Vue、Next.js 等项目中定位动态 DOM 对应的源码；减少截图、口头描述和反复解释的沟通成本。 DOM2Prompt 专注于前端开发场景，不会上传网页内容，也不会收集用户数据。所有设置和历史记录仅保存在浏览器本地。 DOM2Prompt is a web element capture tool built for frontend developers. It helps you pick buttons, inputs, links, cards, menus, and other UI elements directly from a web page, then converts them into structured prompts that can be pasted into AI coding assistants. When using tools like Cursor, ChatGPT, Claude, or Copilot to modify frontend code, it is often hard to explain exactly which UI element should be changed. You may know where the element is on the page, but the AI assistant may not know which source code it belongs to. DOM2Prompt helps bridge that gap. With DOM2Prompt, you can: Pick target elements directly on a web page; capture multiple elements and reference them as Element 1, Element 2, and so on; extract visible text, semantic roles, stable attributes, and clean HTML snippets; filter noisy runtime class names, generated IDs, and brittle XPath paths; generate source-oriented context that is easier for AI tools to understand; copy the generated prompt and send it to your AI coding assistant. Use cases: Ask AI to modify a specific button, label, input, menu, or UI block; describe complex UI elements without screenshots or vague wording; locate frontend source code from React, Vue, Next.js, and similar apps; reduce back-and-forth communication when working with AI coding tools. DOM2Prompt is designed for frontend development workflows. It does not upload page content and does not collect user data. Settings and optional history are stored only in the local browser environment.