让你的Vibe Coding指哪打哪

🚀 Element2Prompt：让AI IDE/CLI看见页面的神奇工具

Element2Prompt是一款革命性的Chrome浏览器扩展，它能为你的AI IDE/CLI（如Claude Code、Cursor等）提供"视觉感知"能力，让AI能够真正"看到"并理解网页元素，从而生成更精准的代码提示。

📦 完全开源项目：本项目基于MIT开源协议，完全免费开源。欢迎访问 GitHub仓库 查看源代码、提交Issue或贡献代码。

❓ 为什么需要Element2Prompt？

传统的AI IDE/CLI虽然强大，但它们无法直接感知网页元素。Element2Prompt填补了这一空白，让AI能够：

• 🎯 精准识别网页上的元素结构
• 🔗 理解元素之间的关系
• 💡 基于实际页面元素生成更准确的代码
• ⚡ 大幅提高前端开发效率

📦 安装方法

1. GitHub下载项目并解压
2. 打开Chrome浏览器，进入 chrome://extensions/
3. 开启"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择Element2Prompt项目文件夹
   

📖 基本使用指南

🔄 核心工作流程

1. 🚀 启动扩展
   • 点击浏览器工具栏中的Element2Prompt图标打开Popup界面

2. 🎯 进入选择模式

   • 点击"进入选择模式"按钮，开始选择页面元素

3. 🖱️ 选择目标元素

   • 在页面中移动鼠标，元素会被高亮显示
   • 点击想要选择的元素，选中后会显示为蓝色边框

4. ✏️ 输入修改需求

   • 在悬浮工具栏的"自定义指令"输入框中填写你的修改需求（必填）
   • 例如：修改字体颜色为红色、在这个元素下方新增一个表格、这个组件的宽度改为自适应

5. 📋 生成提示词

   • 点击悬浮工具栏中的"确认选中"按钮
   • 系统会自动填充提示词模板并复制到剪贴板

6. 🤖 在AI IDE中使用

   • 切换到你的AI IDE/CLI
   • 粘贴生成的提示词
   • AI将基于实际页面元素生成精准的代码解决方案
     

⚙️ 高级功能：自定义提示词模板

Element2Prompt支持高度自定义的提示词模板，让你可以根据自己的需求调整输出格式：

1. 🔧 打开配置页面

   • 在Popup界面中点击"配置提示词模板"链接

2. ✏️ 编辑模板

   • 使用以下变量占位符定制你的模板：
     • {userInstruction} - 用户自定义指令（必填）
     • {pageUrl} - 页面地址
     • {html} - 选中元素的HTML
     • {css} - 选中元素的CSS样式
     • {domPath} - DOM路径（从根元素到选中元素）
     • {tagName} - 元素标签名
     • {id} - 元素ID
     • {className} - 元素类名
     • {textContent} - 元素文本内容

3. 💾 保存配置

   • 点击"保存"按钮保存你的自定义模板

✨ 为什么选择Element2Prompt？

• 🎯 精准定位：直接选择页面元素，避免描述歧义
• 🤖 智能填充：自动收集元素信息，无需手动复制粘贴
• 🔌 高度集成：支持市面上所有主流AI IDE/CLI
• 🆓 完全免费开源：基于MIT开源协议，完全免费开源，可自由使用、修改和分发

Element2Prompt就像为你的AI IDE装上了一双眼睛，让它能够真正"看到"并理解网页内容，从而生成更准确、更实用的代码解决方案。

❓ 常见问题解答

Q: 🌐 支持哪些浏览器？

A: 支持Chrome浏览器和所有基于Chromium的浏览器（如Edge、Brave等）

Q: 💰 需要付费吗？

A: 完全免费，基于MIT开源协议。项目完全开源，源代码托管在 GitHub

Q: 🔄 如何更新扩展？

A: 只需重新加载扩展程序即可应用最新版本

Q: 🚫 有使用限制吗？

A: 没有任何使用限制，可以在任何网页上使用

🔗 开源项目

Element2Prompt是一个完全开源的项目，基于MIT开源协议发布。我们欢迎所有开发者参与贡献！

• 🌟 GitHub仓库：https://github.com/zzusp/element2prompt
• 📄 开源协议：MIT License
• 🤝 贡献方式：欢迎提交Issue、Pull Request或Star支持项目

现在，为你的AI IDE装上这双神奇的眼睛，体验前所未有的开发效率提升吧！ 🎉