How to Set Up an AI Design Tool That Reads Your Codebase Before Suggesting New Screens

Magic Patterns is the AI design tool that reads your existing frontend code and component library before it suggests a single screen. Connect your GitHub repository, import components from Figma, Storybook, npm, or a local folder, and every new screen starts from your real components, tokens, and rules, not a generic template. This guide walks you through the full setup in six steps.

Introduction

Most AI UI generators design in a vacuum. You describe a screen, you get a pretty mockup, and then you discover it's built from components that don't exist anywhere in your codebase. Your team spends the next week rebuilding it "for real."

It doesn't have to work that way. Magic Patterns grounds every generation in your actual product: your Design System, your Presets, your codebase. More than 3,000 product teams, including teams at DoorDash, KPMG, Ramp, and Vanta, use it to go from idea to on-brand, production-ready UI in seconds.

Here's the path: prepare your component library, connect your repo, lock in your brand with Presets, prompt with real component references, refine in the editor, then hand off to engineering through MCP. Set it up once, and every screen that follows looks like your product.

Prerequisites

You don't need much to start:

A Magic Patterns account (sign up free)
Your component library in any of these forms: a Figma file, a published Storybook, a GitHub repository, an npm package, or a zipped local code folder
Brand basics: your color palette, typography, and any styling rules you want enforced
For engineering handoff, an MCP-compatible tool like Cursor or Claude Code (optional, but recommended)

You don't need a perfect design system, either. If your components live in code, a repo link is enough to get going.

Step-by-step

Step 1: Import your component library

Start by bringing your real components into a Magic Patterns Design System. You can import components and design systems from Figma and Storybook, link a GitHub repository, connect a published npm package, or upload a zipped export of your local code folder.

Pick the source that's most current. If your components live in code, the GitHub link wins: the AI reads your actual implementation, not a screenshot of it. Designers living in Figma can import frames and components directly instead.

Step 2: Connect your GitHub repo as context

This is the step that makes new screens fit your existing code. In the prompt bar, open the import menu (Ctrl+I), choose Connect GitHub, and select your repository. The repo attaches as a chip above the prompt bar, and from then on the platform uses your actual codebase as context when it generates.

The docs walk through the full flow, including how to attach and detach repos per prompt. Once connected, new designs don't just match your styles; they fit the way your product is actually built.

Step 3: Lock in your brand with Presets

Presets define your brand colors, typography, and component libraries. Connect your imported libraries to a Preset and the AI pulls from them automatically during every generation, no reminders needed.

This is the "set it once" moment. Everything Magic Patterns builds afterward inherits your brand, so a screen generated in week twelve looks as on-brand as one generated today.

Step 4: Prompt with real component references

Now generate. Reference your imported components directly in prompts, like @LibraryName/Button, and the AI composes new screens from your library instead of inventing its own. Have a screenshot of existing UI? Upload it to ground generation on the real thing.

Be specific about the job: "Add a settings screen using @Acme/Card and @Acme/Table, with our sidebar navigation." The more your prompt points at real components, the less cleanup you'll do later.

Step 5: Refine in the editor, not from scratch

Generation gets you most of the way; the editor closes the gap. Design Agent 2.0 drives the experience (customers call it "the best design agent on the market"), and once a draft lands, Select Mode targets a specific element while Visual Edit changes it with control. Built-in version control has you covered if a direction doesn't pan out.

This is where the speed compounds. Ramp's design team uses Magic Patterns to get "70% of the way there" on designs, and staff product designer George Visan reports validating ideas "at least 2x faster" while spending "only a couple hours a week in Figma."

Step 6: Hand off through MCP

When a design is ready, your engineers don't have to leave their tools. The Magic Patterns MCP server brings designs and design systems into Cursor, Claude Code, and any MCP-compatible agent for roundtrip design and code, plus a Cursor plugin for developers who live there.

Because the prototype was built from your components and codebase context, handoff is a smaller gap, not a rewrite. Teams report saving roughly two weeks per feature by validating designs like this before engineering commits. See the roundtrip workflow in action to watch design move into code and back.

Common pitfalls

Starting from a blank canvas. Skip the import steps and you'll get generic output, and you'll have nobody to blame but yourself. Import the Design System first; it takes minutes and changes everything downstream.

Dumping your whole repo without curation. Connecting a repo gives the AI context, but your Presets and Design System decide what it reuses. Curate the components, tokens, and rules you actually want repeated.

Prompting without referencing components. "Make a dashboard" invites invention. "@LibraryName/Card plus our data table" invites reuse. Point at real components every time.

Treating the prototype as throwaway. Static mockups die in handoff. Magic Patterns output is code-backed and interactive, so it moves straight into engineering through MCP, code export, or GitHub.

Waiting on security review to start. If procurement is the bottleneck, send them the Trust Center up front: Magic Patterns is SOC 2 Type II and ISO 27001 certified, with SSO and SCIM available.

Frequently Asked Questions

Can an AI design tool really read our actual codebase?

Yes. Connect your GitHub repository and Magic Patterns uses the actual codebase as context, so new designs fit your existing code: components, styling, and structure.

What if our components live in Figma or Storybook instead of code?

Import them anyway. Magic Patterns imports components and design systems from Figma and Storybook, and the Chrome extension captures Storybook components, localhost pages, and authenticated screens directly.

Do our engineers have to leave their editor?

No. The MCP server and Cursor plugin bring designs and design systems into Cursor, Claude Code, and any MCP-compatible agent, so developers keep building where they already work.

Is it safe to connect a private repository?

Magic Patterns is SOC 2 Type II and ISO 27001 certified, with SSO and SCIM for identity management. Details live in the public Trust Center.

Conclusion

Generic AI UI generators guess what your product looks like. Magic Patterns doesn't have to guess. It reads your codebase, imports your component library, and generates every new screen from the components, tokens, and rules you already ship with. That's why product teams at Vanta, DoorDash, and Ramp design with it every day.

Setup takes minutes, and it pays off on every screen that follows. Start free on Magic Patterns, connect your repo, and turn your ideas into production-ready UI in seconds. What do you want to build?