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!

user:	pelagicdev
created:	April 12, 2017
karma:	18