The End of the Designer–Engineer Divide

0:00My personal KPI at Cursor this year is to turn all the designers into coders. The roles will start blurring, the designers will start coding, the engineers will start designing, and then our shared language is code. You start not by getting everything perfect, you actually start by building. If you get something bad or like ugly, it's actually your job to make it pretty the way you want it. And that's the part that the AIs can't really do right now. As we break the boundaries between these tools, as everyone can start talking with the code, magical things can happen.

0:40Today, I am excited to welcome Rio Lu. He's the head of design at Cursor, the leading AI coding tool used by more than a million people worldwide. Before that, he was a founding designer at Notion and a product designer at Stripe and Asana. Today, we'll talk about his background and design process, and then we'll hear his thoughts on the future of design in a world of AI. Rio, welcome to Design Review. Thank you. Maybe to start off, why don't you tell us a little bit about your background and how you got into design in the first place? I was just like making websites since I was 11. I just kept making bigger websites.

1:15The first one was for this anime that I really liked. I just made it for myself. And then I started making like community websites, like little forums. And then I made one when I was 17 for like Apple fanboys in China. that got like kind of popular and I just kept doing it. When I started I did not know like what's the difference between like design or engineering or product it was just the whole thing. Then I became more like a professional designer. I made a couple startups myself and then I got an offer from Asana so I came and I became a designer. Were you technical all those years like when you first started to design?

2:04I would say I kind of self-taught most of my software design building parts so I studied CS and bio in college but most of the CS courses were like so ancient they did tell me like more systematically how to program but they weren't that helpful like how I learned is really by just making stuff building things without knowing what what the fuck i'm doing like i did not know the concept the words i just i want to do this i'll just figure out how to do it use whatever tool that's there and then you learn by doing that yeah but now it's like with the agent with cursor you make this process so quick like instead of you felt uh like coding is a little scary it wasn't like you know it's not something that we as designers is supposed to do or like you just feel like in order for me to start something new or like a prototype i need to learn all of these like low-level concepts that are kind of dependencies it's kind of scary and that'll take forever it will take like the fear it will take like month almost like you need to like really focus on this and then go to a book camp and whatever versus now you just ask the agent and then if you don't know like exactly what you're doing agent's able to like fill you with the gaps it can do research for you it can search the web on what is the best way to do xyz and it will help you do that and then you learn and you learn by doing and you get the result really quickly and you can iterate really quickly.

3:42So that's the difference. It sounds like you went through this journey of being frustrated that you were kind of put in the design box of like, this is the little piece that you should focus on. And now you have all these tools and you're able to actually build the thing that you envision, that you've designed. You can make it come to life and be real. And I know you kind of have a personal mission this year. Tell us more about that. Yeah, so my personal KPI at Cursor this year is to turn all the designers into coders. And then I don't want them to be, say, we're forcing you to start learning how to code, or like, how does the code editor work?

4:19How does Git work? All these little details. But rather, now it's time to just start building. Like, you actually don't have to care about all the details anymore. Just let the agents fill the gap for you. but now you can actually start coding without knowing how to code but you know like as designers as people who worked on software so long we all have intuition of how things should work like we all know these things like I don't know say like version control for good files and folders all these things we know them we just maybe don't know exactly like what is the right way to do it at this time or all the little details but now it's like you don't have to think about it anymore so for anybody watching maybe they're a designer they feel stuck in that box they haven't been able to build the thing yeah break out what's like the first step like what are the things that they should do yeah to put them on that path to your kpis yeah of turning them into i think developers too it's actually fine or it's good to play with the more like vibe coding tools so like figma make or v0, like those kind of help you get started in a more constrained fashion and they kind of work with your existing workflows better.

5:35But you will run into a point where like those more constrained version of coding doesn't let you do everything. And then that's when you go to cursor. And then you realize that, oh, the stuff I do in cursor and the stuff I do in figment make or v0 are actually the same or like they feel very similar it's very simple but then in cursor you can actually do everything like everything anything because it's just like we're kind of unopinionated it is just like a suite of tools and agent with an editor that can write any code anything ios web you can even write a novel like a book with it how long have you been at cursor and And tell us more about your role and what you do in the day-to-day there.

