👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin
What is Magic Patterns?
Magic Patterns generates UI that matches your existing product and allows you to explore new ideas in minutes. You can design, clone, and iterate on screenshots, landing pages, chat interfaces, and more with AI.
I wanted to try out and compare it with the tools I tested previously (Lovable, Replit, v0, …). If you'd like to compare previous results, you can see them in my previous article.
Let’s dive in. Important note → I’m NOT affiliated with this company.
Importing Figma designs to Magic Patterns is very easy. You copy the link from Figma and paste it.
You immediately see the preview:
In this case, you don’t get the option to add any additional prompts because the AI behind it immediately starts building the prototype.
Okay, I got the interactive prototype.
As you can see, it is not entirely the same as my design. However, it was automatically built with all the logic. Numbers worked, Base button worked, Enable and Clear all were also connected.
Then I wanted to add more prompts to get closer to the design. Here is the next version.
It changed the checkbox, but it is still not the one from the design.
The next task was pills. Straightforward task. My design:
And the result:
Well, I don’t need to say that this is not really on point.
Then I imported tags with people:
It immediately added a clickable X → tag that disappears. Plus, the hover effect was there from the beginning.
The next step was trying out prompts for “Create a pricing page for a design system course.” This is the same prompt I also tested in one of my previous posts.
As you can see, the models behind online tools are similar, which is why the results for this pricing page are also similar.
There is another way to add designs → Import from site. You install a Chrome extension, select the portion of the site, and get the HTML. Later, you can convert it to a component, export it to Figma, or edit it with AI.
After playing with it for a few hours, it is very useful for quick prototypes built from prompting.
However, I prefer my own setup using Cursor with different models or Claude Code, because you can add way more context beforehand, include the link to Figma files (via Figma MCP), and get the code that looks the same as Figma (I wrote about this here.) And yes, it is more complex and more expensive; that’s why you need to understand the purpose of the tool and your goal.
My first MCP server
Built an MCP server for Claude Desktop 🔥🔥🔥
It connects:
*My notes
*My internal CLI tools
*My knowledge graph
*My project documentation
*Any data source or tool I use
*Recommendations, wishes, and guidelines I created
🎥 Quick demo shows asking about button colors and Claude pulling real values from my repository. →
Design System Skills in the AI Era →
If you missed my LinkedIn post this week, I’m sharing the set of skills that I predict (design system) designers need to learn.
Enjoy exploring. ✌️
— If you enjoyed this post, please tap the Like button below 💛 Thank you.
💎 Community Gems
The Vibe Coders are Lying to You
🔗 Link
✨ Best practices for prompting
by me
🔗 Link
The 3 AI image editors that actually work (and which one to use when) with crazy examples what you can do with new model Nano Banana
🔗 Link