最近用 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
欢迎使用，反馈，共建～
Select Language