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.0 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 Dedicated Redline Inspector Canvas: Audits now open in a high-resolution, full-screen canvas with smooth pan & zoom (15% to 300%). 🎯 DOM-Grounded Precision: Pins match exact HTML elements and CSS selectors for highly accurate visual callouts. ⚡ Single-Pass Structured AI Audits: Lightning-fast scans with lower token usage and structured categorization. 💬 Per-Issue AI Fix Prompts: Copy targeted prompt fixes for individual elements or copy the comprehensive multi-fix prompt. 📝 Custom Context Input: Tell the AI what to focus on before scanning (e.g., "Auditing mobile responsiveness" or "Design for developer audience"). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 Instant Vibe Scoring Find out if your design vibe is "Immaculate," "High Energy," "Corporate," "Playful," "Low-Key," "Chaotic," or "Under Construction" with a punchy design summary. 📍 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. 💻 One-Click AI Fix Prompts Every recommendation includes an actionable CSS/Tailwind prompt snippet. Copy prompts 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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Click the Vibe Check icon in your browser toolbar on any webpage or localhost app. 2. (First time) Add your Gemini API key in Settings (takes 30 seconds via Google AI Studio). 3. (Optional) Add custom context (e.g., "Auditing for dark mode readability"). 4. Click "Run Vibe Check & Open Canvas". 5. 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.