DEV Community: Sameer Hassan

Stop Guessing Conversion Friction: Autonomous AI Vision for CRO & Code Fixes

Sameer Hassan — Sat, 12 Sep 2026 17:26:19 +0000

Traditional analytics tools (Google Analytics, Mixpanel, Hotjar) tell you that visitors bounce. They give you heatmaps full of colorful blobs and funnel drop-off percentages, but they leave engineering teams asking the same frustrating question:

"Okay, 42% of visitors dropped off on the checkout page. But what exact DOM element caused it, and what is the code fix?"

Legacy SEO and CRO tools output overwhelming spreadsheets of raw metadata without actionable solutions. We decided to rethink conversion rate optimization from the ground up by combining multimodal computer vision, DOM telemetry, and autonomous code generation.

We open-sourced the entire platform: ⚡ PLYXO (CRO • SEO • AIO • AEO • GEO).

In this opening guide of our series, let's break down the technical architecture behind autonomous visual bounding-box CRO inspections and how we turn visual UI friction directly into copy-paste React and Tailwind CSS fixes.

1. The Core Architecture: From DOM Viewport to Bounding Box

When auditing a landing page or web application, traditional scrapers only look at raw HTML strings. They miss CSS layout shifts, z-index overlaps, touch-target sizing violations, and color contrast failures that occur in actual rendered viewports.

Plyxo renders pages in a headless Chromium sandbox with dynamic viewport scaling (desktop, tablet, and mobile):

┌─────────────────────────────────────────────────────────────────────────┐
│                     PLYXO CRO RUNTIME PIPELINE                          │
└─────────────────────────────────────────────────────────────────────────┘
                                     │
                                     ▼
        ┌────────────────────────────────────────────────────────┐
        │  Headless Chromium Headless Viewport Capture (1440x900)│
        │  • DOM Tree + Computed CSS Styles Ingestion            │
        │  • High-DPI Viewport Screenshot Encoding               │
        └────────────────────────────┬───────────────────────────┘
                                     │
                                     ▼
        ┌────────────────────────────────────────────────────────┐
        │       Multi-Tier Friction Localization Engine          │
        │  • Contrast Ratio Math (WCAG AA/AAA thresholds)        │
        │  • Touch-Target Collision Detection (< 48x48px)        │
        │  • Layout Shift Delta (CLS) Calculation                │
        └────────────────────────────┬───────────────────────────┘
                                     │
                                     ▼
        ┌────────────────────────────────────────────────────────┐
        │            Multimodal AI Reasoning Core                │
        │  • Gemini 2.0 Flash / Vision Embeddings                │
        │  • Semantic Bounding Box Localization                  │
        │  • Dollar-Loss Impact Estimation Formula               │
        └────────────────────────────┬───────────────────────────┘
                                     │
                                     ▼
        ┌────────────────────────────────────────────────────────┐
        │        Instant Code Generation Engine (React/Tailwind) │
        └────────────────────────────────────────────────────────┘

The Inspection Algorithm

To pinpoint where users get stuck, we analyze three primary vector signals:

Information Hierarchy & Eye Flow: Detecting visual noise where secondary links overpower the primary Call-To-Action (CTA).
Micro-Friction Points: Inputs lacking auto-fill attributes, ambiguous placeholder texts, low-contrast placeholder labels, and non-sticky mobile buy buttons.
Cognitive Load Index: Measuring the number of distinct choice paths presented within the primary viewport before the scroll fold.

2. Real-World Example: Bounding Box Detection

Here is what the visual bounding box engine identifies during an audit:

