Design System Prototyping — Use Your Real Components | Alloy
Prototype with your design system
Upload your codebase folder. Alloy extracts your components, tokens, and icons so every prototype is built from the system you already ship.
From folder to component library
No token pipelines, no registries, no plugin setup — the source code you already have is the integration.
Upload your folder
Point Alloy at your design-system or app folder. Files upload straight from your browser — no repository access or token export pipeline required.
Alloy learns your system
An AI agent reads the source and builds a library: every component with its real code and styles, your design tokens as ready-to-use CSS, your icons, and brand assets.
Prototype with real components
Start a session with the library attached. The AI reuses your actual components instead of inventing lookalikes, and you can @-mention any component to drop it into a prototype.
Everything your system contains, extracted
The analysis is exhaustive by design — a library holds the parts of your design system that matter when building new UI.
Components
Every public component, registered with its real source, co-located styles, and usage notes — plus a live preview card.
Design tokens
Colors, typography, spacing, and font faces extracted as ready-to-use CSS, so new UI starts from your values, not approximations.
Icons
Your full icon set, browsable by you and searchable by the AI while it designs.
Guidance
Conventions distilled from your code into instructions the AI follows whenever it builds something new.
Brand assets
Logos, wordmarks, and fonts carried over pixel-identical — nothing re-rendered.
Trusted by teams whose prototypes have to look like production.
Alloy gives me fast prototypes that look exactly like my product - that's the big differentiator. My team instantly gets what I mean.
With other tools, users would get lost. Alloy lets me prototype inside an interface that already feels familiar to them.
Other tools rebuild your product from scratch and often get it wrong. With Alloy you capture the page and go. I use it almost every day.
The Chrome extension gives me really high-fidelity screens - I never get that level of fidelity in other platforms. I hand them straight to engineers.
Alloy captures web screens in seconds - even pages behind a login. Most other tools can't do this.
The screen capture copies the exact layout and UI of our system. And the select button is a lifesaver.
| Capability | Generic AI prototyping | Alloy |
|---|---|---|
| Design system input | Generic AI prototypingPaste a style guide into the prompt and hope it sticks | AlloyUpload the folder — an agent reads the actual source |
| Components | Generic AI prototypingRegenerated lookalikes that drift from production | AlloyYour real components, reused with their original styles |
| Tokens and fonts | Generic AI prototypingPlausible colors and type that are close but not yours | AlloyExact tokens and font files extracted from your code |
| Team consistency | Generic AI prototypingEvery teammate re-explains the design system per prompt | AlloySet a workspace default library once — every session uses it |
Frequently asked questions
What is design system prototyping?
It means building prototypes from the components, tokens, and patterns your team already ships — instead of generic UI that gets restyled later. The prototype looks like your product on the first render, stakeholders react to something real, and engineers inherit work that already speaks the design system.
How does Alloy learn my design system?
You upload a folder of your design-system or app source from your computer. An AI agent then reads the code and registers everything it finds into a library: components with their real source and styles, design tokens as CSS, icons, brand assets, and written guidance on how your UI is built. The agent is instructed to be exhaustive — every public component and icon, not a sample.
Do I need to connect a Git repository?
No. Libraries are created from a local folder upload straight from your browser — no repository permissions, CI setup, or token export pipeline. Pick the folder, watch the upload progress, and the analysis starts automatically.
Which frameworks and files are supported?
The analysis reads TypeScript, JavaScript, React, Vue, Svelte, and Astro source, along with CSS, SCSS, Sass, Less, HTML, Markdown, SVG, images, and font files. Test files and build artifacts are filtered out automatically, and a single library can ingest up to 5,000 files.
How do prototypes actually use my components?
When a library is attached to a session, its components, tokens, and assets travel with the prototype, and the AI is explicitly told to prefer your components over inventing new ones. You can also @-mention a specific component in chat to place it directly, with its original styling and design tokens intact.
Does it work together with page captures?
Yes. Libraries can list the hostnames they belong to, and when you capture a page from one of those domains the matching library attaches automatically — so a captured screen and your component library end up in the same session, ready to prototype with.
Can I add components without uploading code?
Yes. While editing any prototype you can select an element and save it to a library as a component. Teams often start this way and upload the full design-system folder once the library proves useful.
Can the whole team use the same library?
Yes. Libraries belong to your workspace, and one library can be set as the workspace default so every new session uses it without anyone having to remember. Teammates can pick a different library — or none — per session.
Is my source code safe?
Your upload is stored in Alloy’s secure storage and used to analyze and build your library. The analysis agent reads the source read-only, and irrelevant files like tests and build output are excluded before upload.
How is this different from design-token sync tools?
Token-sync tools keep values consistent between design files and code; they don't generate UI. Alloy solves the next problem: producing new screens that use your system rather than a lookalike.