开源个小插件：直接在浏览器中批注 UI 修改内容，本地 Claude Code 实时修改

最近用 Claude Code 调前端 UI 细节的时候，经常遇到一个挺烦的小问题：

需要费劲写一段 prompt 去告诉它：到底要改页面上的哪里。

比如这种需求：

“右下角最后一个卡片里的那个按钮小一点”

“中间那段文字，左边跟上面的标题对齐一下”

页面简单的时候还好，但一旦有重复卡片、嵌套组件或者布局稍微复杂一点，CC 还容易理解偏。

所以我做了个小工具，PinFix ( Pin it, Fix it )

它的思路很简单：

直接在本地运行的前端页面上，点一下你想改的地方，留一句批注，然后把这条批注和对应的源码位置一起交给你本地的 Claude Code 。

用起来大概是这样：

• 按 Alt + Shift + Z 进入批注模式


• 点一下页面上想改的地方，写一句批注


• PinFix 会把「批注 + 源码位置」一起整理出来


• 再交给 Claude Code 去改代码


• 改完之后，HMR 直接就能看到效果

这样调整样式完全不需要离开浏览器，体验更丝滑～

它是一个前端开发环境插件，目前支持：

• Vite


• Webpack


• Rspack


• Rsbuild

运行 dev server 时，会自动往页面元素里注入源码位置信息，所以当你在页面上批注时，就可以知道准确获取到这个 UI 元素对应的源码位置。

项目地址：

https://github.com/ForeverSc/pinfix

欢迎使用，反馈，共建～