The Problem

AI builds the UI.
You still squint at it.

Every time an AI tool generates frontend code, you context-switch to the browser, squint at the output, then type vague feedback like "the spacing looks off." The AI guesses what you mean. You repeat 3-4 times. A 30-second fix takes 10 minutes.

VibeLens gives you precision instead of guesswork.

1 Ask AI: "Build a dashboard" 0s

2 Alt-tab to browser, squint at result 30s

3 Type: "The spacing looks off..." 60s

4 AI guesses what you mean 90s

5 Repeat 3-4 times... 10min+

Features

Everything you need.
Nothing you don't.

Inspect, edit, annotate, diff — with accessibility checks, state forcing, layout overlays, and direct source write-back. All from a single Chrome extension.

VibeLens inspector panel overlaid on a web page, showing CSS editing with color picker and state forcing

01 — See

Click any element.
Know everything.

Click any element and instantly see its full CSS breakdown — box model, typography, background, borders, effects. Force hover/active/focus states to inspect interactive styles. WCAG contrast ratios shown inline with auto-fix suggestions.

✓ State forcing — inspect :hover, :active, :focus styles
✓ WCAG contrast checker with accessible color suggestions
✓ CSS variable resolution — see and edit design tokens
✓ Grid & Flexbox layout overlays

VibeLens inspector showing CSS properties with color picker and layout details

02 — Pin

Annotate visually.
Export precisely.

Drop annotation pins on any element. Each pin captures the DOM selector, computed styles, and a screenshot crop. Export as JSON or Markdown — structured feedback your AI tool can act on instantly.

◉ Pins anchored to DOM selectors, not pixel coords
◉ Survive reloads, resizes, layout shifts
◉ Export as AI-ready prompts in one click

VibeLens annotation pins on a web page with numbered markers and notes

03 — Fix

Tweak CSS live.
Source stays in sync.

Adjust colors, spacing, typography, and borders with visual controls. Changes persist across refreshes automatically. Connect a project folder to write directly to your source files — no CLI needed.

♦ Color pickers, spacing sliders, font selectors
♦ Changes persist across page refreshes
♦ One-click "Connect Folder" for direct source write-back
♦ Export as CSS or AI-ready prompt to clipboard

VibeLens CSS editing with color picker showing before and after comparison

04 — Diff

See what changed.
Not what you missed.

After every code change, VibeLens highlights exactly what changed in the UI. Green for new elements, yellow for modified, red for removed. Toggle with a keyboard shortcut.

■ Color-coded visual diff overlay
■ Toggle with Cmd+Shift+D
■ Compare iterations without squinting

VibeLens visual diff overlay showing added, modified, and removed elements

Setup

30 seconds. Zero config.

Download, unzip, load into Chrome. No CLI, no terminal, no Node.js, no accounts.

Download

Grab the extension zip (74 KB). That's the entire tool — nothing else to install.

Download vibelens-extension.zip

Load into Chrome

Unzip the file, then load it into Chrome:

1. Open chrome://extensions

2. Enable Developer mode (top-right)

3. Click Load unpacked

4. Select the unzipped folder

Click and edit

Open any localhost page from your dev server. Click the VibeLens icon in the toolbar. Click any element to inspect and edit its CSS.

localhost:5173 → Click VibeLens icon → Edit

Connect folder (optional)

Click "Connect Project Folder" in the panel footer to write CSS changes directly to your source files. One-time setup.

Connect Folder → Select project root → Auto write-back

Before & After

10 minutes → 30 seconds

Without VibeLens

01 Ask AI: "Build a dashboard"
02 AI generates code
03 Alt-tab to browser, squint at result
04 Type: "The spacing looks off and colors are wrong"
05 AI guesses what you mean
06 Repeat 3-4 more times...

~10+ minutes per iteration

With VibeLens

01 Ask AI: "Build a dashboard"
02 AI generates → VibeLens shows diff overlay
03 Click element → force :hover state → check contrast
04 Fix padding directly → auto-saves to source file
05 Copy remaining issues as AI prompt → done

~30 seconds per iteration

Under the Hood

One extension.
Two modes.

Everything runs in the browser. No external processes. Connect a folder for direct source write-back, or export changes to clipboard.

Chrome Extension

Floating inspector panel
State forcing (:hover, :focus)
WCAG contrast checker
CSS variable editor
Grid/Flex layout overlays
Visual diff renderer
Element screenshots

File System API

direct write-back

Your Source Files

CSS / SCSS / Less
JSX / TSX inline styles
Vue SFC / Svelte
Plain HTML
Auto hot-reload on save

Privacy

Your code stays yours.

VibeLens makes zero network requests. Everything runs on localhost. No telemetry, no analytics, no accounts.

🔒

100% Local

Extension only activates on localhost. Zero external requests.

👁

No Telemetry

No analytics, no usage tracking, no behavioral data. We don't know you exist and we like it that way.

🛠

Open Source

MIT licensed. Audit every line. The code is the proof. No trust required.

See it. Pin it.
Fix it.

AI builds the UI.
You still squint at it.