Blog Post

How to QA Your Bolt.new and Lovable App Before Shipping

Q: Can I use Bolt.new or Lovable for production apps?

Yes, but only with a QA process in place. AI code tools excel at scaffolding and getting to a functional prototype quickly. The output needs human review for visual polish, accessibility compliance, security hardening, and edge case handling before it is production-ready.

Q: What is the fastest way to QA a vibe-coded app?

Use a structured checklist covering layout, typography, color, responsive behavior, forms, navigation, and accessibility, combined with a capture tool like OverlayQA that records CSS values, viewport dimensions, and element selectors in one click. This eliminates the per-issue documentation overhead.

Q: Do I need a design file to QA an AI-generated app?

No. You can QA any live website without a design file by inspecting elements, checking responsive behavior, testing forms, and verifying accessibility. A design file helps when you want to compare exact values (spacing, colors, typography) against a spec.

Q: Is vibe coding QA different from regular web QA?

The checklist is similar, but the priority order changes. AI-generated apps have higher rates of responsive layout failures, inconsistent component implementations, and accessibility omissions compared to hand-coded sites.

Quick answer: To QA a Bolt.new app or Lovable app, run a 7-category checklist covering layout, typography, color, responsive behavior, forms, navigation, and accessibility. AI-generated apps ship with approximately 160 issues per app regardless of which tool built them.

AI code tools like Bolt.new and Lovable can scaffold a functional app from a natural language prompt in minutes. But AI-generated code optimizes for speed and structure, not for the last 30% of polish that separates a prototype from a product. That last 30% is where QA lives.

Why Bolt.new and Lovable Apps Need QA

Jason Arbon ran 1,000+ automated checks against apps built with Lovable, Bolt.new, and similar tools. The result: approximately 160 issues per app. Both tools produce statistically equivalent results (p=0.7199). A SmartBear survey found that 68% of teams say faster AI-assisted development creates testing bottlenecks.

The 7-Category QA Checklist

Layout and spacing. Check container overflow, inconsistent margins/padding, flex/grid alignment, z-index stacking, and overflow handling.
Typography. Verify font family, sizes, weights, line-height, and letter-spacing against your spec.
Color and contrast. Inspect hex values on primary elements. Check hover and focus state contrast against WCAG AA (4.5:1 for body text).
Responsive behavior. Check at 375px, 768px, and 1440px. Resize continuously to find gaps between breakpoints.
Forms and interactions. Test validation states, input types, button states, keyboard navigation, and API connections.
Navigation and routing. Click every link. Check active states, back button behavior, and deep linking.
Accessibility basics. Verify alt text, heading hierarchy, focus indicators, color-only indicators, and ARIA labels.

Common Bolt.new Bugs

CSS conflicts with imported libraries. Broken responsive layouts below 640px (Tailwind default). Form submissions that silently fail. Authentication loops that consume millions of tokens.

Common Lovable Bugs

Misaligned UI components due to pixel-based positioning. Design system drift toward ShadCN/Tailwind defaults. Inconsistent component variants with different underlying markup.

Step-by-Step QA Workflow

Full-page screenshots at three viewports (375px, 768px, 1440px).
Run through the 7-category checklist. Document every issue. Do not fix anything yet.
Categorize issues by severity: broken functionality, visual bugs, polish items.
Batch fixes by file. One prompt per file with all issues listed together.
Re-QA after fixes. AI fixes frequently introduce new issues.
Manual code review on authentication, payment flows, and form submissions.

Reporting Bugs Efficiently

For each issue, document which page, which element, viewport width, wrong CSS values vs correct values, a screenshot, and severity. OverlayQA's smart capture does this in one click: captures the CSS selector, computed values, and viewport, then AI generates a structured issue for export to Jira, Linear, or Notion.

Frequently Asked Questions

How many bugs does a typical Bolt.new or Lovable app have?

Approximately 160 issues per app, based on automated testing by Jason Arbon using 1,000+ checks. Both Bolt.new and Lovable produce statistically equivalent results. These include layout issues, accessibility failures, missing states, and functional bugs.

Why does fixing one bug in Bolt.new break something else?

AI code tools often rewrite entire files when asked to make a single change. The rewrite introduces unintended side effects. Each fix attempt consumes 3-5 million tokens. Batching related fixes into a single prompt reduces this risk.

Can I use Bolt.new or Lovable for production apps?

Yes, but only with a QA process in place. The output needs human review for visual polish, accessibility compliance, security hardening, and edge case handling before it is production-ready.

What is the fastest way to QA a vibe-coded app?

Use a structured checklist combined with a capture tool like OverlayQA that records CSS values, viewport dimensions, and element selectors in one click.

Do I need a design file to QA an AI-generated app?

No. You can QA any live website without a design file. A design file helps when you want to compare exact values against a spec. OverlayQA works with or without a connected design file.

Is vibe coding QA different from regular web QA?

The checklist is similar but the priority order changes. AI-generated apps have higher rates of responsive layout failures, inconsistent component implementations, and accessibility omissions.