visual-eyes

Give Claude Code eyes to see your running app
_{Screenshot, analyze, fix, verify - the visual feedback loop AI coding assistants were missing}

What it does · Install · How it Works · Features · Examples · Requirements

---

What it does

Visual Eyes is a Claude Code skill that bridges the gap between terminal-based AI coding and visual UI verification. It uses Playwright to capture screenshots of your local application, allowing Claude to "see" exactly what it is building.

By adding a visual layer to the development loop, it enables Claude to:

• Identify visual bugs, layout shifts, and CSS regressions automatically.
• Analyze the impact of code changes on different screen sizes (Mobile, Tablet, Desktop).
• Verify that its own fixes actually worked by comparing before-and-after states.
• Audit typography, colors, and spacing against design requirements.

---

The Problem

Claude Code can write incredible code - but it is blind to the result.

Frontend devs waste 10 minutes describing a visual bug in words, while Claude guesses what is wrong and ships fixes that introduce new problems. You describe, Claude guesses, you describe again. Repeat until frustration.

Visual Eyes gives Claude actual vision. Take a screenshot, Claude sees it, Claude fixes it, Claude verifies the fix - in one loop.

---

How it Works

You: "how does the dashboard look?"

  -> Visual Eyes takes screenshot of localhost:3000
  -> Claude SEES the image (multimodal vision)
  -> Claude identifies: broken grid, misaligned header, overflow text
  -> Claude edits the code
  -> Takes new screenshot to verify
  -> "Fixed. Header is now 20px lower, grid realigned. Want to check mobile?"

No more guessing. No more describing pixels. Just fix it.

---

Install

# One-liner (recommended)
curl -fsSL https://raw.githubusercontent.com/nikolasdehor/visual-eyes/main/install.sh | bash

# Claude Code plugin
claude plugins install github:nikolasdehor/visual-eyes

# Manual (git)
git clone https://github.com/nikolasdehor/visual-eyes.git
cp -r visual-eyes/skills/visual-eyes ~/.claude/skills/

After installing, restart Claude Code and say anything - it just works.

---

Features

	Feature	What it does
📸	Screenshot Capture	Desktop, mobile (iPhone/Android), full-page, specific routes
👁	Visual Analysis	Claude sees and understands layout, colors, typography, spacing
🔁	Auto-Fix Loop	Identify bug -> edit code -> screenshot -> verify -> repeat
🔬	Visual Regression	Before/after pixel diff with highlighted changes
📱	Responsive Testing	Desktop + tablet + mobile side by side in one command
⚡	Zero Config	Works with any localhost app - React, Next.js, Vue, anything

---

Usage Examples

Just talk to Claude naturally. The skill activates automatically.

"screenshot the homepage"

"how does the dashboard look on mobile?"

"there's a visual bug on the settings page - find and fix it"

"compare before and after my CSS changes"

"check all routes for visual regressions"

"the sidebar is overlapping the content, fix it"

"show me desktop, tablet, and mobile side by side"

---

Requirements

• Claude Code - any plan (Free, Pro, Teams)
• Node.js 18+ - for Playwright
• Playwright browsers - installed automatically, or run manually:

npx playwright install chromium

That's it. No API keys. No config files. No setup wizard.

---

How It Compares