B (2:24)

You know, I've been to like a lot of really cool countries and places. And I want to keep like a travel log of places I've been, you know, like. Yeah, okay. Most places are more fun than America, so. Yeah.

A (2:35)

So design a mobile app for, you know, travel log and booking or whatever. Use beautiful imagery and photos of cities in Oceania, maybe. Sure. And, you know, do we want to like.

B (2:56)

Yeah, you got to turn on the. You got to turn the swarm on.

A (2:58)

Yeah, yeah, yeah, let's do that. You know, so you can obviously let one agent design, but, like, one of the most exciting things that we have recently shipped is that you can use spiral agents. So we can just choose the amount of agents we want. Let's actually use six. So design three screens, two agents working on each screen. Yeah. And then you can also pick a style guide that you want to go with, or you can let the agent to pick one for you. So let's get surprised. Actually. Let's get surprised. It's going to pick something for us. So now it's going to start the agent, it's going to analyze the request and it's going to create a to do list for us and it's going to pick a style guide and it's going to distribute the work across all of these agents, you know, so now we have Claude Opus 4.6 working and it's going to start these like, sub agents and they're going to start communicating to each other and start designing for us, you know, so, yeah, now we can see the cursor phantom over there and it's gonna start the agents and yeah, start designing.

B (4:07)

So it's gonna start six sub agents.

A (4:09)

Right.

B (4:09)

And you get them names. Like Amber.

A (4:12)

Yeah. Actually, like a lot of people ask, like, can we like customize the names of these agents? You know, so now I'm working on this feature where you will be able to name them, you know, as whoever you want, you know, maybe your friends or whoever. So. Yeah. Should be fun. Yeah.

B (4:28)

Dude, just seeing these cursors here is pretty amazing.

A (4:33)

Yeah, it's really interesting because we had this whole parallelism kind of built. And I was like, man, but I have no idea which agent is working on what. So even for debugging purposes, I was like, why don't we just put a cursor there so we can see who is working on what and then we can like debug if something went wrong, you know, and like, we build it. I was like, oh, my gosh. Like, this is magic. It feels. It's like. It's so humanized, you know, like, Like AI usually is just like very. It doesn't feel like, you know, one of us essentially, which it isn't, you know, but like these cursors, like working on that screen on the canvas, it really feels like there's like actually someone behind it, you know, making these changes.

B (5:20)

And is it just generating code that looks like this or is actually, is it like doing something else?

A (5:25)

So it's, it's generating basically like a descriptor for the design and then what you can do, you can essentially ask it what kind of code you want to convert it into. Because like we wanted to make sure that it's sort of platform agnostic.

B (5:40)

Okay.

A (5:41)

For instance, like this, you want to convert into Swift, iOS or Kotlin because it's a mobile app or React native. So it wouldn't really make sense to generate this in HTML and CSS because this will go to Swift or whatever. So we have this platform agnostic file format, we call it pen. It's essentially just JSON based format. We wanted to really build this format to be agentic from the ground up. We have a documentation for that format on our website. Yeah, you can build plugins around it. People have started building all sorts of different converters. We have seen a plugin that converts that file into figma and into lovable and into all sorts of different things and so on.

B (6:22)

So yeah, got it.

A (6:24)

And we'll get to that. So maybe after this we can design a website for this and ask it to actually generate code for us. And look at that.

B (6:33)

This episode is brought to you by Linear. When engineers use tools like Cursor, clock code and codecs, a lot of work happens in Invisibly. Someone can go from a bug report in Slack to a shipped fix without creating any record of what happened outside of the code editor. And that's fine for speed, but it makes coordination harder as you scale. Linear integrates with the very best agent coding tools directly, like Cursor and Codex. That way anyone can see what an agent is working on and who assigned them to the task. You get the speed of agents without losing visibility across the team. Product teams at OpenAI, Ramp and Block are all using linear to collaborate with AI agents. And I use Linear myself to run my creator business. So check it out at Linear App Agents. That's Linear App Agents. Now back to our episode and how are you getting the images? Just like using Nano Banana or something?

