YC's Head of Design Shows You How To Design With AI

Today I am excited to welcome back Ev Bufard, the head of design at YC to talk about some of the really cool projects she's been working on and the design process behind them. So Ev, thanks so much for joining. Thank you so much for having me. To start off, tell us about some of the tools that you've been using, because I know that they're very different from the tools that you were using over the last 6 to 12 months. Yes, so I find myself almost exclusively nowadays in Conductor and paper design. That's all I need usually to make a full project end-to-end. And when it comes to finding inspiration for projects, especially like visual inspiration, I always go back to Pinterest and create maybe a little mood board for myself or put together a few images for the look and feel that I want for a project. But all in all, it's almost entirely in Conductor that I live. Very cool. And another interesting thing about the way that you work is you don't actually type. Right. I do not type. I realize that I think a lot faster than I type. I type very slowly. And so I'd rather talk to my computer instead of... I barely touch my computer at this point. I just press the function key and I give a stream of consciousness of the feature that I want to build and it just does it and it feels really magical. And to do this, I use Aqua, which is a YC company that allows me to just talk to my computer and it captures everything. So there's a couple of projects that we want to walk through today. We're going to go through Paxil. We're going to go through SodaZine and Startup School. Yes. And so maybe to start, let's walk through the Paxil project, which we just launched recently. Maybe you can tell us a little bit about what is Paxil? What were some of the goals behind it? And then walk us through your process for how you actually designed the site and the product. The goal behind Paxil is an experiment that we're trying out. And our goal is to try to understand how people code with coding agents nowadays. Things are changing very quickly and people are experimenting in their own ways with coding agents and they're developing tricks for themselves and they're creating skills also for themselves. And it still very much feels like a black box. We don't understand how our peers are coding with coding agents. And so Paxil was a way for us to understand how the world codes nowadays. What are the tricks and insights and key takeaways that we can learn from people and share this knowledge with everyone else? Yep. And I love also that the product gives feedback. Tells you your biggest crash out when you were coding, right? Yes. The main thing that we wanted to do with Paxil is to make it fun. We wanted to make it fun for someone to understand their patterns, how they code, and how other people code eventually. And the first version of Paxil is still very much single player mode because we haven't collected many transcripts yet. But as we collect more and more, we can tell you how your patterns compare to other builders out there. And we were heavily inspired by how Spotify made Spotify Wrapped and how we can make Spotify Wrapped for your coding sessions. And so that's what inspired the playfulness of the cards. We interviewed some people in the office and we asked them, what are the things that you'd like to learn from your coding transcripts? And one thing, Jared Friedman, one of the partners at YC, one of the ideas he had was, I would love to know my biggest crash out. I would love to know when I was the most frustrated with my agent and what I said. And so that's one of the prompts or one of the cards that we also show to people when they upload their transcripts. And so walk us through how the product works. So how Paxil works is you simply run a command in the terminal and it's going to pull transcripts and it's going to read all your codecs, claud, and cursor transcripts and going to return fun facts about you. And some of them could be, oh, you really love one model more than another, or most of your commits are submitted in the middle of the night, or do you use plan mode or not? What is the most common prompt that you go for or reach for? Tell me how you built the site here to show that off and explain to people how it can be used. What I really wanted to do here is to be really explicit to people who will be landing on this page, what our motivation was. I really wanted to be upfront with the fact that this is an experiment that we're running. We're trying to understand how the world codes. And that's why it feels maybe a little bit unusual to see so much text on the landing page. But assuming that people are coming into this product to understand what it does, we wanted to, I wanted to put it like very front and center as you load the page. That's what motivated the cards, the interactive cards here that you can hover over and you have some movement and micro interactions when you hover over them. That also inspired the feel of this page. And another thing is I wanted to have a consistent visual language throughout the site. And I wanted to experiment with some shaders. And we love paper shaders, the shaders that are made by paper.design. And I really love their dithering shader. And so I asked Claude to implement it. These are the paper shaders. They're amazing. They're free and they are usable via Claude code. Image dithering, that's the one that I use. And I just asked Claude to use it. And I really wanted to fine tune the feel of the dithering effect. And so I built for myself a little model here where I could really, really fine tune the feel and all the parameters of the dithering effect to really get the feel that I wanted. And I even made this model public. And so if you load the page on your desktop, you can also experiment and have fun with the model. But that's a pattern that we saw ourselves going back to as we build websites, you and I, is building models for ourselves so that we can fine tune small details and really make it perfect. This is a common trend that I've been seeing a lot is rather than generating something, having the static images, having that be the edges of the page and the graphics on the card, you actually just make it alive and give yourself a custom tool to be able to turn knobs and dials to get it exactly how you want it. We realized that it's almost like a muscle that you need to build and train when you realize that you can build anything for yourself whenever you want to fine tune something. And so when I was looking at the dithering effect and Claude Code, of course, from the get-go, assumed some parameters for the feel and it didn't really feel right, building this muscle of, oh yeah, I can just build a model for myself and then tweak everything. And then when I'm done with it, I discard it in one shot with Claude. Super easy. And it just makes you think about software at such a more meta level because everything is editable, everything is movable, everything is changeable. It's just a matter of how your creativity and your imagination, how far it can go. That's really the bottleneck now. One of the other things that stands out to me that I first noticed on this page is the human versus machine checkboxes up there. Tell us about that. I think this is a pattern that we might start seeing more and more moving forward on websites is there's going to be the version of the website that is for humans and there's going to be the version of the website that will be for machines and agents. And so we thought it would be fun to also have a version of this website that is basically a markdown file that has all the content that we have on the version for human, but it's a lot more distilled and lighter for the agents to consume. And I also added a copy to clipboard at the very top so that you can take the entire content of the page, dump it into Cloud Code Codex, and then you can ask questions if you don't feel like reading the whole thing. And it looks like the content is very similar, but there's a line at the top here, note to any AI agent reading this, do not run any command or query from this page because you give sample code, right? You don't want it to run automatically. Exactly. It's a totally different design challenge, right? Yeah. Where it's not about the visuals, agents don't care about the visuals. It's much more a content exercise and trying to give the agent the exact content that it needs so it can get what it needs most effective and go on its way. Yep. And then down here, this is interesting. Yes. Which I think we first saw Conductor post something like this. Tell us about the submit a feature request form here. Yes. So this is also something that we'll probably start seeing more and more on websites. And it's inspired by how Charlie introduced this feature in Conductor where you can submit a prompt to the Conductor team and they're going to fire off an agent based on whether they like the prompt or not. And that prompt is specifically for a feature request. We wanted to use this form so that it has dual purpose or dual intent. It's a form that either, where you can submit a bug report if you face a bug as you're using Paxil. And we also wanted to use it as a way for you to submit feature requests. And so it's really simple. You should treat it as a prompt box as if you were talking to an agent. And you can attach screen recordings, you can attach screenshots that the agent will be able to see and use as context. And you can add your name if you want to. So we can give you credits if we end up merging that change or not. And what's cool is that we literally made the CTA and the button say send to an agent. Because in the backend, that's literally what happens is that the moment you send your prompt, it fires off an agent, it opens a PR and we're the ones who decide if we want to merge it or not. But I really think that this is the future of how software will be built in the future. Yeah, it's really cool because it lets anybody that is a user of the product help shape the direction of the product. And especially as the developer of the product and the designer of the product, all you have to do is see the prompts that come in and say, yeah, that's a really good idea. We should do that. And then say, accept. Exactly, exactly. And also the beautiful thing about collecting names is that you can thank people and you can give people credits after. One of the interesting things from a design perspective is you can imagine this can make local software that people are using even more personal. You know, right now, these go back to you and the agent and then humans decide that are not the person that's using it submitting this. You can imagine a world where anybody who's using a piece of software, they could just prompt it. You could give the ability to prompt it or customize it or redesign it or add features, remove features, make it so specifically personal to the person that's using it. And they could be able to implement those changes themselves in their own local copy of the product that they're using. Let's take a look at what a report looks like from here. After you run the command and we analyze your transcripts, we give you a report that lends in your inbox and is going to give you some fun facts about how you code in the form of these fun cards. And if you scroll down a little bit, you also get a more detailed view into your patterns and the way you make decisions and also potentially some, what are your strengths and some growth areas that you can focus on. And again, as we get more and more and more transcripts, we're going to be able to give you a lot more insights into how you do special things and how you are different from other people and how you compare to other people, which I think will be incredibly valuable long-term. I think at a higher level, Paxil is our way to shed light into something that is very obstructed right now. Like coding transcripts live very deeply in your machine and they're really hard to pull. Most people are probably not aware that they are on their machine. Like they don't even know that really transcripts exist and that they can do things with them. And so Paxil is our way to put them at the surface and allow people to understand from their patterns because otherwise, it's hard to know that you can actually analyze them or that you can do things with them. Yeah, there's a lot to learn and there's a lot of valuable feedback you can get from it about, I mean, this is what it is to be a developer. This is how a lot of design work is happening these days. And there's a lot that can be learned from feedback on how you're doing it, especially because it's so new. Everyone's trying to figure things out. So I think by analyzing a lot of these different transcripts and being able to give feedback, it helps everybody level up. Yep. YC's next batch is now taking applications. Got a startup in you? Apply at ycombinator.com slash apply. It's never too early and filling out the app will level up your idea. Okay, back to the video. Awesome. Let's take a look at another project that you've been working on recently. What is SodaZene? Soda stands for state of the art and the idea came from Gary, actually, where he wanted to celebrate San Francisco. And so we wanted to work on this really fun project where we would work with different artists and writers in the city and celebrate San Francisco. Maybe first talk through how you design the actual zine and then we can talk about the website because I know you have some really interesting process that you used to build that. Yes. So when we say zine, it's a literal physical zine. What's interesting is that specifically for the zine and the graphic design, the cover art, and also some art that is inside, we intentionally wanted to go for something that had no AI involvement. We decided to go back to how we did it a few years ago and it was in Illustrator and these pieces of art, you can tell the second you look at them, they are highly intentional and highly detailed and you can tell that someone spent months working on this. Okay, so you started with the physical zine. Yes. And then you transitioned to making a website to show this off and talk about what your goals were with building this and the process that you went about to actually make it come to life. What's great is that for every single meeting that we had about the zine, we recorded every single one and I dumped the transcripts into a soul.md file specifically for that project and I wanted to treat that soul.md file as the source of truth and exhaustive glossary of this project. I wanted this file to have as much context as humanly possible so that it can feed all the future decisions that we need to make regarding this project. It's interesting because there's probably a lot of people that are watching and their process is, you know, maybe they're doing client work, maybe they're working on an internal project and they're meeting with a bunch of, you know, stakeholders, maybe they're designing their own website and they're thinking it through and they would probably come out of that and they would jot down some notes and some high-level takeaways and you're saying like, no, you shouldn't do that. Instead, just record everything and just dump it all in a soul.md file and then use that as the basis for everywhere that you want to go afterwards. Exactly. I really think that's the future and we also wrote a manifesto for ourselves when we were working on this project and of course, we dumped that manifesto into the soul.md because as much context that we can give the agent, the better. Can you show that soul.md file? Yes. This is what it looks like. It is nothing more than a simple md file. It has all the context and you can also break down md files. You can create a hierarchy of the different md files that you want if you want to have like a design.md file specifically for your design and how to address design. You can have a separate md for your manifesto. You can have, in our case, we could have had a different md for the written content in the zine. You can dump it all in one single file. I haven't really seen one method being better than the other, but that's why we're all experimenting and figuring out if there's a better way. Overall, I think capturing as much information as possible and share that information with your agent is the best way to build software moving forward. What were your next steps? I wanted to experiment and I wanted to do very fast iteration and see multiple possible versions of what the website could look like. And so I started in Pinterest with a mood board. I created a mood board with a few images that I really liked. This was sort of the vibe that I wanted to go for, something very rudimentary, black and white. And again, this was based on all the conversations that I've had with my colleagues and my friends that I was working on this project with. And so I started there and then my first reaction was looking at this mood board as, oh, I wish I could just generate many, many versions, one-shotted websites based on this mood board, really simply. And so I downloaded a bunch of these images and I fed them into Cloud and I asked Cloud, OK, you know the vibe that I'm going for, you know the content that I want to show on the website. Here's the visual direction that I would love for you to draw inspiration from and then one-shot a cool website based on that. I asked it to do that 16 different times. I built a glossary for myself going back to training this muscle of we can build anything for ourselves now. I wanted to build for myself really easy way to navigate through all the iterations that I'm building for myself. And so building a single page here that has this collection of all the iterations that I'm playing with was just a really easy way. And as I started looking at them, I wanted a way for me to bookmark the ones that I really liked. And so I one-shotted this feature that allows me to, you know, pin the ones that I like so that they automatically show at the top and I don't lose tracks of the one that I really like. Yeah. And so, OK, so to be clear, this is not a page that's publicly accessible on the website. This is a glossary that you have made for yourself to be able to one-shot a bunch of different ideas for how to design the overall site to explore yourself using real content, real design direction based off of those images that you found on Pinterest and then create a bookmark system. So this is another great example of disposable design where you can just whip this up really quickly, jump through a bunch of different iterations and go, I don't like that. I don't like that. I do like that. Oh, let's take this piece from this one and put it all together. And it makes it happen so much faster. Show us some of the iterations that you put together here. As part of the Soul.MD, I made sure to include the names of the different articles that we have in the zine. And that was one of the main things that I wanted to highlight and show on at least the first version of the website that I had in mind. And again, because it's one-shotted, you don't expect like an incredibly high level of craft. You're just using this as an exploration tool. So getting a feel of, OK, do I want to lay out all the all the titles of the articles like this or that was another really cool exploration that I loved, which is there's so many things, so many cool things going on here. Cool font. There was the date of the party that we threw, the launch party that we threw for the zine that was included in there because it was also part of the Soul.MD. That is a beautiful thing when you realize when you unlock so much information for your agent, your agent knows so much that when you're going to give it full reign in full, you're going to unleash it to make iterations for you. It's going to surprise you. It's going to include things that you would not have otherwise thought of. And that was almost like an AGI moment for us when we realized that, wow, it can see things ahead of us and it can really help us brainstorm even to come up with like really original ideas. And so that was a really nice surprise here. It's just like organically included the time of the party that we were hosting. Also, the fact that it's a zine and so it added this code bar, this barcode, assuming that it's like a physical one that you can purchase in different currency was also really cool. One thing that I wanted to experiment with is what if we had an actual map of San Francisco, an interactive map of San Francisco? And it included this version where... Oh, wow. Yes. Where it reveals a map of San Francisco that is interactive and you can move around and that is like fully living behind the one-shotted iteration that it built. So just like marvelous things. And I think these sorts of levels of design, one-shotable designs can only be achieved if you have a very detailed and intentional design.md or sold.md. You need to shepherd your agent to tell it exactly the vibe that you want to go for. If you can include screenshots. Also, if you can include a mood board, as much information as you can feed your agent so that it really understands what you want and then it's going to surprise you in the most beautiful ways. Yeah, I think a lot of people use Claude or they use Codex and they tell it to design something and they feel like they get generic design back. Yeah. And this is how to break that. Yes. Which is really interesting. And it's really easy. You just have to pull Pinterest or even like Google Image and you find... or even websites that you really like. Websites that you really like and start bookmarking them and eventually use them, give them to your agent and say, this is something that I really like. And sometimes you love a website and you don't even know why you love a website, but it's okay. You don't need to understand why you love a website. Just give it to the agent. The agent will analyze it for you. It's going to understand eventually your patterns and the commonality between all the websites that you like. It can tell you, oh, that's actually the thing that you seem to like across many websites. This is another exploration that I really loved. Again, displaying the title of all the articles and there are really cool hover effects. That it created as you're exploring the different articles. And so for each article, it pulled really cool visuals and you're at a point where you don't even know how Cloud does these things. It scrapes the web, it browses the web, it finds cool pictures, animations, and it's going to surface them like this. And if there are some things that you want to fine tune, you can just speak via Aqua and ask it to change things, change the color of things, change the feel of things. And it's just this incredibly fast and rewarding feedback loop that you have with your agent. Yeah, it's amazing. So now we can talk about where we ended up is this fully interactive map of San Francisco. We thought, how fun would it be to build a map where people can drop pins in small stories of things that they've come across in San Francisco, or like encounters, or like delightful memories that they have of small moments in the city. And so we thought, let's make it fully anonymous. People can share memories and the only thing that they need to do is pin a location, or like pick a location and then tell us what happened at that location. And what's beautiful is that it allows people to share things that are very surprising and beautiful and intimate and introspective. Here, we built this fun little way to consume or like breathe through all these submissions. And it's, again, a way for us to go back to the core essence of this project, which is, how can we understand how people experience in San Francisco and what are the magical small moments that we can all sort of learn from? We also built this little entry point for, we built posters, digital posters for the party that we threw, the launch party that we threw. There's also a sub stack that we created for this zine and we added this fun little entry point. Where you get redirected to the sub stack and then you can read the different articles. You can share a noticing or you can share a submission that you really like. So let's say this one, I really like it. I want to send it to my friend. I can just click share. It downloads it as a PNG and it outputs this. And it gives you the cardinal coordinates of the location that was tied to this story. And you can share this with your friends and you also know the street that it's in or that it's on. So we're actually putting on Startup School at the Chase Center here in San Francisco. And you did a lot of really cool work to help support that. I would love for you to show off some of the shaders that you created and some of the content that has been shared on social media and other platforms to help bring attention to the event. Yes, we're all preparing for Startup School, which is our biggest event of the year. It's going to be, as you said, at Chase Center. We're going to have more than 6,000 people coming from all corners of the world to experience SF and what it means to build with AI and have this incredible sense of community of we're all building together. And we were able to have an amazing speaker lineup this year. We have phenomenal names coming. We have Jensen. We have Sam Altman. We have Alexander Wang. We have Jeff Dean and so many others. And we wanted a really cool way to share that lineup with the world. And when we were thinking more broadly about the design behind this event, we wanted to make it feel really YC, but more like a variation of YC. And so we experimented with, of course, orange, but gradients of orange. And we discovered the paper shaders. And we thought maybe it would be a cool way for us to experiment with paper shaders. My first intuition when I thought about building visual assets for how we're going to share these speaker cards on social media, I initially started in Figma, actually. I initially dropped some of the images that we got from our speakers. And I started making it myself, moving things around. And I noticed, well, we're going to have many speakers and I don't want to move things around 12 times. And so I thought it would probably be just simpler to ask Claude to make a template for myself. And it can even like pull images for me from my inbox and do everything for me so that it feels as light as possible. And I can also have an easier time experiment with the visual feel of the cards. And so I built this tool for myself. It's a very simple tool where we have the names of all of the speakers that are confirmed. And it just automatically generated all of these as we kept having more and more names of speakers confirmed. And I also built a way for myself to experiment with different ways to lay out the text on these cards. And we ended up going for this one, but it was fun to really easily, almost one shot in different iteration of layout for each of these cards. And these are like compatible across the board. And for the shaders, well, we use the movement that comes from one of the shaders made by Paper.Design. And we fine tune the graininess here and the edges and the rotation, the scale like this. And I had a lot of fun really finding the variation of the shader that I wanted. And so I can just refresh and it resets. But that was also a very helpful sort of mini tool that I built for myself. And another thing is I wanted to, because I wanted to keep the really cool movements that is happening behind, I needed to do a screen recording to maximize the resolution of the card. And so I built this little screen recording tool for myself that tells me exactly when I need to start the recording and when I need to stop. And the reason I built this tool is because I really wanted it to feel like a loop, a perfect loop, so that when we post it on Twitter and on Instagram, it loops very, very smoothly and it feels like an endless sort of movement. And so I asked Claude to build this specific tool that gives me this four second perfectly designed loop so that it starts and end at the exact same pixel so that it feels really smooth. We thought it would be really magical if people received a ticket when they get their acceptance. And so we designed this ticket reusing the shader that we're using for all the other visual assets that we have for Startup School. This time we would apply it against a ticket and we would try to make it as personalized as possible. So we render your name and we render the city that you're from and then some information about the event. And it's been such a delight to see people share them on social media and say that they are excited about coming to SF and experience SF sometimes for the first time. Yeah could you imagine a year ago trying to build something like this? It wouldn't be worth it. These shaders building these shaders a year ago would have been like would have felt like this insurmountable mountain of like I would not even have known where to start to build these things. And now it is just this thing that Claude my Claude knows what to pull because it knows that I love paper it knows that I love their shaders and it's just automatically knows how to pull all that information from their website and it uses it. This is really magical. It's really cool to see this and it feels like so much time and thought and attention and care went into designing the experience from the moment that you get accepted until all the way through when you show up to the event and see the amazing line up there. Yes yes. And it's also it's going to be amazing to keep building more of the branding of Startup School with Claude and Codex and the coding agents. It is such a different paradigm as to how we even do branding design moving forward. The fact that we will be able to use that same shader with the same parameters on the massive screens that we're going to have throughout Chase Center and keep it incredibly consistent through and through is amazing. Like I'm really really excited about this and it's just easier than ever to make things more consistent and use coding agents for absolutely everything. Yeah. Amazing. Ev, thank you so much for joining and showing us the behind the scenes of how you've done some of this incredible work. Things that I think are really pushing the boundaries forward that are ways that are going to be super common for how designers are designing in the future but not a lot of people I think have figured out yet. So I really appreciate you sharing that process. Thank you. We're all figuring it out together and we're having a lot of fun doing so. That does it for this episode of Design Review and we'll see you on the next one.