A (4:17)

Yeah, I mean just clicking through the product even one of the things that initially stood out to me was just the amount of defaults and things that you have available out of the box. And I could see how you kind of did stumble into this world where all of a sudden you're just equipping the models with a ton of nice pieces and existing layouts. And maybe I'll restate how I kind of am interpreting what you're saying where you're obviously playing in this world where anyone can kind of become a builder using AI, but Subframe is giving a little bit more control and a little bit more of the fine tuning and creating UIs and interactions for that, whereas maybe some of the other tools are predominantly just being used for like one shot prompts. Is that kind of how you're seeing the landscape today?

B (5:06)

Yeah, exactly. I think. I think those roles of like product versus engineer versus designers are really going to start to collapse. And if we imagine a world where at the end of the day, we're mostly interacting with some large language model behind the scenes, that's either generating apps for us or just helping write them faster in code, what it really becomes is less of like, oh, your skill set and domain and role equals a specific tool that works in that medium. Right. Product managers write documents and briefs and designers create mockups and vector tools. And only engineers work in an IDE and code editor to write that code. Well, if code and the actual software is the medium for everything now, now you're just picking the interface that you work with, right? Where non technical people might just be chatting away, right. They just like that natural language prompt. They don't want to look under the hood. Engineers are going to continue to be looking at the code, right? And they want models that fit into that interface with like tab, tab, tab, autocomplete, not just chat. And I think designers are visual thinkers. Right. And it's a craft that is, yes, inherently visual. It's inherently system level. Right. You want to zoom out, you want to look at flows. And I think we're trying to create that visual design first interface for working with code. Cool.

A (6:39)

Well, can we see it a little bit? I'd love to get a demo.

B (6:42)

Yeah, let's do it. All right, let's go ahead and create a project right now for Dive Club. And we're just going to start fresh, so you'll really get to see what it can look like. That's 0 to 1 out of the box. What can I do in subframe? A lot of the foundations of Subframe, as you were mentioning, are built on systems and the things that us designers spend so much time crafting and curating. So out of the box, you get a design component library that's built on all the good stuff. Radix, headless UI components. But everything here is an actual react component that you can interact with. Now where it gets interesting is entering design mode. So everything in subframe is a design canvas on top of code. And if we want to go in here and say, hey, all our buttons are circular, we could do that, right? Just like we would and check out all the different variants. And we've actually just updated the react code that gets synced to your code base directly. So it becomes this kind of like storybook for components that's all driven by things like themes. You know, we could very quickly say, all right, great, let's just do dark mode and pick our fonts very quickly and apply that. And now all our components are updated as well. As designers, I think not just in today's world, but especially in the future world, we're going to be thinking a lot in systems. Often these are turning less from systems that are just the UI building blocks that you as a designer are using and more systems for actually building and often generating entire apps. And so crafting this kind of like foundations first components and later things like product context, design system documentation, you know, this actually being Your own components, PRDs and brand guidelines and voice and tone, all of that becomes like this context that as a designer you start to just curate to generate, you know, the apps that you, that you really think are good interfaces. Right. But for today, yeah, let's build a quick little prototype so we can go ahead. And our default is kind of a, you know, we all see a prompt chat box in almost everywhere you go. Now I'm actually going to skip that real quick. I'm just going to go in here and this is sort of really showing the difference, right, because we built that design tool first and that's embedded in so much what we do. And it's very quickly to, you know, this is like the old world before AI, you get started and we say, hey, this is like, you know, our homepage where you got our familiar layers, panel properties and a lot of these also. Like, as a designer I'm always thinking about like, well, what's the best, you know, design interface for me? You know, things like auto layout being built in, things like these little snippets where I can just click the insert button and just put something to the right or to the left and all that, all those layouts, you then automatically.

A (9:53)

Add a stack there around that text. Okay, that's pretty cool.

B (9:58)

