Launch HN: Magic Patterns (YC W23) – AI Design and Prototyping for Product Teams

[alexdanilowicz]

Alex and Teddy here. We’re launching Magic Patterns (https://www.magicpatterns.com), an AI prototyping tool that helps PMs and designers create functional, interactive designs and websites. There’s a demo video at https://www.youtube.com/watch?v=SK8C_tQBwIU, as well as video walkthroughs of specific examples at https://www.magicpatterns.com/docs/documentation/tutorials/v...

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!

[nrmitchi]

I don't normally comment on these things, but I gave it a quick shot for a project I'm working on (fairly generic dashboard-style prompt, but that's fine).

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.

[alexdanilowicz]

1. We're using Sonnet 3.7 for the first prompt. I've noticed with some prompts that require lots of files it can be PAINFULLY slow. Our servers also might be getting slammed from the HN traffic. We have a "fast" mode that uses 3.5 that you can toggle and that's the default for editing, however, it won't be as visually rich. We need to improve the loading experience for sure. One big UX/UI difference between our product and others is that our preview is always shown versus on other tools the code is always shown. Other tools will stream in the code to mask the load time. We used to do that, and will likely bring it back.

2. Re pricing - that's the most important feedback we'll hear all day! We used to have a "contact us for pricing" tier, but have found self-serve a lot more effective and easier to scale.

We actually still only 2 people, just my co-founder and me. When you say "custom value-based" are you referring to a "contact us for pricing" tier?

[shoemakerevan]

This is super cool—love how you’re flipping the AI-assisted creation story to focus on design-first workflows. The frontend-only scope is such a smart constraint, especially for PMs and non-designers trying to validate ideas fast without diving into fullstack territory.

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.

[alexdanilowicz]

The Github sync is used by solo entrepreneurs or hobbyists to get what they've designed in Magic Patterns into their IDE. 99% of the time that's an AI-IDE, like Cursor. And then from their they might add backend functionality. It's pretty interesting seeing how Cursor is the "next step" after these types of tools for that persona.

On the other hand, for product teams with mature engineering workflows, it usually goes like this: 1. Designers/PM brainstorms an idea in Magic Patterns 2. They get feedback in a design crit or from their users by sharing the Magic Patterns URL. 3. They iterate on it further and then either export it to figma or hand it off to engineering directly. But! engineering won't use the code because we output React + Tailwind CSS, and they are very likely using custom components or have their own nuances.

I do think as the foundational models get better the dev/design handoff will get smoother, but I don't think we are there yet, especially for existing code bases. For new projects, it's a different story and our two-way Github sync plays a role.

[JofArnold]

I used magic patterns for a couple of months and it was one of the first no brainer AI services I've paid for outside of the main LLMs and IDEs. It did such an amazing job on quite an esoteric frontend that's very much not your normal web app. Impressive. Next time I need to design and build some more frontend code I'll be subscribing again.

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.

[alexdanilowicz]

Good to hear from you and see you on here!

[sumitkumar]

Hi, Thank you for sharing.

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)

https://sumitkumar.github.io/llmgenerated-static/

[alexdanilowicz]

Do you have the prompt you used for Gemini 2.5 pro? I think it would be interesting comparing prompt for prompt!

In this case, it looks like the Gemini output that you linked — as you mentioned — doesn't include the requirement for a scrambler/solver/timer, so it's hard for me to comment directly on the comparison.

I ask because we can totally add Gemini 2.5 pro as one of the models we use under the hood!

[jonplackett]

I’m constantly intrigued how people are getting funding for entire companies that are essentially going to be a feature of all LLMs pretty soon.

[macok]

How did you manage to advertise or generate initial traffic for something like that?

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.

[alexdanilowicz]

> How did you manage to cut through the noise?

In startup land, I think it's really important you love your customer. Because you cut through the noise by having your existing customers tell their friends about you. 30% of new users hear about us from their friends.

I'll also note: we launched for the first time in October 2023. At the time the space was not flooded. We first got 10 users who loved us — where I define "love" as using us weekly — and since then it's a game of continuous iteration!

[robertlagrant]

This is a very good idea. I see a lot of friction (and lack of process) with product -> UX -> dev than with product and dev able to iterate on things like screen flows very quickly, and UX feeding in more from the user research angle.

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.

[alexdanilowicz]

100%. This is what we hear and see from our customers, many now skipping Figma entirely.

I shared this post before below, but to share it again: https://www.linkedin.com/posts/stephenwitmer_you-gotta-love-...

[sebastiennight]

Interesting. So, if you're targeting the PM and only building a frontend, are you actually competing with Figma? With the many use case of creating/iterating a UX prototype?

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.

[alexdanilowicz]

While we target the PM, it's a healthy mix of personas. We have many founders and designers who use us as well.

Some of the designers are indeed now skipping Figma, a direct quote from one of them (https://www.linkedin.com/posts/stephenwitmer_you-gotta-love-...):

> "I spend 80-90% less time drawing boxes in Figma - and more time using my insights, creativity, and words to create working prototypes [...] - to shorten feedback loops & better communicate vision."

Other designers will use us purely for brainstorming and then use the Magic Patterns Figma Plugin to export. The way this works behind the scenes is we convert the HTML to Figma nodes (https://www.magicpatterns.com/docs/documentation/get-started...)

We are rolling out a reusable components feature. If you hit us up in our support chat or email me: alex [at] magicpatterns.com I can add you to the feature flag!

[indiantinker]

Yay! I like Magic Patterns. It is more useful and accurate compared other tools. I have successfully been able to get some design ideas implemented in it. It seems to understand consistency more than other tools.

I made a part of this using your tool : https://www.heated.studio/

Congratulations on the launch

[alexdanilowicz]

Nice of you to comment! Website looks awesome.

In the earliest days of the product, we were hyper-focused on custom component libraries. We connected to Github repos and then fetched the relevant components for every prompt. We no longer do that because the models got a lot better and most customers don't care about the code, they care about the visual output. But this lead to us always caring a lot about consistency. Still iterating on that every day.

[ramesh31]

Single prompt, "A dating app for dogs"

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.

[alexdanilowicz]

Love this one! Thanks for sharing!

Lol at: > You and Max have liked each other!

[_blk]

There were some comments on pricing that I'd like to comment on: As a one man startup that's fully self-funded I deeply appreciate the prices that aren't straight out of Sillicon Valley. I believe in free market and really don't mind companies doing profit first, but those are often services that simply are out of reach for the more budget conscious of us while adopting new technologies. Let me thus petition for keeping a small enterprise plan in the price range you're now at, maybe limited by nr of employees, company age, and/or even easier, the number of subscription months/years. That'll give us a chance to adopt your service while increasing the value we get from the service.. When the value's there I won't hesitate to pay a higher price for it either.

[alexdanilowicz]

> or even easier, the number of subscription months/years.

We do offer 20% off on annual plans! ;)

We're very proud to be largely self-serve and have pricing that is completely transparent right now. Of course, we're open to feedback on pricing, especially enterprise pricing, which is why I was intrigued by the other comment.

And I agree, I think most people forget that a push back on price is really a push back on value, and so the value needs to be there first.

[mildlyhostileux]

I gave it a shot to iterate on our current UI. It did try to solve the problem we were focused on, but it also randomly removed other features that we hadn’t touched or even talked about. This makes me believe there will be a lot of back and forth that is low value just correcting small details. In UX/UI details really matter. I'd probably opt to just move pixels around my self in this case.

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.

[alexdanilowicz]

Our largest customers generally use us to prototype brand new UIs versus existing ones, so you're spot on.

We're certainly better at new UIs versus existing UIs. Existing UIs are tough because you need to first recreate what you have in the codebase first. This is a large reason why we built a Figma-like canvas (https://www.magicpatterns.com/docs/documentation/projects/ge...), so that you can reference existing designs to make new ones.

So, for example, you could make your navbar, button, dashboard, and then click on that and reference it to make another design.

P.S. if you're open to it, open a support chat or DM me? Would love to help you get more value and see what prompts are causing it to remove stuff. It can also be really frustrating when it removes features — what can be helpful is going back a version or also editing the code by hand. We've had code edit since day 1. Totally aligned everything needs to be a prompt to get the small details right.

[_betty_]

Canvas is an interesting idea - although the implementation feels very clunky and half finished.

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

[alexdanilowicz]

We always iterating and definitely need to improve! Anything you can point to explicitly that makes the canvas feel clunky/half finished? We're using a simple div under the hood!

To add some color: while we do generate code, we don't view ourselves as a code generator because our customers don't get value out of our tool from the raw code. They instead receive value from the interactive prototype, and for that reason it's lot of PMs, designers, founders using us versus developers.

[getbreadbox]

i recently used Magic Patterns for a very niche use case and had a great experience:

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...

[alexdanilowicz]

that's kind of you to share here!

Yes, it's incredible seeing what you can do with pure code. I think that's a lot of the magic here: with code, you can do anything. This part is super gratifying to work on.

From day 1, we have thought of code as a first-class citizen in Magic Patterns because that's all the LLM sees. So then at the application layer, it becomes our job to best help the user interact the LLM a.k.a feed it the most relevant code. This part is suuuuuper challenging.

[financetechbro]

Hey, your demo is great! (Neat use of Magic Patterns). Curious, do you provide outlook functionality?

[dhruv3006]

So how are you different?

[alexdanilowicz]

The biggest difference is that we only do frontend, and that's very intentional. There's no database provisioning, no integration with an auth provider.

At first this may sound like a disadvantage, but it helps us stay very focused on actual product teams and their workflows.

Examples include: 1. we have an infinite, real-time canvas for collaborating, 2. reusable components and leveraging your existing brand, 3. export to Figma, 4. password protection on designs, 5. feedback collection. These are all features that customers have asked for; we haven't found that product teams need to spin up a database or leverage a Stripe integration.

Last note: this space is absolutely massive and we find all the other tools popping up very motivating. We first launched in October 2023 (before most other tools) when all you could generate with GPT 3.5 was a small React component. Our long-term vision is to be the one-stop shop for frontend.

[esafak]

It looks neat, but it has to be asked. There's Lovable, Bolt, v0, etc.

[airstrike]

different from _____?

[lnenad]

Played around with it, really nice, will definitely use it in the future!

[alexdanilowicz]

thanks for commenting! Anything we could be doing better or initial thoughts?

[perardi]

Hey kids, grizzled UI designer and developer at a startup here. You’ve got 2 keys correct right at the start.

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.

[alexdanilowicz]

Two features that are the direct result of customer feedback and consistent product iteration!

[arturmakly]

congrats on the launch! I gave it a spin.. found these issues:

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';}

[alexdanilowicz]

If it's helpful, the styling will be in the "jsx" file vs the css file! So when you use that "manual click-to-select-objects" feature in the chat bar, you can click on "Highlight Code" and then that will take you to the React component. In that component, you'll see a className field which will have Tailwind classes in it. That's technically what is applying the styling and boiling down to raw CSS.

Ah! Need to clean up what's happening there when using the Chrome extension to import an existing design - pushing up a fix. There's a great discussion on the extension here (https://news.ycombinator.com/item?id=42043552) btw if you're curious how it works.

When it comes to adding images, it works best if you give it an existing image URL or upload an image, which we then host for you. In this case, Sonnet 3.5 appears to have hallucinated an invalid image link. Also need to make this more robust!

[sutterbomb]

Appreciate the HN guest login. That's a good idea :)

[alexdanilowicz]

hey thanks! spun that up over the weekend. I noticed another Launch HN did that and thought it was brilliant. we are here for feedback, so wanted to make trying it as easy as possible!

[pedalpete]

I'm interested in understanding your desire to do design and prototyping as a single shot?

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?

[alexdanilowicz]

What do you mean by "single shot?" Are you referring to one-shot prompting? I should have clarified in my post — we do have customers who one-shot designs - but that's very rare (it's usually landing pages because Sonnet 3.7 is really good at those). We heavily encourage iteration and expect it. The longest thread on the platform is 850+ messages in a single chat!

We have a fine-tuned fast apply model for applying code diffs, so that helps minimize the processing time. Always trying to make it faster though.

We view code as a way to 1) unlock interactivity, 2) communicate with the LLM.

A question for you: if we weren't asking the LLM to generate code, what would we ask it to generate?

[jcgr]

I'm CTO at a startup and Magic Patterns is amazing, my current workflow is to ideate using MP then implement straight to my codebase.

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

[alexdanilowicz]

That's largely how we use it internally too. I often use Magic Patterns first to think through the steps and user interactions, and then I'll jump into cursor to start implementing.

p.s. great to see a customer on here. appreciate it.