A (7:26)

Yeah, yeah. You know, you can, you can plug in all sorts of different image generators. We have a few of them and we're always like checking out what's the latest best and plug the best one in there.

B (7:38)

So. Yeah, this is great, dude. You know what you should do? You should introduce some more banter between these agents right now. Just kind of like saying you should have them argue with each other.

A (7:48)

Yeah, it'd be really cool. They should actually speak. Why not? We should plug in some 11 labs or something and they should just talk to you.

B (7:57)

Yeah, that'd be amazing. And this swarm feature is pretty new, right? Like, it only was released like last week or something.

A (8:03)

Yeah, actually this week. I mean, this week has been so long, you know, so much has happened. But it went out on Tuesday and it already went viral and you've seen it, right? And thank you so much for the tweet, by the way. I was, like, so shocked when I saw it, so. It was amazing, no?

B (8:21)

Yeah, it's amazing. I think maybe previously the product only had one cursor.

A (8:25)

I guess it didn't have any cursor. It was just like an agent putting things in. You could run like multiple chats and they would start working kind of in parallel. But it wasn't like the true parallelism. It was useful when you wanted to spin out a different variation or something like that. So, for instance, here what I can do is I can now basically say actually redesign this into like this style. So what I can now do is like redesign the screens into this style and it's going to go and it's going to read the style guide and start working on it. And then obviously in the demo that I was showing online, we had agents working on social media, graphics website and mobile app sort of in tandem at the same time. So, like, you can go really easily within like minutes from just an idea into something where you can just collect defaults. And one of the things that, where this is really interesting is that sometimes you don't even know what you want to build. And like, people today, like, really quickly jump into Claude or like, you know, one of these bytecoding apps and start building an app. You don't even know if you want to build it, you know, and like, what if there is like multiple things that you wanted to do actually completely differently and so on. So think of Pencil as this visual planning mode of sorts. You know how you have like plan mode and cloth code and cursor. So this is like the visual planning mode where you can like visually plan things and then you can sort of. Once you decided this is what I want, you know, then sure. Awesome. Like, build me this.

B (10:09)

Yeah, this is interesting because I think any real designer is not just going to design one thing like they want to. They want to diverge and explore a whole bunch of different options and then they kind of converge into what they actually want. Right. Being able to explore different designs, ideally, actually I can actually look at the design side by side and just pick one.

A (10:30)

Exactly. And this is the constant feedback that I've been hearing from other folks. And I think a lot of the bytecoding platforms, they basically are very linear and serial. You do one thing and you click in one thing, but actually you want like 20 different variations, compare them side by side, maybe divert branch and so on. And like I have seen tons of design files throughout my life. And like all the designers, they have like crazy mess in their files because it's exploratory mode. You know, you're just like ideating, you're trying different things, you're comparing, you're copy pasting a lot. And then once you decide you're like this is it, then you make a spec and sort of like a PRD around the app.

B (11:13)

Yeah, exactly. Yeah. And anyway, dude, I'm just watching this now. I'm still blown away. I do think the cursors in the UI makes a huge difference. Like it makes a huge difference because if I use cloud code, I can theoretically do this too, but it's just generating a bunch of code that I can't see. But you know, being able to see this hat happen is like a game changer.

A (11:33)

Yeah, it's, you know, like it's actually really hard. I mean, like, sure, like these platforms that are now going into parallel mode, you know, they're like assigning different roles to different agents and so on. But what I wanted really to do is to have parallelism with same roles of agents in a way that they're doing non conflicting changes that they figure out how to split up the work in parallel in front of me, still use the same really powerful model like Opus, but do it like three times faster because they were able to essentially split the work.

B (12:13)

Yeah. And this is something that a human can actually look at and understand. If I use cloud code, I can spin up three different terminals and have them do their work, but I have no idea what the hell's going on until they actually finish their work. But right here I can see.