So we kind of do smart things, you know, around there. So with all these sort of like pre built building blocks again, all of it using your actual design system, you could very quickly, you know, put together something that, hey, you know, here's an interface, right? And everything we just did as the react code, it's already done using your components and Tailwind is our default. But we can apply this especially when you're bringing in your own design system. We can curate this to make it exactly your own. Now that becomes, I think, a really interesting point in, well, what role does AI play? And I think there's kind of different layers. I almost think of it as, I'm as probably main designers, I'm A bit of a coffee snob sometimes. And, you know, every day for the last 10 years, I hand grind my beans and I make my pour over, you know, carefully, and everything is perfect. And as maybe shameful is to say, recently I bought an espresso machine and I think AI is kind of like the Nespresso level right now for design, where it's not going to change your world, right? And you're not crafting every single input that's going into it, but you can wake up and you know that in 30 seconds you're going to have caffeine in you, right? And I think AI is kind of in a similar boat where it's very quick to get you to that good enough starting spot, but it's up to you to take it to the finish line. And that's exactly the philosophy, sort of we take. So we could go in and let's just kind of create a new page and let's start. Let's start actually crafting, you know, what we want here. So let's put in some ingredients, right? We have our theme, we have our components, and I'm going to put in Dive Club. And this is our, like, system prompt. It's kind of a lightweight version of it where I can just give context to the AI for all pages. So we could just say Dive Club is a design podcast, right? Keep it simple. But you can imagine this actually housing your entire design system, documentation, guidelines and all your product features. And I think context becomes really interesting when you get into design. I was sitting with a founder recently who was using subframe to just check off sort of like linear tickets, little design asks that he didn't want to bother a designer with. And we were thinking, what makes a good design? Like when you're sitting next to that senior staff, principal level designer, of course, there's a lot of it which is just pure, you know, talent and craft that goes into, hey, this is good UX patterns. This is like a, well, you know, polished ui. But I think a lot of it is also context, right, about your existing product. It's like we all have worked with those designers, have been in company for like five years and just like know every little thing and can make those quick decisions on the fly. And I think the same thing applies. So being able to capture all that context is like a huge moat for actually creating good design outside of just the layer of polish and, you know, little, little things you might see here and there.

A (13:17)

Such a good point. And it's even something I've been thinking about recently is like context is kind of the new design deliverable. Right. Like the UI in isolation isn't everything. Right. Like it's so important to understand what can we strategically feed the underlying models. And I love you tying it back to like, actually that's kind of what makes the best designer on the team to begin with is they have the years understanding of all the things that we've tried and why. So it makes a lot of sense to me.

B (13:47)

All right, so here we're going to try to give it a little bit of context just in the prompt. Let's. Let's design. I had this idea. I always think about this when I watch YouTube videos. I think yours are a great example of like, what if I could just talk with that person who is on the podcast about what they were, what they were talking about. So we're going to do a prompt here and I'm just going to do, you know, dive club and I'm just going to give it all the stuff you have on your website and let's see what it does. Right. So now we're kicking off a prompt here and we're starting from blank, except we're feeding it all these ingredients and we're going to have the AI actually generate multiple versions for you.

A (14:33)

Love that.

B (14:34)

So this is kind of that again, a lot of tools are meant for just building kind of you're working with one thing one at a time, right? One prompt at a time. Design is messy, right. It's inherently. I like a little bit of this. I need to see a little bit of that. Let's see how it all kind of fits together. So we really want to use this as a tool that helps you actually explore and get to that best idea as best as you can.

A (15:01)

Also becomes a pipeline of preference data for you too.

B (15:04)

Yeah, that's. And you know, we actually, we don't do any training on like a aggregate level. Right. We. Your data is your own. But what we do is as you start building in subframe, the system gets trained on all the designs you've already made.

A (15:22)

Very cool.

B (15:23)

And so that becomes again another like feedback loop of context that you might want to feed in to the system and essentially gets better and better the more you use it, more tailored to your product. So we got a few examples here and let's just go click through some of them. It's using the components this kind of default system we have out of the box. And now here's sort of the exciting thing, right, which is we got a lot of different Variations. I think this one has a little bit, one column too many. And that's because of this layout here. But let's say this is a good starting point. I could just drop this in here. But maybe I'm like, oh, I actually like this banner better. Or maybe this header up here, so I could just drag this in.

A (16:13)

Interesting.

B (16:14)

And this is kind of really the difference between maybe a lot of tools out there is that design mode layer is always active. All of this is code under the hood. All of this, you know, this was generated with AI, but it's up to you to mix and match and craft sort of every piece that you want. And you could just start creating, you know, your ui. You could go back to design mode. We could get rid of these, right? Make all your edits, all those little things that you go back into and are like, oh, you know, these cards should probably fill. Or maybe maybe this should truncate. Right, Great.

A (16:51)

A lot of the edits that you're making are very contextual in line. I can tell that that's kind of an underlying principle of the system is every, like, you're actually just making changes above the component itself rather than clicking on something and then going to a right panel that we're pretty. That is like, it almost feels a little bit more distant. So I'm wondering, like, how, how intentional is that?

B (17:12)