6:24I've been at Cursor for almost 10 months, but it feels like five years, like in AI time. So I'm the head of design. I was like the first product slash design person at Cursor. When I joined, we had like 20 people. Now we have 250 people. Our team is still really small. We have like four people, including myself. Three of us work primarily on the product. And then we have Justin who works on the brand. We're trying to expand the team a little bit. Everyone on the team codes. And I think how design works at Cursor, the difference is that, one, a lot of our engineers, they also kind of design Cursor.

7:06Because Cursor primarily, like at its core, it is still like a tool designed for professional developers to do stuff with AI and kind of augment themselves. You have a lot of your own users at the company. Yeah, yeah, yeah. Like every single person at the company is a user. And then every single person has cool ideas. And as you know, like engineers, they also are very different. Each of them, some of them prefer like doing everything in the keyboard. Some of them are also like, you know, button clickers. People have different preferences of the suite of tools they need. They might want different buttons to appear.

7:42The core of the system needs to be really simple, but it kind of adapts to different needs and different people's preferences. Figure out, like say, I wake up today and then boom, there's like three new buttons. Why do we need them to be there? What are the things that we can unify and clean up so that things feel simple, but then you can still do all these things? How do different projects and ideas fit together? How do we decompose them and then merge them back? how do we keep the thing simple but still like you start simple but you can gradually get to a pretty sophisticated place you don't lose functionality but things get more organized yeah it's like layers of an onion you want it to seem simple at first glance but if you want power tools you're able to uncover those exactly talk about um you've been there 10 months now you've shipped a lot of really major things and worked on and designed a lot of really important changes.

8:38Can you talk about some of those? Yeah, two biggest things that I've done. One is the first day I joined. The problem was Cursor, maybe earlier this year, it was more like a couple of features slapped on top of VS Code. There is the tab, which is the inline completion thing, still like the world's best, the most magical tab experience. We had the chat which was you're just talking to the model with maybe some code based information maybe not and then it's just gives you like a textual output it doesn't do anything that was like the primary interface of cursor and it's it was like a little sidebar on the side that you have to toggle it open yourself and then there's the composer which is like the chat but it can and offer to edit some files.

9:31And that's the only thing it did. It's like, if the chat outputs some code, you can apply the code changes. To me, that and the chat is basically the same thing. And then, like November last year, Cursor added the agent. That was actually what hooked me to Cursor. Like, I tried Cursor three times before. I churned every time. I had to search on the web how to turn on the agent. I couldn't find it myself. It was like a little checkbox in the composer tab that says normal. It's like normal versus agent. Nobody knows what normal means. And there was like other things like there was a bug finder, there was some random crap around.

10:15And then the first thing I did was let's just unify everything. The things that should be similar were like gobbled together actually you know one thing so we merged a chat the composer the agent into one thing and then it's just agents and then agents can have different modes or like how I think about it is they're all agents same agent but with different settings applied to them say like ask mode is just the agents without editing capabilities or maybe like you know we're adding a thing called plan mode that is just the agent before it wants to you know run the plan build the stuff you have to hit a button we just block you from doing that but they're all talking to the same thing and to the user we just flip the default so you always get the agent when you open up cursor that's the only thing i did and then the agent took off like that like we kind of see the data from like primarily tab users, primarily agent users.

11:21And then the second thing I did, which is pretty recent, is after we flipped the default to agents, we just noticed the world kind of changed. And also there were newer agent tools that are almost pure agents. And everyone kind of moved from, even earlier this year, primarily still writing code, but then it's kind of assisting you to now the agent writes most code. And then you're mostly interacting with the agent. So with Cursor 2.0, all I did was Cursor used to show the default UI hierarchy from like a file-centric view. So you have a list of files. You have the editors that show the file themselves.