A (12:30)

Exactly. And then you're like, okay, cool, build me this. And now we can go for the coffee and come back later. Because you know, they have the plan, they know what to build, you know, so. And that's a. That's a huge difference. It's a world of difference.

B (12:44)

You actually have a website, right? You have another file with a website.

A (12:48)

So I mentioned in the beginning that you can use pencil with all sorts of different tools, and one of them is Cursor. And Cursor is really interesting because it also allows you to use, like, different models and you can sort of like contrast and compare. So here we are inside of Cursor, and I have this sort of file that I have built previously. And.

B (13:16)

Well, hang on, this is actually inside. Okay, so you just opened coffee shop pen file in cursor.

A (13:21)

Yeah, exactly. So as soon as you click on pen file inside cursor, it opens in this, like, visual editor.

B (13:28)

That's mind blowing too, dude.

A (13:29)

Yeah. So we have built our custom editor essentially inside Cursor, and this is where we started initially, and then we started building these apps around it and so on. So now this works in all of these apps. So it's basically a design tool baked into Cursor. And all you have to do for that is to just go to extension store and find pencil and install it, and it will just start working right away.

B (13:56)

Okay, so how do you. So now we have this thing. Yeah. So how do we actually build this thing?

A (14:00)

Yeah. So, like, one of the really cool things here is that I can use the cursor agent here. So I have like all the models here, like Composer, for instance, you know, and Composer, man, it flies. It's kind of amazing. It's super fast. So, for instance, like, let's say I want to turn this selected frame into light mode. Okay. And I'm going to like, hit enter. It's going to scan that, and it's going to start working on that.

B (14:27)

Oh, wow. Okay. So like, the agent can actually interact with this PEM file.

A (14:32)

Yeah, exactly. So see how fast it was. This is Composer. It's really amazing. So that's sort of like the flexibility you get when you're working within Cursor and within other tools. You can mix and match different models and so on and so on and so on. That's kind of nice workflow as well. And now what we can do is turn this into code, you know, which is obviously the step where we wanted to get in the first place. You know, now we have designed everything and we're like, okay, I want this in the code. So for that I'm just going to open a new chat. Let's say I pick Opus this time. And I'm just going to say. And you can Actually copy this and paste it here. So now it says coffee shop pan homepage. So it's the name of that frame. And I just say like generate code for this frame in React tailwind, what was it? Node JS, sorry, next JS and run it on port 80, 80, 80 in the browser. Okay. And now it's gonna scan it. It's gonna also like analyze all of these different parts of it and it's gonna start generating code for it from that visual representation. And you can see and this is like the cursor agent here.

B (16:04)

Okay. So now it's actually generating the HTML and everything.

A (16:08)

Yeah, and I was generating the HTML and React and everything. And honestly you can decide you maybe already have an existing code base and this is where pencil power really comes together or to fruition because you might already have existing code base. And the idea about pen file really is that it's this JSON. I can right click on it and I can open it in the editor here. So you can see it's just a JSON.

B (16:36)

Yeah.

A (16:36)

And all the agents can read it and can write it. And it was the like original idea that this is like agentic, new agentic format or design format built for agents from the ground up. So the idea is that this file goes into git and in the git, like either in the cloud or with your co workers, anybody can work with that file. You can create a library of components and so on and so on and so on. So while this is working, I wanted to show you actually a couple more things. So you can set up variables for things, which is basically just like a CSS file and you can use these variables across the document. So at that point it just keeps using the same things. Also we have a bunch of design components in here. This is for instance shat, cn and you can also just like change it to dark mode and change it to like some different tone. And maybe you want like violet or green sort of accent for that. And these are like tons of different Shadsian components. And you can. So right away you can start designing with them in here. And yeah, now it's running the website. Let's see what's going to happen. And here we go. So this is the generated, basically React Next JS website from that design that we had here.

B (18:06)

