Squint

Squint is a landing page auditor simulating 5-second user scans via specialized AI critics. Get brutally honest copy/design scorecards and visual before/after mockup transformations.

Comment

The Squint Story - Brutally Honest Landing Page Audits

Inspiration

As developers, creators, and founders, we spend weeks (sometimes months) building products, polishing landing pages, selecting perfect accent colors, and writing copy. Yet, when real users arrive, they make up their minds in a flash. Research shows that visitors give a landing page about 5 seconds of attention before deciding to stay or bounce. They don't read every sentence; they "squint" at the page, scanning for immediate relevance, value, and trust.

Soft feedback from friends ("looks great!") or generic SEO optimization suggestions don't address this reality. We needed raw, unfiltered, brutally honest feedback from the actual target personas visiting our pages:

  • The Busy Founder who has zero patience, runs on coffee, and wants to see business value immediately.
  • The Skeptical Engineer who despises corporate fluff, hates "Book a Demo" buttons, and demands self-serve docs, pricing, and code snippets.
  • The Non-technical Buyer who cares about security, team benefits, and social proof.
  • The Inclusive Designer who evaluates readability, contrast, and layout accessibility.

This inspired us to build Squint—a neo-brutalist landing page audit tool that critiques landing pages through realistic user personas, scoring core metrics, identifying specific page friction, and providing copy-ready rewrites.

What it does

Squint takes a URL or screenshot and runs a multi-layered scan:

  • Persona Critiques: Deploys AI critics (Busy Founder, Skeptical Engineer, Non-technical Buyer, Inclusive Designer, or custom defined personas) to deliver a 5-second initial reaction and a detailed critique.
  • Lighthouse Scoring: Automatically queries the Google PageSpeed Insights API to pull real-time Performance and Accessibility scores for the site.
  • DOM Scraping: Uses Cheerio to parse heading hierarchies (H1/H2), title tags, meta descriptions, and body content for contextual accuracy.
  • Visual Bounding Boxes: Maps landing page issues to exact visual locations on the page using coordinate bounding boxes.
  • Competitor Side-by-Side: Allows users to input a competitor's URL to receive a comparative critique.
  • Local & Localhost Audits: Resolves public crawler limitations on local development servers (localhost:3000) through an interactive drag-and-drop screenshot uploader.
  • Chrome Extension: Packs a lightweight manifest-v3 extension allowing users to audit any website directly from their Chrome toolbar.
  • Dynamic Sharing: Generates custom edge-rendered OpenGraph scorecard previews for sharing results on social media.
  • Intro Explainer Video: Features a fully animated HTML HyperFrames video composition explaining the tool.

How we built it

We built Squint using a modern, performant web stack:

  • Framework: [Next.js 16 (App Router)] utilizing Turbopack for superfast build and hot-reload speeds.
  • Styling: [Tailwind CSS v4] paired with Vanilla CSS custom properties to implement a striking, premium Neo-Brutalist design system (sharp borders, hard drop shadows, high contrast, and a signature Blaze Orange palette).
  • AI Engine: Gemini 3.1 Flash-Lite (via the @google/generative-ai SDK) utilizing native structured JSON response schemas for 100% reliable output parsing.
  • Data Scraping & Screenshots: [Microlink API] for screenshot rendering and [Cheerio] for DOM scraping.
  • Database & Sync: A hybrid storage engine. It syncs records locally to a JSON database file (.data/audits.json) and connects to a remote Supabase (PostgreSQL) database with Row Level Security (RLS) policies for persistent global records.
  • Analytics: Integrated Novus by Pendo Web SDK to instrument and track key user actions (e.g. audit submissions, fallback uploads, and sharing triggers).
  • Video: Composed the project explainer video using HyperFrames with GSAP animations and audio assets.

Challenges we ran into

  • Bot-Block and CAPTCHA Fallbacks: High-profile websites often block public screenshot bots with Cloudflare or CloudFront 403 pages. Rather than letting the audit fail, we added vision prompts instructing Gemini to detect bot-blocking pages. If blocked, Squint prompts the user to drag-and-drop a manual screenshot instead.
  • The Localhost Loopback Problem: Landing page creators want to audit pages while they are building them on localhost. Since cloud-screenshot APIs cannot crawl local machines, we designed a state-driven fallback uploader. Users simply take a screenshot, drag it in, and audit their local project instantly.
  • Tailwind v4 & Next.js 16 Bleeding Edge Compatibility: Working with the newest versions of Next.js and Tailwind meant configuring assets, fonts, and OpenGraph generators without traditional helper libraries. We solved this by defining design system tokens (colors, margins, typography) as root CSS custom variables, making them universally accessible across the app.

Accomplishments that we're proud of

  • Hilariously Realistic Persona Critiques: The Gemini-powered AI Critics don't just output generic text; they adopt distinct voices. The Busy Founder sounds genuinely stressed, and the Skeptical Engineer will actively call out "fluffy buzzwords."
  • Seamless Fallback Systems: Building an audit loop that handles cloud rendering, manual image uploads, localhost testing, and bot-blocking errors gracefully.
  • Interactive Chrome Extension: Getting a fully functional unpacked browser extension built and integrated so users can audit pages on the fly.
  • Unified Visual Identity: Creating a distinct, consistent brand experience that spans the dashboard, the social share cards, and the HyperFrames intro video.

What we learned

  • The Power of Gemini Structured Schemas: Setting a JSON schema using @google/generative-ai eliminated the headache of parsing LLM responses. The output data is typed, predictable, and plugs directly into our React components.
  • Scraping + Vision Is the Ideal Combo: Giving the vision model both the screenshot image and the scraped DOM text drastically improved critique accuracy (allowing it to verify if copy was readable, technically accurate, and structured correctly).
  • Aesthetics Matter: Neo-brutalist styling gave our project a memorable, premium personality, proving that developers love bold interfaces over generic templates.

What's next for Squint

  • Generative Before & After Visual Mockups: Rather than just text suggestions, use image generation models to visually apply the suggested copywriting and UI fixes directly onto a modified screenshot.
  • One-Click A/B Test Deployment: Integrating with platforms like LaunchDarkly or Vercel Spaces to let users instantly deploy the suggested rewrites and measure conversion changes.
  • Historical Audits & Performance Charts: Add tracking over time so developers can see how their scorecards and Lighthouse scores improve as they refine their landing pages.

Built With

  • cheerio
  • gemini
  • hyperframes
  • microlink
  • nextjs
  • novus
  • pendo
  • supabase
  • tailwind
Share this project:

Updates

Submission history