There's this kind of spectrum of like, how ambiguous is the ask and how specific and confident are you in what you're asking for? So here's like an example, right? Like, let's go in. And if you know exactly what you want, well, again, you're just going to do it manually, right? If you know what you want, but maybe you just want to do it faster, you can just right click. And this is kind of the, you know, the, the vibe. Designing a little bit of a train coin, which is like, yeah, let's get rid of the layers and the properties. And by default what we do is just expose everything that you can already do with a design tool when you can just right click. So, you know, I could go in and. Well, in this case, I think my layers panel is actually helpful because I want to center to this, right. So I could just do that without making LLM calls. It's just the faster way. But let's say I tried to do something that isn't a design property, right. And so let's add two buttons at the bottom for subscribing and following. I can just ask AI. So when we detect that, hey, you can't do this automatically, we just default to an LLM call that's contextual to exactly what you selected and boom, adds it. Right? So that's really good for those quick changes.

A (18:42)

Yeah, that was.

B (18:42)

And then of course what we showed before is like, well, maybe you're doing something that's more ambiguous, that you have more, you know, you're like, hey, what's a good design for this? Right? Generate me multiple versions of the page and let me mix and match. And that's where the Ask AI panel comes in for this more contextual AI. So to me it's really about when I'm in the flow, right? I, I'm, I'm doing a number of these things on the spectrum and I just want the tool to just like be there for me when I want it.

A (19:11)

What's your current thinking in terms of the icp? You said designers, you've seen an uptick, but like maybe get a little bit more specific than that. What types of designers, what types of companies are proving to be more sticky for you right now?

B (19:23)

We've definitely been crushing it with this sort of like the early stage, zero to one designer type especially because if you start in subframe, you get this whole system out of the box. You could do things where, hey, we could set up and change all these components and themes ourselves or we could just say, let me go in here and let's just ask AI to give us a new theme. And so that's a really good way. I think especially early stage designers are generally so much closer to the outputs and the code that just starting here and ending here and even being able to ship PRs and sync components, that's really attractive to them as we design subframe and subframe ourselves. So this is exactly what I do, this is exactly how I ship new features, is design it in subframe, take the code, make a pr. Larger companies are in an interesting spot because I think no one has figured it out their workflows yet. They themselves are in this big experimentation phase. You know, we've heard the Shopify and you know, these kind of top down approaches of like, hey, we need to be designing with AI or building with AI or just adding AI wherever we can. And like, you know, I'll be real that what I hear from bigger company leadership is that they want to do more with less. Right. And that's a scary position to a lot of designers in the field right now. I do think part of that is this kind of reactionary transition period of figuring it out because I think Ultimately, like with any major technology change and you know, AI powered software building is one of them, is ultimately we're going to do more with more very soon. And I think it's more about how do designers just embody that same mindset, right? Ask yourself, how do I do more with less myself? Because and how can I build without an engineer? How can I Design, you know, 10x the things that I can with a little AI powered design tool? And I think that's sort of where, you know, bigger companies, I don't think, I think there's a place for design. I think it's going to be actually more embedded. Right. As again, people become sort of builders. And whether that means that larger companies grow more teams or you know, more roles or it means that there's a lot more startups out there, smaller teams can do a lot these days or design founders. Right. Like you're so much closer to just building the thing that you want. And I've seen a lot of what's been amazing is actually designers who are in between jobs right now, right. Either for they've been laid off or, you know, they're looking for the next thing. And those are the people who right now are actually investing time to pick up these new tools and learn and take something that was, you know, here's a UX portfolio that I have of just generic SaaS for the last 10 years to I just built 3 side projects in like a month. Yeah. And designed and shipped it all myself. Well, dude, all of a sudden like now you've just like 10x yourself as a candidate. Right. And I think leaning into that is exactly what hopefully designers you know are doing.

A (22:41)

Real quick message and then we can jump back into it. If you're working at a startup right now, then I have some pretty good news for you because Framer just released an incredible offer that gives startups free access to their launch plan for a year. That's $900 to design and ship your site with Framer, which is a total no brainer. I mean, I even took advantage of the deal myself. So definitely don't miss out on this offer. You can head to framer.com/startups to learn more. I've been designing for a long time, but somehow I only signed up for Mabin this year. And honestly, I can't believe that it's taken me this long. Like it's literally a cheat code. Being able to find inspiration for basically any pattern, any product, any flow. It's fast, it's beautiful. And I already cannot Imagine designing without Maubin. It's the first place that I look at for inspiration and I can't recommend it enough. So head to Dive Club Slash Mobin to get started today. That's Mobbin. Okay, now onto the episode. All right, so I'm impressed with demo and even the way that you've thought about integrating AI. This theming all looks great. Can you tease something like when you kind of look forward on the product roadmap a little bit, what are some of the things that you're thinking about or some of the different applications for AI that have you particularly excited?

