{"id":48149852,"url":"https://github.com/nikolasdehor/visual-eyes","last_synced_at":"2026-04-04T17:08:52.530Z","repository":{"id":347511512,"uuid":"1194287007","full_name":"nikolasdehor/visual-eyes","owner":"nikolasdehor","description":"Give Claude Code eyes to see and analyze running web applications. Visual testing, regression detection, and auto-fix.","archived":false,"fork":false,"pushed_at":"2026-03-28T07:51:37.000Z","size":42,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-28T12:27:33.787Z","etag":null,"topics":["ai","claude-code","playwright","regression-testing","screenshot","skill","visual-testing"],"latest_commit_sha":null,"homepage":null,"language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikolasdehor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-28T06:26:31.000Z","updated_at":"2026-03-28T07:51:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nikolasdehor/visual-eyes","commit_stats":null,"previous_names":["nikolasdehor/visual-eyes"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/nikolasdehor/visual-eyes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolasdehor%2Fvisual-eyes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolasdehor%2Fvisual-eyes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolasdehor%2Fvisual-eyes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolasdehor%2Fvisual-eyes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikolasdehor","download_url":"https://codeload.github.com/nikolasdehor/visual-eyes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikolasdehor%2Fvisual-eyes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31407644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","claude-code","playwright","regression-testing","screenshot","skill","visual-testing"],"created_at":"2026-04-04T17:08:51.855Z","updated_at":"2026-04-04T17:08:52.517Z","avatar_url":"https://github.com/nikolasdehor.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/banner.svg\" width=\"800\" alt=\"Visual Eyes - Give Claude Code eyes to see your app\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eGive Claude Code eyes to see your running app\u003c/strong\u003e\u003cbr\u003e\n  \u003csub\u003eScreenshot, analyze, fix, verify - the visual feedback loop AI coding assistants were missing\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-install\"\u003eInstall\u003c/a\u003e ·\n  \u003ca href=\"#-how-it-works\"\u003eHow it Works\u003c/a\u003e ·\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e ·\n  \u003ca href=\"#-usage-examples\"\u003eExamples\u003c/a\u003e ·\n  \u003ca href=\"#-requirements\"\u003eRequirements\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/nikolasdehor/visual-eyes?style=flat-square\u0026labelColor=0d0d1a\u0026color=7c3aed\" alt=\"Stars\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue?style=flat-square\u0026labelColor=0d0d1a\u0026color=2563eb\" alt=\"License\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Claude_Code-compatible-06b6d4?style=flat-square\u0026labelColor=0d0d1a\" alt=\"Claude Code compatible\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Playwright-powered-45ba4b?style=flat-square\u0026labelColor=0d0d1a\" alt=\"Playwright powered\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/zero-config-a78bfa?style=flat-square\u0026labelColor=0d0d1a\" alt=\"Zero config\"\u003e\n\u003c/p\u003e\n\n---\n\n## The Problem\n\nClaude Code can write incredible code - but it's **blind to the result**.\n\nFrontend devs waste 10 minutes describing a visual bug in words, while Claude guesses what's wrong and ships fixes that introduce new problems. You describe, Claude guesses, you describe again. Repeat until frustration.\n\n**Visual Eyes gives Claude actual vision.** Take a screenshot, Claude sees it, Claude fixes it, Claude verifies the fix - in one loop.\n\n---\n\n## How it Works\n\n```\nYou: \"how does the dashboard look?\"\n\n  -\u003e Visual Eyes takes screenshot of localhost:3000\n  -\u003e Claude SEES the image (multimodal vision)\n  -\u003e Claude identifies: broken grid, misaligned header, overflow text\n  -\u003e Claude edits the code\n  -\u003e Takes new screenshot to verify\n  -\u003e \"Fixed. Header is now 20px lower, grid realigned. Want to check mobile?\"\n```\n\nNo more guessing. No more describing pixels. Just fix it.\n\n---\n\n## Install\n\n```bash\n# One-liner (recommended)\ncurl -fsSL https://raw.githubusercontent.com/nikolasdehor/visual-eyes/main/install.sh | bash\n```\n\n```bash\n# Claude Code plugin\nclaude plugins install github:nikolasdehor/visual-eyes\n```\n\n```bash\n# Manual (git)\ngit clone https://github.com/nikolasdehor/visual-eyes.git\ncp -r visual-eyes/skills/visual-eyes ~/.claude/skills/\n```\n\nAfter installing, **restart Claude Code** and say anything - it just works.\n\n---\n\n## Features\n\n| | Feature | What it does |\n|---|---|---|\n| 📸 | **Screenshot Capture** | Desktop, mobile (iPhone/Android), full-page, specific routes |\n| 👁 | **Visual Analysis** | Claude sees and understands layout, colors, typography, spacing |\n| 🔁 | **Auto-Fix Loop** | Identify bug -\u003e edit code -\u003e screenshot -\u003e verify -\u003e repeat |\n| 🔬 | **Visual Regression** | Before/after pixel diff with highlighted changes |\n| 📱 | **Responsive Testing** | Desktop + tablet + mobile side by side in one command |\n| ⚡ | **Zero Config** | Works with any localhost app - React, Next.js, Vue, anything |\n\n---\n\n## Usage Examples\n\nJust talk to Claude naturally. The skill activates automatically.\n\n```\n\"screenshot the homepage\"\n```\n\n```\n\"how does the dashboard look on mobile?\"\n```\n\n```\n\"there's a visual bug on the settings page - find and fix it\"\n```\n\n```\n\"compare before and after my CSS changes\"\n```\n\n```\n\"check all routes for visual regressions\"\n```\n\n```\n\"the sidebar is overlapping the content, fix it\"\n```\n\n```\n\"show me desktop, tablet, and mobile side by side\"\n```\n\n---\n\n## Requirements\n\n- **Claude Code** - any plan (Free, Pro, Teams)\n- **Node.js 18+** - for Playwright\n- **Playwright browsers** - installed automatically, or run manually:\n\n```bash\nnpx playwright install chromium\n```\n\nThat's it. No API keys. No config files. No setup wizard.\n\n---\n\n## How It Compares\n\n| | Without Visual Eyes | With Visual Eyes |\n|---|---|---|\n| See your app | Describe bugs in words | Claude sees the actual screenshot |\n| Fix UI bugs | Manual back-and-forth guessing | Automated see-fix-verify loop |\n| Regression testing | \"It looked fine before...\" | Pixel-level diff, red = changed |\n| Responsive check | Resize browser manually | Desktop + tablet + mobile at once |\n| Fix verification | Guess and deploy | Screenshot confirms the fix worked |\n\n---\n\n## Roadmap\n\n- [x] v1.0 - Screenshot capture + visual analysis + auto-fix loop\n- [x] v1.0 - Visual regression diff (before/after pixel comparison)\n- [x] v1.0 - Responsive testing (desktop + tablet + mobile)\n- [ ] v1.1 - Video recording of interactions\n- [ ] v1.2 - Accessibility audit (WCAG compliance check)\n- [ ] v1.3 - Component isolation (screenshot a single React component)\n- [ ] v2.0 - Visual test suite with CI integration\n\n---\n\n## Contributing\n\nPRs are welcome. If you find a bug or want a feature, open an issue.\n\nIf you're building a Claude Code skill and want ideas, this repo's structure (`skills/visual-eyes/SKILL.md`) is a good reference for how skills are built.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\n---\n\n\u003cp align=\"center\"\u003e\n  Built by \u003ca href=\"https://github.com/nikolasdehor\"\u003eNikolas de Hor\u003c/a\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003csub\u003eBecause AI should see what it builds\u003c/sub\u003e\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolasdehor%2Fvisual-eyes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikolasdehor%2Fvisual-eyes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikolasdehor%2Fvisual-eyes/lists"}