Show AI
Exactly What
You Want
to Change
Select elements, tweak styles visually, generate precise AI prompts.
Let Cursor, Claude Code, Codex and more modify your code accurately.
用可视化的方式
告诉 AI
你要改什么
选中元素、微调样式、生成精确的 AI 提示词。
让 Cursor、Claude Code、Codex 等 AI 工具准确修改你的代码。
Muestra a la IA
Exactamente Qué
Quieres Cambiar
Selecciona elementos, ajusta estilos visualmente, genera prompts precisos para IA.
Deja que Cursor, Claude Code, Codex y más modifiquen tu código con precisión.
Montrez à l'IA
Exactement Ce Que
Vous Voulez Changer
Sélectionnez des éléments, ajustez les styles visuellement, générez des prompts IA précis.
Laissez Cursor, Claude Code, Codex et d'autres modifier votre code avec précision.
Zeig der KI
Genau Was
Du Ändern Willst
Elemente auswählen, Styles visuell anpassen, präzise KI-Prompts generieren.
Lass Cursor, Claude Code, Codex und mehr deinen Code exakt ändern.
Mostra all'IA
Esattamente Cosa
Vuoi Cambiare
Seleziona elementi, regola gli stili visivamente, genera prompt IA precisi.
Lascia che Cursor, Claude Code, Codex e altri modifichino il tuo codice con precisione.
Mostre à IA
Exatamente O Que
Você Quer Mudar
Selecione elementos, ajuste estilos visualmente, gere prompts precisos para IA.
Deixe Cursor, Claude Code, Codex e outros modificar seu código com precisão.
AIに
変更したい箇所を
正確に伝える
要素を選択し、スタイルを視覚的に調整し、正確なAIプロンプトを生成。
Cursor、Claude Code、CodexなどのAIツールでコードを正確に修正。
AI에게
변경하고 싶은 것을
정확히 보여주세요
요소를 선택하고, 스타일을 시각적으로 조정하고, 정확한 AI 프롬프트를 생성하세요.
Cursor, Claude Code, Codex 등이 코드를 정확하게 수정하도록 하세요.
Покажите ИИ
Именно То, Что
Вы Хотите Изменить
Выбирайте элементы, настраивайте стили визуально, генерируйте точные промпты для ИИ.
Позвольте Cursor, Claude Code, Codex и другим точно изменять ваш код.
أظهر للذكاء الاصطناعي
بالضبط ما تريد
تغييره
حدد العناصر، عدّل الأنماط بصريًا، وأنشئ أوامر دقيقة للذكاء الاصطناعي.
دع Cursor وClaude Code وCodex وغيرها تعدّل شفرتك بدقة.
AI को दिखाएं
कि आप वास्तव में
क्या बदलना चाहते हैं
एलिमेंट चुनें, स्टाइल को विज़ुअली एडजस्ट करें, सटीक AI प्रॉम्प्ट जनरेट करें।
Cursor, Claude Code, Codex और अन्य टूल्स को अपना कोड सटीक रूप से बदलने दें।
Works with these AI coding agents 适配以下 AI 编程工具 Compatible con estos agentes de programación IA Fonctionne avec ces agents de programmation IA Funktioniert mit diesen KI-Coding-Agenten Compatibile con questi agenti di programmazione IA Funciona com estes agentes de programação IA 以下の AI コーディングエージェントに対応 다음 AI 코딩 에이전트와 호환 Работает с этими ИИ-агентами для кода يعمل مع وكلاء البرمجة بالذكاء الاصطناعي هؤلاء इन AI कोडिंग एजेंट्स के साथ काम करता है
When fine-tuning a page, screenshots never capture the right element. AI can't pinpoint "which element needs what change" — endless back-and-forth.
微调页面时，截图总是选不中对应的元素。AI 无法精确定位「哪个元素要改什么」，反复沟通效率极低。
Al ajustar una página, las capturas de pantalla nunca capturan el elemento correcto. La IA no puede identificar "qué elemento necesita qué cambio" — un ir y venir interminable.
Lors du réglage d'une page, les captures d'écran ne ciblent jamais le bon élément. L'IA ne peut pas identifier « quel élément doit être modifié » — des allers-retours sans fin.
Beim Feintuning einer Seite erfassen Screenshots nie das richtige Element. Die KI kann nicht bestimmen, „welches Element wie geändert werden soll" — endloses Hin und Her.
Quando si regola una pagina, gli screenshot non catturano mai l'elemento giusto. L'IA non riesce a identificare "quale elemento va modificato" — un avanti e indietro infinito.
Ao ajustar uma página, capturas de tela nunca capturam o elemento certo. A IA não consegue identificar "qual elemento precisa de qual mudança" — idas e vindas intermináveis.
ページを微調整する際、スクリーンショットでは正しい要素を捉えられません。AIは「どの要素をどう変えるか」を特定できず、何度もやり取りを繰り返すことに。
페이지를 미세 조정할 때, 스크린샷은 올바른 요소를 포착하지 못합니다. AI는 "어떤 요소를 어떻게 변경해야 하는지" 파악할 수 없어 끝없는 소통이 반복됩니다.
При тонкой настройке страницы скриншоты никогда не захватывают нужный элемент. ИИ не может определить «какой элемент нужно изменить» — бесконечные уточнения.
عند ضبط الصفحة، لا تلتقط لقطات الشاشة العنصر الصحيح أبدًا. لا يستطيع الذكاء الاصطناعي تحديد "أي عنصر يحتاج إلى أي تغيير" — تواصل لا نهاية له.
पेज को फाइन-ट्यून करते समय, स्क्रीनशॉट कभी सही एलिमेंट को कैप्चर नहीं करते। AI "कौन सा एलिमेंट कैसे बदलना है" पहचान नहीं पाता — अंतहीन आगे-पीछे संवाद।
DOMPrompter lets you select elements directly on the page, visually adjust parameters, add text annotations, and auto-generate structured AI prompts for Cursor / Claude Code / Codex to execute precisely.
DOMPrompter 让你直接在页面上选中元素、可视化调整参数、添加文字注释，然后自动生成结构化 AI 提示词，交给 Cursor / Claude Code / Codex 精确执行。
DOMPrompter te permite seleccionar elementos directamente en la página, ajustar parámetros visualmente, agregar anotaciones de texto y generar automáticamente prompts estructurados de IA para que Cursor / Claude Code / Codex ejecuten con precisión.
DOMPrompter vous permet de sélectionner des éléments directement sur la page, d'ajuster les paramètres visuellement, d'ajouter des annotations textuelles et de générer automatiquement des prompts IA structurés pour que Cursor / Claude Code / Codex exécutent avec précision.
DOMPrompter lässt dich Elemente direkt auf der Seite auswählen, Parameter visuell anpassen, Textanmerkungen hinzufügen und automatisch strukturierte KI-Prompts generieren, die Cursor / Claude Code / Codex präzise ausführen.
DOMPrompter ti permette di selezionare elementi direttamente sulla pagina, regolare i parametri visivamente, aggiungere annotazioni testuali e generare automaticamente prompt IA strutturati per Cursor / Claude Code / Codex da eseguire con precisione.
DOMPrompter permite selecionar elementos diretamente na página, ajustar parâmetros visualmente, adicionar anotações de texto e gerar automaticamente prompts estruturados de IA para que Cursor / Claude Code / Codex executem com precisão.
DOMPrompter はページ上で直接要素を選択し、パラメータを視覚的に調整し、テキスト注釈を追加し、Cursor / Claude Code / Codex が正確に実行できる構造化 AI プロンプトを自動生成します。
DOMPrompter를 사용하면 페이지에서 직접 요소를 선택하고, 파라미터를 시각적으로 조정하고, 텍스트 주석을 추가하고, Cursor / Claude Code / Codex가 정확하게 실행할 수 있는 구조화된 AI 프롬프트를 자동 생성할 수 있습니다.
DOMPrompter позволяет выбирать элементы прямо на странице, визуально настраивать параметры, добавлять текстовые аннотации и автоматически генерировать структурированные промпты для Cursor / Claude Code / Codex для точного выполнения.
يتيح لك DOMPrompter تحديد العناصر مباشرة على الصفحة، وضبط المعلمات بصريًا، وإضافة التعليقات التوضيحية، وإنشاء أوامر ذكاء اصطناعي منظمة تلقائيًا ليقوم Cursor / Claude Code / Codex بتنفيذها بدقة.
DOMPrompter आपको पेज पर सीधे एलिमेंट चुनने, पैरामीटर को विज़ुअली एडजस्ट करने, टेक्स्ट एनोटेशन जोड़ने और Cursor / Claude Code / Codex के लिए स्ट्रक्चर्ड AI प्रॉम्प्ट ऑटो-जनरेट करने देता है ताकि वे सटीक रूप से निष्पादित कर सकें।
Precise Selection 精确选择 Selección precisa Sélection précise Präzise Auswahl Selezione precisa Seleção precisa 正確な選択 정밀 선택 Точный выбор تحديد دقيق सटीक चयन
Click any element to select it instantly. Auto-identify CSS selectors. Blue outline for precise highlighting, floating buttons at your fingertips.
点击页面元素即刻选中，自动识别 CSS 选择器。蓝色边框精确高亮，浮动按钮一触即达。
Haz clic en cualquier elemento para seleccionarlo al instante. Identificación automática de selectores CSS. Contorno azul para resaltado preciso, botones flotantes al alcance de tu mano.
Cliquez sur n'importe quel élément pour le sélectionner instantanément. Identification automatique des sélecteurs CSS. Contour bleu pour un surlignage précis, boutons flottants à portée de main.
Klicke auf ein beliebiges Element, um es sofort auszuwählen. CSS-Selektoren werden automatisch erkannt. Blaue Umrandung für präzise Hervorhebung, schwebende Buttons griffbereit.
Clicca su qualsiasi elemento per selezionarlo istantaneamente. Identificazione automatica dei selettori CSS. Contorno blu per evidenziazione precisa, pulsanti flottanti a portata di mano.
Clique em qualquer elemento para selecioná-lo instantaneamente. Identificação automática de seletores CSS. Contorno azul para destaque preciso, botões flutuantes ao alcance dos dedos.
要素をクリックするだけで即座に選択。CSSセレクターを自動識別。青い枠線で正確にハイライトし、フローティングボタンですぐに操作可能。
아무 요소나 클릭하면 즉시 선택됩니다. CSS 셀렉터를 자동으로 식별합니다. 파란색 윤곽선으로 정밀하게 하이라이트하고, 플로팅 버튼으로 빠르게 조작하세요.
Нажмите на любой элемент, чтобы мгновенно выбрать его. Автоматическое определение CSS-селекторов. Синяя рамка для точной подсветки, плавающие кнопки под рукой.
انقر على أي عنصر لتحديده فورًا. تعريف تلقائي لمحددات CSS. إطار أزرق للتمييز الدقيق، أزرار عائمة في متناول يدك.
किसी भी एलिमेंट पर क्लिक करें और तुरंत चुनें। CSS सेलेक्टर्स की ऑटो पहचान। सटीक हाइलाइटिंग के लिए नीली बॉर्डर, फ्लोटिंग बटन आपकी उंगलियों पर।
Style Diff Tracking 样式差异追踪 Seguimiento de diferencias de estilo Suivi des différences de style Stil-Diff-Tracking Tracciamento differenze di stile Rastreamento de diferenças de estilo スタイル差分トラッキング 스타일 차이 추적 Отслеживание изменений стилей تتبع فروقات الأنماط स्टाइल डिफ ट्रैकिंग
Every adjustment auto-recorded as before/after diff. width: 200px → 300px, padding: 8px → 16px — crystal clear for AI.
每次调整自动记录为 before/after 差异。width: 200px → 300px, padding: 8px → 16px — AI 一目了然。
Cada ajuste se registra automáticamente como diferencia antes/después. width: 200px → 300px, padding: 8px → 16px — cristalino para la IA.
Chaque ajustement est automatiquement enregistré comme diff avant/après. width: 200px → 300px, padding: 8px → 16px — parfaitement clair pour l'IA.
Jede Anpassung wird automatisch als Vorher/Nachher-Diff aufgezeichnet. width: 200px → 300px, padding: 8px → 16px — glasklar für die KI.
Ogni regolazione viene registrata automaticamente come diff prima/dopo. width: 200px → 300px, padding: 8px → 16px — cristallino per l'IA.
Cada ajuste é registrado automaticamente como diff antes/depois. width: 200px → 300px, padding: 8px → 16px — perfeitamente claro para a IA.
すべての調整がbefore/afterの差分として自動記録されます。width: 200px → 300px, padding: 8px → 16px — AIにとって一目瞭然。
모든 조정이 before/after 차이로 자동 기록됩니다. width: 200px → 300px, padding: 8px → 16px — AI가 명확하게 이해합니다.
Каждая настройка автоматически записывается как diff до/после. width: 200px → 300px, padding: 8px → 16px — предельно ясно для ИИ.
كل تعديل يُسجّل تلقائيًا كفرق قبل/بعد. width: 200px → 300px, padding: 8px → 16px — واضح تمامًا للذكاء الاصطناعي.
हर एडजस्टमेंट before/after diff के रूप में ऑटो-रिकॉर्ड होता है। width: 200px → 300px, padding: 8px → 16px — AI के लिए बिल्कुल स्पष्ट।
Natural Language Tags 自然语言标签 Etiquetas en lenguaje natural Étiquettes en langage naturel Tags in natürlicher Sprache Tag in linguaggio naturale Tags em linguagem natural 自然言語タグ 자연어 태그 Теги на естественном языке وسوم باللغة الطبيعية प्राकृतिक भाषा टैग
Add text tags to describe intent: "button color too dark", "spacing too wide". AI understands your design thinking, not just parameter changes.
为元素添加文字标签描述意图：「按钮颜色太深」「间距太大」。让 AI 理解你的设计思路，不仅仅是参数变化。
Agrega etiquetas de texto para describir la intención: "color del botón demasiado oscuro", "espaciado demasiado amplio". La IA entiende tu pensamiento de diseño, no solo los cambios de parámetros.
Ajoutez des étiquettes textuelles pour décrire l'intention : « couleur du bouton trop foncée », « espacement trop large ». L'IA comprend votre vision du design, pas seulement les changements de paramètres.
Füge Texttags hinzu, um die Absicht zu beschreiben: „Buttonfarbe zu dunkel", „Abstand zu groß". Die KI versteht dein Designdenken, nicht nur Parameteränderungen.
Aggiungi tag testuali per descrivere l'intento: "colore del pulsante troppo scuro", "spaziatura troppo ampia". L'IA comprende il tuo pensiero progettuale, non solo i cambiamenti dei parametri.
Adicione tags de texto para descrever a intenção: "cor do botão muito escura", "espaçamento muito grande". A IA entende seu pensamento de design, não apenas mudanças de parâmetros.
テキストタグで意図を説明：「ボタンの色が暗すぎる」「余白が広すぎる」。AIはパラメータの変更だけでなく、あなたのデザイン意図を理解します。
텍스트 태그로 의도를 설명하세요: "버튼 색상이 너무 어두움", "간격이 너무 넓음". AI가 파라미터 변경뿐만 아니라 디자인 의도를 이해합니다.
Добавляйте текстовые теги для описания намерения: «цвет кнопки слишком тёмный», «отступ слишком большой». ИИ понимает ваше дизайн-мышление, а не только изменения параметров.
أضف وسوم نصية لوصف النية: "لون الزر داكن جدًا"، "المسافات واسعة جدًا". الذكاء الاصطناعي يفهم تفكيرك التصميمي، وليس فقط تغييرات المعاملات.
इंटेंट का वर्णन करने के लिए टेक्स्ट टैग जोड़ें: "बटन का रंग बहुत गहरा है", "स्पेसिंग बहुत ज़्यादा है"। AI सिर्फ पैरामीटर बदलाव नहीं, बल्कि आपकी डिज़ाइन सोच समझता है।
Instant Feedback + Undo/Redo 即时反馈 + 撤销重做 Retroalimentación instantánea + Deshacer/Rehacer Retour instantané + Annuler/Rétablir Sofortiges Feedback + Rückgängig/Wiederherstellen Feedback istantaneo + Annulla/Ripristina Feedback instantâneo + Desfazer/Refazer 即時フィードバック + 元に戻す/やり直し 즉각적인 피드백 + 실행 취소/다시 실행 Мгновенная обратная связь + Отмена/Повтор ملاحظات فورية + تراجع/إعادة तुरंत फीडबैक + पूर्ववत/फिर से करें
Floating buttons modify DOM directly — WYSIWYG. Full operation history, Cmd+Z to undo anytime. Experiment with confidence.
浮动按钮直接修改 DOM，所见即所得。完整操作历史，Cmd+Z 随时回退，放心实验。
Los botones flotantes modifican el DOM directamente — WYSIWYG. Historial completo de operaciones, Cmd+Z para deshacer en cualquier momento. Experimenta con confianza.
Les boutons flottants modifient le DOM directement — WYSIWYG. Historique complet des opérations, Cmd+Z pour annuler à tout moment. Expérimentez en toute confiance.
Schwebende Buttons ändern das DOM direkt — WYSIWYG. Vollständiger Operationsverlauf, Cmd+Z zum jederzeitigen Rückgängigmachen. Experimentiere mit Zuversicht.
I pulsanti flottanti modificano il DOM direttamente — WYSIWYG. Cronologia completa delle operazioni, Cmd+Z per annullare in qualsiasi momento. Sperimenta con fiducia.
Botões flutuantes modificam o DOM diretamente — WYSIWYG. Histórico completo de operações, Cmd+Z para desfazer a qualquer momento. Experimente com confiança.
フローティングボタンがDOMを直接変更 — WYSIWYG。完全な操作履歴、Cmd+Zでいつでも元に戻せます。安心して実験してください。
플로팅 버튼이 DOM을 직접 수정합니다 — WYSIWYG. 전체 작업 기록, Cmd+Z로 언제든 실행 취소. 자신감을 가지고 실험하세요.
Плавающие кнопки изменяют DOM напрямую — WYSIWYG. Полная история операций, Cmd+Z для отмены в любой момент. Экспериментируйте уверенно.
الأزرار العائمة تعدّل DOM مباشرة — ما تراه هو ما تحصل عليه. سجل عمليات كامل، Cmd+Z للتراجع في أي وقت. جرّب بثقة.
फ्लोटिंग बटन DOM को सीधे संशोधित करते हैं — WYSIWYG। पूरा ऑपरेशन हिस्ट्री, Cmd+Z से कभी भी पूर्ववत करें। आत्मविश्वास से प्रयोग करें।
Local-First, Full Privacy 本地优先，完全隐私 Local primero, privacidad total Local d'abord, confidentialité totale Lokal zuerst, volle Privatsphäre Prima locale, privacy totale Local primeiro, privacidade total ローカルファースト、完全プライバシー 로컬 우선, 완전한 프라이버시 Локально, полная конфиденциальность محلي أولاً، خصوصية كاملة लोकल-फर्स्ट, पूर्ण गोपनीयता
Everything runs locally. We don't collect any data. Your pages and code stay on your device — always.
所有操作在本地完成，不收集任何数据。你的页面和代码始终在你自己的设备上。
Todo se ejecuta localmente. No recopilamos ningún dato. Tus páginas y código permanecen en tu dispositivo — siempre.
Tout fonctionne localement. Nous ne collectons aucune donnée. Vos pages et votre code restent sur votre appareil — toujours.
Alles läuft lokal. Wir sammeln keine Daten. Deine Seiten und dein Code bleiben auf deinem Gerät — immer.
Tutto funziona in locale. Non raccogliamo alcun dato. Le tue pagine e il tuo codice rimangono sul tuo dispositivo — sempre.
Tudo roda localmente. Não coletamos nenhum dado. Suas páginas e código permanecem no seu dispositivo — sempre.
すべてローカルで動作します。データは一切収集しません。あなたのページとコードは常にあなたのデバイス上にあります。
모든 것이 로컬에서 실행됩니다. 어떤 데이터도 수집하지 않습니다. 페이지와 코드는 항상 사용자의 기기에만 저장됩니다.
Всё работает локально. Мы не собираем никаких данных. Ваши страницы и код остаются на вашем устройстве — всегда.
كل شيء يعمل محليًا. لا نجمع أي بيانات. صفحاتك وشفرتك تبقى على جهازك — دائمًا.
सब कुछ लोकली चलता है। हम कोई डेटा एकत्र नहीं करते। आपके पेज और कोड हमेशा आपके डिवाइस पर रहते हैं।
Precise Description,
Precise Modification.
No more guessing from screenshots. No more back-and-forth. DOMPrompter makes every AI code change pixel-perfect.
精确描述，精准修改。
告别截图猜测，告别反复沟通。DOMPrompter 让每一次 AI 代码修改都精确到位。
Descripción precisa,
Modificación precisa.
No más adivinanzas con capturas de pantalla. No más idas y vueltas. DOMPrompter hace que cada cambio de código con IA sea perfecto al píxel.
Description précise,
Modification précise.
Fini les devinettes à partir de captures d'écran. Fini les allers-retours. DOMPrompter rend chaque modification de code par l'IA pixel-perfect.
Präzise Beschreibung,
Präzise Änderung.
Kein Raten mehr anhand von Screenshots. Kein Hin und Her mehr. DOMPrompter macht jede KI-Codeänderung pixelgenau.
Descrizione precisa,
Modifica precisa.
Basta indovinare dagli screenshot. Basta con gli avanti e indietro. DOMPrompter rende ogni modifica del codice IA pixel-perfect.
Descrição precisa,
Modificação precisa.
Chega de adivinhar por capturas de tela. Chega de idas e vindas. DOMPrompter torna cada alteração de código por IA perfeita ao pixel.
正確な記述、
正確な修正。
スクリーンショットからの推測はもう不要。何度ものやり取りも不要。DOMPrompterはAIのコード変更をピクセルパーフェクトにします。
정확한 설명,
정확한 수정.
스크린샷으로 추측하는 것은 이제 그만. 끝없는 소통도 이제 그만. DOMPrompter는 모든 AI 코드 변경을 픽셀 퍼펙트하게 만듭니다.
Точное описание,
Точное изменение.
Больше никаких догадок по скриншотам. Больше никаких уточнений. DOMPrompter делает каждое изменение кода ИИ идеальным до пикселя.
وصف دقيق،
تعديل دقيق.
لا مزيد من التخمين من لقطات الشاشة. لا مزيد من التواصل المتكرر. DOMPrompter يجعل كل تعديل كود بالذكاء الاصطناعي مثاليًا بدقة البكسل.
सटीक विवरण,
सटीक संशोधन।
स्क्रीनशॉट से अनुमान लगाना बंद। बार-बार संवाद करना बंद। DOMPrompter हर AI कोड बदलाव को पिक्सल-परफेक्ट बनाता है।