That's pretty man.

A (18:07)

Yeah.

B (18:08)

And then if I, let's say I want to change the title or something or move some button around so I just go back to the pen file, Right?

A (18:14)

You can go to the pen file, you can change it there you can go to code, you can also go and you know, use the cursor tools here. But you know, this is basically that source of truth, you know, so.

B (18:25)

Yeah, but, but, but if I change it in the code, does it reflect in the pen file? Is it linked?

A (18:29)

Well, you have to ask LLM at that point, you know, to update it in the design because you change it in the code, you know, so like there's no like live real time change, you know, like ideally maybe down the road, who knows. But right now you just ask LLM to tweak it. Yeah.

B (18:43)

Okay. Before you were showing me the chassis N. So there's a bunch of design systems saved here somewhere.

A (18:49)

Yeah, so we have a bunch of design systems and there are these pretty advanced components. Like this is a table, it has slots and so on. But anyways, we have these prompt notes which are ready made sort of sticky notes with different prompts that you can save into the documents. And I'm just going to stop this. It's already finished and I can prepare for my colleagues certain prompts to generate something or I have like a team of PMs or designers on my team and I want to make sure that they come from the same set of rules. So here I just click run and this is going to send it to the cursor agent and it's going to start designing on this canvas. It's going to read the components. It needs to see how it's like reading things. And now it's going to start composing those things on, on this screen right here.

B (19:40)

Oh, using the components.

A (19:42)

Yeah, using the components, exactly.

B (19:44)

All right, dude, you blow my mind again.

A (19:48)

So here we can say like mode and I can also turn it into dark mode. And also like while it's designing I can start editing that, which you know that but like this isn't like obvious for most of the people that like you can sort of like under the hands of the agent, already touched the design and start changing it. And this is probably the biggest sort of shift in like how we think about this whole thing because when like a typical by coding app creates something, it's not like you can go in there and start like changing it in real time. You have to like always wait until it's done and so on. And it kind of gets you out of the flow, whereas this canvas workflow keeps you in the flow. And that's such a major difference between this workflow and the other workflows.

B (20:41)

Yeah, it's like a pain in the ass. You have to Prompt AI to change some text or move some stuff around. So it's totally better. Just use it yourself.

A (20:47)

Yeah. And that's where this idea actually started. I was like, I just want to be able to draw some stuff and tell agent to build me this because it's so much faster for myself and many other people to just draw a button versus, like, describe what the padding should look like and the colors and style and all of these things should feel like, because oftentimes you don't even know. You have to see it first and then tweak it and then say, this is what I want.

B (21:17)

Yeah. And, dude, I feel like one of the major innovations is this pen file. I'm surprised. So it's just JSON and it has like a bunch of like. So it has like numbers for padding and stuff.

A (21:30)

Yeah, essentially it's like a full description of. Think of this as like, Agentic PDF or like, if PDF was designed or built, you know, in this new era of AI agents, this is probably how it would look like.

B (21:44)

Got it. Okay. This is super awesome. Now I'm going to ask you about, like, the history of this product because it's like, super impressive. How long have you been working on this? When did you start working on this?

A (21:56)

Yeah, we started, like, early last year. And essentially I was just poking around with cursor and cloud code and all of these tools. I was building something else, like this project and realized it's so much energy to write the UI to the chat and explain it to the agent how things should look and feel. Why can't I just draw it? And I looked around in different marketplaces for VS code and so on, and I couldn't find anything. So quickly put together a prototype, put it out. It got like 1 million views across, like, LinkedIn and X. And I was like, wow, this is it. Seems like people have a similar problem, so to speak. And we got into a 16s at speedrun. Went through speedrun, and yeah, the rest is just a story. We launched like the full G8 weeks ago, got 100,000 users now. And yeah, it seems like it's a big problem for people.

B (23:00)

100,000 users. Is it mostly, like, designers, solopreneurs or companies, or all of the above?

A (23:07)

