展示 HN:DOMPrompter – 点击一个 DOM 元素,获取结构化的 AI 编码提示

4作者: witnote大约 7 小时前原帖
构建这个工具是因为人工智能用户界面编码中最困难的部分并不是生成整个页面,而是准确告诉模型你想在最后微调阶段更改哪个元素。 DOMPrompter 是一款适用于 macOS 的工具,专为基于 DOM 的用户界面设计。你可以点击具体的元素,检查相关的标签、间距和位置上下文,描述所需的更改,并为 Cursor、Claude Code、Copilot 等生成更结构化的提示。 它可以与本地项目、静态 HTML 和使用网络技术构建的桌面应用程序配合使用。 GitHub: [https://github.com/hooosberg/DOMPrompter](https://github.com/hooosberg/DOMPrompter) Mac 应用商店: [https://apps.apple.com/us/app/domprompter-ai-coding-prompt/id6761685716?mt=12](https://apps.apple.com/us/app/domprompter-ai-coding-prompt/id6761685716?mt=12) 希望能收到从事前端或氛围编码风格工作流程的人的反馈。
查看原文
Built this because the hardest part of AI UI coding is not generating a whole page - it is telling the model exactly which element you want to change in the last-mile micro-tuning pass.<p>DOMPrompter is a macOS tool for DOM-based UIs. You click the exact element, inspect the relevant tag &#x2F; spacing &#x2F; position context, describe the change, and generate a more structured prompt for Cursor, Claude Code, Copilot, etc.<p>It works with localhost projects, static HTML, and desktop apps built with web technology.<p>GitHub: <a href="https:&#x2F;&#x2F;github.com&#x2F;hooosberg&#x2F;DOMPrompter" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hooosberg&#x2F;DOMPrompter</a> Mac App Store: <a href="https:&#x2F;&#x2F;apps.apple.com&#x2F;us&#x2F;app&#x2F;domprompter-ai-coding-prompt&#x2F;id6761685716?mt=12">https:&#x2F;&#x2F;apps.apple.com&#x2F;us&#x2F;app&#x2F;domprompter-ai-coding-prompt&#x2F;i...</a><p>Would love feedback from people doing front-end &#x2F; vibe-coding style workflows.