+-----------------------------------------------------------------------+
|  Your SaaS Landing Page                                  [Login]      |
|                                                                       |
|   Scale Your Business Faster with AI                                  |
|   ----------------------------------                                  |
|   [ Enter your email address...     ]                                 |
|                                                                       |
|   +-------------------------------------------------------------+     |
|   | [!] HIGH FRICTION BLOCK DETECTED                            |     |
|   | Bounding Box: { x: 120, y: 340, width: 280, height: 42 }    |     |
|   | Issue: Missing input label, low contrast border (#E2E8F0)   |     |
|   | Projected Drop-Off Lift: +14.2%                             |     |
|   | Monthly Revenue Leak: ~$4,800/mo                            |     |
|   +-------------------------------------------------------------+     |
|                                                                       |
|   [ Submit ]  <-- Secondary ghost style confusing conversion flow     |
|                                                                       |
+-----------------------------------------------------------------------+

Rather than just presenting a warning in a console, Plyxo generates an instant, clean drop-in replacement snippet.

3. Instant Code Fix Generation

Here is an example of code generated by Plyxo to rectify the friction block above:

Before (High Friction):

// ❌ Low contrast, no accessible label, ambiguous placeholder, weak button affordance
export function SignupForm() {
  return (
    <form className="flex gap-2">
      <input 
        type="text" 
        placeholder="Email" 
        className="border border-slate-200 p-2 text-xs text-slate-400" 
      />
      <button className="border border-slate-300 px-4 py-2 text-slate-600">
        Submit
      </button>
    </form>
  );
}

After (Plyxo Autonomous Fix):

// ✅ WCAG AAA contrast, accessible sr-only label, autocomplete enabled, high-conversion primary CTA
export function SignupForm() {
  return (
    <form className="flex flex-col sm:flex-row gap-3 w-full max-w-md" aria-label="Lead capture form">
      <div className="relative flex-1">
        <label htmlFor="lead-email" className="sr-only">
          Work email address
        </label>
        <input 
          id="lead-email"
          type="email" 
          name="email"
          autoComplete="email"
          required
          placeholder="name@company.com" 
          className="w-full rounded-lg border-2 border-slate-300 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:border-indigo-600 focus:ring-4 focus:ring-indigo-600/10 focus:outline-none transition-all shadow-sm" 
        />
      </div>
      <button 
        type="submit"
        className="inline-flex items-center justify-center rounded-lg bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-600/20 active:scale-[0.98] transition-all"
      >
        Start Free Trial
      </button>
    </form>
  );
}

4. Why We Made It 100% Free & Open-Source

Commercial conversion rate optimization platforms and enterprise SEO suites cost upwards of $200–$1,000 every single month. They lock your own website audit data behind aggressive paywalls, require intrusive tracking scripts that slow down client browsers, and offer zero automated remediation.

Plyxo is built differently:

Zero Paywalls & No User Tracking: Run it completely on your own machine or private cloud.
Modern Next.js 16 & Turbopack Core: Lightning fast audit sweeps powered by TypeScript, React 19, and Drizzle ORM.
Native Claude-SEO & Gemini 2.0 Integration: Combines LLM intelligence with real Lighthouse/PageSpeed telemetry.

💡 Try It and Explore the Code

The complete source code, documentation, and architectural guides are available on GitHub:

👉 GitHub Repository: pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

If you find this approach useful for your own SaaS or client projects, drop a star ⭐️ on the repo to support open-source tooling!

In the next post of this series, we dive deep into **Generative Engine Optimization (GEO): how AI search engines like Perplexity, ChatGPT Search, and Google Gemini cite websites, and how to structure your pages for maximum LLM visibility.

I Got Tired of Paying for 3 SaaS Tools to Optimize One Website — So I Built Plyxo

Sameer Hassan — Sat, 05 Sep 2026 15:41:08 +0000

The problem that wouldn't leave me alone

A few months ago I was auditing a client's site and had five tabs open: Hotjar for heatmaps, Ahrefs for SEO, a spreadsheet for tracking fixes, ChatGPT for "why is this page not converting," and a half-finished Notion doc trying to tie it all together.

Somewhere around tab four, it hit me: none of these tools talk to each other, and none of them tell you what to actually do.

Hotjar and FullStory show you that people bounce off a page. They don't tell you why, and they definitely don't hand you a fix.
Ahrefs and SEMrush dump a spreadsheet of 300+ "issues" with no prioritization. Which one do you fix first? Good luck.
And increasingly, a growing slice of search traffic isn't coming from the 10 blue links at all — it's coming from ChatGPT Search, Perplexity, and Google AI Overviews summarizing an answer and (maybe) citing a source. Almost nothing measures whether your page is even citable in that world.

So I did what any reasonable/unreasonable person does with a Saturday and too much caffeine: I built the tool I wished existed.

It's called Plyxo, and it's free, open-source, and self-hosted.

Repo: https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

What Plyxo actually does

Plyxo isn't a single-purpose tool — it's three audits that usually live in three different paid products, combined into one:

1. Visual CRO auditing

Plyxo takes a screenshot of your live page and overlays bounding boxes around conversion friction points — a CTA buried below the fold, a form with too many fields, contrast that fails accessibility and readability at the same time. For each one, it estimates the dollar impact of the friction and generates a ready-to-paste React/Tailwind fix, so you're not just told "this is bad," you get the actual patch.

2. Technical + semantic SEO audit

Under the hood, Plyxo checks the boring-but-critical stuff: schema.org markup validity, Core Web Vitals, broken/dead links (crawled with SSRF protections so it's safe to point at arbitrary domains), and E-E-A-T signals that Google's algorithm increasingly weighs for content trust.

3. AEO/GEO — citation-readiness scoring

This is the part I haven't seen anywhere else. Plyxo scores a page against the patterns that make content more likely to be cited by AI answer engines — ChatGPT Search, Perplexity, and Gemini. Think: answer-first paragraph structure, clear entity naming instead of vague pronouns, FAQ-formatted sections, clean heading hierarchy. As more traffic shifts from "10 blue links" to "one AI-generated answer," this is quietly becoming as important as classic keyword ranking — and almost nobody outside a few very new startups (Profound, Otterly) is measuring for it, let alone bundling it with CRO and SEO.

Bonus: competitor keyword-gap analysis

Point it at a competitor's domain and Plyxo surfaces keyword opportunities they're capturing that you aren't.

Why self-hosted?

Two reasons, honestly.

First, principle. Crawling and analytics data is sensitive — it maps directly to your traffic, your funnel, your users. I didn't want to build something where that data has to leave your infrastructure and sit on someone else's server just to get an audit done.

Second, cost. Every existing tool that does any one of these three things is a $50–300/month SaaS subscription. Stack three together and you're paying for a team of tools before you've even fixed anything. Self-hosted and open-source means the only cost is your own infra — and a free-tier Gemini API key for the AI layer.

The stack

For the curious:

Next.js 16 + TypeScript for the app itself
Postgres with Drizzle ORM for storing audits, findings, and history
Gemini API powering the AI-driven scoring and fix generation (chosen mainly for its generous free tier — self-hosters shouldn't need a corporate API budget to try this)
Docker Compose for one-command local setup

What I learned building this

A few things surprised me along the way:

AEO scoring is genuinely unsolved territory. There's no established methodology yet for "will an LLM cite this page" the way there's decades of established wisdom for classic SEO. I had to build and iterate on heuristics rather than follow a playbook, which was equal parts frustrating and fun.
Visual CRO detection is harder than it looks. Screenshotting a page is the easy part. Reliably identifying which elements are actually causing friction — versus just flagging every button on the page — took a lot of tuning.
"Self-hosted" is a promise, not a checkbox. It's easy to say a tool is self-hostable; it's a different thing to make the setup process actually painless. I'm still iterating on this (Docker Compose helps a lot, but there's more to do).

Try it / break it / tell me what's wrong

This is early, and I'd genuinely rather hear "this feature is half-baked" now than after more people depend on it. If you run a SaaS, a blog, or any content site, I'd love for you to point Plyxo at it and tell me:

Did the CRO findings match something you already suspected was a problem — or surface something new?
Does the AEO/GEO score feel directionally right, or does it feel like guesswork? (Be honest — this is the part I'm least sure about.)
What broke during setup?

Repo, docs, and issue tracker are all here: https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

It's MIT licensed, so fork it, self-host it, or send a PR — all welcome. If you've got a "why didn't you just use X" question, ask it in the comments, I'll answer honestly (including the "yeah, X is better at that one thing" cases).

Thanks for reading — now go find out how many conversion dollars your homepage is quietly leaking. 😄

How We Built an AI Visual CRO Auditor That Draws Bounding Boxes Over UX Friction

Sameer Hassan — Fri, 04 Sep 2026 07:38:46 +0000

When traditional automated audit tools (like Google Lighthouse) scan a webpage, they test for DOM metrics and performance: Largest Contentful Paint (LCP), missing ARIA labels, image dimensions, or meta tags.

What they CANNOT tell you:

"Your primary CTA button blends directly into the hero gradient background."
"Your pricing table has cognitive overload and 5 competing badge colors."
"Your sign-up form creates visual friction by hiding password requirements."

To solve this, we built an open-source Visual CRO (Conversion Rate Optimization) engine for Plyxo Community Edition.

It captures high-DPI full-page screenshots, feeds them into multimodal vision models, returns normalized coordinate bounding boxes [ymin, xmin, ymax, xmax] over friction zones, and generates copy-paste Tailwind CSS fixes.

Here is how the architecture works under the hood.

🏗️ The Architecture: From URL to Visual Coordinates

[Target URL] 
     ↓
[Puppeteer / Headless Chrome] 
     ↓ (High-DPI Screenshot + DOM Heuristics)
[Multimodal Vision Model] 
     ↓ (Normalized 0-1000 Coordinates JSON)
[Interactive Canvas Overlay + Tailwind Code Remediation]

1. High-DPI Viewport Rendering & Layout Shifts

Standard screenshots often miss sticky headers, modals, or hydration popups. We use a headless Chrome pipeline that enforces high-DPI rendering and waits for network idle:

// packages/core/src/scanners/screenshot.ts
import puppeteer from 'puppeteer';

export async function captureViewport(url: string) {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();
  await page.setViewport({
    width: 1440,
    height: 900,
    deviceScaleFactor: 2 // High DPI for crisp font & badge recognition
  });

  await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });

  // Clean scroll to trigger lazy-loaded sections
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2));
  await new Promise(r => setTimeout(r, 600));
  await page.evaluate(() => window.scrollTo(0, 0));

  const screenshotBuffer = await page.screenshot({
    fullPage: false, // Hero/above-the-fold is where 80% of CRO friction happens
    encoding: 'base64'
  });

  await browser.close();
  return screenshotBuffer;
}