Yeah, this was also surprising to me. So I think Mark Anderson was just recently talking about this Mexican standoff between, like, VMs and designers and engineers. You probably heard it right.

B (23:20)

Yeah.

A (23:21)

And I think we're essentially all becoming makers, Designers graduating into design engineers. Engineers now wanting to tackle more things than Just code, essentially. Just like managing and running full projects or full sections of projects. And now PMs are feeling like, so empowered to be able to create and also, like, it goes way beyond that. A friend of mine just recently called me and he was like, man, I love pencil. I've been using it. I was like, what you. He's a marketer, you know, like, he. He's a guy who works as a marketing guy within this company. And he's like, I love it. Like, I picked up Claude code immediately, by the way. Cloth code in desktop app, you know, not even in terminal. And he uses that with pencil. And he completely rebuilt website, marketing materials, ads, you know, PDFs, they use like technical specs for salespeople and so on. I was like, wow. So essentially it's this AI design canvas right in middle of everything, and you kind of make it yours, honestly. Obviously we have advanced components and all sorts of different things for enterprises. We have enterprises using that for this specific purpose to convert their design systems into pan format and make sure that it lives in the git. This is the source of truth for everybody now. But there is more and more of these people who had no preconception of coding and are now picking up coding thanks to Pencil as well.

B (25:01)

I mean, this is so much more fun than, you know, writing code by hand or even as a designer, like, making all those layers and like drawing some boxes. Yeah, this is way more fun, man.

A (25:11)

And oftentimes, like, so how many people told me, like, man, like, I had like five projects in a drawer, I didn't get to them. And now I'm finally like, thanks to pencil, like, seeing them through. Because it's so much fun to just like, see what it could look like. And with a lot of these other tools, you run into these errors, couldn't compile something. And a lot of the people are deterred by that and they just give up. Versus in pencil, you can just see it. Does it make sense? Cool, let's pursue it further. Doesn't make sense. Fine, you scrape it. But at least now you know.

B (25:47)

Yeah, and there's so many vibe coding tools out there, but yours is one of the first that actually is visual first, and I think that makes a lot of difference. And do you know if I can actually collaborate with other people in this thing too, along with the AI agents?

A (26:01)

Yeah, we don't have multiplayer per se right now, not yet. But how we have seen people mostly collaborate is through git. And also, if you talk to a lot of designers, they tell you that it's a great way to handle things, the devs and so on. So.

B (26:21)

Yeah, yeah, okay, dude. Well, I mean, were you always an entrepreneur or. I should have done my research. But were you?

A (26:26)

Yeah, yeah, yeah. Before this, I worked on this app called around. It was like a video conferencing app.

B (26:33)

Okay.

A (26:34)

It was like these little circles on a desktop. You would use them on top of, like different multiplayer tools. It was very popular during COVID You could like put a filter on and so on because, like, games in there, a lot of startups and teams were using it for collaboration, was more fun than Zoom and Miro acquired that and. Yeah, and, you know, even before that I had another startup in like 3D avatar space. And before that I worked at Adobe for like a decade, you know, so. And before that, yeah, I was an evangelist for like the creative cloud products and I worked on design tools as well, you know, so. And before that, like, my parents had a design agency, so when I was a kid, I would always like, hang out with the designers in the design agency and they would teach me how to use different tools from like, I started using Photoshop when I was like seven, then like CorelDraw, Illustrator, InDesign, PageMaker, all of these tools. And eventually I was like, I don't like, necessarily print design because like, web was sort of like starting to happen in like late 90s. And so I started picking up all sorts of things like HTML and PHP and so on. But eventually I fell in love with Flash because it was like first app where you could design and code at the same time. And I think for a lot of people it really enabled them to be creative. And I think ever since Flash we haven't necessarily seen a similar paradigm where you would be like, designing coding in one place. And I think now with vitecoding, it started to happen again because suddenly it became like too complex in a way. Like, it was like all these frameworks and like backends and so on. And now bytecoding brings a lot of that initial fun we used to have back in the times before all these complexities happened and different platforms and screens and responsiveness and mobile and this and that. You remember all of that, right? So up until this point, and specifically up until this point, like maybe like November, December last year, when these agents really started to become incredibly powerful, now anybody can build like a mobile app almost, you know, like, not saying that, like, it's going to be the best app in the world and they're going to ship it, like, necessarily and it's going to be secure and everything, but, like, they can build things and, like, that wasn't necessarily possible before, so.

