AI Prototyping Within Design Systems: A Practical Guide
Bridging the gap between AI-generated prototypes and production-ready design system code.
1The Prototype Wall Problem
Design teams often face the prototype wall, where AI-generated screens look finished but lack functional integrity. Developers frequently discard these prototypes because they do not utilize the actual design system components. This disconnect creates expensive rework cycles, as teams promise delivery dates based on non-functional mockups that require complete rebuilding.
2Limitations of AI Builders
Current AI builders often read design systems but recreate components using generic libraries like Tailwind or shadcn. While these tools produce visually similar results, the generated code is not maintainable within a professional design system. Prompting harder does not solve this, as the underlying components are simply not the real ones.
3Verifying AI Component Output
To test if a builder is useful, ask it to show the code for a primary button. Verify which file it is imported from and compare the props to your original system. If the AI cannot point to your actual component package, it is merely creating a frozen, unusable copy for prototyping.
4The Role of Manifests
An AI agent needs a component manifest, a JSON file listing every component, its purpose, variants, and default properties. This inventory prevents the AI from inventing non-existent variants. By generating this list from code, such as via Storybook, you ensure the agent works with facts rather than hallucinated design patterns.
5Connecting via MCP
The Model Context Protocol (MCP) acts as a bridge, allowing agents to query your design system directly. Without this connection, agents rely on their internal memory of thousands of systems, leading to generic results. MCP ensures that every response is grounded in your specific system's current state and available components.
6Five Steps for Integrity
A robust setup requires five distinct actions: look up existing components, choose from a closed list, check against system rules, render the UI, and have a human decide. This process ensures that the AI does not invent properties and that the final output adheres to the team's established design standards.
7Avoiding Codebase Noise
Directly pointing an agent at a large codebase is inefficient and prone to drift. Agents may struggle with internal helpers and outdated patterns found in product repositories. Using an MCP setup reduces token usage by 27% and increases speed, while ensuring the agent only accesses sanctioned, current design system components.
8Leveraging Storybook MCP
Storybook is an ideal foundation for AI prototyping because it already documents live, clickable components. The Storybook MCP add-on allows agents to access this list, preview components, and run tests. Developers can set this up on a specific branch, providing a safe environment for designers to generate functional prototypes.
9Local Prototyping Workflow
By running an agent like Claude Code locally, you can keep your prototyping work private. The agent interacts with your local Storybook instance at localhost:6001. This allows designers to iterate on sign-in or registration pages using real components without publishing anything or exposing proprietary code to external cloud environments.
10Managing Invention Risks
Even with a good setup, AI may occasionally invent components. Always request a summary of what the agent used versus what it had to create. This transparency allows you to identify gaps in your design system and turn those missing pieces into productive conversations with your development team.
11Scaling with Agent Skills
As you repeat prototyping tasks, package your instructions into agent skills. These are predefined sets of rules that the AI loads automatically for specific workflows. By specifying which components are permitted, you maintain consistency and reduce the need for constant manual correction during the design and development handoff process.
12Future of Design Systems
The gap between design and code is closing as AI tools evolve to respect system constraints. By implementing manifests and MCP connections, teams can move beyond static mockups. This shift allows for higher-fidelity prototyping that developers can actually merge, ultimately saving time and ensuring design system integrity at scale.
Original article: UX Collective - Medium — AI Prototyping Within Design Systems: A Practical Guide