Vibe Check

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.1 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📸 Stitched Screenshot Accuracy: Fixed headers, sticky navigation bars, and floating chrome no longer duplicate across multi-slice full-page captures. 🎬 Scroll Animation Settling: Entrance animations (Framer Motion, AOS, Web Animations API) are stabilized and fast-forwarded before capture so elements never appear dimmed or mid-fade. 📋 Numbered Notes Panel in Exported PNG: Copied and downloaded redline images now include a clean notes panel beside the screenshot with page title, vibe status, and numbered cards for all visible pins. 🎯 Pixel-Perfect Pin Grounding: Lossless PNG slices and true scroll coordinates ensure annotation pins align 1:1 with DOM elements. ⚡ Performance & Size Optimization: Streamlined extension package for faster load times. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ 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.