2. Prompting Multimodal Vision for Normalized Bounding Boxes

Standard LLMs return chatty explanations. For an interactive UI overlay, we need structured JSON with normalized visual coordinates (0-1000 scale).

Here is the system prompt and structured schema we pass to the vision model:

const SYSTEM_PROMPT = `
You are an expert Conversion Rate Optimization (CRO) and UX Design Auditor.
Analyze the provided desktop screenshot of a landing page.

Identify top UX/CRO friction points:
1. Contrast/Visibility issues (unclear CTAs)
2. Visual clutter / Cognitive overload
3. Lack of immediate value proposition / hierarchy
4. Trust signal deficiencies

For each issue, you MUST provide:
- 'title': Short descriptive title
- 'severity': 'critical' | 'warning' | 'info'
- 'box_2d': Normalized coordinates [ymin, xmin, ymax, xmax] between 0 and 1000
- 'frictionReason': Why this hurts conversion
- 'proposedCodeFix': Concrete Tailwind CSS / HTML remediation code
`;

3. Rendering the Interactive Canvas Overlay

Once the backend returns the normalized coordinate array, we render dynamic highlight boxes that scale responsively with any container:

// components/VisualCroOverlay.tsx
import React, { useState } from 'react';

interface FrictionBox {
  id: string;
  title: string;
  severity: 'critical' | 'warning' | 'info';
  box_2d: [number, number, number, number]; // [ymin, xmin, ymax, xmax]
  proposedCodeFix: string;
}