B (24:00)

Yeah. So right now, this is actually a good example and sort of, hey, we're seeing it all is REI doesn't go and fully update existing components. It works on the theme level, it works on the page level. And you can see here it's kind of overriding this, so I can kind of get rid of that. And so some of the things we're doing is just integrating AI to even more levels than you've already seen. That's more contextual, that's more part of the system. The other parts is capturing more of that context. So a lot of bigger companies are asking to bring in their design system, and that's something that we're doing right now through pilots. But we're hoping that anyone can bring in any component they want and pair it with, again, the context about what you're building and actually have it design like you would with the same material. And then lastly, which we can see is we're working right now in this kind of difference between tools. We're still working on the design layer. Right. So these things here are mostly, while they are code, mostly static. And I think what gets really interesting, which a lot of kind of AI code first tools are doing, is, you know, they're letting you actually build interactive things. And that's a feature we have right now in beta design mode is we have our kind of home screen. Right. And then let's ask AI to quickly, based on this page, you know, design the chat detail view for interacting with the AI version of a designer. Include a, you know, right. Sidebar with a video preview of the episode and a transcript below, below it. So we're going to make something that's pretty simple, but sometimes it's really hard to actually wire up together. Right. We have this kind of like home screen and we want to be able to click into these things and then get a detailed view and then have something that we can actually interact with. We're going to be able to do that with just two pages and essentially the design as the prompt. So a lot of tools, a lot of like chat based prompting, right? You're always like, am I prompting for the functionality or am I prompting for the design? Right. We're design first, as you could see. We could spend probably the next hour tweaking these shadows right on all these buttons and all these cards. But at some point we want to add functionality and I actually think that design is the best prompt. There's so much embedded in what we've made here that actually describes the functionality. Like we have a subscribe button, we have a search box, we have listen. Now, all of these actually serve as really great context to build more functionality on top of it. And that's exactly our approach, which is you start with the design. Now let's go ahead and just quickly take one of these and save it as a new page. Let's just get rid of that nav bar. And I probably need to, let's see, add breadcrumbs to the top. So we're going to need some back navigation. And this is also the fun part of when you start getting into functionality, oftentimes it just impacts the design itself, right? Where you're like, oh, I was going to say that, like, hey, this is the detailed view. But I realized I probably need some way to go back, to go back to that home view we had. So it's a really good thinking exercise to actually get you to, you know, go in and really craft those designs, all those edge cases that you might have. So what we're going to do here now is we got our detailed view and we have our home view and we're going to go ahead and prototype it. So the way our prototyping works is again, design first. And what we've done is pretty much just give you a different mode where you could just comment on your designs to add functionality. So instead of just chatting one thing at a time, because we already have the design, all we really need to do is point to the things that we want to do now. So let's go ahead and just give it some maybe broad context. Like this is a homepage for showing, you know, podcast episodes and allow users to click into a card and open the chat detail view to interact with that episode and speaker. And then we could go in and say, we want this chat view. Just call it Nanda Chat Detail View. And I can go here and say that, you know, this is a chat detail view for interacting with an AI version of the podcast speaker we'll have here pre filled this with sample. Again, we're not connecting to data right now. It's all kind of that mock data prototype stage. But that's something that in the future we'd love to integrate more as well. And here we could say with sample transcript for each episode and then here we'll go ahead and say allow the user to type a question and send it in the chat. And then here we'll do reply to the user's question as the specific podcast speaker. So a loading animation before replying. So this is where you get into those little right. Interactive things. And let's go back here. And I think that should be good enough to start. We'll kind of fingers crossed. Obviously prompting is a, is an art with a lot of things. But you could kind of see, right what we're doing here is we're actually just annotating our designs the same way. We might actually hand that off to an engineer and giving it some sample data and tweaking our designs a little bit and then we go ahead and we actually just build the thing. So now we're kicking off, we've given it all that context and we're doing actually implementing some functionality on top of the existing code, which is the designs that you've made.

A (30:51)

Talk to me a little bit about the exploration process for that set of interactions because there's not actually that much precedent and in the back of my head for a lot of these code based design tools, it's been unclear to me what does prototyping look like in that world. And so it's very interesting to see where you landed. And a lot of makes a lot of sense, very fluid, just the quick tap and type. How obvious was that for you? How'd you arrive at that?

B (31:17)

