🚀 用 AI 改网页总是对不上？试试这个 Chrome 扩展，让 AI 精准理解你的意图
大家好，我是一个经常在项目中尝试用 AI 辅助写前端代码的开发者。
最近在用 AI 工具（比如 Cursor、Kiro）调整网页样式的时候，遇到一个很典型的痛点：
🥲 传统做法的痛点
当我想让 AI 改网页时，必须写很长的 prompt：
- “请把导航栏下面的第二个蓝色按钮改成绿色”
- “在右侧卡片中的标题加粗，并且让字体更大”
问题是：
- 描述模糊 → AI 经常理解错。
- 效率低 → 我得花时间解释页面结构。
- 不够直观 → 说半天，还不如我自己改 CSS。
💡 有没有更好的方式？
最近发现了一个 Chrome 扩展 Snapmark。
它的核心功能很简单：
👉 直接在网页上点一下元素，扩展会自动抓取它的 DOM 信息（class、id、样式上下文）。
👉 把这些信息一并发给 AI 工具，AI 就能精准知道你要修改的是哪个元素。
⚡ Snapmark 能帮你做什么
- 🔍 可视化选择：鼠标点选网页元素，零歧义。
- 🧩 自动生成上下文：DOM、样式信息自动带上。
- 🤖 无缝对接 AI 工具：比如 Cursor，可以直接用。
- ⏱️ 提升效率：少写 80% prompt 描述，直接得到代码修改。
🎬 实际使用场景
举个例子：
我在预览页面里点选一个按钮 → Snapmark 抓取 DOM → 把信息交给 AI → AI 返回修改 CSS 的代码。
整个过程不需要再写一句“第二个蓝色按钮”，AI 能 100% 精准识别。
这对前端开发者、用 AI 做原型迭代的人来说，节省了大量沟通成本。
🛠️ 立即试用
Snapmark
👉 点击这里安装扩展
官网介绍：snapmark.org
🙌 想听听大家的看法
我也很好奇：
- 你在用 AI 写前端的时候，最大的痛点是什么？
- 对你来说，像 Snapmark 这种“减少 AI 理解偏差”的工具有用吗？
欢迎评论区交流～
📌 总结
- AI 很强，但常常“听不懂人话”。
- Snapmark 通过 DOM 捕获 → 让 AI 获得精确信息 → 提升前端开发体验。
如果你也在用 AI 改网页，不妨试试，也许能帮你省不少时间。
