Magic Patterns: The AI Design Tool for Product Teams

1. 0:00 – 0:52

   The Customer Is Our Religion

   1. ALAlex0:00

      Customer obsession is everything, and, like, learning from the customer. You simply don't know what you don't know. And just, like, launching early, quickly, always talking to the customer. The customer is our religion is what I like to say. [upbeat music]

   2. JFJared Friedman0:18

      I'm really excited to be sitting down today with the founders of Magic Patterns, Alex and Teddy. Magic Patterns has some big news. They just announced that they raised a Series A. Congratulations, guys.

   3. ALAlex0:31

      Thanks very much, Jared. Yeah, just announced our, our Series A from Standard Capital, and we're super excited.

   4. JFJared Friedman0:36

      We're gonna talk today about what Magic Patterns is. We're gonna do a demo of the product. It's a super cool product. It demos really well. We're gonna talk about how you can use it for your startup if you're working on a startup, and we're also gonna talk about the backstory of the company. But, um, first, how about we just talk about the news of the day? Tell us a little bit about

2. 0:52 – 2:00

   What Magic Patterns Does

   1. JFJared Friedman0:52

      the Series A that you just closed.

   2. ALAlex0:53

      Yeah, thanks. So we just closed a $6 million Series A from Standard Capital, which is, uh, Dalton's new fund. Uh, Dalton was our YC partner, actually, and he spun off to start a YC for Series A. Um, he's super excited because we've been working with him for a long time now, three years. Uh, and, and, you know, we raised this money to, to grow faster and to scale the team.

   3. JFJared Friedman1:14

      For folks who don't know, what is Magic Patterns?

   4. ALAlex1:18

      Yeah, so Magic Patterns is an AI design tool that helps anyone, but especially product designers and product managers, build a prototype and visually communicate.

   5. JFJared Friedman1:27

      How does it work? How do you use it? Describe what the interaction's like.

   6. ALAlex1:30

      Yeah, totally. So on magicpatterns.com, you can just prompt anything you'd like. So let's say I work as a product manager at DoorDash or something like that. You can go to Magic Patterns, prompt, "I'm thinking through an onboarding flow on how to order food," right? And paste that into Magic Patterns, and then you will get back a, an output.

   7. JFJared Friedman1:49

      And who's using it today, and how are they using it?

   8. TETeddy1:52

      Yeah, our customer base is largely product managers, product designs, and even website builders. Um, a lot of them will use it to

3. 2:00 – 3:36

   How Teams Use It

   1. TETeddy2:00

      pretty much go from an idea in their head into something tangible that you can click around, that you can visually see. Um, and they'll often share those with any stakeholders, any of their users. We've seen people sell these demos even.

   2. JFJared Friedman2:12

      Mm.

   3. TETeddy2:12

      Um, so it's an amazing way just to go from idea to something tangible.

   4. JFJared Friedman2:16

      And so is this mostly people building standalone websites where you're building the whole site? Is it, like, people at, like, an existing company building, like, doing a demo of a new feature or a component, and then when they get the final thing from Magic Patterns, is that the production code that people end up using directly, or is it more like a prototype that then ends up being inspiration for the production code?

   5. TETeddy2:37

      It's largely the second half, a prototype. Um, although it's a combination of people starting from scratch, or they're a part of an existing company with a lot of existing product. So we've spent a lot of time actually focusing in on how do we, like, let people bring in their existing brand, their existing components, their existing product all into Magic Patterns so that AI can actually work with what you already have versus necessarily starting from scratch, since we've recognized, like, 90% of the new features or product work-

   6. JFJared Friedman3:08

      Right

   7. TETeddy3:08

      ... you're building on top of existing stuff instead of starting from scratch.

   8. JFJared Friedman3:11

      Interesting. And I, I hear you guys have been growing pretty explosively recently. Can you talk at all about how many people are using this and, uh, h- uh, how it's been growing?

   9. ALAlex3:20

      Yeah, totally. So the summer for us was explosive. [laughs] It was pretty crazy. Uh, for context, uh, up until very recently, we were only just us two, uh, at the company, only two employees. You're looking at the entire company right here.

   10. JFJared Friedman3:33

       Yeah. [laughs]

   11. ALAlex3:33

       Since then, we have hired. Um, but yeah, over

