2026-03-08 | Peter Yang | 6 AI Agents Designing an App Together: A Mind-Blowing Experiment
实时见证6个AI智能体同台协作设计应用,Pencil如何通过视觉化画布重塑开发工作流
转录
speaker 1 [00:00:00-00:00:10]: Those cursors, it seems like a small touch, but it's the first time I have seen AI humanized. It feels like there's someone there. It's crazy, it's just a cursor, but it's like so. speaker 2 [00:00:10-00:00:13]: much more we can do. Just seeing these cursors here is like pretty amazing. speaker 1 [00:00:13-00:00:18]: As soon as you click on Pen File inside Cursor, it opens in this like visual editor. speaker 2 [00:00:18-00:00:19]: That's my point too. speaker 1 [00:00:19-00:00:32]: dude. So see how fast it was. This is Composer. It's really amazing. Here we go. So this is the generated basically React Next JS website from that design. We launched full G8 weeks ago, got 100,000 users now. speaker 2 [00:00:33-00:01:04]: It shows you that actually that like craft and care still matter. I think I would not be as blown away if those cursors were not on the screen. It wasn't like an Asian chat right below. Okay, hey, everyone, I'm really excited today to host Tom. Tom is the CEO of Pencil, which is uh generally one of the most exciting AI pros I've ever seeing. Like it basically is a product where a swarmmer of AI agents can design anything you want. And yeah, I was blown away by I was generally blown away. Um So welcome Tom. speaker 1 [00:01:04-00:01:07]: Hi, everyone, thanks Peter for having me. This is exciting. speaker 2 [00:01:07-00:01:23]: Yeah, you know, i i showed your product to my designer and then she shared with all the design group and they were like, hmm, should we like be worried about your jobs or so? Yeah, dude, it was, it was amazing. Yeah. speaker 1 [00:01:23-00:01:24]: awesome. speaker 2 [00:01:24-00:01:28]: Why don't we just show the people here? Like how amazing this did you want to like just try it? speaker 1 [00:01:29-00:02:23]: Just gonna share my screen real quick and. This is pencil. It's an app that works on windows linux mac. And we also have plugins for vs code, cursor anti-gravity windsurf and all of the vs code based ids, you know, and it works really well with cloud code and codex and all of the existing agents and other people actually like my surprise, they want to bring their own agents. So they've been using it with open code and. All sorts of different cli that I've even never heard about, you know? So you can essentially like make it yours, plug in your own agent, you know? But you know, this is how it looks like. So it's like a design tool, so you can create like a frame and you can like manually start designing here. But like now in this age of AI, why don't we invite you know AI to design something for us? So what do we want to design? Peter, tell me. speaker 2 [00:02:24-00:02:32]: ,you know, I'VE BE to like a lot of really COUNT and PLES, and I want to keep like a TRA travel log of PL that I've been, you know, like yeah, okay, mostOST placesES are more fun thanAN AmericaERICA. speaker 1 [00:02:33-00:02:56]: SO yeah, SO designIGN a mobile APP for UM you know travel LO and booking or whateverE, UM use BEAUTIF imagery and photos of C cities in OCEania, maybe. Sure. And you know, do we want to like. speaker 2 [00:02:56-00:02:58]: you got turn on the you got turn the swarm mode. speaker 1 [00:02:59-00:03:57]: 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 pearl agents. So we can just choose the amount of agents we want, you know, like let's actually use six, you know, so design three screens to agents working on each screen. Yeah. And then, you know, you can also pick like a style guide that you want to go with, or you can let the agent to pick one for you. So let's, you know, let's get surprised actually. Let's get surprised, you know, it's gonna pick something for us. So now it's gonna start the agent, it's gonna analyze the request and it's going to create a to-do list for us and it's gonna pick a style guide and it's gonna distribute the work across all of these agents, you know. So now we have cloud of 4.6 working and it's gonna start these like sub agents and they're gonna. Start communicating to each other and start designing for us, you know? speaker 1 [00:03:57-00:04:07]: So yeah, now we can see the cursor phantom over there and it's gonna start the agents and yes, they're designing. speaker 2 [00:04:07-00:04:11]: So it's gonna start six sub agents, right? And you get them. Yeah, like amber. speaker 1 [00:04:12-00:04:27]: 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. speaker 2 [00:04:27-00:04:36]: should be fun. Yeah, dude, like I mean, just just seeing this, like seeing these cursors here is like pretty, pretty amazing. Yeah. speaker 1 [00:04:36-00:05:20]: Yeah, you know, like it's really interesting because like we had this whole parallelism kind of built and I was like, man, but I have like no idea which agent is working on what, you know, so even for debugging purposes, I was like, why don't we just like put a cursors there so we can like see who is working on what and then we can like debug if something went wrong, you know, and like we build it and I was like, oh my gosh, like this is magic. It feels 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 what working on that screen on the canvas, it really feels like there's like actually someone behind it, you know, making these changes and. speaker 2 [00:05:20-00:05:24]: is it just generally code that looks like this or is that is like doing something else? speaker 1 [00:05:25-00:06:23]: So 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. Okay, 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 like generate this in like HTML and CSS because like this will go to Swift, you know, 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 like agentic from the ground up. and yeah, so we have a documentation for that format on our website. you can build plugins around it. people have started building all sorts of different converters. we have seen a plugin that converts . pen file into figma and into laval and into like all sorts of different things, you know, and so on. so yeah, got it. speaker 1 [00:06:24-00:06:33]: and we'll get to that, you know, so maybe after this we can design a website for this. And ask it to actually generate code for us and look at that. speaker 2 [00:06:33-00:07:26]: This episode is brought to you by Linear. When engineers use tools like Cursor, Clock Code, and Codex, a lot of work happens 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? Is like using nano banana or something? speaker 1 [00:07:26-00:07:39]: 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, you know, and plug the best one in there. So yeah. speaker 2 [00:07:39-00:07:48]: this is great. You should, you know what you do? You should introduce some more banter between these agents right now, just kind of like saying, You should have them like argue with each other. speaker 1 [00:07:48-00:07:57]: yeah, it'll be really cool. Yeah, they should actually speak, you know? Why not? Like we should plug in some 11 labs or something, and they should just talk to you. speaker 2 [00:07:58-00:08:03]: Yeah, that'll be amazing. And this swarm feature is pretty new, right? Like it only was released like last week or something. speaker 1 [00:08:03-00:08:19]: Yeah, actually this week... It 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. For the tweet, by the way, I was like so shook when I saw it, so it was amazing. speaker 2 [00:08:20-00:08:26]: No, yeah, it's amazing. Like I think maybe previously the product only had one cursor, I guess. speaker 1 [00:08:26-00:09:29]: it didn't have any cursor, it was just like an agent putting things in. You could run like multiple chats and they would like start working kind of in parallel, but it wasn't like the true parallelism. It was useful when you wanted to like. Spin out a different variation or something like that, and like so, for instance, like here, what I can do is like I can now basically say like actually redesign this into like this style. So what I can now do is like redesign the screens into this style, and it's gonna go and it's gonna you know read the style guide and and start working on it, and then obviously you know in the demo that I was showing. Online, we had like 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 go like defaults. speaker 1 [00:09:30-00:10:09]: 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 cloud or like you know one of these uh bi coding apps and start building an app. Like you don't even know if you want to build it, you know? And like what if there's like multiple things that you wanted to do actually completely differently and so on. So yeah, think of pencil as this like visual planning mode of sorts. You know how you have like plan mode in cloud code and in cursor? So this is like a 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. speaker 2 [00:10:10-00:10:30]: Yeah, this is interesting because I think any real designer is not just going to design one thing. Like they want to diverge and explore a whole bunch of different options, and then they kind of converge into what they actually want, right? So yeah, so yeah, so like, you know, being able to explore different designs, like ideally actually, you kind of, I can actually look at the design side by side and just like pick one. speaker 1 [00:10:30-00:11:13]: Exactly, you know, and this is the constant feedback that I've been hearing from other folks, you know, and I think. A lot of the web coding platforms, they basically are very like linear and sort of serial, like you do one thing and you click in one thing, but like 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 mass 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 strip like a PRD around the app. speaker 2 [00:11:14-00:11:33]: Yeah, exactly. Yeah, and... and anyway, do I'm just watching this now? I'm still blown away. I do think I do think the cursors in the UI makes a huge difference, like it makes a huge difference because if I use clock code, I can theoretically do this too, but it's just generally a bunch of code that I can't see. But you know, being able to see this happen is like a game changer. speaker 1 [00:11:34-00:12:13]: Yeah, it's it's you know, like it's actually really hard. I mean like sure like a lot of these platforms that are now going into parallel mode, you know? Yeah, 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, you know, in a way that they're doing non-conflicting changes. You know, did 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. speaker 2 [00:12:14-00:12:29]: Yeah. And this is something that i like human cash. You look at and understand, you know, like, you know, if i use call code, i can spin up like three different terminals and. Have them do the work, but I have no idea what the hell is going on until they actually finish the work. But right here, I can see. speaker 1 [00:12:30-00:12:43]: yeah, 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 yeah, and that's a huge difference, the world of difference. speaker 2 [00:12:44-00:12:48]: You actually have a website, right? You have another file with a website. speaker 1 [00:12:48-00:13:14]: 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. speaker 2 [00:13:15-00:13:21]: and well hang on, this is actually inside. Okay, so you just opened coffee shop pen file in cursor. speaker 1 [00:13:22-00:13:27]: yeah? Exactly. So as soon as you click on pen file inside cursor, it opens in this like visual editor. speaker 2 [00:13:28-00:13:30]: And that's my point too, dude. Yeah. speaker 1 [00:13:31-00:13:56]: So we have built our custom editor essentially inside cursor, and this is where we started initially, you know? 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, you know? And all you have to do for the app is to just go to extension store and find pencil and install it, and it will just start working right away. speaker 2 [00:13:56-00:13:58]: Okay, so how do you? So now we have the same. Yes. speaker 1 [00:13:58-00:14:27]: how do we actually build this thing? Yeah. So like one of the really cool things here is that i can use the crystal 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 gonna like. Hit enter, it's gonna scan that and it's gonna uh start working on that. Oh wow! speaker 2 [00:14:29-00:14:32]: Okay, so like the agent can actually interact with this stop pen file. speaker 1 [00:14:32-00:15:33]: Yeah, exactly. So see how fast it was, you know? Like this is composer, it's really amazing, you know? So like that's sort of like the flexibility you get, you know, when you're working within cursor and within other tools, you know, you can like sort of mix and match different models and so on and so on and so on. And it'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 I can 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. speaker 1 [00:15:34-00:16:04]: What was it? No js. Sorry, next js. And, And run it on port 808080 in the browser, okay? And now it's going to scan it, it's going to also like analyze all of these different parts of it, and it's going to start generating code for it from that visual representation, you know? And you can see... And this is like the Crystal Agent here. speaker 2 [00:16:04-00:16:08]: Okay, so now it's actually generating the HTML and everything. speaker 1 [00:16:08-00:17:12]: Yeah, and I was generating the HTML and React and everything. And like honestly, you can decide you maybe already have an existing code base, and this is where like Pencil. Power really comes together or to fruition because like you might already have like existing code base and the idea about pen file really is that it's this, you know, json i can like right click on it and i can open it in in the editor here so you can see it's just a json. So all the okay. Yeah. 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 coworkers, 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, you know? speaker 1 [00:17:13-00:18:06]: And you can use these variables across the document, you know? So at this point, it just keeps using the same things. Also, we have like bunch of design components in here. This is for instance. Chat 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 a violet or green sort of accent for that,and these are like。 Tons of different chat components,and you can so right away you can start designing with them in here,and yeah,now it's running the website,so let's see what's going to happen,and here we go,so this is the generated basically react next js website from. From that design that we had here, you know? And yeah. speaker 2 [00:18:06-00:18:14]: that's pretty man. Yeah, 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. speaker 1 [00:18:14-00:18:25]: right? 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 the sorts of truth, you know? So yeah. speaker 2 [00:18:25-00:18:28]: but but but if I change it in the code, does it reflect in the pen file? speaker 1 [00:18:28-00:18:42]: Is it linked? 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 life real-time change, you know? Like ideally, maybe down the road, who knows. But right now, we just ask element to tweak it. speaker 2 [00:18:42-00:18:49]: Yeah. Okay, before you were showing me the chassis and so this is a bunch of design systems saved here somewhere. speaker 1 [00:18:49-00:19:40]: Yeah. So we have a bunch of design systems and there are these like pretty advanced components. Like this is a table, it has slots so and so on. But anyways, we have these like prompt nodes which are like ready-made sort of sticky notes with different prompts that you can save into the documents. And i'm just gonna stop this. It's already like finished and i can like 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, you know, come from the same set of rules. So yeah, you know, i just click run and this is gonna send it to the crystal agent and it's gonna start designing on this kind of it's gonna read. The components it needs to see how it is like reading things, and now it is going to start composing those things on on this screen right here. speaker 2 [00:19:41-00:19:42]: 0 Using the components. speaker 1 [00:19:42-00:19:44]: yeah, using the components exactly. You know. speaker 2 [00:19:44-00:19:46]: all right, dude, you blow my mind again. speaker 1 [00:19:48-00:20:40]: So here we can say like mode, and I can also turn it into dark mode, and also like while it is designing, I can you know start editing that which. You know, you know that, but like this, this isn't, this isn't like obvious for most of the people that like you can sort of like under the hands of the agent already touch 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 vibe 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 and so on. And it kind of gets you out of the flow, whereas like this canvas workflow keeps you in the flow. And that's such a major difference between like this workflow and the other workflows. speaker 2 [00:20:41-00:20:47]: Yeah, it's like a pain to ask you have to prompt AI to change some text or like move some stuff around. So it's better just like using yourself. speaker 1 [00:20:47-00:21:17]: Yeah, yeah. And that's where this idea actually started. I was like, I 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 like oftentimes you don't even know you have to like see it first and then tweak it and then say this is what I want. speaker 2 [00:21:18-00:21:30]: Yeah. Um, and and dude, like i feel like one of the major innovations is this pen file, like 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. speaker 1 [00:21:30-00:21:44]: Yeah, essentially it's like a full description of think of this is like agent pdf or like if pdf was designed or build, you know, in this new era of ai agents, this is probably how it would look like. speaker 2 [00:21:45-00:21:56]: Got it okay,this is this is awesome now now I'm gonna ask you about like the history of this product dude because it's like super impressive um how long have you been working on this like when you start working on. speaker 1 [00:21:56-00:22:59]: this yeah we started like early last year and essentially um i was just poking around with cursor and cloud code and all of these tools i was building something else like this ah project and. And realized like 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 prototype, put it out. You 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 16th speed run went through speed round 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. speaker 2 [00:23:00-00:23:07]: Uh,one hundred000 users, is it mostly like um like designers,OPreneERS or companies or all of the aboveVE? speaker 1 [00:23:08-00:24:05]: Yeah, this was also like surprising to me. So I think MarkDISON was just recently talking about his Mexican SToff between like VMMS and designers and engineersERS, you probably heardARD it, right? Yeah? And I think we're essentially all becoming makers, designers graduatingAT into design engineers, engineers now wanting to T tackle more things than just code ES essentiallyTI just like managing and runningNING. 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 pencils. I've been using it. I was like, what? You? He's a marketer, you know, like 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, Claude Code in desktop app, you know, not even in terminal. speaker 1 [00:24:06-00:25:01]: 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. Like obviously we have like advanced components and all sorts of different things for enterprises. We have like enterprises using that for for this specific purpose to like convert their design systems into pen format and make sure that it lives in the git. This is the source of truth for everybody now. But there is like more and more of these people who like had no preconception of like coding, and are now picking up coding thanks to pencil as well. speaker 2 [00:25:01-00:25:11]: I mean, this is so much of of poor 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. speaker 1 [00:25:11-00:25:47]: man. And oftentimes like so, how 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 just like see what it could look like. And with a lot of these other tools, it's you know like you run into these errors like couldn't compile something, and like a lot of the people are deterred by that, and like they just give up versus like in pencil, you can just see it doesn't make sense. Cool, you know, let's pursue it fur doesn't make sense. Fine, you scrape it, you know, but at least now you know. speaker 2 [00:25:47-00:26:01]: Yeah, and there's like so many vibe coding tools out there, but yours is one of the first that actually is visual first. And like i think that makes a lot of difference like and do you know if like i can actually collaborate with other people in the same too, you know, along with the ai agents. speaker 1 [00:26:01-00:26:21]: Yeah, we don't have like multiplayer per se right now. Not yet. Yeah. And but what you can what how we have seen people mostly collaborate is through good. And also, like if you talk to a lot of designers, they tell you that it's like a great way to hand off things to devs and so on. So yeah. speaker 2 [00:26:21-00:26:25]: yeah, okay dude. Well, I mean, were you always an entrepreneur? Or I should done my research. speaker 1 [00:26:26-00:27:28]: but yeah, yeah, yeah. Before this, I worked on this app called Around. It was like a video conferencing app. Okay, 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 filter on and so on. You like games in there. A lot of startups and teams were using it for collaboration. It was more fun than Zoom. And Mirror 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 uh for like the creative cloud products, and I worked on design tools as well, you know? So got it. 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 uh in the design agency, and they would teach me how to use like different tools from like I started using Photoshop when I was like seven, then like Corel Draw, Illustrator, uh InDesign, PageMaker, all of these tools. speaker 1 [00:27:28-00:28:30]: 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. and but eventually i fell in love with flash because it was like this first app where you could like design and code. yeah, 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 vibe coding, it's starting 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 vibe coding brings a lot of that initial fun we used to have beginning 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? speaker 1 [00:28:30-00:28:58]: So, yeah, 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 gonna be the best app in the world and they're gonna ship it like necessarily and it's gonna be secure and everything. But like they can build things and like that wasn't necessarily possible before. So yeah. speaker 2 [00:28:58-00:29:12]: 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 are you building this company with ai? You know, like ai agents or like, which part, which parts are humans touching, which parts is ai to do it? speaker 1 [00:29:13-00:29:15]: Like, how are we building the company or. speaker 2 [00:29:15-00:29:18]: or like the sorry, the product, the product? Yeah. speaker 1 [00:29:18-00:29:47]: i would say like honestly like a lot of lot of the ideas. I mean, like I have like long history, long history of like 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. speaker 2 [00:29:47-00:30:00]: Okay,okay,awesome dude,what's next man? You're gonna... you're gonna... may... may... maybe Adobe will try to acquire you. You better be careful. Yeah,well. speaker 1 [00:30:01-00:30:21]: honestly,like there's so much unexplored now. 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. speaker 2 [00:30:22-00:30:22]: Yeah. speaker 1 [00:30:22-00:30:31]: 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. speaker 2 [00:30:31-00:30:45]: It shows you actually that like craft and care still matter. Because like I think I would not be as blown away if those cursors were not on the screen and there wasn't, there wasn't like an Asian chat right below. So yeah, actually still matters. speaker 1 [00:30:45-00:30:52]: Yeah, it's really funny because like imagine that the agents just wrote that json and it would have to like reopen the file. speaker 2 [00:30:52-00:30:54]: Like that was terrible. speaker 1 [00:30:54-00:31:19]: and 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, you know? So i just hope that like more and more people in the world are gonna start thinking. In a different in in this way about like LLMs that we can really give them face now, this face is this little cursor, but it's like so much more we can do. speaker 2 [00:31:19-00:31:23]: Yeah, how do you make it transparent what they're doing and also give them some personality like that? That means a huge difference. speaker 1 [00:31:23-00:31:28]: Yeah, totally like so many people like like I said, like so many people ask me like can I rename these agents? speaker 2 [00:31:29-00:31:34]: Yeah, rename them, give them like little personalities, like you know, have a Peter PM agent that just ruins the design. speaker 1 [00:31:34-00:31:38]: Yeah, or they can like fly to each other, like you know, do high fives and whatever. speaker 2 [00:31:38-00:31:40]: Yeah, they can, they can come. speaker 1 [00:31:40-00:31:46]: Yeah, yeah, they can like fly from like specific place. I mean, there is like so much stuff, so yeah. speaker 2 [00:31:46-00:31:57]: 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. Yeah, keep going man, you have something very special here. speaker 1 [00:31:57-00:32:00]: Yeah, I really appreciate it. It was great chatting. Thank you so much. speaker 2 [00:32:00-00:32:01]: Yeah, thanks so much. speaker 1 [00:32:01-00:32:34]: Yeah, and by the way, like 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. speaker 2 [00:32:34-00:32:42]: Yeah, you better get your servers ready, man, because this is going to take off. So yeah, get ready. Yeah, all right, thanks. Cheers.
核心概览
这期访谈围绕 Pencil 的一次实时演示展开。Pencil CEO Tom 向 Peter Yang 展示了:用户给出一句设计需求后,6 个 AI 智能体(agent)可以在同一块画布上并行设计应用界面,并通过可见光标把原本隐藏的生成过程变成可观察、可理解的操作过程。Tom 将 Pencil 明确定位为编码前的“可视化规划模式”:先在画布上探索方向、比较方案、沉淀设计,再决定是否把它转换成代码。
Pencil 的关键不只是“生成 UI”,而是围绕 .pen 文件建立了一层中间表示:它本质上是一个基于 JSON 的、面向智能体读写的设计格式,既能在独立应用中编辑,也能在 Cursor、VS Code、Windsurf 等编辑器里以可视化方式打开,还能与 Claude Code、Codex 以及用户自带的 agent / CLI 工具配合工作。基于这层格式,Pencil 将视觉探索、设计系统、Git 中的版本协作、以及多平台代码生成串了起来。
访谈中还明确了它当前的边界:多人实时协作尚未上线;代码改动不会自动实时回写到设计文件,需要再让大模型去同步设计;普通人虽已更容易做出应用,但生成结果未必直接达到生产级、未必足够安全。
详细摘要
1. Pencil 的产品形态:独立应用 + 编辑器插件 + 可接入现有 agent 工作流
Tom 一开始先交代了 Pencil 的基本形态。它不是只存在于某一个编辑器里的小插件,而是同时具备几层产品形态:
- 有独立应用,可运行在 Windows、Linux、Mac;
- 也有编辑器插件,可用于 VS Code、Cursor、Windsurf 等基于 VS Code 的环境;
- 能与现有的 agent 编码工具配合,包括 Claude Code、Codex;
- 也支持用户“自带 agent”,接入自己常用的 CLI 工作流,Tom 提到有人甚至拿它去配合 OpenCode 以及各种他此前都没听过的 CLI 工具使用。
这个定位非常重要:Pencil 不是想取代现有编码工具,而是成为这些工具前后的视觉中间层。用户可以把它当作设计工具单独使用,也可以把它嵌入已经熟悉的开发环境中,把“设计—代码”的切换尽量压缩到同一个工作流里。
2. 实时演示:6 个 AI 智能体共同设计一个旅行应用
Peter 请 Tom 现场演示 Pencil,需求是做一个移动端旅行应用,方向大致包括:
- 记录旅行足迹;
- 带一点预订相关能力;
- 使用漂亮的城市图片;
- 视觉风格参考大洋洲城市。
Tom 随后开启了 Pencil 的群体协作模式(swarm)。他说明,既可以只让一个智能体完成设计,也可以同时启用多个智能体并行工作。这次演示里,他选择了 6 个智能体,并采用了一个直观的拆分方式:
- 总共设计 3 个页面;
- 每个页面由 2 个智能体协作处理。
系统随后会自动完成几件事:
- 分析用户请求;
- 生成待办清单;
- 自动挑选合适的风格指南;
- 把任务分发给多个子智能体;
- 让这些智能体彼此沟通并开始在画布上设计。
Tom 还提到,图像部分并不是固定绑定某一个模型。Pencil 可以接入多种图像生成器,团队会持续替换成当前效果更好的方案。这也说明它的架构本身是开放式的,而不是被某一个图像模型锁死。
3. 这套并行方式的关键:不是“多开几个 agent”,而是同类能力并行拆分
访谈里一个很关键的技术点是,Tom 明确区分了两种“并行”:
一种是很多平台现在常见的做法:给不同智能体分配不同角色,例如一个写代码、一个测、一个查文档、一个做别的任务。
而 Pencil 更强调另一种方式:让同类能力的智能体围绕同一个设计任务做非冲突拆分。
Tom 的意思是,Pencil 追求的不是简单“多开几个窗口”,而是让多个具备相似设计能力的智能体,在同一画布任务里各自处理不同区域或不同部分,既避免互相冲突,又保持模型能力本身不被削弱,同时把速度提上来。
这也解释了为什么 Pencil 特别强调画布、任务拆分和可视化过程:
它要解决的不只是“让多个 agent 同时跑”,而是“让并行工作对人来说可见、可理解,而且确实是在一个统一设计任务里协同推进”。
4. 为什么可见光标会让体验发生质变
演示过程中,Peter 最震撼的不是“AI 在生成界面”这件事本身,而是多个光标同时出现在画布上、各自移动。他反复强调,正是这些光标,让整个过程第一次显得像“真的有人在这里工作”。
Tom 解释说,最初加入光标的动机其实非常务实:
因为系统内部已经有并行机制了,但他自己调试时也看不清“到底是谁在改哪里”,于是先加了光标来帮助排查问题。结果一做出来,他发现这个细节的作用远超调试本身。
它带来的变化有几层:
- 可观察性:用户能直接看到哪个智能体正在处理哪个区域;
- 可理解性:并行工作不再是黑箱,用户能大致跟上系统在做什么;
- 存在感:AI 不再只是后台“吐结果”,而像是在眼前操作画布;
- 信任感:即使底层本质上仍然是在写
.penJSON,视觉层把这个过程翻译成了人可理解的动作。
Peter 的评价也很直接:如果没有这些光标,他不会同样震撼。
换句话说,这不是一个无关紧要的 UI 小细节,而是把 AI 从“后台执行器”变成“前台协作者”的关键界面设计。
5. Pencil 的核心定位:编码前的可视化规划模式
Tom 对 Pencil 的定位说得很明确:
它是编码前的“可视化规划模式(plan mode)”。
他认为,很多人现在拿到一个想法后,会很快冲进 Claude Code、Cursor 这类工具里直接开始生成代码,但当时他们往往还不知道:
- 这个东西是不是真的值得做;
- 它长什么样才合理;
- 哪种方向更好;
- 有没有另一套方案更适合。
Pencil 解决的是前面这一步:
先在画布里把想法做出来,快速看见它,分叉出多个版本,比较不同方向,等确定“这就是我要的东西”之后,再去要求 agent 把它变成代码。
Peter 也补充了一点很贴近真实设计流程的观察:真正的设计师不会只做一个版本,而是会先发散探索很多可能,再收敛到一个更优解。Tom 对此非常认同,并指出不少 AI 编码平台的问题在于工作流太线性:
- 做一个版本;
- 改一点;
- 再做下一个;
- 很难并排看很多方案。
而设计本身天然就是探索式的。Tom 提到,设计文件往往本来就很“乱”,因为设计师会不停复制、对比、偏移、尝试,这恰恰是思考发生的地方。Pencil 想保留的,就是这种探索先行、收敛随后的过程。
6. .pen 文件为什么是产品中枢:一种为智能体设计的中间格式
Tom 反复强调,Pencil 的关键不只是画布,也不只是代码生成,而是中间这层 .pen 文件。
它的几个核心特征是:
- 本质上是 JSON;
- 描述的是完整设计,而不是某一种具体平台代码;
- 从一开始就是按“智能体可读、可写”来设计的;
- 可以作为设计源文件进入 Git;
- 能被不同工具读取、转换、生成不同目标代码。
Tom 解释,之所以不直接把设计生成成 HTML/CSS,是因为这不符合实际场景。一个设计最后可能要变成:
- iOS 的 Swift;
- Android 的 Kotlin;
- React Native;
- Web 的 React / Next.js。
既然最终平台可能不同,那么前面这层设计文件就应该是平台无关的描述。.pen 正是承担这个角色。
Tom 还用了一个形象的比喻:如果 PDF 是在今天这个 AI 智能体时代被重新发明出来的,一种更适合被 agent 处理的设计文件,大概就会长得像 .pen 这样。
围绕 .pen,Pencil 也已经形成了初步生态:
- 官方公开了格式文档;
- 外部开发者已经开始写转换插件;
- Tom 提到已经看到了把
.pen转到 Figma 以及其他格式的插件。
因此,.pen 不是单纯的内部存储格式,而是 Pencil 想建立的工作流中枢:画布上的设计、组件系统、Git 中的协作、代码生成,都是围绕它展开。
7. 在 Cursor 里直接打开设计文件:把设计工具嵌进代码环境
接下来,Tom 演示了 Pencil 与 Cursor 的结合方式。
他在 Cursor 中打开一个 .pen 文件后,这个文件不会只以纯文本 JSON 的方式出现,而是会直接进入 Pencil 提供的可视化编辑器。Peter 当场就抓住了这个点,因为这意味着:
- 设计文件并没有脱离开发环境;
- “看设计”和“写代码”不再是两个完全分离的地方;
- 开发者可以直接在自己熟悉的 IDE 里进行视觉编辑。
Tom 也提到,这其实是 Pencil 最早的起点之一:先在 Cursor 里做出了自定义编辑器,之后才逐渐扩展成独立应用和更完整的产品。
实际使用方式也不复杂:
- 到扩展商店安装 Pencil;
- 打开
.pen文件; - 文件就会在编辑器里以视觉方式呈现出来。
这里能看到 Pencil 很鲜明的路线:
不是把设计师拉进代码编辑器,而是把设计能力嵌进开发者已经常驻的工作环境。
8. 从设计到代码:同一个文件既能视觉编辑,也能驱动代码生成
在 Cursor 演示里,Tom 展示了一个非常完整的流程。
首先,他用 Cursor 里的 agent 对已有的 .pen 设计做快速修改,例如把选中的页面改成浅色模式。随后,他又切换模型,要求系统把某个画框直接生成代码,并指定:
- 目标技术栈是 React + Tailwind + Next.js;
- 跑在浏览器指定端口。
系统随后会读取 .pen 文件中的结构、样式、组件描述,分析后生成前端代码,并直接把页面跑起来。Tom 展示出来的结果,就是从一个咖啡店首页设计,直接生成了可运行的网站。
这里有两个重要信息:
-
不同模型可以混用
在 Cursor 这样的环境里,用户可以根据任务性质切换模型:快的模型做局部调整,强的模型做代码生成。 -
.pen是源头文件
设计改动优先发生在.pen这一层,然后再由它驱动代码生成。
Peter 随后问了一个很关键的问题:
如果用户直接改代码,这个变化会不会自动同步回 .pen?
Tom 的回答很明确:目前不会实时双向同步。
如果代码变了,需要再让 LLM 根据代码调整设计文件。也就是说,当前更准确的理解是:
.pen是设计真源;- 代码可以由它生成;
- 但代码侧的修改不会自动无缝回流到设计侧。
9. 变量、组件库与提示节点:把团队规则放进设计文件里
除了单次生成,Tom 还展示了 Pencil 用来维持一致性的几类机制:
变量系统
可以定义类似 CSS 变量的内容,在整个文档中复用。
这意味着颜色、间距、主题等规则,不是散落在每个元素上,而是能形成一致的设计约束。
组件库与设计系统
Tom 展示了一批现成组件,包括较复杂的表格类组件,还提到它们支持不同模式与色调切换。
这让 Pencil 不只是“自由生成”,而是能在已有设计系统框架内工作。
提示节点(prompt nodes)
这是访谈里一个很有意思的能力。Tom 说它们像是贴在画布里的便签,可以把常用 prompt 预先存进文档。这样做有几个用途:
- 给同事准备标准化的生成指令;
- 让 PM、设计师等不同角色基于同一套规则工作;
- 让 agent 在读取组件和约束之后,再去生成符合团队规范的页面。
演示中,Tom 点击运行后,智能体会先读取需要使用的组件,再把这些组件组合到画布中。
这表明 Pencil 想做的不只是“AI 随机出图”,而是在团队规则与设计系统约束下的可控生成。
10. 工作流上的关键差异:人在画布里始终可以接管和继续编辑
Tom 认为,Pencil 与很多“聊天式生成界面”的最大差别之一,是人在 AI 工作时仍然可以直接操作画布。
他的意思是,很多常见的 AI 应用构建工具有这样的问题:
- 你下一个 prompt;
- 系统开始生成;
- 你得等它结束;
- 如果只想改一行字、挪一个按钮,也得再回到对话框里重新说。
这会不断打断思路。
而在 Pencil 里,用户可以:
- 自己先画出一个方向;
- 让智能体继续补完;
- 在智能体还在工作时直接上手改页面;
- 一边看结果,一边继续调。
Tom 认为,这种“画布工作流”最大的价值,是保持创作流不断掉。
它不是让人完全退出操作,而是让人和智能体在同一个可视空间里接力。
他也提到,这其实正是产品最初的灵感来源:
与其花大量精力用语言解释按钮的 padding、颜色、层级和风格,不如直接画出来,让 agent 去理解和完成。因为很多时候,人并不是一开始就知道自己要什么,而是先看到,再调整,最后才确认。
11. 用户群体比预期更广:设计师、工程师、PM、营销、企业团队都在用
Peter 问到 Pencil 的用户主要是谁,Tom 说,实际情况比他原先想的更广。
他观察到,传统岗位边界正在变得模糊:
- 设计师在向设计工程方向靠近;
- 工程师开始承担更多项目完整性工作;
- PM 也因为这些工具而更有创造力;
- 甚至不少原本不写代码的人,也开始借助这些工具搭建自己的东西。
Tom 提到一个很具体的例子:
他的一个做营销的朋友,使用 Pencil 配合 Claude Code 桌面版,重做了:
- 网站;
- 营销素材;
- 广告;
- PDF;
- 销售使用的技术说明材料。
这让 Tom 意识到,Pencil 并不只服务某一个职业,而更像是一块AI 设计画布。不同角色都可以把它纳入自己的工作流,只是各自接法不同。
企业侧也已有比较明确的使用方式:
把公司的设计系统转换成 .pen 格式,纳入 Git,把它作为团队的统一源文件,再围绕它生成界面和代码。
12. 当前的协作方式:以 Git 为主,多人实时协作尚未上线
Peter 追问,Pencil 是否已经支持像在线设计工具那样的多人实时协作。
Tom 的回答非常明确:还没有。
也就是说,当前不能把 Pencil 理解成已经具备 Figma 式的多人同屏编辑能力。
现阶段更现实的协作方式是:
- 把
.pen文件放进 Git; - 团队成员围绕它做版本管理;
- 设计通过
.pen与组件系统沉淀下来; - 开发者再在此基础上接手实现。
Tom 还提到,从不少设计师的反馈看,这种方式也很适合做交接:
设计文件不再只是静态稿,而是可被智能体读取和生成代码的中间层。
13. 产品起源与增长:从“为什么不能直接画出来”开始
Tom 回顾了 Pencil 的起源。
项目开始于去年年初。当时他自己也在使用 Cursor、Claude Code 这类工具做其他项目,过程中越来越强烈地感受到:
单靠聊天去描述 UI 太费力了。
他不断需要向 agent 解释:
- 页面应该长什么样;
- 按钮的风格是什么;
- 颜色和层级怎么处理;
- 交互应该是什么感觉。
于是他产生了一个很直接的念头:
既然设计本来就是视觉性的,为什么不能直接画出来?
他去 VS Code 市场里找类似工具,没找到满意的,于是自己快速做了一个原型。这个原型发布后,在 LinkedIn 和 X 上累计拿到了大约 100 万次观看,让他意识到这个问题并不是个人痛点,而是很多人都碰到的共性需求。
随后团队进入了 a16z Speedrun。
Tom 还提到:
- 产品完整 GA 大约是 8 周前;
- 现在已经有 10 万用户。
这些数字说明,Pencil 并不是只有演示效果吸引人,而是已经在较早期就获得了明确的市场反馈。
14. Tom 的背景如何塑造了 Pencil 的方向
Tom 的个人经历和 Pencil 的路线高度一致。
他此前做过的视频会议产品 Around 在疫情期间很受欢迎,后来被 Miro 收购;更早以前,他还做过 3D Avatar 方向的创业项目;再往前,他在 Adobe 工作了大约十年,也长期接触设计工具相关工作。
他还提到自己的成长背景:父母开设计公司,所以他从小就在设计师的环境里长大,很早就开始接触 Photoshop、CorelDRAW、Illustrator、InDesign 等工具。
后来他从传统平面设计逐步转向网页与交互,并特别提到自己对 Flash 的认同。原因是,在他看来,Flash 是少数真正让设计和编码在同一个地方发生的工具之一。此后很多年,这种体验并没有被很好继承下来。现在,随着 AI 智能体能力变强,这种“设计与编码重新合流”的机会又回来了。
不过 Tom 也保持了边界感。他明确说,虽然现在普通人几乎也能做出一个移动应用了,但这并不意味着:
- 它一定是最好的应用;
- 一定能直接上线;
- 一定具备足够安全性。
也就是说,“能做出来”与“达到生产级”仍然是两回事。
15. 关于未来:让 AI 更透明、更有人格,但目前更多仍是探索方向
访谈最后一段更接近开放讨论。Tom 说,swarm 功能上线后,他感觉新的产品空间突然被打开了。对他来说,真正让人兴奋的,不只是“多个智能体并行工作”,而是:
- 如何把它们做得更透明;
- 如何让用户更清楚每个智能体在干什么;
- 如何赋予这些智能体更多“在场感”。
在这个话题上,Tom 和 Peter 聊到了一些未来可能性,包括:
- 给智能体自定义命名;
- 为不同智能体加入更鲜明的个性;
- 甚至让它们“说话”;
- 做出更拟人化的表现,例如彼此互动、击掌之类的动画。
其中,智能体重命名是 Tom 明确说正在考虑推进的功能;其余更多是访谈中的设想与讨论,而不是已经确定的正式路线图。
Tom 最后也邀请用户去 pencil.dev 下载产品、加入 Discord 社区反馈问题和想法。社区里已经有大量用户在分享设计、交流需求和报告 bug。
16. 插播内容
访谈中有一段赞助插播,Peter 介绍了 Linear 与 Cursor、Codex 等 agent 编码工具的集成能力,强调其价值在于让团队看见某个 agent 正在处理什么任务、由谁分配。
这段内容属于广告,与 Pencil 的具体功能无直接关系,但它与本期主题在“AI 工作过程的可见性”上形成了呼应。
关键信息汇总
- Pencil 的定位:编码前的可视化规划模式,先探索视觉方案,再决定是否进入代码实现。
- 核心演示:6 个 AI 智能体在同一画布上并行设计 3 个页面,每个页面由 2 个智能体协作。
- 并行方式的特点:不是简单多开 agent,而是让同类能力的智能体做非冲突拆分,提升速度和可观察性。
- 最强辨识度体验:多个光标实时出现在画布上,让智能体工作过程变得可见,也显著增强了“在场感”。
- 核心技术中枢:
.pen是基于 JSON、面向智能体读写的设计格式,承担设计、组件、Git 协作和代码生成之间的中间层作用。 - 生态位置:Pencil 同时支持 Windows / Linux / Mac,并可在 VS Code、Cursor、Windsurf 等环境中使用,也能与 Claude Code、Codex 及用户自带 agent / CLI 配合。
- 代码生成能力:可从
.pen生成 React、Next.js、Swift、Kotlin、React Native 等目标形式。 - 开放架构:图像生成可接入多种模型;
.pen也已出现外部转换插件。 - 当前增长:原型传播量约 100 万次观看;完整 GA 约 8 周;用户规模约 10 万。
当前限制
- 多人实时协作尚未上线,当前团队协作主要依赖 Git 与文件交接。
- 代码改动不会自动实时回写到
.pen,需要再通过大模型去同步设计。 - 虽然现在更多非技术用户也能做出应用,但生成结果未必达到生产级,也未必天然安全。
- 转录中部分插件或项目名存在机器识别误差,个别细节名称无法完全确认,但不影响整体逻辑。
讨论中的未来可能性
- 给不同智能体自定义命名;
- 提升智能体行为的可见性和人格化表达;
- 增加语音、互动或更强的“协作感”表现;
- 继续把 AI 从后台黑箱执行器,变成前台可观察的工作伙伴。
总结
这期内容最重要的结论,不是“AI 又能自动做一个 App 了”,而是 Pencil 展示了另一种更完整的路径:
先把想法放到可视画布上,用多个智能体并行探索;再用 .pen 这样的中间格式把设计沉淀下来;最后根据目标平台生成代码。
相比把一切都塞进聊天框,Pencil 强调的是:
- 过程可见
- 设计先行
- 中间层明确
- 与现有开发环境和 agent 工作流兼容
在当前阶段,更准确的理解是:Pencil 已经把“视觉探索 + 智能体并行 + 代码生成”连成了一条链,但实时多人协作与设计/代码双向自动同步仍未完成。