点击任意 UI，描述你想改什么，或用检查器式控件调整设计。PinFix 会把精确源码位置和视觉意图发送给 Claude Code。
直接在浏览器中调整视觉细节，再把绑定到源码元素的结构化变更发送给 Claude Code。
实时应用预览中选中的按钮。
继续从想法到实现只需三步，无需切换窗口。
按下 Alt+Shift+Z 进入编辑模式，悬停高亮任意元素，点击放置标注点。
用自然语言输入修改需求，或打开 Adjust design 调整文本、布局、间距、尺寸、颜色、边框和字体控件。
Claude Code 直接编辑源代码，HMR 即时生效。继续对话可以迭代调整。
Claude Code 辅助可视化开发所需的一切。
十字准星模式高亮每个组件，点击固定标注，无需搜索文件路径或行号。
检查器式控件会把视觉微调转成 Claude Code 可用的结构化上下文，包括布局、间距、尺寸、颜色、边框、文本和字体。
源码编辑触发 HMR 热替换，修改在一秒内生效，无需刷新页面。
支持 React、Vue 及任何 JSX/TSX 组件，构建时自动追踪源码位置。
构建配置中加一行插件即可，通道服务自动启停。
生产构建中完全剔除，零运行时开销，不影响用户侧包体积。
一分钟内完成配置。
// 1. Install // npm install -D @pinfix/plugin // 2. Add plugin import pinfix from '@pinfix/plugin/vite' export default defineConfig({ plugins: [pinfix()] }) // 3. Start dev server and press Alt+Shift+Z
一流支持主流构建工具和框架。