I built a CRO audit tool in one night because I was tired of vague UX advice

There's a certain kind of frustration that comes from reading a CRO audit report.

"Your CTA isn't prominent enough." Okay, how prominent? "Consider adding social proof." Consider? Where? In what format? Every pixel?

The reports are expensive, the advice is vague, and the handoff to developers is its own nightmare. I've watched landing pages sit broken for weeks because no one could translate "improve the visual hierarchy" into actual code.

So I built Heatbot.

The Problem

I was looking at a client's product page. The "Add to Cart" button was below the fold on mobile — the single most conversion-killing placement possible. The fix was three lines of CSS. But the audit report just said "CTA placement needs attention" with a 2/10 urgency score.

The fix was simple. The problem was getting from "attention needed" to "here's the code."

That gap is where conversions die.

The Core Insight

CRO issues map to patterns. And patterns have known fixes.

Button below fold → move it up. Low contrast → specific hex values. No urgency → stock counter HTML. Weak headline size → font-size: 2.5rem. These aren't mysteries. They're a lookup table wrapped in an LLM that understands layout context.

The insight was: don't give people a score, give them the diff.

Technical Decisions

The stack is Next.js 15 + Tailwind v4 + shadcn/ui. Nothing exotic. The interesting part is the audit pipeline:

// Simplified audit engine
const auditPage = async (input: string) => {
  const prompt = `You are a CRO specialist. 
  Analyze: "${input}"
  Return JSON: { issue, severity, type, fix, impact }
  Focus: CTA placement, contrast, trust signals,
  urgency, visual hierarchy.`;
  
  const result = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: prompt }],
    response_format: { type: "json_object" }
  });
  
  return JSON.parse(result.choices[0].message.content);
};

The key was forcing JSON output and being extremely specific in the prompt about what constitutes a "fix." Vague LLM output → useless. Structured output with htmlFix, cssFix, jsFix fields → something you can paste directly.

What Surprised Me

The severity ranking surfaced things I wouldn't have prioritized. Contrast ratio failures consistently scored higher than I expected — and they should. A button that's hard to see is a dead button. WCAG AA (4.5:1) isn't just an accessibility standard, it's a conversion floor.

Also: the demo data. I pre-loaded 5 real audit findings from a sneaker product page. Every time I showed someone the tool, they'd look at the demo and immediately say "wait, we have that problem too." The demo is the pitch.

What I'd Do Next

• →Scrape the actual URL (right now it's description-based, which is honestly fine)
• →Diff view: show before/after HTML side by side
• →Team features: save audits, share with devs, track which fixes shipped
• →Shopify app integration — this is where the real e-commerce money is

Try It

Live at heatbot.limed.tech

Paste in a URL or describe your page layout. The audit takes under 30 seconds. The fixes are copy-paste ready.

If you're running an e-commerce store and your conversion rate is under 3%, there's a Heatbot issue with your name on it.

— Jacobo