🌿 VibeLens v1.0.0 · Botanical Open Source MCP Engine

Your AI writes the UI.
VibeLens lets it see it.

One MCP tool call returns a desktop, tablet or mobile screenshot, console & network diagnostics, and a token-optimized DOM snapshot preserving real IDs and Tailwind classes. Stop guessing selectors.

INSTALL IN ONE COMMAND VIEW ON GITHUB

bash — install plugin

$ claude plugin marketplace add soumyachk101/VibeLens

✨ Live Interactive Demo · Simulator

Experience VibeLens in Action

Click the 4 signal tabs below or hit "SIMULATE MCP CAPTURE" to see how VibeLens diagnoses and verifies UI fixes on localhost in real time.

Localhost Viewport (Desktop 1280x800)

Shopping Cart Checkout

Botanical Ceramic Planter $48.00

Sage Leaf Extract Tea $18.00

⚠️ Button overflow detected: Pay button overlaps order summary footer!

ERR Hydration Mismatch: <button id="checkout-btn"> server render did not match client text.

404 POST http://localhost:3000/api/checkout/validate - 404 (Not Found)

WARN [DOM Budget] 193.5 KB raw HTML reduced to 8.8 KB clean tokens (95.4% saved).

<div class="checkout-card p-8 rounded-3xl bg-surface">
  <h3 class="font-serif text-xl">Shopping Cart Checkout</h3>
  <div class="cart-item flex justify-between">...</div>
  
  <!-- VibeLens pinpoints exact offending element -->
  <button id="checkout-btn" class="bg-terracotta w-full overflow-visible -mb-12">
    Complete Purchase Now ($66.00)
  </button>
</div>

🤖 Claude Code / Cursor Assistant Reasoning:

"Based on VibeLens screenshot and simplified DOM evidence: #checkout-btn has -mb-12 causing card overflow. Removing negative margin and fixing 404 endpoint route in server.ts."

- <button id="checkout-btn" class="bg-terracotta w-full overflow-visible -mb-12">

+ <button id="checkout-btn" class="bg-terracotta w-full rounded-full py-3 mt-4">

✓ Verified Fix with 2nd VibeLens Re-capture!

VibeLens capturing a dashboard where a button overflows its card, reading the offending classes out of the DOM, and re-capturing to confirm the fix — Every frame is real tool output, not a mockup — regenerate it with `npm run assets:gif`.

One call, three signals

A screenshot alone misses hydration errors. A DOM dump alone misses what the page looks like. VibeLens returns both, plus the diagnostics, in a single response.

Screenshot

Base64 JPEG at desktop, tablet or mobile. The model sees layout, spacing, colour, overflow and hierarchy for itself.

Console and network

Console errors and warnings, uncaught exceptions, and requests that failed — including 4xx and 5xx responses a screenshot cannot show.

Sanitized DOM

Structure, ids, classes, ARIA and test hooks. Scripts, styles, base64 blobs and SVG path data are stripped in the browser, before the payload is built.

Twelve skills, four subagents, two advisories

The raw tool gives the model eyes. The Claude Code plugin gives it a method — including a design-craft set aimed at the problem screenshots alone do not fix: UI that works and still looks like nobody designed it.

Debugging

check-ui: Capture, read the evidence, locate the source, fix, re-capture.
console-triage: Group failures by root cause and fix by severity.
responsive-audit: Three viewports, narrowest breakpoint first.
a11y-audit: Alt text, accessible names, labels, contrast, tap targets.

Design craft

design-review: Does the page read as designed, or as generated?
type-system: Scale, measure, leading, tracking, numerals.
color-system: Tokens, ramps, contrast, colour as state.
layout-audit: Spacing scale, grouping, optical alignment.
motion-system: Duration, easing, reduced-motion.
micro-interactions: The full state matrix for every control.
polish-pass: The last ten percent, item by item.

Verification

before-after: Identical parameters before and after, then a concrete diff.

Subagents

ui-debugger: Evidence-driven bug fixing.
ui-reviewer: Independent pre-merge review.
design-reviewer: Taste verdict, backed by the proving class.
frontend-builder: Tokens before components, every state built.

The VibeLens loop: you ask, the model calls the tool, headless Chromium captures, one payload returns three signals, the model reasons from evidence, then re-captures to verify

It protects your context window

A raw document.body.outerHTML from a real app is mostly noise. The sanitizer runs inside the page, so the noise never becomes tokens. This figure is measured, and you can reproduce it with npm run assets:measure.

Measured: 193,520 raw characters reduce to 8,890 after sanitization, a 95.4 percent reduction, with every utility class preserved

Local only, by construction

VibeLens drives a real browser on your machine, so every URL is checked against an allowlist before Chromium launches. Public hosts, DNS names, link-local addresses and cloud metadata endpoints are refused, and the tool is read-only: it observes a page, it cannot click, type or scroll.

Security policy How it works Decision records

Your AI writes the UI. VibeLens lets it see it.