https://overlayqa.com/assets/qa-bolt-lovable-app-B-PAHZMn.js

1const e=[{type:"answer-box",content:"AI-generated apps ship with roughly 160 issues per app regardless of which tool built them. Run a 7-category QA checklist (layout, typography, color, responsive behavior, forms, navigation, accessibility) before prompting fixes to avoid token-burning debug loops."},{type:"paragraph",content:"You prompted your app into existence in 20 minutes. The landing page looks great in the preview. You ship it. Then your first user finds a button that overflows its container on mobile, a form that submits to nowhere, and a color contrast ratio that fails WCAG. This is the reality of vibe coding in 2026."},{type:"paragraph",content:"The problem is not that Bolt.new or Lovable write bad code. These tools are genuinely impressive at scaffolding functional apps from natural language prompts. The problem is that 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."},{type:"paragraph",content:'This guide gives you a repeatable <a href="/design-qa/">design QA</a> process built for AI-generated apps. You will learn exactly what to check, which bugs are most common, and how to report issues efficiently so you can fix them without burning through millions of tokens in debug loops.'},{type:"callout",content:"<strong>Key Takeaways</strong>",variant:"info"},{type:"list",items:['AI-generated apps from both Bolt.new and Lovable ship with approximately 160 issues per app, according to <a href="https://jarbon.medium.com/what-vibe-coding-misses-bolt-new-vs-lovable-app-quality-2aa80419c7d4">automated testing by Jason Arbon</a> across 1,000+ checks.',"40-50% of Lovable users report UI and layout problems including misaligned buttons, broken responsive designs, and CSS conflicts.","Bug-fix loops are the #1 complaint with AI code tools. The AI tries to fix one issue, rewrites the file, and breaks something else, consuming 3-5 million tokens per attempt.","A structured QA checklist that covers layout, typography, responsive behavior, forms, and accessibility prevents the most common post-ship failures.","Tools like OverlayQA let you click any element, capture its CSS values and viewport, and generate a structured issue for your tracker in one action."]},{type:"heading",content:"Why Bolt.new and Lovable Apps Need QA More Than Hand-Coded Ones",level:2},{type:"paragraph",content:'There is a persistent myth in the vibe coding community that AI-generated code is "good enough to ship." The data on vibe coding visual bugs says otherwise.'},{type:"paragraph",content:'<a href="https://jarbon.medium.com/what-vibe-coding-misses-bolt-new-vs-lovable-app-quality-2aa80419c7d4">Jason Arbon ran 1,000+ automated checks</a> against apps built with Lovable, Bolt.new, and similar tools. The result: approximately 160 issues per app. For a deeper look at the types of <a href="/blog/ai-app-builders-visual-bugs/">visual bugs AI app builders produce</a>, see our research breakdown. Both Lovable and Bolt.new produced statistically equivalent results (p=0.7199), meaning the tool you choose does not meaningfully change the number of bugs you ship.'},{type:"paragraph",content:'A <a href="https://smartbear.com/state-of-software-quality/testing/">SmartBear survey</a> found that 68% of teams say faster AI-assisted development creates testing bottlenecks. Superblocks put it more bluntly: "AI gets you 70% of the way there. The remaining 30% is debugging hell."'},{type:"paragraph",content:"The issue is structural. AI code tools like Bolt.new and Lovable are optimized for ShadCN and Tailwind CSS. When you prompt them to build something that deviates from those defaults, or when you layer a custom design system on top, the output drifts. This design drift compounds quickly. Layout assumptions break. Spacing becomes inconsistent. Typography values shift from the spec."},{type:"paragraph",content:`Figma Make has similar problems. In <a href="https://blog.logrocket.com/ux-design/figma-make-review/" rel="noopener">LogRocket's hands-on review</a>, a product designer found it "buggy, clunky, and limited to basic use cases." The pattern is consistent across all AI code generation tools: the scaffolding works, but the details need human verification.`},{type:"heading",content:"The Bug Loop Tax",level:3},{type:"paragraph",content:"The most expensive mistake is not the bugs themselves. It is trying to fix them by prompting the AI again."},{type:"paragraph",content:'When you tell Bolt.new or Lovable to "fix the button alignment on mobile," the AI often rewrites the entire component file. This fix introduces new problems. You prompt again. It rewrites again. Each cycle consumes 3-5 million tokens. One developer <a href="https://github.com/stackblitz/bolt.new/issues/5401">reported using 20 million tokens</a> trying to fix a single authentication bug in Bolt.new.'},{type:"paragraph",content:"This is why QA should happen before you start prompting fixes. Knowing the full scope of issues lets you batch fixes, prioritize by severity, and decide which ones to fix manually in the code editor instead of burning credits on AI guesses."},{type:"heading",content:"The 7-Category Checklist to QA Your Bolt.new or Lovable App",level:2},{type:"paragraph",content:'This QA checklist is designed specifically for apps built with Bolt.new, Lovable, v0, or Figma Make. It focuses on the categories where AI-generated code most frequently fails. Whether you QA a Bolt.new app or a Lovable build, these are the categories that catch the most issues. For a broader <a href="/blog/website-qa-checklist/">website QA checklist</a> that covers non-AI-generated sites as well, see our general guide.'},{type:"heading",content:"1. Layout and Spacing",level:3},{type:"paragraph",content:"AI code tools generate layout structures that look correct at one viewport width but break at others. Check for:"},{type:"list",items:["<strong>Container overflow</strong>: Resize the browser window. Do any elements extend beyond their parent containers?","<strong>Inconsistent spacing</strong>: Compare <code>margin</code> and <code>padding</code> values across similar components. AI often generates different values for visually identical sections.","<strong>Flex and grid alignment</strong>: Inspect <code>justify-content</code>, <code>align-items</code>, and <code>gap</code> values. AI frequently defaults to <code>center</code> alignment where <code>flex-start</code> or <code>space-between</code> is correct.","<strong>Z-index stacking</strong>: Open dropdowns, modals, and tooltips. Do they render above all other content? AI-generated z-index values are often arbitrary.","<strong>Overflow handling</strong>: Add extra text to headings and descriptions. Does the layout handle content that exceeds the expected length?"]},{type:"heading",content:"2. Typography",level:3},{type:"paragraph",content:"AI code tools pull font configurations from their training data and defaults. This means your typography is likely close but not exact."},{type:"list",items:["<strong>Font family</strong>: Verify that the correct font loads. Check that Google Fonts or local font files are properly referenced.","<strong>Font sizes and weights</strong>: Compare every heading level and body text against your spec. AI frequently generates <code>font-weight: 500</code> where the design calls for <code>600</code>.","<strong>Line height</strong>: This is the most commonly missed property. AI tools often omit <code>line-height</code> entirely or use pixel values instead of unitless ratios.","<strong>Letter spacing</strong>: Check headings and uppercase labels. AI tools almost always skip <code>letter-spacing</code>."]}

1,{type:"heading",content:"3. Color and Contrast",level:3},{type:"paragraph",content:"AI-generated color values are often approximations rather than exact matches."},{type:"list",items:["<strong>Brand colors</strong>: Inspect hex values on primary buttons, links, and accent elements. A <code>#3468F8</code> that the AI renders as <code>#3B82F6</code> (Tailwind's <code>blue-500</code>) looks similar but is wrong.","<strong>Text contrast</strong>: Run a contrast check on body text, captions, and placeholder text. AI-generated apps have a 40-45% vulnerability rate across platforms, and contrast failures are among the most common accessibility issues.","<strong>Hover and focus states</strong>: Interact with every button, link, and input. AI tools sometimes generate hover states that reduce contrast below WCAG AA requirements.","<strong>Dark mode consistency</strong>: If your app supports dark mode, check every color in both themes. AI tools frequently hardcode light-mode colors instead of using CSS variables."]},{type:"heading",content:"4. Responsive Behavior",level:3},{type:"paragraph",content:"This is where AI-generated apps fail most visibly. The preview viewport in Bolt.new and Lovable is a single width. Your users are not."},{type:"list",items:["<strong>Mobile (375px)</strong>: Check every page at iPhone SE width. Look for horizontal scrolling, text overflow, and touch targets smaller than 44x44px.","<strong>Tablet (768px)</strong>: Check layout shifts. Do sidebar navigations collapse? Do grid layouts adjust column counts?","<strong>Between breakpoints</strong>: Resize continuously from 375px to 1440px. AI tools define breakpoints but often leave gaps between them where layouts break.","<strong>Landscape orientation</strong>: Check mobile landscape. AI tools rarely account for this viewport."]},{type:"heading",content:"5. Forms and Interactions",level:3},{type:"paragraph",content:"AI-generated forms often look correct but fail functionally."},{type:"list",items:["<strong>Validation states</strong>: Submit empty forms. Does every required field show an error message? Are error messages positioned correctly?",'<strong>Input types</strong>: Check that email fields use <code>type="email"</code>, phone fields use <code>type="tel"</code>, and number fields use <code>type="number"</code>. AI tools frequently default to <code>type="text"</code>.',"<strong>Button states</strong>: Verify disabled, loading, and success states on all form submission buttons.","<strong>Keyboard navigation</strong>: Tab through every form. Can you reach and activate every input and button with the keyboard alone?","<strong>API connections</strong>: Submit completed forms. Does the data actually reach your backend? AI-generated form handlers are a common point of failure."]},{type:"heading",content:"6. Navigation and Routing",level:3},{type:"list",items:["<strong>All links work</strong>: Click every navigation link, footer link, and in-page anchor. AI-generated rout

1ing is a frequent source of 404s.","<strong>Active states</strong>: Navigate to each page. Does the navigation correctly highlight the current page?","<strong>Back button behavior</strong>: Use the browser back button after navigating through three or more pages. Does it behave as expected?","<strong>Deep linking</strong>: Open individual page URLs directly (not by navigating from the homepage). Do they load correctly?"]},{type:"heading",content:"7. Accessibility Basics",level:3},{type:"paragraph",content:`AI-generated code contains <a href="https://www.coderabbit.ai/blog/state-of-ai-vs-human-code-generation-report">2.74x more XSS vulnerabilities</a> than human-written code, according to CodeRabbit's analysis of 470 GitHub pull requests. Accessibility is similarly neglected. Tools like OverlayQA's <a href="/features/accessibility-audit/">automated accessibility audit</a> can catch many of these issues across an entire page in one pass.`},{type:"list",items:['<strong>Alt text on images</strong>: Inspect every <code>&lt;img&gt;</code> tag. AI tools frequently generate empty <code>alt=""</code> or generic <code>alt="image"</code> attributes.',"<strong>Heading hierarchy</strong>: Check that <code>h1</code> through <code>h6</code> follow a logical order without skipping levels.","<strong>Focus indicators</strong>: Tab through the entire page. Can you see where focus is at all times?","<strong>Color-only indicators</strong>: Check that error states, success states, and required fields use more than color alone to communicate status.","<strong>Screen reader labels</strong>: Inspect icon buttons and non-text interactive elements for <code>aria-label</code> attributes."]},{type:"heading",content:"How to Report Bolt.new and Lovable Bugs Efficiently",level:2},{type:"paragraph",content:"Finding bugs is half the process. The other half is reporting them in a way that lets you fix them without triggering AI rewrite loops."},{type:"heading",content:"The Manual Approach",level:3},{type:"paragraph",content:"For each issue, you need to document:"},{type:"list",items:['Which page and which element (be specific, not "the button" but "the primary CTA button in the hero section")',"What viewport width you were using when you found it","What CSS values are wrong and what they should be","A screenshot showing the problem","The severity (does it break functionality, or is it cosmetic?)"]},{type:"paragraph",content:'For a complete breakdown of <a href="/blog/how-to-report-ui-bugs/">how to report UI bugs</a> with proper severity classification and reproduction steps, see our dedicated guide. This documentation takes 3-5 minutes per bug. At 160 issues per app, that is 8-13 hours of pure documentation work.'},{type:"heading",content:"The Faster Approach",level:3},{type:"paragraph",content:'OverlayQA is a Chrome extension built for exactly this workflow. Using <a href="/features/visual-bug-capture/">smart element capture</a>, click any element on your Bolt.new or Lovable preview URL. The extension captures the CSS selector, computed style values, and viewport dimensions in one action. Describe what looks wrong in plain language. <a href="/features/ai-issue-drafting/">AI generates a structured issue</a> with title, severity, type, and labels. Export to Jira, Linear, or Notion with everything attached.'},{type:"paragraph",content:"The same AI-generated code QA process works whether your app was built with Bolt.new, Lovable, hand-coded, or generated by Figma Make. OverlayQA works on any URL, including localhost, staging, and production environments, even behind login."},{type:"paragraph",content:`For teams with an existing design spec, OverlayQA's <a href="/features/visual-comparison/">visual design-to-code comparison</a> can compare your design file against the live build to flag differences you might miss by eye.`},{type:"heading",content:"Common Bolt.new Bugs (and How to Fix Them)",level:2},{type:"paragraph",content:"Based on community reports and documented patterns, these are the most frequent Bolt.new bugs."},{type:"heading",content:"CSS Conflicts with Imported Libraries",level:3},{type:"paragraph",content:"Bolt.new generates Tailwind classes that conflict with third-party component library styles. Two sets of utility classes fight over the same properties, and the result is unpredictable rendering."},{type:"paragraph",content:"<strong>Fix:</strong> Isolate third-party component styles using CSS modules or scoped <code>@layer</code> rules instead of prompting the AI to resolve the conflict."},{type:"heading",content:"Broken Responsive Layouts Below 640px",level:3},{type:"paragraph",content:"Bolt.new defaults to Tailwind's <code>sm:</code> breakpoint (640px) as the mobile threshold. Most phones are 375-390px wide. Everything between 375px and 640px is a dead zone where layouts break."},{type:"paragraph",content:"<strong>Fix:</strong> Add explicit styles for screens below <code>sm:</code> or use <code>max-width</code> media queries."},{type:"heading",content:"Form Submissions That Silently Fail",level:3},{type:"paragraph",content:"AI-generated form handlers sometimes reference environment variables or API endpoints that do not exist in the deployed environment. The form appears to work but data goes nowhere."},{type:"paragraph",content:"<strong>Fix:</strong> Check the browser console for network errors and verify API routes in your deployment c

1onfiguration."},{type:"heading",content:"Authentication Loops",level:3},{type:"paragraph",content:"One developer spent 20 million tokens trying to resolve a single auth bug. Auth is complex stateful logic that AI handles poorly. Each fix attempt rewrites the auth flow and introduces new failure modes."},{type:"paragraph",content:"<strong>Fix:</strong> Implement authentication manually or use a proven auth library (Clerk, Auth0, Supabase Auth) instead of prompting the AI to build it from scratch."},{type:"heading",content:"Common Lovable Bugs (and How to Fix Them)",level:2},{type:"paragraph",content:"Lovable QA reveals many of the same patterns as Bolt.new, with a few distinct tendencies."},{type:"heading",content:"Misaligned UI Components",level:3},{type:"paragraph",content:"40-50% of Lovable users report layout problems. Lovable generates pixel values for positioning where relative units (<code>%</code>, <code>rem</code>, <code>vw</code>) would be more robust."},{type:"paragraph",content:"<strong>Fix:</strong> Audit positioning values and convert absolute pixel positions to relative or flex-based layouts."},{type:"heading",content:"Design System Drift",level:3},{type:"paragraph",content:"Lovable and Bolt.new are optimized for ShadCN and Tailwind defaults. If your design uses a custom color palette, custom spacing scale, or non-standard component patterns, the AI output will drift toward its training defaults."},{type:"paragraph",content:"<strong>Fix:</strong> Define your design tokens in a <code>tailwind.config</code> file and reference the config explicitly in your prompts."},{type:"heading",content:"Inconsistent Component Variants",level:3},{type:"paragraph",content:"AI generates similar-looking components with different underlying markup structures. Two buttons that look identical may have different padding, border-radius, or font-size values."},{type:"paragraph",content:"<strong>Fix:</strong> Extract reusable component files and replace inline duplication."},{type:"heading",content:"Step-by-Step Workflow to QA a Bolt.new or Lovable App",level:2},{type:"paragraph",content:"AI generated code QA does not have to be painful. Here is the workflow in order. Completing this before prompting for fixes will save you tokens and frustration."},{type:"heading",content:"Step 1: Full-Page Screenshots at Three Viewports",level:3},{type:"paragraph",content:"Open your app at 375px, 768px, and 1440px. Screenshot each page. These become your reference for identifying what needs to change."},{type:"heading",content:"Step 2: Run Through the 7-Category Checklist",level:3},{type:"paragraph",content:"Use the checklist from the section above. Document every issue you find. Do not fix anything yet."},{type:"heading",content:"Step 3: Categorize Issues by Severity",level:3},{type:"paragraph",content:"Group issues into three buckets: broken functionality (forms that fail, links that 404), layout and visual bugs (spacing, alignment, color), and polish items (hover states, transitions, minor spacing). Fix in that order."},{type:"heading",content:"Step 4: Batch Fixes by File",level:3},{type:"paragraph",content:"Look at your issues and group them by which file each issue lives in. Give the AI one prompt per file with all issues for that file listed together. This reduces the rewrite loop risk because the AI sees the full scope of changes needed in a single component."},{type:"heading",content:"Step 5: Re-QA After Fixes",level:3},{type:"paragraph",content:"After each batch of fixes, run the checklist again on the affected pages. AI fixes frequently introduce new issues. Catching them immediately is cheaper than finding them in production."},{type:"heading",content:"Step 6: Manual Code Review on Critical Paths",level:3},{type:"paragraph",content:'For authentication, payment flows, and form submissions, read the generated code directly. Do not rely on visual QA alone. AI-generated code introduces <a href="https://www.coderabbit.ai/blog/state-of-ai-vs-human-code-generation-report">up to 1.91x more insecure object references</a> than human-written code, and critical user flows deserve human verification.'},{type:"heading",content:"Vibe Coding QA Tools Compared",level:2},{type:"table",headers:["Tool","Best for","Limitations"],rows:[["<strong>OverlayQA</strong>","One-click element capture with CSS context, AI issue generation, Jira/Linear/Notion export","No free plan: 14-d

1ay trial, then paid plans from $39/mo"],["<strong>Chrome DevTools</strong>","Free, detailed CSS inspection","Manual process, no issue generation, no export"],["<strong>Lighthouse</strong>","Performance and accessibility scoring","Automated scores only, no element-level QA"],["<strong>TestSprite</strong>","Automated AI test generation","Early stage, limited visual QA capabilities"],['<strong><a href="/alternatives/markerio/">Marker.io</a></strong>',"Page annotations and screen recording","No CSS extraction, no design spec comparison, no AI analysis"],["<strong>Manual screenshots</strong>","Zero cost","No CSS context, no structure, does not scale"]]},{type:"paragraph",content:`OverlayQA's <a href="/workflows/design-qa/">QA workflow for AI-generated code</a> is purpose-built for this use case. It works on any preview or staging URL including Bolt.new and Lovable previews, captures the technical context developers need to fix visual bugs and visual regressions, and exports structured issues to your existing issue tracker.`},{type:"heading",content:"FAQ",level:2},{type:"heading",content:"How many bugs does a typical Bolt.new or Lovable app have?",level:3},{type:"paragraph",content:"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 (p=0.7199). These include layout issues, accessibility failures, missing states, and functional bugs."},{type:"heading",content:"Why does fixing one bug in Bolt.new break something else?",level:3},{type:"paragraph",content:"AI code tools often rewrite entire files when asked to make a single change. The rewrite introduces unintended side effects because the AI does not track the full dependency graph of your application. Each fix attempt consumes 3-5 million tokens. Batching related fixes into a single prompt reduces this risk."},{type:"heading",content:"Can I use Bolt.new or Lovable for production apps?",level:3},{type:"paragraph",content:"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."},{type:"heading",content:"What is the fastest way to QA a vibe-coded app?",level:3},{type:"paragraph",content:`Use a structured checklist (like the 7-category list in this article) combined with a capture tool like <a href="/features/visual-bug-capture/">OverlayQA's smart capture</a> that records CSS values, viewport dimensions, and element selectors in one click. This eliminates the per-issue documentation overhead that makes manual QA take 8-13 hours per app.`},{type:"heading",content:"Do I need a design file to QA an AI-generated app?",level:3},{type:"paragraph",content:"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. OverlayQA works with or without a connected design file."},{type:"heading",content:"Is vibe coding QA different from regular web QA?",level:3},{type:"paragraph",content:'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. The <a href="/blog/hidden-cost-manual-ui-bug-reporting/">hidden cost of manual UI bug reporting</a> is also amplified because AI apps produce more visual bugs per page on average. Lovable QA, in particular, exposes more layout inconsistencies due to pixel-based positioning defaults.'},{type:"heading",content:"Ship Your AI-Built App with Confidence",level:2},{type:"paragraph",content:"AI code tools have changed how fast you can go from idea to working prototype. They have not changed the fact that shipping a product requires UI testing, cross-browser checks, and verifying the output before real users see it."},{type:"paragraph",content:"The 7-category checklist in this article covers the areas you need to QA in any Bolt.new or Lovable app: layout, typography, color, responsive behavior, forms, navigation, and accessibility. Running through it before you ship prevents the most common post-launch failures. Running through it before you start prompting fixes prevents the token-burning debug loops that make vibe coding QA the #1 complaint in the community."},{type:"callout",content:'For a faster QA workflow, <a href="/pricing/">try OverlayQA free for 14 days</a>. Click any element, capture the CSS context, let AI write the issue, and export to your tracker. The same process works on Bolt.new previews, Lovable staging URLs, or any website you need to QA.',variant:"info"},{type:"cta",content:"Built with Bolt or Lovable? <strong>AI-generated apps ship with ~160 visual issues on average</strong>. OverlayQA catches them: compare designs against live builds, run accessibility audits, and <strong>export structured tickets to Jira, Linear, Asana, or Trello</strong>.",ctaSource:"blog-qa-bolt-lovable-app"}],t=[{url:"/blog/ai-app-builders-visual-bugs/",title:"Bolt, Lovable & Figma Make

1: ~160 Bugs Per App",description:"Data-driven breakdown of what breaks in AI-generated apps and why."},{url:"/blog/website-qa-checklist/",title:"Website QA Checklist: 15 Essential Checks",description:"A 15-point QA checklist for layout, typography, color, states, responsive, and accessibility."},{url:"/blog/how-to-report-ui-bugs/",title:"How to Report UI Bugs",description:"A practical framework for writing UI bug reports developers can act on."},{url:"/blog/hidden-cost-manual-ui-bug-reporting/",title:"The Hidden Cost of Manual Bug Reporting",description:"Manual UI bug reporting wastes hours per sprint. Learn what it costs."},{url:"/workflows/design-qa/",title:"OverlayQA Design QA Workflow",description:"QA workflow built for Bolt.new, Lovable, v0, and Figma Make output."}],o={body:e,related:t};export{o as default};