让 AI 写浏览器脚本不再猜选择器：10xProductivity 的 discover-ui-surface

让 AI 写浏览器脚本不再猜选择器：10xProductivity 的 discover-ui-surface

你有没有过这种经历：让 Claude Code 写一段浏览器自动化脚本，它靠源码猜 DOM、猜 class，结果网站一改版就全废了？更惨的是 JS-heavy 的 SPA，你根本看不到真实渲染节点在哪。

discover-ui-surface 这个 Skill 解决问题的思路非常直接：别猜了，先探一遍。

它的工作流很清爽：你手动走一遍关键 UI 流程，它帮你自动记录三类信息——哪个 DOM 元素可点击、这些操作会触发什么网络请求、表单字段的真实结构长什么样。最终输出一份可复用的 selector + endpoint 参考图，可以直接喂给 Playwright、Puppeteer 之类的自动化脚本。

对，就是那种“跑一遍，留地图”的思路，但做得相当扎实。

它支持的探针模式也很灵活：

• Agent Browser 模式：低 token 开销，适合快速侦察
• Chrome DevTools Recorder：录制真实用户操作
• Playwright observer / codegen+trace：直接生成可执行脚本骨架

对我这种偶尔要写爬虫或自动化脚本的人来说，最大的价值是：用一次手动探索换一份持久化地图，以后同类页面不用再反复调试。GitHub 461 star，项目里这套 10xProductivity 家族还有 assistant-orchestrator、colleague-distillation 等配套 skill，整体完成度很高。

如果你也在被动态页面、复杂 SPA、内部系统的自动化折腾，这个值得装。

GitHub: https://github.com/ZhixiangLuo/10xProductivity/tree/main/.cursor/skills/discover-ui-surface

GitHub: https://github.com/ZhixiangLuo/10xProductivity/tree/main/.cursor/skills/discover-ui-surface