Vibe Check

Real-time design feedback and vibe checks for your web apps using AI.

Vibe Check is your on-demand AI design mentor and visual redline auditor. Whether you are a frontend developer, UI/UX designer, founder, or vibe-coding your first side project, Vibe Check instantly audits your webpage’s visual design and gives you actionable, pinned UI/UX feedback right in an interactive canvas. No more guessing why a layout looks "off." In seconds, Vibe Check scans your page, analyzes visual hierarchy, typography, contrast, spacing, and alignment, and opens a dedicated Redline Inspector where every critique is pinned directly to exact UI elements with ready-to-copy code fixes for your AI coding assistants (Cursor, Claude, Copilot, ChatGPT, and more). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ WHAT'S NEW IN VERSION 2.2 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧠 Executive Vibe Summary: Collapsible summary card at the top of the Redline Inspector sidebar pairs the page's Vibe Verdict badge directly with a punchy headline and multi-sentence design assessment. 💻 Interactive AI Fix Prompt Builder: Select which UI/UX and accessibility fixes to include in your queue, preview or edit the combined Markdown prompt, and copy all selected fixes in one click. 💎 Refined 7-Vibe Spectrum & Grading Rubric: Updated Vibe classifications (Immaculate, Dialed In, Sleek & Minimal, Bold & Expressive, Buttoned-Up, Overcaffeinated, Rough Draft) with distinct studio badge palettes and consistent AI evaluation criteria. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 Instant Vibe Scoring & Executive Summary Find out if your design vibe is "Immaculate," "Dialed In," "Sleek & Minimal," "Bold & Expressive," "Buttoned-Up," "Overcaffeinated," or "Rough Draft" with a punchy tagline and executive design overview. 📍 Interactive Visual Redlines Explore clickable pins and bounding boxes directly overlaid on your page screenshot. Click any annotation card to smoothly zoom and pan to the exact element. 🔍 Comprehensive UI/UX Feedback Actionable critiques categorized into: Needs Improvement: Hierarchy, spacing, typography scale, alignment, and visual balance. Accessibility: Color contrast ratios, small touch targets, and readability. Working Well: Highlights effective design patterns and strengths. 💻 Interactive AI Prompt Builder & One-Click Fixes Every recommendation includes an actionable CSS/Tailwind prompt snippet. Toggle which fixes to include in your queue, preview or edit the combined prompt, and copy a single structured fix list straight into Cursor, GitHub Copilot, Claude, or ChatGPT to implement fixes in seconds. ⚡ Bring Your Own Key (BYOK) You stay in complete control of your data and usage. Vibe Check supports Google Gemini (including free-tier models like Gemini 3.5 Flash and Gemini 3.1 Flash Lite) with support for OpenAI and Claude coming soon. 🔒 Privacy First & Client-Side Only No proprietary servers or tracking databases. Screenshots and DOM manifests are processed purely in client-side memory (IndexedDB / local storage). API requests are sent directly and securely over HTTPS from your browser to your configured AI provider. We do not sell your data, track browsing history, or use personal data for advertising. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🛠️ HOW TO USE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 Click the Vibe Check icon in your browser toolbar on any webpage or localhost app. (First time) Add your Gemini API key in Settings (takes 30 seconds via Google AI Studio). (Optional) Add custom context (e.g., "Auditing for dark mode readability"). Click "Run Vibe Check & Open Canvas". Pan, zoom, inspect annotations, and copy AI prompts to level up your UI! Feedback, ideas, or to report bugs? Contact us via the Chrome Web Store support tab.