4. 3:36 – 4:56

   $1M ARR with Zero Employees

   1. ALAlex3:36

      the summer, it was just two people. We crossed a million dollars in ARR.

   2. JFJared Friedman3:39

      Wow.

   3. ALAlex3:39

      Um-

   4. JFJared Friedman3:39

      With no employees, just the two founders.

   5. ALAlex3:41

      There were no employees. Yeah.

   6. JFJared Friedman3:43

      Wow, that's crazy.

   7. ALAlex3:43

      Um, and so we stayed very, very lean, um, and it's been, it's been growing quickly.

   8. JFJared Friedman3:47

      I'm sure you guys get this question a lot. There, there are other companies now that will, like, take a prompt and create a website from it. Uh, I think some of the best known are Lovable, Bolt, Replit, Figma, V0. Help us understand, like, how does this fit into that ecosystem?

   9. ALAlex4:05

      All absolutely amazing products, but it's, it's interesting. Once you... We've been doing this since GPT-3.5, like, is when we... The first version of Magic Cha- Patterns was GPT-3.5, and when we started, we always were focused on front end and product design. Um, so one thing that makes Magic Patterns different is there's no database that we spin up. There's no, you know, if you type in, "I want a login panel for an onboarding flow," we're not spinning up authentication and things like that because instead it's all about how do I get back output very, very quickly to then visually, you know, iterate on it and communicate it to stakeholders.

   10. JFJared Friedman4:43

       And so how should I think about when I would use Magic Patterns versus when I might use another product that, like, seems related in this category?

   11. ALAlex4:51

       So I think it's when you wanna visually communicate something rapidly, right?

5. 4:56 – 6:42

   Standing Out from Other AI Builders

   1. ALAlex4:56

      Like, you're not worried about, oh, well, what database am I gonna use, or, like, trying to spin up a full stack app versus, hey, I'm just, you know, creating a, a prototype.

   2. TETeddy5:05

      And, you know, like, candidly, like, we've gotten a lot of requests, like, over the years, and we've thought many times, like, "Hey, is it time to add a database? Is it time to add back-end functionality?" But I think one of our insights is that the more you question these people and the more you try to learn about what they're trying to do with these tools, 99% of the time you really don't need a database or you don't need, you know, a back-end tool to really help with that. It's only really if you're trying to build, like, a real functional app that you're trying to send to production-Um, that you would need some, such a thing. Um, but at least for our users, um, we found that the visual communication aspect, you really don't need a database, and it just complicates things like exponentially.

   3. JFJared Friedman5:45

      When I finish building something with Magic Patterns, can I host it on the public internet? Can I, like, put it under a .com domain name? Do you guys host the- host the finished websites yourselves? How does that work?

   4. ALAlex5:55

      We do. So the minute you prompt something, you immediately get back a URL that is hosted by us. Um, however, you can also hook up your, your custom domain. And so we actually have a lot of website builders, too. Uh, so if you want a s- small business, you run a small business and you wanna host a website, you can do so on Magic Patterns with your custom domain. So it's interesting, we have, like, many, many use cases that-

   5. JFJared Friedman6:16

      Mm

   6. ALAlex6:16

      ... we didn't really even intend out ... We didn't intend to solve, like, from day one. But because you get back working code, you-

   7. JFJared Friedman6:23

      What are some of the most, like, surprising use cases?

   8. ALAlex6:25

      [laughs] Uh, so we have a driving school in the United Kingdom that hosts their website on us.

   9. JFJared Friedman6:30

      Okay.

   10. ALAlex6:30

       We have a hotel in Ghana that hosts their website with us, and then we have very, very large enterprises that host their websites, uh, with us, actually.

   11. JFJared Friedman6:39

       Shall we take a look at the demo?

   12. ALAlex6:41

       Let's do it.