export function VisualCroOverlay({ 
  screenshotUrl, 
  issues 
}: { 
  screenshotUrl: string; 
  issues: FrictionBox[] 
}) {
  const [selectedIssue, setSelectedIssue] = useState<FrictionBox | null>(null);

  return (
    <div className="relative inline-block w-full border border-slate-800 rounded-xl overflow-hidden shadow-2xl">
      <img src={screenshotUrl} alt="Audited Page" className="w-full h-auto block" />

      {/* Visual Bounding Boxes */}
      {issues.map((issue) => {
        const [ymin, xmin, ymax, xmax] = issue.box_2d;
        const top = `${(ymin / 1000) * 100}%`;
        const left = `${(xmin / 1000) * 100}%`;
        const height = `${((ymax - ymin) / 1000) * 100}%`;
        const width = `${((xmax - xmin) / 1000) * 100}%`;

        const colorMap = {
          critical: 'border-rose-500 bg-rose-500/20 text-rose-300',
          warning: 'border-amber-500 bg-amber-500/20 text-amber-300',
          info: 'border-blue-500 bg-blue-500/20 text-blue-300'
        };

        return (
          <div
            key={issue.id}
            onClick={() => setSelectedIssue(issue)}
            style={{ top, left, height, width }}
            className={`absolute border-2 cursor-pointer transition-all hover:scale-[1.02] ${colorMap[issue.severity]}`}
          >
            <span className="absolute -top-6 left-0 text-xs px-1.5 py-0.5 rounded bg-slate-900 border border-slate-700 font-mono">
              {issue.title}
            </span>
          </div>
        );
      })}
    </div>
  );
}