12:10And then the agent is kind of like on the side. All I did was I flipped the order. And then in this new agent layout, when you start, it's just one agent. When it's empty, it's just a prompt box. You can do whatever. As you do more, maybe you run multiple agents. You can see multiple agents, their states. You can swap between them. You can see, ah, this one needs my review. This one's blocked. This one's still ongoing. Maybe you can run for a long time. And then as you're doing that, you actually don't have to look at the code if you don't want to. but if you do you hit this review button and then we list out like every single change you can just scroll through and then review really easily versus say before everything's like in this really file-centric view when you open up cursor when you have nothing you still have like a blank editor a blank file tree it's really hard for like a person who isn't used to coding to do anything in that state versus now we flipped it when you start on cursor in this new world you can just type in your prompt boom see what happens you've talked a lot about you know simplifying ui simplifying interactions is there a lesson in there for uh design founders as they're building their yeah i think of like design you can do it in two ways one way is more like like i'll call it the traditional human-centered design way, meaning like you start from a set of users, their problems, you come up with like really specific solutions for their problems, and then you can design like a low world for them that way.

13:49The problem with that is like as you start working on more problems and then as you make more of these specific features, it's really hard to kind of put them back together and then what you ended up usually is more buttons, button, button, button, concept, concept, concept, more levels of nav and hierarchy then a thing that you were designing for this small group of people that solved their problem becomes something really massive that's hard to understand that doesn't really work that doesn't conceptualize as well versus you design in a more like systems first way, meaning you kind of decompose the problems into what are the parts, the primitives, the low-level concepts.

14:37When they work together, they solve the problems. And you try to keep that core concepts, the core set of concepts and primitives as simple as possible, but they all are somewhat flexible. Say for example, when we were working on Notion, like the core concepts are just blocks, pages, databases, and the people, the teams. And then Notion is just like different configurations of these things. And then when they get put together, they do amazing things. They kind of emerge complexity. So it's all about figuring out for the world you're building, what are the core elements that actually like they will always stay they won't really change but they will evolve they will you know make new connections each of them will get better and then how do you map your you know user problems the things you want to do your roadmap your ideas to this thing under and then ideally you don't add things all the time you're actually like decomposing things merging them back figuring out what is the better configuration of the stuff that you have now, if you tweak that a little bit, boom, you solve the problem.

15:53Yeah. I think one of my takeaways is as products scale, and certainly, you know, you probably cursor is one of the fastest growing products ever in history. Yeah. The tendency is to keep adding more features and the product expands in complexity as the user base scales and, you know, all the use cases expand. And if you're not intentional about going back through and rethinking things and pairing it back down to the simpler state, it's very easy for these products to get out of control. And then it becomes something that is for nobody because it doesn't have an opinion and it's impossible to work with these primitives like you described.

16:29And it sounds like that is an exercise that you are regularly going through. Oh yeah. Maybe like on paper or like to the users, like the concepts don't really change, but underneath it's like getting rebuilt every couple of months. And then things that were maybe like disjointed, they get unified as we go. There's like a healthy tension. It's like people want to add things, people want to experiment. You let them do, you let them be, they built some stuff. Maybe they actually just slap a button here. But then like as designers we can help people like rethink how to fit things better. Like what are the common parts that are shared that can, you know, if you fix this common part and not only makes this feature better, but makes everything better.

17:17Awesome. I would love for you to walk us through your design process at Cursor and how you've built some of these things. So one thing I would love to see here is if you can time travel us back to Cursor, maybe before you joined or around the time that you joined, talk about your feedback, looking at the site, especially now, and then pull up the most recent one and talk about some of the changes yeah along the way let's go so i just put up cursor when it started in 2023 wow what is this what does it do it's very dark also yeah very dark very like i'm not sure what these gradients are yeah not sure what this is either it's like yeah i see some blurry code very very not sure a text box looks like the fonts are not loaded but it might be something not that great.

