Click any UI, describe what you want to change, or adjust the design with inspector-style controls. PinFix sends Claude Code the exact source location and visual intent.
Tune visual details in the browser, then send Claude Code structured changes tied to the selected source element.
Selected button inside a live app preview.
ContinueThree steps from idea to implementation. No context switching required.
Press Alt+Shift+Z to enter edit mode. Hover over any element - it highlights instantly. Click to place a pin.
Type what you want to change, or use Adjust design for text, layout, spacing, size, color, border, and typography controls.
Claude Code edits your source code directly. HMR applies the change instantly. Continue the conversation to refine.
Everything you need for Claude Code-assisted visual development.
Crosshair mode highlights every component. Click to pin - no need to search for file paths or line numbers.
Inspector-style controls turn visual tweaks into structured context for Claude Code, including layout, spacing, size, color, border, text, and typography.
Source code edits trigger Hot Module Replacement. See changes appear in under a second, no page refresh needed.
Works with React, Vue, and any JSX/TSX component. Automatically traces source locations via build-time transforms.
One plugin line in your build config. The channel server spawns and cleans up automatically.
Completely stripped in production builds. Zero runtime overhead, no bundle size impact for your users.
Up and running in under a minute.
// 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
First-class support for major bundlers and frameworks.