Live data from Hacker News

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

news.ycombinator.com

111–118 of 118 posts

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

#111
post #39

what are the plans to support design systems? no one seems to be able to do this. prototyping doesn't happen in a vacuum, I'll always want to use the design system we spent months building in Figma.

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 ge…

Once you figure out how it can understand all my Figma components and their styles (maybe via some “design”MCP).. it will make me 100% switch my design proto workflow!

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

#112

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…

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…

hmm having an "Edit Style" for any object, in 1-click ( instead of traversing into component's guts, etc ) will be a more frictionless UX. in fact just show the same Figma Style UI controllers would be even better since that is a proven UX mental model;-)

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

#113

This service is pretty much what I, a software developer, am scared off. I expect that it will be used in order to quickly cobble something together and then hand it over to a dev for "polishing". And this sounds like a total nightmare to me. If used like that, this service will effectively turn my job into that of an assistant to a machine.

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

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

#114

Earlier quoted context omitted.

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…

hmm having an "Edit Style" for any object, in 1-click ( instead of traversing into component's guts, etc ) will be a more frictionless UX. in fact just show the same Figma Style UI controllers would be even better since that is a proven UX mental model;-)

that's great feedback, thanks!

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

#115

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.

Love this one! Thanks for sharing!

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

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

#116

does Magic Patterns support exporting components directly into frameworks like Next.js or Tailwind CSS out of the box?

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

cool, congrats on the launch!

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

#117

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.

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

I just had a cool experience with it doing some simple design. It prompted back to me usefully as well.

I can imagine also uploading a component library that this thing then uses the components from, to add styling for higher-fidelity designs, and allow app designers/builders to just use the components built by an internal team (who might also use magic patterns, I suppose).

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

#118

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 re…

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…

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

That's what I think you could attack - in four ways:

- have a way for designers and developers to iterate components in a component library

- have a way for that component library to be used in app designs

- have a way to upload my component library and use its components in app designs

- eventually maybe extend the above to be able to use multiple component libraries (e.g. for companies with multiple brands)

Post reply on HN