中文

Preview

https://github.com/user-attachments/assets/e155481b-5582-476a-a108-4ba637cdb9d4

Click any UI, describe what you want to change, and PinFix lets Claude Code precisely find the source code and apply the edit in real time.

No context switching. No copy-pasting file paths. Just point, describe, and see HMR apply the change.

Why PinFix?

Traditional Claude Code workflows require you to explain where in the codebase something needs to change. PinFix flips this — you visually select the element in the browser, and it already knows the exact source file, line, and column. Your conversation starts with full context.

• The page is the context — Point to what you want to change directly on the UI, no window switching, file paths, or location explanations needed
• Real-time edits — Claude Code updates your source files directly, and HMR shows the result instantly
• Visual selection — Press Alt+Shift+Z to enter crosshair mode, hover to highlight elements, and click to place a pin
• Design adjustment panel — Use inspector-style controls for text, layout, spacing, size, color, border, and typography changes when words alone are too slow
• Framework Agnostic — Works with React, Vue, Svelte, or any JSX/TSX-based framework.
• Zero Config — One plugin line in your build config. The channel server spawns and cleans up automatically.

Quick Start

npm install -D @pinfix/plugin

Add the plugin to your build config:

Vite

// vite.config.ts
import pinfix from '@pinfix/plugin/vite'

export default defineConfig({
  plugins: [pinfix()],
})

Webpack

// webpack.config.js
import pinfix from '@pinfix/plugin/webpack'

export default {
  plugins: [pinfix()],
}

Rspack / Rsbuild

// rsbuild.config.ts
import pinfix from '@pinfix/plugin/rspack'

export default {
  tools: {
    rspack: { plugins: [pinfix()] },
  },
}

Then start your dev server as usual. PinFix activates automatically in development mode.

Usage

1. Start your dev server (npm run dev)
2. Press Alt + Shift + Z (Option + Shift + Z on Mac) to enter annotation mode
3. Hover over any component — it highlights with a blue border
4. Click to place a pin on the element
5. Type your change request, or open Adjust design to tweak layout, spacing, size, color, border, and text controls
6. Claude Code receives the selected source location plus your structured visual changes
7. Claude Code streams a response and edits your source code
8. HMR applies the change — see the result immediately
9. Continue the conversation for iterative refinements

How It Works

┌─────────────────┐        WebSocket         ┌─────────────────┐       Claude Agent SDK
│  Browser Client │  ◄──────────────────────► │  Channel Server │  ◄─────────────────────►  Claude Code
│  (Shadow DOM)   │        port 24816         │  (auto-spawned) │
└─────────────────┘                           └─────────────────┘

1. Build plugin transforms your JSX/TSX/Vue files to inject data-pinfix-source attributes with file path, line, and column metadata.
2. Client overlay renders inside Shadow DOM — isolated from your app's styles. Handles pin placement, chat UI, design adjustment controls, and WebSocket communication.
3. Channel server spawns automatically alongside your dev server. All pins share a workspace-level Claude Code session with full project context.

Configuration

pinfix({
  port: 24816, // WebSocket port (default: 24816)
  hotkey: 'alt+shift+z', // Activation hotkey
  fab: true, // Show floating action button
  prompt: 'Custom system prompt...', // Additional context for Claude Code
  escapeTags: ['Layout', 'Provider'], // Skip these wrapper components
  match: /\.(tsx|jsx|vue)$/, // Only transform matching files
  exclude: /node_modules/, // Exclude from transform
  debug: false, // Enable debug logging
})

Supported Bundlers

Requirements

• Node.js 18+
• Claude Code installed and usable on your machine
• A dev server with HMR support

Development

git clone https://github.com/foreversc/pinfix.git
cd pinfix
pnpm install
pnpm build
pnpm dev:vite-react   # Run the Vite + React example

License

MIT