alexdanilowicz

co-founder of Magic Patterns here, saw were were mentioned, figured I'd chime in:

We don't use Trigger for marketing at all and I actually never thought of it for that use case.

We're an AI design tool - prompt to create an interactive mockup - and we use Trigger to take screenshots of designs to provide a preview image. Taking a screenshot sounds easy, but it's not because Puppeteer constantly hits OOM errors. So you need a high-end machine, and so it can get expensive. We originally were using a homegrown solution, a microservice, but it would constantly crash (even though were paying $$$$$ for it).

Trigger spinning up jobs was perfect and we migrated in a day and now I never think about it.

As someone who currently "bricks" his phone and has gamified it a bit by sharing my stats with my brother-in-law who also does that, this is cool. I do think "not spending time on your phone" needs to be celebrated more.

P.S. "bricks" meaning a very strict screentime set up, only basically phone + text is available M-F

Love this one! Thanks for sharing!

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

that's great feedback, thanks!

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.

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

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.

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.

We have been around for 2 years and at one point had "contact us for pricing", so don't worry not changing anything on n=1!

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.

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.

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

On https://www.magicpatterns.com/ you should see an input box. Type anything you want, hit enter, and then you'll get hit with our regular login panel. But at the bottom, for today online, you'll see a "Coming from Hackernews, no login required" button.

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

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

I don't think generating images would be faster than generating code, plus you lose all the interactivity. Many designers tell us where they get the most value out of Magic Patterns is that the designs are interactive by default, unlike traditional vector-based design tools.

I'm with you that the first reaction is not "let's look at code output." In fact, for most of our users, they never look at the code. It's abstracted away from them and just an implementation detail to unlock interactivity.

P.S. You might enjoy our /Inspiration command, which gives you 4 variations at once. Demo video: https://www.magicpatterns.com/docs/documentation/editor/edit...

> Maybe capping the size of a team on the "pro" plan would be an inbetween

That's interesting. We already have teams with 20+ folks on it today at very large companies, but haven't thought about that type of stuff too much - have been laser-focused on core product building. I think in the early days we spent a little too much time tweaking minor pricing plan details. You're right though we are now at a point where we are very likely leaving money on the table.

For example, "centralized billing" on our platform only exists because it was the result of a feature request from a larger customer.

P.S. I emailed you, but it bounced!

I love what you wrote in the other thread too:

> "The hard part of being an engineer is not writing JavaScript. It is building a solution that addresses the essential complexity of a problem without adding accidental complexity."

I have been oversimplifying it as "LLMs cannot read you mind."

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.

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?

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

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?

> have you found the benefit of large LLMs already having detailed React training is just too high?

This.

We've tried a lot. We have been around since Oct 2023. First tried fine-tuning, but it's very hard to teach an LLM something new.

At one point, our product lived in a Figma plugin (https://x.com/Teddarific/status/1729153723728011618). To do this, we had the LLM output JSON, and then converted that to Figma nodes. This is sort of what you're saying. But the big issue was it would hallucinate many things and was really only good at the examples we fed it.

Good to hear from you and see you on here!

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!

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 pretty cool! Thanks for sharing. I like how Gemini used pure HTML/CSS to start.

While we certainly do constraint it, it still should be able to manage creating a Rubik cube solver (even though that is definitely not the intended use case).

There's a lot of "AI tourism" in the space and so never want to constraint it too much + random use cases like this always excite us: https://news.ycombinator.com/item?id=43752176#43752637

I created a basic flight simulator a while back in Magic Patterns in 3 prompts: https://www.magicpatterns.com/c/xensje9nkf48syshrkcmsc

Your Rubik's cube prompt I'm going to add to our eval set :)

Well the good news is you can export to Figma! https://www.magicpatterns.com/docs/documentation/get-started...

Feel free to DM me if anything else comes to mind, can even hop on a Zoom too. Appreciate the response.

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.