6. 6:42 – 13:16

   From Prompt to Prototype

   1. JFJared Friedman6:42

      Great. So show us Magic Patterns.

   2. TETeddy6:45

      So this is the dashboard of Magic Patterns. Um, it looks very similar to a lot of other tools out there, um, but you'll notice there's a few subtle differences, such as things like, uh, you can create components, um, you can import from Figma. Um, but just like a lot of great tools, um-

   3. JFJared Friedman6:59

      And I can import from an existing site.

   4. TETeddy7:01

      Yeah, so like-

   5. JFJared Friedman7:01

      So, like, to your point, if I already have a site, yeah, how, how would, how would people use that?

   6. TETeddy7:06

      Yeah, so we actually have a Chrome extension, um, that lets you essentially take a snippet from any website that you're on.

   7. JFJared Friedman7:12

      Mm.

   8. TETeddy7:12

      So the really amazing part is like-

   9. JFJared Friedman7:14

      As opposed to try and do it from a screenshot, you can actually, I can actually reuse the existing HTML and CSS so it doesn't just, like, re-implement a bunch of new classes.

   10. TETeddy7:23

       Exactly.

   11. JFJared Friedman7:24

       Yeah.

   12. TETeddy7:24

       Yeah, we take the styles on the page. And it's actually funny, this is, this originated from one of our earlier ideas before we got to Magic Patterns.

   13. JFJared Friedman7:31

       Mm.

   14. TETeddy7:32

       Um, so it felt like a full circle moment for us.

   15. JFJared Friedman7:35

       Interesting.

   16. TETeddy7:35

       But just like any other gr- of these tools, um, start from an empty input box. Um, a lot of folks will use ChatGPT to come up with their initial prompt. Um, but we may maybe go ahead and run a fun idea, um, if that sounds-

   17. JFJared Friedman7:48

       Great. Let's take it for a spin.

   18. TETeddy7:51

       Cool. So came up with this prompt here. Um, thought it'd be funny to do a quick LinkedIn humblebrag generator. Um, so we can go ahead and run this, and we can see how Magic Patterns works.

   19. JFJared Friedman8:01

       LinkedIn humblebrag generator. So it, it's like, this is like I'm going to post something on LinkedIn, and this will write a LinkedIn post for me that is a humblebrag.

   20. TETeddy8:11

       Exactly.

   21. JFJared Friedman8:12

       Okay. That sounds fun.

   22. TETeddy8:13

       [laughs]

   23. JFJared Friedman8:15

       Okay. So as it's thinking now, like, what is happening in the background? What is it doing?

   24. TETeddy8:19

       Yeah, so under the hood we are using, like, the top foundational models, uh, to really do the, all the big heavy lifting. Um, we do a lot of work under the hood to make sure, like, reduce things like errors, hallucinations. Um, we also inject a lot of our own, like, system, I guess some of our secret sauce, to make it more design-oriented-

   25. JFJared Friedman8:40

       Mm

   26. TETeddy8:40

       ... and really focus on, like, the polish and, uh, design aspects of, of this vibe coding world, if you will.

   27. JFJared Friedman8:47

       Is it able to try the software itself? Like, can it try its own page and, like, feed back into the code?

   28. TETeddy8:53

       Not at the moment, but that's something we would love to add as, like, a review agent, where you can just have it go in and, and nitpick your, your site to pieces.

   29. JFJared Friedman9:01

       Yeah.

   30. TETeddy9:01

       Um, we do have this Polish command that I'll be able to show once this finishes generating. Um, but the idea behind this command is that'll automatically go in and improve and tidy up your design, um, without you having to actually provide a specific prompt.