4. Generating Concrete Code Remediation

Instead of just telling the developer "your button lacks contrast", the engine generates the replacement JSX:

// Before (Detected Friction)
<button className="bg-indigo-400 text-indigo-100 py-2 px-4 rounded">
  Get Started
</button>

// Recommended Fix (High-Contrast Visual Hierarchy + Micro-interaction)
<button className="bg-gradient-to-r from-emerald-500 to-teal-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg shadow-emerald-500/20 hover:shadow-emerald-500/40 hover:-translate-y-0.5 transition-all duration-200">
  Start Free Audit →
</button>

🚀 Try It & Contribute (100% Open Source)

We packaged this visual engine into Plyxo Community Edition, a free, MIT-licensed audit platform that combines:

🎨 Visual CRO & Friction Bounding Boxes
⚡ Core Web Vitals & Real-Time Performance Audits
🤖 AEO / GEO Engine (Generative Engine Optimization for ChatGPT/Perplexity)
🔌 Model Context Protocol (MCP) Server for Claude Desktop & Cursor IDE

Quick Start with Docker:

git clone https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO.git
cd Plyxo-CRO-SEO-AIO-AEO-GEO
docker compose up -d

Check out the code, run it locally on your own SaaS landing page, or star the repo on GitHub:

⭐ GitHub Repo: github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

🌐 Live Demo: plyxo.org

What techniques are you using to audit landing page conversion rates? Let's discuss in the comments below!

I built a free, open-source alternative to Ahrefs & Hotjar powered by Claude-SEO & LLM Citations

Sameer Hassan — Thu, 03 Sep 2026 04:36:08 +0000

Most SEO and conversion optimization tools on the market are either:

Overwhelming metadata spreadsheets (Ahrefs, Screaming Frog) costing $99–$499/month.
Passive analytics dashboards (Google Analytics, Hotjar) that tell you that visitors bounce, but never tell you why or give you the code to fix it.
Completely blind to the new AI search landscape (ChatGPT Search, Perplexity AI, Google Gemini, Claude).