18:08Chat with your project. Ask about code base. All right, now we're getting into a little bit more specific. This thing is kind of crazy. The line follows you. Yeah, yeah, yeah. So extra. Like, what are you trying to do? Like, you want people to focus on this line? Right. Like, what the hell? Yeah, it's distracting, huh? Yeah. Or it makes you think you're living in the future right now. It's like Tron or something. But if you look at all these UI, like, I just don't know what I'm looking for. Yeah, that's always the problem with showing specific screenshots, especially of code, is it's impossible for somebody to get the context of it.

18:41And a lot of the code examples and stuff is so foreign. As a reader, say, maybe I'm doing a B2B SaaS app or I'm doing healthcare, and then I see some random agent interface service code. It doesn't talk to me. Right. It's not your code. Sure, sure, sure. Sorry, we got a bunch of social proof here. Okay. back in the day's cursor what it's really good at is the tab but there's no tab yeah what the hell yeah what's the biggest thing like you're going to make a change on this what's like the number one thing that you want to change and and get right on the next version kill all the gradients why just very distracting you're like trying to create a scene a world for people to come in and then when they come in, you're really disoriented.

19:29Like you don't know what is this. That second section is the thing that I would most change. This one? Yeah. It doesn't show you anything. Yeah, I can't figure out what it's trying to convince me of and it's prime real estate. Zero information about what cursor can do. Add the chat tab, the composer. When you toggle these things on, it actually defaults you to the chat tab. You have to click composer. you have to find this normal slash agent toggle right you hit on agent then you can do something right versus this right you can just do something yep and it defaults to the agent you don't have to go through and click all the things yeah yeah yeah yep that's it okay let's take a look at um the latest version yes we kind of clean up all the it's like the foundation of the brand like fine-tuned every single detail from the logo the typeface we have like a custom typeface called kyrthagothic um i noticed it's not dark mode also aha but it's like the idea is it should follow your your system ah so that's the default yeah but if you're dark it's still dark yeah but i don't want to kind of you know give people brightness in the day if they want right yeah make cursor feel a little less alienating one of the ideas of like say behind these what we call like wallpapers is that they're they're now like just great art created by humans um like a lot of these pictures the human connection right yeah like they're not ai generated they're actually like from past artworks in the 80s in the 1800s and stuff one thing that's cool with like our new side is that like all of these are interactive oh that's cool they are real i thought it was a screenshot they're actually real code uh-huh i made a lot of these it's like you can actually just try it out live yeah yeah and then like a lot of these things actually work so you can swap between different examples so maybe like this is more for like ml training yeah this sounds like you're you're learning how cursor works yeah there's like a rule that's being edited yeah We show a bunch of different industries.

21:45That's so important because you want to get people to the aha moment of using the product. And the best way to do that is not download it and install it and then set it up and figure out what project you're going to work on. It's just like, here it is right here in the browser. You can start using it immediately. Yeah. And then you can actually type in it and then boom, you can download. Each of the pages are also really simple. It's just like boom, boom, boom. And then you can dive into them if you want. And it seems like you have one key point for each one that you're trying to make. It's something that you are showing with a screenshot visually to illustrate as well.

22:18Yes. It's like kind of calling back to like the core concepts that I just talked about. It's like the slides should also just show those. Yeah. Yeah. So go back to the homepage for a sec. Yes. Let's look at all of those. And I'm curious which you picked and why. Yeah. Okay. Agents. Yep. The tab. Yep. Tab autocomplete. And this is like the ecosystem slash Cursor is everywhere. Right. It's connected with all the other tools that you use. Yep. Some testimonials. These are more like ways for you to kind of go into different spots. There's one for enterprise, one for learning models. I would love for you to walk us through your design process at Cursor and how you've built some of these things.

23:04I'll first show you like something I do for work and then I'll show you something for fun. The first thing I showed is baby cursor. And the idea is a lot of times for designers, when we explore ideas, we actually don't really care about the technical implementation details of how things work. So if you want to do your prototype in a production-level code base that's really massive and complex, it actually takes more time than, say, you just built a little environment for you to play with your ideas. you can kind of reconstruct parts of the UI and their interactions. It doesn't have to have all the details, but once you put them together, you can actually feel like you can feel it almost like alive.

