FlawPilot
From the blog

What a Frontend Developer Would Check in Your Vibe-Coded App

Quick answer: an AI builder gives you an app that works for one person, on one fast laptop, in one browser, doing everything correctly. A frontend developer spends most of their time on everyone…

Virendra PatilSecurity research22 Oct 202611 min read

Quick answer: an AI builder gives you an app that works for one person, on one fast laptop, in one browser, doing everything correctly. A frontend developer spends most of their time on everyone else. Before launch they would check six things: how the app behaves on a phone, which third-party packages it depends on, what errors it throws in the background, whether people with disabilities can use it, how fast it loads on an ordinary connection, and whether the code sent to the browser gives away anything private. You can test the basics of all six yourself in an afternoon, and a scan can cover every page at once.

Tools like Lovable, Bolt, Cursor, Replit and v0 have made it possible to go from an idea to a working product in a weekend. That is a real shift, and this isn't a post telling you to stop. The catch is that "working" means something narrower than it seems. The AI built what you asked for and showed you a preview. You clicked around, it did what you expected, and it looked finished.

What you saw is called the happy path: the route through your app where nothing unusual happens. Real users don't stay on it. They arrive on a cheap Android phone, on a train with a weak signal, with a screen reader turned on, or using the browser you never opened. None of that shows up in a preview window, and the AI had no reason to test for it because you never asked.

In short: a vibe-coded app is usually finished for you, not for your users. The gap sits in six predictable places, and every one of them can be checked without reading a line of code.

Why AI builders leave these gaps

It isn't carelessness. An AI coding tool works from your prompt and the preview in front of it. It is very good at producing something that matches the description and renders cleanly. What it doesn't do on its own is step back and ask the questions an experienced developer asks automatically:

  • What happens on a screen half this width?
  • What does this look like when the network is slow?
  • What did I just send to every visitor's browser?
  • Is this library still maintained, or does it have known holes?
  • Can someone use this without a mouse?

A developer asks these because they have been burned by each one before. The AI hasn't, and you may not know to ask. That is the whole gap. It isn't a sign that your app is bad. It is a sign that nobody has reviewed it yet.

The six things a frontend developer would check

Each of these has its own deep dive in this series. Here is the short version of each, with what to look for.

1. Does it actually work on a phone?

Most AI builders show you a desktop preview first, so that's the version that got polished. On a phone, text can run off the edge of the screen, buttons can sit too close together to tap accurately, menus can open behind other content, and the page can scroll sideways when it shouldn't. For many products, phones are where most visitors arrive, so this is often the first impression rather than an edge case.

Quick self-check: open your live site on your own phone, not a resized desktop window. Go through your three most important pages and try to complete your main action (sign up, book, buy) with one thumb.

Read the full guide: Your App Looks Great on Your Laptop. Have You Opened It on a Phone?

2. Which packages did the AI pick, and are they safe?

Modern apps are built from dozens or hundreds of open-source packages: small pieces of code written by other people that handle dates, forms, charts, payments and more. The AI chooses these for you. It tends to pick whatever was popular in the code it learned from, which can mean older versions, and older versions sometimes have publicly known security flaws. Nobody gets an alert when that happens unless someone is checking.

Quick self-check: ask your AI tool to list every dependency in your project with its version, and ask which ones have known vulnerabilities. Treat the answer as a starting point, not a verdict.

Read the full guide: Your AI Picked the Packages. Did Anyone Check Them?

3. What errors is it throwing that you never see?

Every browser has a hidden panel called the console, where a website reports problems as they happen. A page can look perfectly fine while the console fills with red error messages: a script that failed to load, a feature that silently stopped working, a request to a server that no longer exists. Your users won't see the message, but they'll feel the result as a button that does nothing or a section that never appears.

Quick self-check: on a desktop browser, right-click your page, choose Inspect, and open the Console tab. Reload the page and click through your main flow. Any red line is worth asking about.

Read the full guide: The Errors Your Users See and You Don't

4. Can everyone use it?

Accessibility means people with disabilities can use your app: someone who is blind and uses a screen reader, someone who navigates with a keyboard instead of a mouse, someone with low vision or color blindness. AI-generated interfaces often look clean but miss the invisible parts. Images have no text descriptions, light gray text sits on a white background, form fields have no proper labels, and custom buttons can't be reached with the Tab key. This is about reaching more customers, and in many places it is also a legal expectation.

Quick self-check: put your mouse aside and try to use your site with only the Tab and Enter keys. If you get stuck or can't tell where you are on the page, so will a lot of real people.

Read the full guide: Is Your Vibe-Coded App Usable for Everyone?

5. Is it fast for people who aren't you?

Your app feels fast because you are on good Wi-Fi with a powerful computer, and your browser has probably already cached half the site. A first-time visitor on a mid-range phone and a mobile connection has a very different experience. Vibe-coded apps commonly ship oversized images, load everything up front instead of when it's needed, and let content jump around while the page loads. Slow pages lose visitors, and Google uses page experience signals as part of how it ranks sites.

Quick self-check: open your site in a private browser window on your phone, using mobile data rather than Wi-Fi, and count how long it takes before you can actually do something.

Read the full guide: Why Your AI-Built App Feels Slow

6. What is your frontend telling strangers?