I wanted an autonomous thinking partner that doesn't just list warnings—it actually inspects the rendered page, draws visual bounding boxes around UX friction, writes the drop-in React/Tailwind code fixes, and benchmarks how LLMs cite my website.

So I built and open-sourced Plyxo Community Edition — 100% free, self-hosted, and unlimited.

⭐ GitHub Repo: https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

⚡ What makes Plyxo different?

1. 🎯 Visual CRO Bounding Box Friction Detection

Instead of giving you vague advice like "improve button visibility", Plyxo takes a high-res screenshot of your page, calculates normalized bounding box coordinates over friction hotspots, computes the expected monthly revenue lift, and outputs copy-paste Tailwind CSS & React remediation code.

2. 🧠 Complete Claude-SEO Skills Integration

Inspired by the popular AgriciDaniel/claude-seo skill architecture, Plyxo natively runs 6 parallel specialist agents on every crawl:

⚙️ Technical SEO & Performance: Evaluates robots.txt, sitemaps, canonicals, and real Google PageSpeed Insights Core Web Vitals (LCP, CLS, INP, TTFB).
🛡️ Resilient WAF Bypass: Multi-tier fallback crawler that simulates authentic browser headers so Cloudflare or anti-bot firewalls never return 403 Forbidden on your audits.
📐 Schema.org & JSON-LD Validation: Deep syntax checks for Article, Product/Offer, FAQPage, BreadcrumbList, and Organization.
📝 E-E-A-T & Readability: Evaluates author attribution, citation density, thin-content thresholds, and sequential H1–H6 outline structure.
🔑 Semantic Keyword Intent: Categorizes query clusters by intent (Informational, Navigational, Commercial, Transactional) and detects keyword cannibalization.

3. 🤖 AEO / GEO: Will ChatGPT & Perplexity Cite You?

Search is changing fast. Users don't just click blue links; they ask LLMs.

Plyxo scores how readily ChatGPT Search, Perplexity AI, Google Gemini, and Anthropic Claude will extract your content as an authoritative cited source, measuring knowledge graph entity density and direct-answer formatting.

4. ⚔️ Side-by-Side Competitor Battlecards

Enter any competitor domain to get an automated side-by-side gap analysis comparing site speed, schema coverage, topical authority, and high-intent search gaps.

5. 🔗 SSRF-Protected Fast Dead Link Crawler

Sweeps hundreds of internal and external URLs at ~390 requests/second to catch broken 404s, redirect chains, and SSL errors before they hurt your rankings.

🛠️ Tech Stack

Framework: Next.js 16 (Turbopack, App Router, React 19 Server Actions)
Language: TypeScript 5.0 (Strict mode)
Database & ORM: PostgreSQL + Drizzle ORM
AI Engine: Google Gemini 2.0 Flash / Pro (with automatic multi-key failover)
Styling: Tailwind CSS v4, Radix UI Primitives, Lucide Icons

🚀 Quick Start (Runs in 60 Seconds)

1. Clone the repository & install dependencies

git clone https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO.git
cd Plyxo-CRO-SEO-AIO-AEO-GEO
npm install

2. Add your environment variables

cp .env.example .env.local

3. Add your free Google Gemini API Key from Google AI Studio

DATABASE_URL=postgresql://postgres:postgres@127.0.0.1:5432/plyxo_community
GEMINI_API_KEYS=your_free_gemini_key_here

4. Initialize the database & run

npm run setup:community
npm run dev

Open http://localhost:3000 — you get immediate, unrestricted access to the entire platform!

🤝 Let's build together!

Plyxo Community Edition is 100% MIT Licensed, privacy-first, and self-hosted on your own PostgreSQL instance. Zero tracking, zero telemetry paywalls.

If you find this project helpful or want to test it on your own websites:

👉 Star the repo on GitHub: https://github.com/pixelfogg/Plyxo-CRO-SEO-AIO-AEO-GEO

I'd love to hear your feedback, bug reports, or feature requests in the comments below! What are you using for SEO & CRO audits today?