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

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.

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!

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

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?

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

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.

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!

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

At first this many 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 an 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 _____?