Item logo image for DOM2Prompt: AI Element Capture for Devs

DOM2Prompt: AI Element Capture for Devs

5.0(

1 rating

)
Item media 1 (screenshot) for DOM2Prompt: AI Element Capture for Devs

Overview

Pick web page elements and generate source-oriented prompts for AI coding assistants

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.

Details

  • Version
    1.0.3
  • Updated
    August 9, 2026
  • Size
    53.92KiB
  • Languages
    2 languages
  • Developer
    Email
    goodhzy@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization

DOM2Prompt: AI Element Capture for Devs has disclosed the following information regarding the collection and usage of your data. More detailed information can be found in the developer's privacy policy.

DOM2Prompt: AI Element Capture for Devs handles the following:

User activity
Website content

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Related

HTMLPacker - 一键打包网页,给 AI 编程参考

5.0

把网页一键打包成原型素材包,交给 AI 编程工具参考、复刻和改版。

XPathSense – AI Web Element Scanner

5.0

Smartly scan web pages and extract AI-enhanced XPaths for automation.

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Open Web Inspector - AI Element Inspector

5.0

AI-controllable web element inspector with natural language interface. Type 'Make this text red' and get perfect CSS instructions!

Element Select - AI Agent Annotation Tool

5.0

Annotate web elements and generate structured feedback for AI coding agents

tegakari

0.0

Web要素を選択して、HTML・フレームワーク・コンポーネント情報とスクリーンショットをAIエディタ用にコピーするChrome拡張

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

Claude Studio

5.0

Visual AI coding assistant — select elements, describe changes, Claude Code executes

Clasp-it

5.0

Pick any webpage element and send its context to your AI editor via MCP

MarkIt — 圈选元素,自动生成 AI 修改指令

5.0

你一眼看出页面哪里不对,但跟 AI 说清楚得花十分钟。直接在页面上圈选并截图,MarkIt 自动补充元素定位、CSS 选择器和验收标准,输出 Cursor、Claude Code 能直接执行的结构化指令。

Web Element Selector

5.0

Advanced element locator with AI-powered xpath and css selector generation. Supports ChatGPT, Gemini, DeepSeek, and Claude.

Website Modifier

0.0

Transform any webpage content with AI-generated text and images

HTMLPacker - 一键打包网页,给 AI 编程参考

5.0

把网页一键打包成原型素材包,交给 AI 编程工具参考、复刻和改版。

XPathSense – AI Web Element Scanner

5.0

Smartly scan web pages and extract AI-enhanced XPaths for automation.

Modify — Visual CSS Editor for AI Coding Agents

5.0

Edit live webpages with a visual CSS editor, then copy exact changes as a structured prompt for terminal AI coding agents.

Open Web Inspector - AI Element Inspector

5.0

AI-controllable web element inspector with natural language interface. Type 'Make this text red' and get perfect CSS instructions!

Element Select - AI Agent Annotation Tool

5.0

Annotate web elements and generate structured feedback for AI coding agents

tegakari

0.0

Web要素を選択して、HTML・フレームワーク・コンポーネント情報とスクリーンショットをAIエディタ用にコピーするChrome拡張

Prompt Picker - Pick element, annotate and get prompt

5.0

Pick and annotate elements on any web page, then copy as structured prompts for AI coding agents like Claude Code, Codex & Cursor.

Claude Studio

5.0

Visual AI coding assistant — select elements, describe changes, Claude Code executes

Google apps