7. 13:16 – 17:56

   Turning Ideas into Real Products

   1. JFJared Friedman13:16

      that?

   2. TETeddy13:16

      Yeah, totally. So this is a real website, um, that someone created, um, one of our customers created.

   3. JFJared Friedman13:22

      It's a YC company, right?

   4. TETeddy13:23

      It's a YC company, yeah.

   5. JFJared Friedman13:24

      Okay.

   6. TETeddy13:24

      From our batch, actually.

   7. JFJared Friedman13:25

      Okay.

   8. TETeddy13:25

      Right? You know, we figured-

   9. JFJared Friedman13:26

      You can document it.

   10. TETeddy13:27

       We figured no better place to show it than while filming, uh, this video.

   11. JFJared Friedman13:30

       Perfect.

   12. TETeddy13:31

       Yeah, so this is an example of a company. They had an existing product, existing themes, like, existing logo. You know, they kinda know what's going on. They're not starting from scratch, right?

   13. JFJared Friedman13:39

       Mm-hmm.

   14. TETeddy13:40

       Um, so this is their existing website that, uh, was built in Magic Patterns. Um, but it might-

   15. JFJared Friedman13:45

       Wow

   16. TETeddy13:45

       ... be fun to show-

   17. JFJared Friedman13:46

       Okay, wait. So, so if I go to pigeon-documents.com, this is a real YC company. This entire page is all built with Magic Patterns, including, like, all these, like, visual things, like the scrolling logos and this, like, animated thing over here and, like, these animations. All that's from you guys?

   18. TETeddy14:03

       That's all Magic Patterns.

   19. JFJared Friedman14:04

       Wow. That would've taken so much time back in the day to, like, write the JavaScript to do that. That's crazy.

   20. TETeddy14:11

       Yeah, as front-end developers ourselves, we've, we've also found a huge, massive value add in doing things like animations, like, things that would typically take a lot of time to tweak.

   21. JFJared Friedman14:20

       Yeah. Cool.

   22. TETeddy14:20

       Um, it turns out AI's just really, really good at these things.

   23. JFJared Friedman14:23

       Amazing. Can you actually show us what a real... what the workspace behind this production website looks like when they're actually building it inside of your product?

   24. TETeddy14:32

       Yeah, absolutely. So this right here is the original editor behind, uh, this live website here. Um, and we scrolled it all the way back to the first version. Uh, you'll see that there's actually over 700, nearly 800 different iterations-

   25. JFJared Friedman14:47

       7... They've done-

   26. TETeddy14:48

       ... on this website

   27. JFJared Friedman14:48

       ... 773 versions of their website in your product.

   28. TETeddy14:54

       Yeah, and the cool thing is you can see, like, you know, this was a-

   29. JFJared Friedman14:57

       A complete project

   30. TETeddy14:58

       ... long project. And the cool thing is, like, you'll see it's over time, so it's something that they've come back to, and it's really easy to update. You know, instead of working with, like, an agency where it might take an extra few cycles, uh, to, you know, hey-