Everything your app sends to the browser can be read by anyone who visits. That's simply how the web works. The problem comes when an AI tool puts something in the frontend that should have stayed on the server, like a secret API key for a paid service, or when it "protects" an admin page by hiding the button instead of actually checking who is allowed in. Hiding something in the interface doesn't lock it.

Quick self-check: on your own site, right-click and choose View Page Source, then search for words like "key", "secret" and "token". Anything that looks like a long random string deserves a second look.

Read the full guide: What Your Frontend Is Telling Strangers

How urgent is each one?

Not every gap is an emergency. Here is roughly how a developer would rank them for a product that is about to go live or already has users:

AreaUsually urgent whenUsually can wait when
Exposed secretsAny secret key is visible in the browserOnly public keys meant for the browser are visible
Vulnerable packagesA known flaw affects a package your app actually uses in productionThe flaw is low severity or only in development tools
MobileYour main action can't be completed on a phoneSpacing or alignment is slightly off
Console errorsAn error breaks a feature users rely onWarnings that don't change what users see
PerformanceKey pages take several seconds before anything is usablePages are a little slower than ideal
AccessibilityCore flows can't be completed by keyboard or screen readerMinor contrast tweaks on secondary pages

Security issues go first because the cost of being wrong is high and fixes are usually small. Everything else is about not quietly losing the users you worked to attract.

How FlawPilot checks all six at once

Doing every self-check above on every page of your site takes a long time, and some problems only show up when you look across the whole site. That is what FlawPilot is built for. It has three kinds of checks, and between them they cover this whole list:

FlawPilot checkWhat it looks atCovers
Quick scanYour live URL, across four pillars: Security (headers, TLS, DNS and email authentication, known CVEs, publicly exposed secrets), Performance (page speed, Core Web Vitals, render-blocking assets), Infrastructure (open ports, subdomains, public cloud storage, WAF and CDN cover) and SEO (meta tags, crawlability, structured data)Exposed secrets, known vulnerabilities, speed
Site HealthCrawls every page of your site in mobile or desktop mode and scores each page for Performance, Accessibility, Best Practices and SEO, with screenshots and a list of findings ranked Failing, Needs improvement or DiagnosticMobile, console errors, accessibility, speed
Code scanConnects to your code repository and checks code security, code quality, vulnerable dependencies and exposed secrets, with AI fix suggestions for each findingVulnerable packages, secrets in code

A practical order for a vibe-coded app:

  • Run a quick scan on your live URL to catch anything urgent on the security side first.
  • Run Site Health in mobile mode to see how every page performs on a phone and which pages fail accessibility or best-practice checks.
  • Connect your repository for a code scan to see what is inside the code itself, including the packages the AI chose.

Each report tells you what was found, how serious it is, and where. You get a concrete list to fix or hand to a developer, rather than a vague sense that something might be wrong.

What a scan can't replace

Automated checks are very good at finding known patterns across many pages quickly. They can't tell you whether your sign-up flow makes sense to a first-time visitor, whether your error messages are friendly, or whether a screen reader user can actually finish a purchase in a reasonable way. Use a scan to find the problems you didn't know about, then do the short manual checks in this series for the parts only a person can judge.

Frequently asked questions

No. It's a fast and legitimate way to build. The risk isn't the tool, it's shipping without a review. Treat the AI's output like a first draft from a quick junior developer: usually good, sometimes wrong in ways that aren't visible from the preview.

Final Thoughts

Your AI builder took you from nothing to a working product, and that's the hard part done. What's left is the work that has always separated a demo from a product: making sure it holds up for people who aren't you, on devices you don't own, under conditions you didn't plan for.

The good news is that this gap is predictable. It shows up in the same six places in almost every vibe-coded app, and none of them requires you to become a developer. Check them yourself, run a scan to see the whole site at once, and fix the urgent items before your users find them for you.

How FlawPilot helps

FlawPilot finds security and quality issues in your AI-built app and shows you how to fix them. It checks your deployed site across security, performance, infrastructure, and SEO, and scans your source code for vulnerabilities, hardcoded secrets, and vulnerable dependencies.

Every finding is prioritized and explained in plain English, with the actual fix: the configuration change, DNS record, security header, or code change needed. For supported findings, AI-powered guidance adds step-by-step instructions and suggested code fixes.

Connect your Git provider to scan your repository alongside your live site, so application findings, code vulnerabilities, secrets, and dependency issues all land in one place.

It fits your existing workflow too: a REST API for scores and findings, an embeddable security badge, and an MCP server so tools like Claude, Cursor, or ChatGPT can read your findings and help you work through them.

The boundaries are clear: the public website scan reads only publicly accessible signals, with no agent or credentials required, and source-code scanning is opt-in and read-only. Fixes are never applied or merged without your review.

Vibe Coded App ReviewVibe CodingAI App BuilderFrontend ChecklistWebsite QualityPre Launch Checklist

Verify your AI-generated app is production-ready.

117 security checks in 60 seconds - free, no account needed.

Scan one page

Enter a URL - no account, no install.

Run a Site Health check

Requires a free account

Crawls every page we can reach and scores each one, so a slow template deep in the site stops hiding behind a healthy homepage.

Scan your source code

Requires a free account

Connect a Git provider to check for vulnerabilities, secrets, and risky dependencies.

Featured on