Honestly, we're pretty contrarian by nature in what we're building. We always try to take like hey, there's always defaults, right. Well just like really tried not to follow the default and see where that exploration might lead. That's kind of the reason we actually didn't have chat in our design AI for a while. We just generated pages and then eventually we did realize, hey, people are actually asking questions like how do I make this design better and things like that. And so we did add more of a chat response. But I think our take is always like try to carve out the new ground dog food, the tool ourselves and really try to see how does it fit into that true designer's mind. And you know what I realized is wow. We all spend time literally describing these exact things as comments or specs in a mockup. Well, wouldn't it be magical if it just built all the things that you're already describing? Right. We are now looking at the actual live prototype code. We can look under the hood, we can share this as a link, but it looks exactly like our design. And I'm going to go ahead and we clicked into Dan Mall. Right. We could go back and then let's click into Grace Walker. So it looks like some of our images aren't updating, but we do have a different data for each piece. And then let's go ahead and say, you know, hey, Grace, what was Grace about freelancing? You know, how do I get started as a freelancer? And of course. Ah, all right, so we ran to a bug. Of course, we're not actually hooking up to an LLM here. And so a lot of this is just mock data that's being predefined. And unfortunately it looks like it hit a snag in the prototype. But you can see that we're starting to connect the pieces and some prompt engineering will get us there.

A (33:16)

Yeah, you can see how it's a really good foundation. Right. Like, even before you were hinting at it, it's very obvious to me how you've built a system that is going to allow people to plug into external data sources, drop in a set of API keys, you know, all of a sudden, make that an actual model. Like, it's having everything rooted in code and components. Feels like it's going to unlock a lot for you in the future.

B (33:41)

Oh, let's say. All right, so we fixed our little bug.

A (33:48)

Right.

B (33:48)

We got a real interaction where again, this is just probably some generic responses. You know, we could type in anything here, but we got the little. We got the little animation and, you know, as a designer, this is something that I would want to just prototype with, feel out the interactions. And then again, at the end of the day, what you're going to be handing off is not this code that just AI wrote with mock data. You're going to be going in and you're going to be giving the engineers this code that's not AI generated, that's actually part of your system, and let developers have the same flexibility in implementing it from starting with the front end as you as a designer want at the end of the day as well. Right. So we have different export functions. Of course, you can take it to a tool like bolt or replit or Cursor that's more prompt based and we can actually directly recreate that design as well. But as you kind of ask, we're really focused on teams that are actually building and shipping product. And while everyone's going to be closer to building, there's still going to be code bases, there's going to be engineers that you hand things off to. And that's really where we want to fit into that workflow instead of just, you know, vibe coding sort of everything.

A (35:09)

For that handoff, the code piece, what are you, when you click on like the cursor tab, what are you creating in that world? Yeah, so very cool.

B (35:17)

Exactly. We're, we're just, we're pretty much just wrapping the code in some basic prompting. So obviously cursor, if you're already working with cursor, you're probably going to be just as good, you know, taking the code itself. But these other tools need to run a few commands, they need to install these components for you. So we just wrap that in a prompt. But at the end of the day, everything's just code, like code. Because as a designer, you're working with code to begin with. It's just this magic material that you could take anywhere, right. And recreate it anywhere. And so we really just want to give the designers the ability to sculpt that so you know that anything you do is not throw away. They might just, you know, move to a different tool, but still be the exact thing that you made.

A (36:03)

A lot of tools have that promise, but don't have as clear of a path toward building on top of like a real design system that has like team level adoption, not just individual person level adoption. And so I actually can see a world where subframe, more than the majority of tools out there really can write production code for designers who are a part of real teams with real engineers and not just creating projects for themselves or using code as a material to prototype with.

B (36:34)

The inputs matter so much because the inputs are drive the outputs. And you know, if you start with good inputs, you'll get good outputs. There's a right layer of abstraction still, right. Like, and, and this is something that, you know, we're working on towards as well. This really feels like a building tool, right? You, you have some of these constraints. You're seeing one page at a time. We don't have a full canvas feature yet right now. But I think it's, it's about giving the design process the interface again. It needs to play around, to explore, to be like, what would happen if I move this over here and just kind of explore ideas really quickly, but just you're working with the material. There's, like, no more translation that happens during handoff. You're handing off the same thing.

A (37:26)

Amazing. Well, Phil, thank you for coming on and giving us, like, the real thing and rolling the dice on a live demo for us. This was very interesting. I think you have a approach that makes a lot of sense in a lot of different ways, and it was fun to see.

B (37:40)

Thanks for. It was great to be here.