8. 17:56 – 24:58

   From Pivots to Product-Market Fit

   1. JFJared Friedman17:56

      guys pivoted, like, a million times.

   2. ALAlex17:58

      [laughs]

   3. JFJared Friedman17:58

      The story goes back, like, eight years or something at this point. So, like, take us back to the beginning. How did you guys even meet each other and-

   4. ALAlex18:05

      Totally, yeah. So Teddy and I met at, at Dartmouth College. Uh, we lived together our, our senior year. Uh, the company name, actually, our C corp is called North Park Labs. North Park is the dorm we lived in, uh, at Dartmouth together.

   5. JFJared Friedman18:18

      Cool.

   6. ALAlex18:19

      Um, and we did this school project in our web development course as a, as a group project, and what we worked on was a text message analyzer.

   7. JFJared Friedman18:28

      Okay.

   8. ALAlex18:28

      It would analyze your, your iMessages, your funniest group chat, your top word that you've sent, your funniest... Whatever emoji you use the most.

   9. JFJared Friedman18:36

      And Teddy told me earlier the actual origins of this text message analytics app and why you guys decided to build a text message analytics app. Can you, can you say-

   10. ALAlex18:45

       [laughs]

   11. JFJared Friedman18:45

       ... on camera what it was?

   12. TETeddy18:47

       Yeah. We got in an argument over who texted our girlfriends more. Um-

   13. JFJared Friedman18:51

       [laughs]

   14. TETeddy18:51

       ... and it was, for some reason, a heated debate, and we realized, hey, like, we're learning how to code.

   15. JFJared Friedman18:55

       Code.

   16. TETeddy18:56

       We could-

   17. JFJared Friedman18:56

       We, we could-

   18. TETeddy18:57

       We could... [laughs]

   19. JFJared Friedman18:57

       Yeah. A- a- instead of just arguing about it, we could actually write code to calculate who texted their girlfriend more.

   20. TETeddy19:04

       Exactly.

   21. ALAlex19:05

       E- exactly, yeah. So that's where, that's where the group [laughs] friendship was born. The craziest thing is five years later, for fun, while we're living in San Francisco here together, uh, Teddy and I actually monetized the app. We charged 2.99 a month to unlock premium features, unlock more analytics on this, and then we applied to YC with this idea.

   22. JFJared Friedman19:26

       With the text message analytics idea?

   23. ALAlex19:28

       Yes. Our YC application, we applied one time, was iMessage analytics.

   24. JFJared Friedman19:34

       Was this when you were still in school?

   25. ALAlex19:36

       No. So this was a- after we had worked a, a little bit. So Teddy worked at Robinhood as a front-end engineer, and I worked, uh, at LiveRamp as a front-end engineer.

   26. JFJared Friedman19:43

       After college. Okay.

   27. ALAlex19:44

       After college.

   28. JFJared Friedman19:44

       So, so in college, you guys built this app. It was, like, a fun project that you worked on. W- at the time, were you thinking that this would be a startup that you would, like, apply to Y Combinator with and, like, raise money for and, like, turn into your full-time, like, work? Or is this just, like, a, like, a fun... But basically it was a bet initially that then became, like, a project. How were you thinking about it?

   29. ALAlex20:04

       It was totally just for fun, right? Like, again, o- originally just trying to figure out who was on their phone more, who was texting [laughs] more, right? So it's totally for fun. Um, but obviously we have been... You know, we're always interested in startups and interested in building software and, and products together. But no, we did not set out to, like, make it a company.

   30. JFJared Friedman20:24

       And did you guys always plan to start a company together? Like, did, did you talk in college about, like, oh, like, should we drop out and start a company? Like, was this something that was on your minds? Or, like-