23:52So Baby Cursor is like a scaled down, simplified version of Cursor that is like it in many ways, and it becomes your own personal playground for you to just add new features and explore different ways of doing things to try to get it right before you eventually wrap it back into grown-up cursor. So I built this in, I think, an afternoon, maybe a couple hours. It has all the hotkeys, the primary interactions that we have here. There is actually an integration with AI models. So I can ask, what is this? And then you can see the live output. A lot of the stuff here, they feel like the real cursor, but it has like say little details that I want that is not even in the product.

24:40Like I want to make the keyboard navigation really well. Like you can actually select all the parts of the chat. There's like a little preview here where you can see live output of the code. We added the internal browser so maybe that's like how this thing ended up. And that started in baby cursor. And one example that's kind of cool is I was trying to explore some ideas of how we can run multiple agents at the same time. So I made this, like you can translate to Korean and translate to Japanese. And then when you hit this, it will run the agent at the same time. Cool. You can see both live outputs.

25:23You can kind of pick and compare different changes. And like this kind of stuff for you to, to make in Figma is going to be like insane. Like, yeah, because a lot of the outputs are like from the AI, there's a lot of life states and, you know, different things show up and not very hard. The problem is you would spend forever designing this as a mock-up with fake data. And you'd have no way to like actually test what it feels like to use it. And then you'd have to wait forever for an engineer to free up. Exactly. and be able to prototype it for you so you could compare different ideas. Yeah. And you can just do that instantly.

26:02Exactly. Like, it's so easy. Yeah. This is kind of like how cursor used to look like, like pre 1, pre 2.0. You know, we talked about like, there's the files, there's some editors, there's the chat that's kind of like on the side. And then let me show you like cursor 2.0. So we kind of flipped the order of things. like you kind of focus on the agent what they did you can make a new one really easily and we have like this internal browser where you can see the code output you can keep like cursor really clean like if I'm just like doing stuff say in my little prototype real OS I just do this it almost feels like a lovable but But the difference is you get the whole thing.

26:51Like you still get like all the files, the Git tools, the search, you get the full command palette, you get everything. But you can always like, you know, start with a simpler state, focus on, you know, ideating or planning or making stuff. I love this. This is ReOS. This is your own personal playground, right? Yes, yes. Yeah. Just show us high level. What have you built here? It's kind of meta. I don't know what I'm doing. But the idea is I started this thing from just making one app in this OS. Started from this soundboard app that makes sounds. And I just asked the agent, hmm, put it in a window.

27:37And then they made this like draggable window thing. And then added the menu bar. And I was like, hmm, why not just add more apps? and I kept making new things. I made an iPod that actually works. I made a time-traveling browser. Goes back in time, but also you can jump to the future, go back into ancient times. These are generated by AI. What happens if you go to 1000 BC? Let's go. What did the internet look like back then? Oh, wow. It's in Korean too, but you can actually change the generation. You can also set a scene. I don't know. Maybe you're in the UK. and then let's try refresh. It's going to fetch the latest Apple.com contents, pass it to like an LLM, and then it's going to generate the page work.

28:27And as it does it, it makes like an elevator music. So how I would start a new thing. So in 2.0, we have a new mode called plan mode. And then the idea is maybe you don't really know all the details of what you're doing. you kind of want to ideate with the agent, come up with better details, then the agent can build the stuff exactly how you wanted it. So maybe we can ask the agent, like, I want to make sharing new applets easier and more discoverable. Then we can try to see what the agent comes up with. What it's going to do is it's going to search through the whole code base, figure out what's there, come up with a plan.

29:16It might also ask a few questions back so that if there's something ambiguous, oh, here it is, you can just talk to it. And then at the end, it will come up with a plan. So, directions to share, let's see. Not obvious, you can share an app that's saved. two, what would help better? Maybe, let's see. Make it auto open and then three. I don't know. Let's just let it be. So once you answer the questions, it's going to make a plan for you. And the plan looks almost like a PRD that your PM writes. You can actually like edit the thing if you want. let's see what it wants to do. Add a share button to the viewer.

