# Storybook Workbench: audit vibe-coded UIs and find hidden bugs in hours > Storybook Workbench is a bundle of Agent Skills that turn Storybook into an audit layer for AI-generated UIs: find dead components, design-system drift, and hidden accessibility bugs. - Date: 2026-07-08T00:00:00.000Z - Authors: Gleb Stroganov, Camila Mirabal, Travis Turner - Categories: AI, Design, DX - URL: https://evilmartians.com/chronicles/storybook-workbench-audit-vibe-coded-uis-and-find-hidden-bugs-in-hours --- An AI agent can generate a full web app that looks plausible and runs within one afternoon. However, you still can’t really tell which of the 469 component files in ‘src/’ are structural and which are dead ends the agent abandoned three prompts ago. So, Evil Martians built [Storybook Workbench](https://github.com/strongeron/storybook-workbench/tree/main): a set of agent skills for auditing your UI and presenting it in Storybook, for both the first iteration and beyond. Storybook Workbench guides coding agents as they audit each of your app’s components and translate them into visible stories. It’s made for engineers, designers, or founders who've inherited an agent-coded prototype, are moving a design system into code, or those actively working and thus mindful of token use and paying the bills. *Meet Evil Martians' client*: https://evilmartians.com/clients/thicket We used these skills internally on a vibe-coded app and found 31 dead components and six accessibility bugs no build would catch. **This process took hours instead of three days.** In this post, we'll share why we built these skills, the methodology behind them, and how you can more effectively audit your app’s UI on Storybook. --- *Inherited a vibe-coded prototype or moving a design system into code? Let's render every state, find the slop, and make your UI maintainable.* [Contact Evil Martians](https://evilmartians.com/contact-us) --- ## Why we must audit vibe-coded app UIs Agentic coding has caused design to move into the codebase, increasingly replacing Figma as the source of truth. As a result, engineers, designers, and solo founders now work on top of code that they either don’t know how to read or has too much going on. This is because vibe-coded apps make the mess invisible; sure, you can see a diff in a pull request, but you can’t see if the agent leaves dead components. Since agents generate faster than they clean up, slop accumulates, hiding usability bugs and creating a review bottleneck. The best way to learn what’s inside your codebase and stop the rot is by auditing it. On the app mentioned above, the inventory came back with huge numbers: 469 component files, out of which 438 were real, while 31 were dead, defined, or never imported. This dead code wasn't evenly spread either. Nineteen of those 31 components were abandoned pages or complete flows that had been replaced. This truth was only visible thanks to our Storybook Workbench audit. Vibe-coded repos come with an agent-written `AGENTS.md,` `CLAUDE.md,` or `DESIGN.md` file that isn't always accurate. These also don’t give you the right guardrails, drift on each iteration, and can’t be used as the source of truth. If your audit starts by trusting this file, it's already wrong. We've also seen three kinds of invisible rot show up in every agent-generated codebase that's been audited: - Dead components hidden in the codebase because they’re not referenced by anything - Multiple design systems coexisting in the same codebase - Component states written as conditionals that are only visible when rendered in isolation ## Why Storybook is the right audit surface [Storybook](https://storybook.js.org/) renders components in isolation, outside the app that hosts them, one state at a time. You can use it as a documentation tool when building component libraries, but we found it’s actually much more useful for auditing an AI-generated frontend. This way, you can see what the UI actually does according to the code. A designer himself, Martian Gleb Stroganov created Storybook Workbench for three main users. ### Designers Before, we used to make screenshots and recreate flows in Figma. Working directly in the codebase makes our job challenging, and it becomes even harder to complete tasks if we can’t see the specifics of all changes. These skills help us see the full picture with actual states and accurate data, and iterate directly from real use cases. ### Frontend engineers You now expect designers to use AI for coding, but you inherit unreliable code because you can't tell which files break a screen somewhere else. So, you either stop deleting and start adding more code on top of it, or end up rewriting the entire thing. This makes maintaining the app expensive and dreadful. This tool tells you exactly which code is okay to remove. ### Founders If you’re a solo-founder building an idea you want to validate, not knowing what hides under the hood means there’s likely a big bill coming up in the future. Editing colors in Lovable, adding buttons in Bolt, and changing a feature in Claude Code without auditing and cleaning it up are buying you future debt. This tool shows you what to fix before it turns into real debt. ## A look inside Storybook Workbench [Storybook Workbench](https://github.com/strongeron/storybook-workbench/tree/main#install) turns a messy, AI-generated tool into something you can review. The results show which components are live vs. dead, the health of your design system, how pages and flows connect, and every component state rendered visually with its documentation. Inside, there are different skills that perform one of four tasks: onboard, orchestrate, navigate, or report. All of these start with `/sb.` *Image: Storybook Workbench hub page. Write the desired command and trigger the next step.* When you install Storybook Workbench, it installs one bundle from the terminal using your preferred agent, but it gives you context only for the skill you run. So the bundle is a loop, not a menu. From the main hub you can see what you need to do based on your repo’s state and the next suggested command. Once you run it, it reviews your repo, hands back a readiness report, and guides you to the next step. *Image: Storybook Worbench detected stack story* So you install skills, run the audit, get structured JSON, render it in Storybook, and see the stories in form of an audit. We won't bore you with the specifics of each skill here. Instead, you can read the [documentation](https://github.com/strongeron/storybook-workbench) at your leisure. ## Three Storybook Workbench use cases Here’s what you can do with these skills in practice: ### 1. Audit your UI You can use this tool to see all the components, tokens, dead code, and flows visually in Storybook. The skills scan your codebase using deterministic shell and Python scripts that produce structured JSON reports. *Image: Find a design health core, all icon uses, and a breakdown of your app flows in Storybook.* From there, Storybook wrappers render everything visually and show you where each component and token is used, which components exist in the code but aren't imported anywhere, and how pages connect. ### 2. Act upon audit findings Because every skill outputs structured JSON, the data can go anywhere. You can feed the audit results to Linear’s MCP and generate tickets for your dev team, or export findings as a PDF report to send to stakeholders. You can also use the built-in `sb-figma` skill to handle bi-directional sync and map foundation tokens between Figma and code, share approved components, and push Code Connect mappings back to Figma Dev Mode. ### 3. Continuous improvement You can use the `sb-audit` skill to periodically audit your UI after changes. It continuously refreshes all JSON reports, surveys the catalog for naming drift, flags stale decisions, and checks for design-system regressions like raw hex values or undefined tokens creeping back in. The findings are saved with a timestamp in `.storybook/audit/findings.md` and git history keeps snapshots of each audit state so you can diff over time. This way, you can scaffold once, audit, generate action items, fix, re-audit, and repeat. ## What you get from the audit By the end of the run, you get a full Storybook audit that looks something like [this](https://main--6a26dda52fe4a57aa540d0ed.chromatic.com/). The output is a set of things that were hard to find before: - A rendered catalog of every component in every state that matters, each showing its actual loading, empty, error, and populated states instead of leaving them implied in the source - End-to-end flows mapped as journeys instead of screens: onboarding, content management, messaging, sign-up and conversion, and a multi-step creation wizard - A route list that tells you screens exist and a journey map to show you how someone moves between them, and which connections no story covered - Information about real accessibility bugs In the example above, the Storybook Workbench audit showed bugs present in about six components, invisible in the running app because nobody had rendered the states in isolation with an accessibility checker attached. (These included a badge variant with a contrast ratio of 3.87, under the WCAG AA threshold of 4.5, and a select component with broken combobox roles.) None of those bugs caused a build to fail, but nonetheless, all of them were _failing the users_. ## Time to get a grip on your debt The first step to paying off your debt is to know how much it is and what it’s made of. Storybook reflects production as it actually is, much like a designer would do in Figma. **Storybook Workbench gives you a list of rendered issues to share with the frontend designer or founder to sketch out a plan for paying it off.** After using Storybook Workbench: - Designers will complete real and in-code audits of a vibe-coded tool in in less than a day, a job that took around three days in the past. - Frontend engineers will be able to act faster and clean up the code with a reliable roadmap. - Founders will reduce future maintenance costs and build solutions users actually enjoy using. At Evil Martians, we turn client problems and the bottlenecks we find while working for them into open-source solutions. This tool is our new attempt to simplify design audits and bridge the collaboration gap between designers, frontends, and founders. You can't review what you can't see. So render it, one command at a time with Storybook Workbench. [Install it, ask your agent to run it for you, and share findings with your team](https://github.com/strongeron/storybook-workbench/tree/main). --- **Audit your AI-generated UI** Inherited a vibe-coded prototype or moving a design system into code? Let's render every state, find the slop, and make your UI maintainable. [Contact Evil Martians](https://evilmartians.com/contact-us)