Vibe Coded Detector

Have you ever visited a modern, sleek-looking website and wondered, "Was this built by a developer, or was it prompt-and-pray vibe-coded by an AI?" Meet Vibe Coded Detector—the ultimate extension for developers, code auditors, and design enthusiasts. In one click, this utility scans the active tab's Document Object Model (DOM), CSS sheets, source comments, and accessibility properties to diagnose if the website was generated by an LLM assistant (such as Lovable, v0, Bolt, Replit, or Cursor) and highlights common engineering pitfalls. Equipped with a premium, glassmorphic dark-mode interface and fluid scanning animations, this tool grades website code on a scale of 0% to 100% Vibe Level, categorizing pages from "Hand-Crafted Craftsmanship" to "Immaculate Vibes." ────── #### Key Diagnostic Audits • ⚡ Direct AI Signatures: Scans source code scripts, links, and custom elements for signatures of popular AI code generators (e.g., lovable.dev, v0.dev, bolt. new, replit.app, cursor-listeners) and searches HTML comments for LLM prompt-leakage signatures. • 💅 Tailwind Soup Density: Audits styling sheets for excessively long utility class chains (over 20 utility classes on a single node) and flags contradictory styling declarations (e.g., elements declared as both flex and grid simultaneously). • 🍲 Div Soup & Semantics: Measures the ratio of unsemantic <div> containers relative to the rest of the HTML markup and flags the absolute omission of structural HTML5 tags (<header>, <main>, <section>, <footer>). • ♿ Accessibility Audits: Warns about images missing alternative descriptions (alt tags) and identifies clickable custom interactive widgets (divs or spans with mouse actions) lacking keyboard focus (tabindex) or ARIA reader roles. • 🌐 Boilerplate Defaults & Persistence: Looks for generic framework configurations (titles left as "Vite + React + TS", default descriptions) and flags forms that lack localStorage synchronization (representing a high risk of volatile data loss on page refresh). • 🎨 Bento Grid Aesthetics: Recognizes modern AI template patterns like Bento Box card structures (multi-sized rounded grids with glassmorphic styles). ────── #### How to Use 1. Click the Vibe Coded Detector icon in your toolbar. 2. Hit the Scan Website button. 3. Watch the real-time log terminal parse the active DOM tree. 4. Expand the Diagnostic Breakdown to read specific alerts, or review the Vibe Metrics Breakdown to view individual category score ratios. ────── #### Why Use It? Vibe coding allows for incredible development speed, but often introduces technical debt, volatile states, and bad accessibility. Use this extension to: • Audit your own AI-generated drafts. • Trace boilerplate residues and clean up class bloating. • Learn to write cleaner prompts by seeing what your AI-builder leaves behind. • Satisfy your curiosity about how your favorite web products were built! (this tool was also vibe-slopped together)