by alexdanilowicz on 4/21/25, 2:07 PM with 114 comments
While other tools help with “AI-assisted coding,” we have been quietly focused on “AI-assisted designing.” With Magic Patterns you can visually communicate your idea, get hands on feedback from customers, and test new features.
Teddy and I are best friends and former frontend engineers turned founders. We arrived at Magic Patterns after several pivots—always in the design tooling space, but different products that all struggled to get usage. We started working on Magic Patterns after an internal hackathon. Teddy built a UI library catalog and I messed around with GPT 3.5. We thought it’d be fun to combine the two: an AI component generator. Describe whatever you want, and get back a React component!
That started to take off and we gained users, but it wasn’t developers using the tool. Instead, it was PMs, designers, and leadership who could finally communicate their ideas. They use it to test new ideas quickly, get feedback from customers, and improve communication with internal teams. Also, hobbyists (and programmers who aren’t designers) use us to create designs and UIs that they wouldn’t be able to otherwise.
We use Sonnet 3.5 and 3.7, and leverage a fine-tuned model for fast-applying edits. The most challenging part is determining the most relevant context to feed to the LLM. We attempt to solve this with our click to update feature and by letting users define a brand preset, or default prompt.
Unlike other tools in this space, we’re specifically focused on (1) product teams—we're realtime and collaborative; and (2) frontend only—we don't spin up a database or backend because we aren't solving "idea to fullstack app."
A common workflow is a product manager building an interactive prototype and then passing it off to a designer for more polish or directly to engineers. Many teams are even skipping Figma entirely now, telling us that it feels like an unnecessary middleman. Teams are instead generating clickable prototypes, collaborating directly with stakeholders, and using that as the mockup.
With Magic Patterns, you can: - Collaborate with your team on our infinite canvas; - Match your existing designs by creating reusable components directly; - Brainstorm features and flows. (The latter is what we use it for internally.)
We started as a way to build small, custom components, but now people are one-shotting entire websites and hosting them with us, or building dashboards that they share internally or in customer demos. People have sold $10k/mo contracts with Magic Patterns designs!
Small business owners—everyone from fishermen to driving instructors to hotel managers—are using us to build their websites and then hosting them with us. Example sites built by Magic Patterns include https://getdealflow.ai/ and https://joinringo.com/. It’s amazing how people who couldn’t have done that before are now able to, and super gratifying to us to be empowering people in this way.
You can get started with our docs here: https://www.magicpatterns.com/docs/documentation/get-started..., and you can try the actual product. Simply go to https://www.magicpatterns.com and prompt for any UI you want.
Today no login is required, just click “Coming from Hackernews?” and you’ll get 5 messages free to try. Once you hit the limit, you’ll then be prompted to login. Plans start at $19/mo for another 100 messages a month (https://www.magicpatterns.com/pricing).
We’re stoked to be sharing with HN today and are open to all feedback!
by nrmitchi on 4/21/25, 11:16 PM
I'm actually pretty impressed. A couple things though:
1. It took a _while_ to give me anything. Not sure if that's related to load, but it was ~17 files, and probably took 5+ minutes. It was not clear what was going on in that time, or what would happen if I left it. I literally left my machine to go something else before coming back.
2. I really hate saying this, but your pricing is probably way too low, especially at the "pro" level from your pricing page. When stepping into team-based config management and pre-sets, you're leaving a ton of money on the table without enterprise-style custom value-based pricing. If you were asking me, I would recommend moving the team based features (shared presets, custom access control, etc) into an "enterprise" level above pro).
I'm not going to comment on any sort of "correctness" as far as any complex UX behaviours or workflows; I'm only considering this from a mockup/design/demo-of-new-ideas perspective.
by shoemakerevan on 4/21/25, 3:42 PM
I’ve seen firsthand how hard it can be for non-designers to clearly communicate product ideas, and Magic Patterns seems to lower that barrier in a really meaningful way.
I noticed the GitHub Sync option—curious how teams are using that today. Is it more of a dev handoff (e.g. PR previews) or a starting point for custom builds? Would love to hear how that fits into engineering workflows—especially for folks skipping Figma entirely.
Also really appreciate the collaborative angle. Real-time team prototyping on a canvas feels like the future of internal product reviews.
Rooting for you both—this is such a focused and thoughtful approach to a real gap in the market.
by JofArnold on 4/21/25, 9:27 PM
Edit: to add some meat to that comment what surprised me was just how much better it was than Anthropic and OpenAI tools at that time for coming up with great looking products with minimal prompting. I also fed it other designs for inspiration and it replicated them brilliantly while incorporating my requirements. Good stuff.
by sumitkumar on 4/21/25, 5:47 PM
I tried this prompt.
``` create a Rubik's cube app with all available moves and show the cube and the animations. add a scrambler and a solver. Also add timer to time the moves. ```
I got this.
https://www.magicpatterns.com/c/psesccrmk41jibfhwp7wh1
Which looks like a good starting point but doesn't work at all. After this it is daunting to look at code. I still have to figure out how to tell the chatbox to fix it.
Gemini 2.5 pro did much better in one shot. (the prompt was different and without the scrambler/solver/timer)
by macok on 4/22/25, 6:34 AM
Even if the tool is excellent, it seems like the space is flooded with “Prototype your app with AI” tools, many backed by big players with huge ad budgets. The target audience must be getting bombarded with a dozen similar pitches every day. How did you manage to cut through the noise?
I find myself asking this question often, so there’s probably something fundamental I don’t quite grasp about startups in general.
by robertlagrant on 4/22/25, 11:34 AM
Currently a lot of UX work is "translate what you said into Figma and wait for comments" which is very automatable, and I think frustrating for UX people as much as anyone.
by sebastiennight on 4/21/25, 2:44 PM
In which case - you mention that MagicPatterns creates components, but can it also reuse existing components? E.g. sometimes I'd want to create a UX prototype, but use a pre-existing UI / design language to match how my sites/apps are already implemented.
by indiantinker on 4/21/25, 8:07 PM
I made a part of this using your tool : https://www.heated.studio/
Congratulations on the launch
by ramesh31 on 4/22/25, 3:55 PM
https://project-dog-dating-app-454.magicpatterns.app/
Love it. Really impressed with how it pulls in meaningfully related stock images by default; v0 and the rest aren't doing that.
by _blk on 4/22/25, 3:43 AM
by mildlyhostileux on 4/21/25, 7:56 PM
If this were a brand new project with no existing UI at all and we just needed to spin up a quick prototype, I think it’d be great for that. And honestly, I do think LLMs will end up playing a big role in UX design over time—so this is definitely in the right direction.
But for real-world use cases where the UI already exists and quality or timesaving matter, it doesn’t feel like the right fit yet.
by _betty_ on 4/22/25, 10:40 AM
rest of the tool doesn't feel that special - eg there's tonnes of code generators out there. would have to play more to understand but it wasn't immediately apparent
by getbreadbox on 4/21/25, 2:49 PM
i wanted to do show new customers examples of how they can use my product, which lives primarily in email.
to do it via Loom I would need to create tons of fake email addresses and juggle a whole complicated set of scenerios. and to do it in after effects would take forever.
so i used magic patterns to make an app that lets me upload JSON scripts of the email threads, and it animates them. if you skip to ~1 min mark on this video you can see the output https://drive.google.com/file/d/1iWC5U2Q3x30I5m1bTuN9c2OnfDo...
by dhruv3006 on 4/21/25, 2:46 PM
by lnenad on 4/21/25, 4:14 PM
by perardi on 4/22/25, 2:52 AM
1. Permissions/auth for prototypes. Stakeholders go for that. MBA folks don’t want to be sent crazy random obfuscated URLs, they want a nice login page that makes them feel secure. (Because MBA types will get weird about corporate secrets, even just high-level wireframes.)
2. Figma/Miro-esque infinite canvas with comments. Product managers and stakeholders love that flow.
by arturmakly on 4/21/25, 9:24 PM
1 - after selecting the Body of this page to capture as Design: https://app.visualsitemaps.com/pricing the "Render" tab > result showed be a blank box: https://share.cleanshot.com/jVGlwYND yet there was code in the "Code" tab.
after that it attempted to recreate the design, with some new additions:
- add a row of logos ( failed ) - add testimonials - add case studies - remove a row
Results >> it was 92% there: https://project-tailwind-conversion-with-lucide-icons-756.ma... had some missing images from the OG design.
Overall this is impressive for MVP.. I also like the manual click-to-select-objects for more refinement.
I was unable to find the CSS styling code however ( sorry not a React/Tailwind user ) it just showed me index.css like so: {@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';}
by sutterbomb on 4/21/25, 3:12 PM
by pedalpete on 4/21/25, 11:04 PM
My expectation was that I'd iterate on a few UX designs with the LLM and then when I'm happy with what the LLM is suggesting, I'd output to figma, and then maybe move to code.
It's great that you're generating code, but isn't that increasing your cost and processing time to write code for each iteration?
by jcgr on 4/21/25, 7:00 PM
The instant feedback-loop of iterating over components is great and perfect for me when I'm designing a feature that's heavy on the client side of things.
For example it took me half a day to go from idea -> design -> implementation
by consumer451 on 4/21/25, 9:03 PM
This seems like the death knell for theme stores.
by heystefan on 4/21/25, 11:20 PM
I've tried some of the same prompts I've done on v0 but didn't notice a lot of difference -- needs a lot of back-and-forth, as with v0. So not sure what would make me switch at this point.
by pelagicdev on 4/21/25, 4:14 PM
"As per my limitations, I am designed to work specifically with React and TypeScript/JavaScript only. I cannot provide direct conversions to plain HTML/CSS or other frameworks."
by ygreif on 4/21/25, 3:17 PM
by arcanelegender on 4/22/25, 10:50 AM
by kaywu on 4/21/25, 5:28 PM
by cpinto on 4/21/25, 7:22 PM
by lippihom on 4/21/25, 11:49 PM
by ookblah on 4/22/25, 8:33 AM
by badmonster on 4/22/25, 7:18 AM
by bertylicious on 4/22/25, 6:16 AM
If used like that, this service will effectively turn my job into that of an assistant to a machine.
by mattfrommars on 4/22/25, 2:12 PM
by jiwidi on 4/21/25, 7:52 PM