9. 24:58 – 30:40

   Scaling a Two-Person Startup

   1. ALAlex24:58

      in our product today in Magic Patterns were some of those early product ideas, actually. Like, our Chrome extension was one pivot we did. We worked on a design token manager, you know, Storybook on steroids. All these different front-end toolings we were pivoting around, uh, during the batch.

   2. JFJared Friedman25:14

      And you guys were in the Winter '23 batch. You actually couldn't really have had the idea for Magic Patterns back then because the AI models couldn't write code, like, to save their lives at the time, right? Like, it, like, it wouldn't have ever worked back then, right? Even, even if you-- even if, like, you could take a time machine back and show your former selves in January 2023 the current idea, I don't know that you could have built it.

   3. TETeddy25:35

      Hilariously, one of the first ideas we pivoted to after the iMessage analytics one was an AI landing page generator. It was called Dreamer, actually.

   4. JFJared Friedman25:43

      Interesting.

   5. TETeddy25:43

      Um, but, uh, yeah, we tried AI for a little bit. It was just not good, so we actually ended up hard coding a lot of the templates.

   6. JFJared Friedman25:51

      Mm.

   7. TETeddy25:51

      It ended up being, like, a hard-coded template generator. Um, but yeah, we moved off of it because we were like, you know, the AI is just not good enough right now.

   8. JFJared Friedman25:58

      Interesting.

   9. ALAlex25:59

      Yeah, it's an interesting example of, like, we were almost too early-

   10. JFJared Friedman26:02

       Yeah

   11. ALAlex26:02

       ... at that point.

   12. JFJared Friedman26:02

       Totally.

   13. ALAlex26:03

       Um-

   14. JFJared Friedman26:03

       And then how did you end up coming back to the-- effectively a successor to Dreamer?

   15. ALAlex26:09

       Yeah, so, um, near the end of the batch-

   16. JFJared Friedman26:12

       Yeah.

   17. ALAlex26:12

       Yeah, near the end of the batch, we were working on a component library editor, but there was no AI at the time. Um, it was, you know, you could-- you-- it was used by designers who could spin up, like, a button and then click export, and it exported the code to React. And we had a couple customers, actually, but it was not growing. Uh, and demo day was, like, a complete failure [laughs] for us. We barely raised any money. Like, didn't raise any money during demo day. And so actually, three months after demo day, we finally looked at each other and said, "Okay, we have one customer, but this is not working. Um, what if..." 'Cause-- And then we asked that customer, we said, "What are the problems with our existing product?" And they said, "Oh, well, it's just too hard to use. It's, it's clunky. Like, I have..." At the time, we're basically recreating, like, this entire editor to edit the component, right? And they said it's too clunky, and we just looked at each other and we were like, "What if we added AI to this, uh, and you could prompt for your changes?"

   18. JFJared Friedman27:09

       Hmm. And then that ended up being the precursor to the current Magic Patterns idea.

   19. ALAlex27:15

       Yeah, exactly. So when we, when we pivoted for the final time, we looked at each other and we said, "Let's do an internal hackathon." There's only two people at our company, by the way.

   20. JFJared Friedman27:22

       [laughs]

   21. ALAlex27:23

       We said, "Let's do an internal hackathon. I'm gonna mess around with, like, GPT..." At the time, it was GPT-3.5. "I'm gonna mess around with GPT-3.5, just understand how this works." This is June 2023. And Teddy, uh, built this amazing collection of components and posted it on, on Product Hunt, like a product of the day. And then at the end of the hackathon, we said, "What if we merge the two?"

   22. JFJared Friedman27:47

       Mm.

   23. ALAlex27:48

       And we were able to create React components with, with AI. And I think it's important to note, too, when we did this in-- this was, yeah, June 2023. All these products that we know today, like, did not exist.

   24. JFJared Friedman27:59

       Didn't exist. Yeah.

   25. ALAlex28:00

       Yeah.

   26. JFJared Friedman28:00

       And then what's happened between then and now?

   27. TETeddy28:03

       A lot of foundation models changes. Um, so, you know, it's funny even looking back at some of the earlier generations on side-- on top or inside of Magic Patterns. Um, it was not good. It still was, like, really bare bones. Like, you would type in a Spotify clone and get back, like, three buttons. Um, so that's been a huge help for us, um, is just the increase and improvement in foundational models. But I think the second thing is we've kinda narrowed down on the use case that we wanted to focus on.

   28. JFJared Friedman28:32

       Mm.

   29. TETeddy28:33

       And that's really helped us build, like, what really matters inside of the platform.

   30. JFJared Friedman28:36

       Mm.
10. 30:40 – 32:04

    Building for Builders

    1. ALAlex30:40

       and just, like, launching early, quickly, always talking to the customer. The customer is our religion is what I like to say.

    2. JFJared Friedman30:48

       So before we wrap up here, guys, um, what are some things that the audience can do with Magic Patterns, like, right now?

    3. ALAlex30:54

       You should go to magicpatterns.com, try us out. We do have a free tier, so everyone is welcome, and we encourage everyone to try out Magic Patterns.

    4. JFJared Friedman31:01

       And, um, also, are you guys hiring?

    5. ALAlex31:04

       We are hiring. We're hiring engineers, uh, and, and sales, uh, people. So check us out on, uh, magicpatterns.com/careers.

    6. JFJared Friedman31:12

       And I remember that you guys said that a key part of your story was working as some of the first employees of another YC company. It's probably at a similar stage to Magic Patterns is now when you guys were their first employees. I wonder who are the future f- like, YC founders who are, like, working at Magic Patterns in the next year could play that role in their journey.

    7. ALAlex31:32

       Exactly. Like, w- we were the first employees at a YC company, and so whoever, uh, joins us, right, we know what it's like. We know how exciting it can be to work at a startup, and if you have y- your own ambition of starting your own company, we believe we're a great place to work, right? To, to learn how it, how it's done.

    8. JFJared Friedman31:49

       Amazing, guys. Congratulations on the Series A and all of the success so far, and thank you so much for sitting down to talk with us.

    9. ALAlex31:55

       Thanks, Jared, really appreciate it. [outro music]

Episode duration: 32:04