30:16Add a button for the fee cards.

30:22Okay. So if you're okay with the plan, all you need to do is to hit build. And then it's just going to do it for you. And with our new composer model, like it's word time is faster than sonnets and it's like twice as cheap so things will happen like almost like pretty quick before your eyes cool let's see what's gonna happen adding more buns

31:02cards let's see So like a share button? Woohoohoo! Fixing some bugs. Oh, okay. Let's see what happened. Share button in the toolbar. Upload it. Let's see if I get this. Aha! Little share button. Oh, there we go. Let's see what happens when you click on it. Hey, it didn't work. Maybe like, let's ask it to hook up the share button with the share model. Then it's going to fix it. Let's see if it works. Oh, oh, oh, oh, oh. Nice. There you go. Beautiful. Cool. That's great. And the cool thing is you didn't even have to touch any code, right? You basically just spoke in English. You got a PRD, which designers are used to today.

31:58Yep. And you just kept telling it what to do to fix things. And if you want to look at code, it's here. It's there if you want it. That feels approachable for any designer to do, right? And start building something themselves. Yeah. So one thing that I think we're going to fix maybe like even in the next two weeks is like when you start cursor, like you're faced with like three buttons, at least the version before, where it says like open project clone repo connect to SSH. Like you don't really know what the hell like those things mean. Yeah, many designers. And then our new like landing page is just like, boom, you just start.

32:38And then the agent is going to help you start a new project if it's not there. Yeah, that's great. So you obviously, you know, you design, your process is very different at Cursor. And I'm sure you see lots of people that are working with Cursor to design as well. Talk about how design process is changing overall in the age of AI and certainly cursor as a tool. The roles will start blurring. The designers will start coding. The engineers will start designing. And then our shared language is code. It is not just picture frames, not pixel values, but code. You start not by getting everything perfect, every single bit of detail.

33:20you actually start by building. You start with a vague idea, you put it in the agent, it comes out maybe like 60%, 70%. You need to be comfortable with like a somewhat bad output and figure out a way to turn that into the thing you want. And as the models and agents get better, that process will just get quicker. Maybe like the first time it comes up is actually the thing that you wanted but then you know what's next how do i get to somewhere even better the agent's able to do that too for you you've described this as like sculpting right is that a way that designers should think about this like the difference before it was like we started from uh let's do some wireframes and sketches then we paint each of the layers and boxes with like styles when colors and type and you're like painting stroke by stroke but you're painting on a on an artifact on a canvas that's not real versus the new way it is you just ask the agent and you get this clump of thing it might not be great it might not be perfect but it is the thing and you sculpt it you mold it you use to say ah this part i want to make it like that instead i want to kill this part i want these things to be merged together and as you kind of do do more revs the thing gets closer to what you want it and it is the whole thing it is the full thing it is not an artifact it is not like pixels stuck in a canvas and i think we saw that when you were um you were adding the share sheet right it was like the button appeared but then clicking it didn't do anything so you got it like 60 70 percent of the way there and then you're like okay now i need it to do this thing so you told it what to do and then yeah it works yeah it's like if you get something bad or like ugly it's actually your job to make it pretty the way you want it and that's the part that the ais can't really do right now then we can actually focus on our craft like figuring out like how to push this thing even further focusing on the details making everything fit together one thing that i find um there's some projects we've been doing internally and using a very similar process to what you're describing here and i think one of the things that i find is we pay a lot more attention to like even the interactions and motion and all these things that are really hard to do when you're just in a frame somewhere and when you get to experience it now all of a sudden all these other layers come alive that you get to experiment with and test and it feels like everything is just going to level up so much more because of this yes it's like like it's not even just for designers it also includes say like your pm's writing some google doc that's stuck it never gets updated it's always like disjointed from the real thing right as we kind of fit these so different parts of making software together as we break the boundaries between these tools as everyone can start talking with the code, magical things can happen.