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?

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.

Good to hear from you and see you on here!

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!

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.

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

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

Love this one! Thanks for sharing!

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

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!

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.

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

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.

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.

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.

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

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.

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

different from _____?

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

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

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!

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?

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!

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.

v0 is an amazing product. They've been around as long as we have (October 2023), and it's cool seeing how we have both iterated on the same problems.

Some differences with v0:

- Magic Patterns has a Figma-style canvas for collaborating with stakeholders. Makes it easy to view all your chats. - Password protection on designs (this is very important for some companies!) - Feedback collection on prototypes - Reusable components, so you can create a component library with us and then reference those components in your design. - We are only focused on frontend, which we think leads to less hallucinations. Also, when there is no database, you can go revert back to a different version of the design at any point.

We have a course for PMs, in case you find it helpful! https://www.magicpatterns.com/docs/documentation/ai-prototyp...

Mainly to narrow the problem space: there's a lot of logic in our backend that we call "post processing" which is cleaning up the code after the AI generated it to fix hallucinations. For example, the AI often gets import statements wrong or misspells icon names.

It's pretty interesting because every model seems to introduce a new set of hallucinations, so this is a problem that requires a lot of maintenance. We have this internal mantra to "use AI as little as possible" especially it's a problem that can be solved deterministically.

Also, because we are more focused on PMs, designers, and product leaders the code is largely an implementation detail. What they care about is being able to visually communicate their ideas, and React just happens to be a great way to do that because LLMs are great are outputting it + we have a pipeline to render it. (We are React developers ourselves.)

I think sometimes people think design is purely making things "look good", but I come to realize it's also making things "work good!" a.k.a making it intuitive. "Don't make people think!"

It's been pretty cool to see how a tool like Magic Patterns is helpful for software builders to think through the flow for whatever feature their building. This is largely how I use it internally. For example, when I added our deploy feature, I first used Magic Patterns to think through what steps I needed to add: https://www.magicpatterns.com/c/d9sb9eavgnpjv1d5vaw6wa

This is long way of saying that one way I have become a better designer is by using AI as a creative assistant, but then also recognizing when to not reinvent the wheel. You also want to leverage existing patterns as much as possible.

oof! this is a bad bug that seemed to tick up overnight! Fixing this, thanks for flagging. If you create a support chat via "Get Support" or DM me happy to throw you some credits and regenerate it for you.

Yes! We have a feature for reusing components where you can prompt "use my @design-library/button." But right now @design-library needs to be re-created in Magic Patterns. This is behind a feature flag, but let me know your account email or DM me alex [at] magicpatterns.com and we can add you to it!

We're looking into importing from Storybook too, but it can get fairly custom and we want to make sure it scales. It gets tricky because these systems are expecting a certain format - in our case React + Tailwind - and so if the design system isn't that, the LLM won't handle it well.

Video demo of recreating LinkedIn's design system: https://www.linkedin.com/posts/teddy-ni_i-created-a-custom-d...

I wrote answer to that here https://news.ycombinator.com/item?id=43752176#43757543 - let me know if I can answer anything specifically!

What I'll add is we are seeing customers use Magic Patterns + other 'vibe coding' tools in conjunction. For example, they might use Magic Patterns for brainstorming and to think through the design, and then they'll copy the code from Magic Patterns into Replit to "make it real" and add a database or authentication.

ah thanks for letting me know, that happened to me once too. will adjust the logic!

Yep! It's all React under the hood, and the default is Tailwind. You can also sync to Github directly.

It will happen. Product managers will essentially vibe code and make a thing that mostly works before handing it to developers for 'polishing'.

This could go two ways:

Dumb PMs - "I did most it myself in a week, it shouldn't take developers long to polish".

Smart PMs - "I made an unmaintainable, un-extensible proof of concept (at best) which cannot (and should not) be used as the basis for the real thing. But if(f) it's a better medium for software specifications/requirements than traditional written/visual specs, then it may add some value. The software development process hasn't otherwise changed a whole lot."

Also worth noting that in some ways, a working prototype could be worse than verbal/visual specs, since making the interactivity/clickyness could make it look like it's demonstrating a whole lot, whereas all the tricky little details a dev needs to make the real thing are missing or unspecified.

I wouldn't be scared because in practice we don't see this! Instead we see 1. devs appreciating getting an interactive mockup and 2. the PM having a better sense of what it's like to build technically. (It's pretty cool seeing how AI tools like Magic Patterns help non-technical software professionals naturally learn more about web dev concepts because the best prompts reference code.)

At big companies, Magic Patterns designs are used created & used at the beginning of the product lifecycle for brainstorming and iteration. And there's still a human in the loop in the process: the PM prompting Magic Patterns. The value we create is not the actual raw code, and so we are not seeing teams telling their devs to simply "polish" it. The handoff still is very similar to most dev/design handoffs today, except it's a Magic Patterns design versus a Figma design.

> If used like that, this service will effectively turn my job into that of an assistant to a machine.

I think you can already reduce commercial roles to this description if you choose to.

I mention this in another comment: v0 has been around as long as we have (October 2023), so it's very cool seeing how we have both iterated on the same problems, especially given Vercel is a $3B company and we are a team of two :-)

We have both evolved a lot and now have some major differences, given we focus on product teams more than developers:

- Magic Patterns has an infinite canvas

- Password protection on designs

- Feedback collection on prototypes

- Reusable components, so you can create a component library with us and then reference those components in your design

- We are only focused on frontend

A few customers actually use both us and v0! For example, they'll design in Magic Patterns and then copy paste the code into v0 to add a database.