B (28:58)

Yeah, okay, got it. Okay. Okay, just last question. Like, how are you building this company? Because, you know, you're right in the thick of things. And how do you build this company? With AI, you know, like AI agents or, like, which parts are humans touching? Which part is AI doing?

A (29:12)

Like, how are we building the company?

B (29:14)

Or, sorry, the product. The product. Yeah.

A (29:18)

I would say, honestly, a lot of the ideas, I mean, I have a long history of building these kind of experiences and tools and products from the past. So it's like a personal passion almost. And I think for a lot of the folks on the team is the same thing. A bunch of us worked on kind of, like similar things in the past or 2D and 3D tooling and so on. So it's a personal passion for a lot of us. Yeah.

B (29:47)

Okay. Okay. Awesome. Dude, what's next, man? Maybe Adobe will try to acquire you. You better be careful.

A (29:59)

Yeah, well, honestly, there is so much unexplored now that we have, like, shipped the Swarm stuff. I was like, wow. And now the whole world of, like, ideas is slowly, like, opening in front of me. Like, those cursors, it seems like a small touch, but it's the first time I have seen AI humanized.

B (30:21)

Yeah.

A (30:22)

And it feels like there's someone there, you know, and it's crazy. It's just a cursor, you know, but it just makes you feel like that

B (30:31)

it shows you actually that craft and care still matter. Because I think I would not be as blown away if those curses were not on the screen and there wasn't, like, an agent chat right below. So it actually still matters.

A (30:45)

Yeah, it's really funny because imagine that the agents just wrote that JSON and he would have to reopen the file.

B (30:52)

Oh, that would be terrible.

A (30:54)

But that's essentially what happens in the background, right? Technically speaking. But, like, all of these little things matter so much and they make a world of difference. So I just hope that more and more people in the world are going to start thinking in this way about LLMs, that we can really give them face. Now this face is this little cursor, but it's so much more we can do.

B (31:19)

Yeah. How do you make it transparent in what they're doing and also give them some personality? Like, that makes a huge difference.

A (31:23)

Yeah, totally. Like, so many people, like, like I said, like, so many people ask me, like, can I rename these agents?

B (31:29)

Yeah, rename them Give them, like, little personalities, like, you know, have. Have a Peter PM agent. That just ruins the design.

A (31:34)

Yeah. Or they can, like, fly to each other, like, you know, do high fives and whatever.

B (31:38)

Yeah, they can call.

A (31:40)

Yeah, yeah. They can, like, fly from, like, specific place. I mean, there is, like, so much stuff, so. Yeah.

B (31:46)

All right, Tom, Well, I'm blown away. I'll try to get John to let me invest in your company or something, but, yeah, keep going, man. You have something very special here.

A (31:57)

Yeah, I really appreciate it. It was great chatting. Thank you so much.

B (32:00)

Yeah, thanks so much.

A (32:01)

Yeah. And by the way, if you want to download it, go to pencil.dev you can also join our Discord. We have a button there. Join Discord. There's thousands of people discussing their creations, designs. They're sharing them with everyone, asking for features and reporting bugs. And all the great feedback is super much welcome. So, yeah, let us know when you try. And we're here for you. And you can DM me on Discord or on X. So, yeah, thank you so much.

B (32:34)

Yeah, you better get your servers ready, man, because this is going to take off. So, yeah, get ready. Yeah. All right, thanks. Cheers.