现在人人都是工程师:深入 v0 创造一亿构建者的使命 | Guillermo Rauch
Everyone’s an engineer now: Inside v0’s mission to create 100 million builders | Guillermo Rauch
First Impressions of v0
Guillermo Rauch: One of our users yesterday submitted feedback.
MUSIC: (instrumental music)
Guillermo Rauch: They were saying, “v0 is like a super genius five-year-old PhD with ADHD.” I’m not going to oversell this. It knows everything about everything, but it has these sparks of brilliance.
Introducing the Guest
Lenny Rachitsky: How do you think things are going to change for product managers, for product teams?
Guillermo Rauch: People could be more full stack. Imagine a designer that can ship a fully baked product, a product manager that can prototype and ship to production. We shouldn’t put limits on ourselves and what we can build, and what we can ship, and what we can dream about making possible on these web surfaces.
The Popularity of v0
Lenny Rachitsky: A lot of people are wondering, “What happens to engineers? Should I learn how to code?”
Positioning Vercel and v0
Guillermo Rauch: A lot of the programming jobs to be done that used to be specializations, I think, are going away, in a way. They’re translation tasks, but knowing how things work under the hood is going to be very important for you because you’re going to be able to influence the model and make it follow your intention a lot better.
The Origins of v0
Lenny Rachitsky: We hear this word taste all the time, in terms of building taste, people are always like, “How the hell do I do that?”
The Developer Tools Path to v0
Guillermo Rauch: Taste, sometimes I think we think of as this inaccessible thing that, “Oh, that person was born with taste.” I see it as a skill that it can develop. I think is extremely important to try lots of products. We have one of our internal operating principles as increasing exposure hours. Try to quantify how much time you expose yourself to watching how people use your products and you’ll develop that muscle.
Model Selection and Tech Stack
Lenny Rachitsky: Where do you think the biggest change is going to happen?
Guillermo Rauch: We need to stop talking about AI at some point. I just see a future where AI becomes synonymous with software. We build software and we use software to build software.
v0 Scale and Community
Lenny Rachitsky: Today my guest is Guillermo Rauch. Guillermo is the founder and CEO of Vercel, which, amongst other things, makes a product called v0, which has become one of the most popular AI website building tools in the world. He’s also a legendary engineer and contributor to open source. He’s created some of those popular JavaScript frameworks in the world like Next.js and Socket.IO. He’s both a builder and is building a product that’s going to change the way we all build products in the future. This episode is incredible. If you want to really understand how product development is going to change with the rise of AI and what skills you should be focusing on right now, I highly recommend you keep listening.
If you enjoy this podcast, don’t forget to subscribe and follow it in your favorite podcasting app or YouTube. Also, if you become a yearly subscriber of my newsletter, you get a year free of Linear, Notion, Superhuman, Perplexity Pro, and Granola. Check it out at lennysnewsletter.com. With that, I bring you Guillermo Rauch.
Git Commits and v0 Paradigm Shift
Guillermo Rauch: Thanks for having me. Longtime listener, first time, I guess participating in the podcast, and love being here.
Future of Building: Removing Collaboration Barriers
Lenny Rachitsky: Oh, I appreciate that. Okay, I know you saw this, I did this survey recently where I asked my readers, “What tools do you use most in your day-to-day work as a product builder, as or product manager?” And in the category of engineering tools, v0 came in right below Cursor and GitHub for people’s most used AI building tools. So clearly people love what you’re doing.
Guillermo Rauch: Yeah, we’re very happy to see that. And for us, we’re at the very beginning of the journey in some ways, because v0 is a relatively new tool, but for Vercel, our company has been around for a while. The way that I explain to people is, “Anytime you’re using the internet, if there’s a website or web application that’s really fast, innovative, hopefully it’s running on our platform.” We’re out there. We are running a lot of websites at scale. If you watched the Super Bowl recently, three different companies were promoting digital products that were built and delivered on Vercel. So not only can you deploy your ideas and build them on Vercel, they can scale to huge volumes of traffic and huge audiences.
So a lot of people know us because of a framework called Next.js. It’s an open source framework based on the React technology, open source by Meta, and it powers some of the most innovative products on the internet. So when you use Claude, or Grok, or Midjourney, you’re using Next.js. You’re using Vercel’s technologies. So with v0, what we’re trying to do is, and it’s funny, because you put us rightfully, I think, in the building or development category in that survey, but what we’re trying to do with v0 is help more people participate in building software, increase the total addressable market of people that are actually shipping things, shipping real products. And at the same time, just like you would with ChatGPT, we want v0 to be just extremely, extremely easy, and the outputs that it generates, make them as refined and realistic as possible. The things that you created with v0 hopefully live up to that standard set by some of the best and largest websites on the internet.
Unlocking Full-Stack Capabilities
Lenny Rachitsky: I was going to ask you how v0 came out of Vercel, and my theory was it was like you guys are sitting around being like, “How do we get more people building websites?” And it’s like, “Okay, let’s just help them do it really easily.” It’s like TAM expansion for Vercel. Is that?
Guillermo Rauch: Yeah.
The Future of Engineers
Lenny Rachitsky: Or it-
Guillermo Rauch: In some ways what I’ve been doing for not only 10 years that I’ve been almost working on Vercel, but maybe my entire life because my strength as a developer is kind of meta. It’s been to create developer tools. So I’ve created a bunch of open source frameworks that are really popular. So Next.js is one, but before that in a previous life, I created another tool called Socket.IO, which is a real-time communication mechanism that powers, for example, every time you use Notion, I think you interviewed Ivan, when Notion is to broadcast messages in real time to other collaborators, they use a real-time engine that I built for Socket.IO.
So the reason that startups and companies have used my products in the past is because I took something that was very difficult to do, but very compelling. It was with real-time in the past. It’s building cutting-edge applications on the web with Next.js. And I try to make it as easy as possible. But you still needed to know development skills. For us and the opportunity was if there is maybe five million React developers, which is the the library engine that we use, and there’s maybe 20 million JavaScript developers, how many product builders are people with aspirations of building products exist? My back of the napkin, minimum calculation is a hundred million.
And I’ll tell you, it’s funny where I get that number from. Slack has about a hundred million monthly active users. And what you do on Slack is you go in IT and you talk to people. A lot of those people are building digital products. And they talk to one another about what they would want to see in the world. They talk to customers through shared channels. I love that feature. We talk to a lot of the Vercel customers and they tell us, like, “I want to build this, I want to see that. I want this feature, I want that thing.” So the opportunity with v0 was, it’s not that you’re going to stop talking to other people, but what if you could yap into the computer and see something happen, build a prototype, build your first version of a product, build a demo, build a full stack product, build it and ship it?
And so the inspiration for it was very natural to the mission of Vercel. But concretely, the genesis, the story was when ChatGPT came out, we noticed that it was very good at writing the code that our tools used. So ChatGPT, right out of the bat, was good at JavaScript, was good at Tailwind, which is a CSS styling technology, was good at Next.js, and again, the power of open source. Our tools were already in the training data of the internet. And so that long-term bet and vision in open source really paid off. So because the models were so good at writing this kind of code, the idea for v0 came naturally from, “What if we could build a ChatGPT for building web products?”
Building Future-Proof Skills
Lenny Rachitsky: Speaking of that, I didn’t actually know. So I had Bolt’s CEO on the podcast and he talked about how Claude kind of unlocked what they’re doing and do you guys sit on ChatGPT and OpenAI’s stuff?
Importance of Communication Skills
Guillermo Rauch: We started out on OpenAI. And we’ve always used a combination of models. It’s funny, right now on Twitter there’s thread with a million views of people trying to reverse engineer the prompt and the models they used.
Showcasing Work and Building Audience
Lenny Rachitsky: I saw that on Reddit. Yeah.
The Power of Infrastructure
Guillermo Rauch: And they’re all finding that there is all these kinds of different models that are specialists in different tasks. And there’s a pipeline of models where a model could hand off work to another model. And so OpenAI, Gemini, Claude, but we predate Anthropic because I’ll give credit to ChatGPT that the utility of it was so general purpose, but from the very first release, it was very good. In fact, by the way, if I’m not mistaken, the first prototype of v0 might have even predated ChatGPT, or at the very least I think we were running on GPT 3.5. So we’ve always had this vision of unlocking more power for the web through LLMs, and there’s a lot of very interesting technical details of why, by the way, LMs happen to be so good at the task of web design and web development that we could get into. But it was the perfect timing for us.
Lenny Rachitsky: I want to come back to that. That’s actually a really good question. But let me ask a couple other questions here. In terms of v0, what’s the scale at this point? We hear all these numbers about all the folks in the space. What can you share about what’s happening with v0?
Connecting LLMs and Infrastructure
Guillermo Rauch: I can share that it’s growing exponentially, and that over 1.3 million users have interacted with v0 so far. We had our largest day ever yesterday and today, again, we’re one of the largest customers of most of cloud providers at this point. We’re hitting the limits of every GPU, LLM infrastructure out there in the planet. And the most exciting thing for me is what I’m seeing people build with v0. So we launched a feature about a month ago, maybe even less than a month ago, called v0 Community. It already has 20,000 submissions. I am sure people in your audience have used Figma, one of the things that I love about Figma is Figma files, that I can go and grab a starting point for something. It could be a logo, could be a menu, and you can start with something that someone has already contributed, like that spirit of open source.
And so in less than a month, I think we’ve done over 20,000 community submissions. So we’ve learned so much about building AI products with this and we continue to open source and share our best practices. But one of the things that I’ve definitely learned is prompting it seems like the easiest interface in the world because it’s just an input and you put text in it. But there’s a little bit of a writer’s block sometimes. So one of my favorite things that I’ve seen, and I’m even looking at the home page right now, and you can see a random assortment of community submissions. And they have 1,200 forks, and 1,500 forks, and 6,000 forks, and this is every time people saying like, “Oh, instead of starting from scratch, I’ll start from this application that someone else has built and I’m going to prompt it to modify it and make it my own.”
Lenny Rachitsky: So the community submissions are people building apps on v0 and sharing what they built?
Everyone Is an Engineer
Guillermo Rauch: Correct.
v0 Is More Than Prototyping
Lenny Rachitsky: You can look at the code and fork it?
Guillermo Rauch: It is becoming like a compounding investment. People share something, someone else grabs it, makes it better. Maybe you used it at that point. In many ways, I see this as the next evolution of GitHub, whereas GitHub, it was a marvel for software development because I don’t know if you remember this, but the initial, little tagline underneath the GitHub logo was social coding. And it had this democratization effect of building software. But you still needed to know how to code. And so what we’re after is social product building in many ways, everybody should be able to cook and share what they’re building.
Tips for Using v0
Lenny Rachitsky: I hadn’t thought of it this way, but I love that it connects so much to your open source roots, where people are building on v0, and then sharing what they’re building and then people can build off those things. It’s kind like an open source AI building experience.
Experience-First Approach to Work
Guillermo Rauch: It’s fascinating, right? In many ways, if you think about the Git commit, the Git commit is super interesting. If you watch how an engineer works, they look at a problem, they spend a lot of time in their code editor, and at the end they say, “I think I got it. I think I’ve fixed it.” And then they produce a Git commit. They summarize their intent and what they try to do after they’ve done the work. v0 inverts that. The Git commit is you go into the chat and say, “Please change the color of this button. And when I click it, save this form to a database.” And so you’re starting with the intent and the output is the code.
And as a side effect, we can also produce a Git commit for you. That feature’s not online yet, but it’s coming in the next couple of days. Spoiler alert for the group. And so I like this idea of we can create this super set of all software building with this platform. And that is true to my initial intention with Vercel. Our mission is to enable the world to build and ship the best products. And so enabling that for the largest possible group of people is very exciting to me.
Glimpses of Superintelligence
Lenny Rachitsky: So let’s go to this question of just the elephant in the room for a lot of people seeing these things happening, product builders that have been doing things a certain way for a long time with apps like this coming around, whether you could just type a thing in, and build it for you, and it’s beautiful. How do you think things are going to change for product managers, for product teams? Where do you think the biggest change is going to happen? How do you think product will be built in the next few years?
Guillermo Rauch: The most profound one that I alluded to is that conversations between product builders and their customers will be mediated by these zero links, these artifacts. I think when Claude came up with the name artifacts, I found it phenomenal, because we’re all in this world, especially in this group of people, we’re here to build awesome things and share them with the world. Steve Jobs said this awesome speech about, “It’s like our form of giving back to the world is to try and do the best possible job we can and share it with the world.” And so the idea that when we talk, we would not have the power to make those ideas a reality, it seems like an L to me. I would love to see people constantly live in the product, be in the design, spend time tuning and trying out new ideas. And that’s what the ideal work of the future should look like, and less about again, that abstraction, that being removed from the product or even sometimes I can feel powerless to not be able to change something.
This happens a lot when departments collaborate within an organization. Marketing wants design to do something, marketing wants engineering, engineering needs a design. It cuts always. One of the things that people got excited about that we published on the Vercel blog was about design engineering, because a lot of the people that we were noticing were being very successful at Vercel were people that had both the design and engineering skills. And that was actually another huge motivator and inspiration for v0, because we realized that people could be more full stack. We shouldn’t put limits on ourselves, and what we can build, and what we can ship, and what we can dream about making possible on these web surfaces.
And so you could imagine removing all those limitations, a designer that can ship a fully-baked product, a product manager that can prototype and shift to production. A lot of people that use v0 are back-end engineers that never had the ability to, they could ship an API, they could build a great low-level infrastructure system, but to actually bring their end-to-end vision to life, v0’s completing that for them.
Three Core Skills for Building AI Apps
Lenny Rachitsky: Let me follow the thread on engineers. A lot of people are wondering, “Do we need engineers in the future? What happens to engineers? Should I learn how to code?” Your long-time engineer thoughts for folks that are trying to decide the career for themselves?
The Escape Hatch Philosophy
Guillermo Rauch: Yeah, I think knowing how things work is the most important skill in the world. I foresee a lot of people becoming incredibly impactful in building and shipping amazing products, and building gigantic companies, and everything you could imagine, where a single person can do the job of a hundred different people in a hundred different specializations. Take the example of one skill set that’s really important to build a front-end product is you need to know how to use CSS or Tailwind to style it. And once upon a time, I would hire people that were truly specialists in this task, the task of there’s a Figma design or there is some kind of sketch, and translating that into reality because they knew really well how to manipulate layouts, layout code, box model code, we call it, and borders, paddings, margins, flex box, all these technologies for styling.
And notice, I actually use the word translation very intentionally, because the origin of the LLM or the transform architecture at least, goes as far back as the architecture for systems like Google Translate. They were generative LLM techniques, basically. That’s how they cross that chasm of, remember when translating tools were horrible and then one day the problem was just solved? And I look at a lot of the programming jobs to be done that used to be specializations, that I think are going away, in a way, or the tasks to be done, they’re translation tasks. We were translating from a screenshot, or intent, or a design into a React, and Tailwind, and CSS implementation.
And right now, v0 is incredibly good at doing that. It’s so good that every time we put a new generation of the model out, I run this test of converting my own website and try to generate it with v0. Last time I did it, it had taken me like 10 prompts to replicate it. Keep in mind I’m an expert front-end engineer that’s been in the arena since I’m like 10 years old and I’m 35 now. And so I do that test because it’s almost like a test of self-imposed humility of, like, “I remember exactly how long it took me to build my website with Next.js, the framework that I created, and ship it.” And so with the last model, it took me maybe 10, 15 prompts? With the most recent model, it took me two prompts.
And so that translation from the design intent into working implementation, another anecdote that I like to share with people is the model, because v0 tries to embed all of the best practices of the web, the model output more accessible code than what I wrote. It follows the accessibility guidelines that the web standards consortiums put out better than I did, because it just knows everything. And so those tasks where you can almost model it to a translation task, definitely going away. But knowing how things work under the hood, notice all the … I’m using specific tokens in this conversation. I’m saying, “CSS,” I’m saying, “Layout.” I’m naming styles. Knowing those tokens is going to be very important for you because you’re going to be able to influence the model and make it follow your intention a lot better.
And so the TLDR would be knowing how things work, the symbolic systems, and that will mean that you have to probably go into each subject with less depth. I have engineers at Vercel that know every single CSS property by heart. They know when they became available in a certain web browser, they’ve been tracking this specification. It’s almost like you’re an encyclopedia of knowledge of each CSS property. You probably won’t need that in the future, and probably that’s good, because you’ll free up your mind for more ambitious things.
Live Demo of v0
Lenny Rachitsky: No, that’s fascinating. So what I’m hearing is a skill that will continue to be valuable in the future, but I want to push on this a little bit, no matter how far AI gets, is understanding conceptually how software works, end-to-end-
Code Generation and Iteration
Guillermo Rauch: Yes. Absolutely.
Community Sharing and Large Projects
Lenny Rachitsky: … systems, databases, CSS is a thing. So I don’t know if you have kids, whether you have kids or not, just say they were trying to decide, “What should I learn to be, to thrive in this future?” Well, how would you summarize it? How far? Should they get into software engineering?
Guillermo Rauch: Great question, because I have five kids, and I’ve already enrolled them in this school of G, myself, in the sense that I’m already guiding them towards the things I think are going to be very useful to them. So understanding how things work needs, I think the ability to understand the fundamental logic behind things, incredibly valuable. So I push them really hard on math. “If you don’t know math really well, you’re out of my house.” Just kidding. But it’s a fundamental skill that I want them to know. Eloquence. I joke sometimes. Have you heard a meme of word cells versus-
Generating from Screenshots and Q&A
Lenny Rachitsky: Yeah- [inaudible 00:25:13]
The CSS Centering Problem
Guillermo Rauch: … shape rotators?
Lenny Rachitsky: Yeah.
v0’s Multidimensional Understanding Capabilities
Guillermo Rauch: So a shape rotator is someone that only has a math brain. You could argue the kings and queens of Silicon Valley have been the shape rotators, because those have been the jobs that have historically commanded the most status, respect, net worth, whatever. And then there’s the word cells, which is communicating, more of the liberal arts. There’s also the funny and awesome slide of Apple saying that they’re at the intersection of liberal arts and technology. I’ve always had immense amounts of respect for both sides of the brain, so to speak. But I think developing great eloquence, and knowing and memorizing those tokens that I talked about, knowing how to refer to things in that global mental map of symbolic systems will be highly valuable. And we have some tools to help people prompt better, but prompt enhancement and embellishment cannot replace thinking and cannot replace your own creativity that you want to infuse into the world.
So one of the things that v0 does is it tries and it succeeds, I think, at creating very nice designs out of the box. We try to infuse what we’ve learned about what do people think is typically good web design? We’ve influenced the model in that direction. But still we also don’t want the whole internet to look the same way. So your ability to steer the model with your words into those references, into those inspirations, is going to be very important.
I actually have an amazing anecdote. We hosted a design demo night at the Vercel HQ in San Francisco last night. And we were showing off how Vercel uses v0 to build v0 and to build Vercel. And one of our designers showed this amazing animation that he built, actually two amazing animations that he built. And in one of them it was this amazing triangle that had an animation that I didn’t think was possible to make, in that it was all built with v0. And he used the word turbulence to describe the effect that he wanted.
So I just want to call out that to people because the difference between knowing that word and not knowing it is getting that style into that beautiful triangle that he created that was interactive, and it’s probably going to end up in some landing page soon that you’re going to visit on vercel.com. And so developing eloquence and your linguistic ability I think is going to be very important. So I love my kids to know that. And I think that idea of sharing things, and putting yourself out there, and broadcasting to the world, so another thing that I do is I take my kids to hackathons, which just went to an awesome hackathon at University of San Francisco, USF. It was called the BLOOM Hackathon. And I took two of my kids and I wanted them to watch how people presented their ideas and we had a lot of fun. We also ate waffles and grilled sandwiches, which is a bonus.
So presenting and putting yourself out there. I mentioned in the beginning of the podcast when we were chatting, I’ve learned so much from you and your guests because you put out all these awesome little posts on X in these videos and these snippets of your interviews. And so the ability to present what you’ve built and put yourself out there, incredibly important skill in the future. Especially in a world where the marginal cost of producing software and new things are going down, you need to build an audience, you need to know how to talk to people, you need to build your own signature brand and style. And so maybe they’re a little too young for that one, but I guess taking them into hackathons probably back, is influencing their neural networks or pre-training data for the future.
From Weeks to Seconds
Lenny Rachitsky: I love it. They’re going to tell their friends, “My dad took me to a hackathon.” “What’s that?” So are you encouraging to learn to code? Because it’s interesting you mentioned-
Guillermo Rauch: Yes.
Prompt Enhancement and Best Practices
Lenny Rachitsky: … math, eloquence, presenting, and then, okay, so also learn to code.
Peering Into AI’s Mind
Guillermo Rauch: Yeah, I think again, learning how to prompt, learning how to code. With v0, we show you the code when we build things. So if you can build that mapping of maybe not learning how to code necessarily as an abstraction, if you do have a knack for it, I’m a big believer also that my five kids have super diverse personalities and inclinations, and I don’t want to be pushing for something that they wouldn’t want to do or whatever. And so learning to code in the abstract might be good for some people, but it may not be the fun thing to do for other people. And so what I would recommend is try to understand how things work. So if you prompt v0 or any other tool and it generates some code, try to build an understanding of what that does at a high level. It’s like actually maybe an extension even of eloquence.
One of the bets that I made early on with Vercel that really paid off is Vercel, maybe as a metaphor is like AWS in easy mode for a lot of people. We have a very large user base of people that would have otherwise not have been able to configure all of the ins and outs of the cloud, but do want the scale, flexibility, speed, et cetera. They want to create very high quality products and services. So I like to give the Super Bowl example because one of our customers, Ramp, had a 43X increase in traffic when their ad went live. The engineer that worked on that only needed to learn Next.js. Then they pushed their code to Vercel and now they can reach an audience of a hundred million people without a blip, a hundred percent uptime.
That superpower comes from, we made it as easy as possible to get started, and the language that we choose is actually very relevant in this story. JavaScript, in my mind, has always been almost like the English of programming languages. It’s a language that, if you learn it, you reach billions of devices. So it’s not a coincidence that when you ask ChatGPT, or Anthropic, or Gemini to build you web app, it uses these tools. It uses JavaScript, it uses React. It’s become the lingua franca of building products on the web. So I would say to my kids, “Look, if you do want to go deeper into programming, start learning there.” You can reach huge numbers of people. If you have a passion, I would say there’s going to be a fundamental engineering skill that’s going to be useful for decades or centuries to come, which is creating foundational infrastructure.
Think about LLMs in terms of, they’re like Oracles that can go and write software for you, but there’s a limit to how much software they can write. There’s context windows, there is time and computational constraints. So it’s very hard for an agent today to go and say, “I’m going to write a cloud from scratch. I’m going to write all the foundational services. I’m going to write the framework from scratch. I’m going to write the compiler.” No, the LM is orchestrating those tools and infrastructure. It’s not writing the compiler from scratch. Otherwise, you get into the Newton thing, in order to create an Apple, you have to create the entire underlying universe. No, the elements are interoperating with the universe as it exists. And so the engineers that learn foundational infrastructure are probably going to be extremely empowered still, for years to come.
Feedback Loops in AI Products
Lenny Rachitsky: There’s a world where you could argue ChatGPT will build the next version of ChatGPT. What I’m hearing from you is that’s a long ways away, if ever.
Generative UI Live Demo
Guillermo Rauch: Absolutely. This is why the common, the running joke is that all of these companies have, you go to their careers page. It’s like-
Thoughts on Vertical AI Tools
Lenny Rachitsky: Engineers.
Guillermo Rauch: … “Engineer, engineer, engineer.” The counterpoint of that is that at Vercel had, we have 150 engineers that can write code and 600 total headcount. Now we have 600 engineers. Some of the best things that I’ve seen created with v0 have not come from our engineering team. They’ve come from the marketing team, they’ve come from the sales team, they’ve come from the product management team. The product management team is fascinating, because now they’re actually building the product. So last night I saw how we’ve specced out in v0, think of it as like a live PRD, we’ve specced out how the new functionality for deploying a v0 to Vercel is going to work.
The amount of detail that was contained in that v0, I mean, we’re all just saying, “Well, just ship it. There’s nothing else to discuss.” It was animated, it was interactive. We were demonstrating the error state, the success state, the slow stream state. So it really empowers product builders not only with technical skills, I think that does a disservice to the tool. It empowers them to explore and augment their thinking with a lot of things that perhaps they wouldn’t have considered otherwise, a lot of states of the product they wouldn’t have considered otherwise.
Cultivating Good Taste
Lenny Rachitsky: The name v0 implies the product is for prototypes for the first attempt at stuff. And that’s definitely where all these tools are finding product market fit prototypes, PMs showing a thing working versus just design. Do you expect v0 and other tools to get to a place where you can build salesforce.com and scale it to billions of dollars? Do you-
Customer Contact Time Practices
Guillermo Rauch: Absolutely.
The Limitations of v0
Lenny Rachitsky: You do? Okay.
Guillermo Rauch: We already have an enterprise customer of v0 that only works with v0. All of their products, all of their features, all of their client communications are v0 native. Two days ago, I just heard anecdotally on X, someone tells me, “My brother just sold his first website to a client completely built in v0.” Yesterday at an investor conference, an investor walks up to me and says, “Two of my friends just got engaged on v0.” I was like, “Okay, v0 is a dating app now.” So the engagement website, the proposal, the wedding, it’s all v0 native.
So because we’ve integrated v0, the Vercel infrastructure, we can do that whole story that I just told you of like, “I have a website to build and I can get it in front of a hundred million people.” We can enable that for everybody now. And so the end-to-end full stack, v0 native, and built on this awesome fluid serverless infrastructure that scales to billions of people, all just from prompts, or screenshots, or just copying and pasting your PRDs into the tool.
Suggestions for Design Improvements
Lenny Rachitsky: Let’s help people be successful with v0. And then let’s also do a demo. But before we get there, let me ask you this. Imagine you could magically sit next to someone who’s about to use v0 for the first time and whisper a tip in their ear to be successful with v0. What would a couple tips be?
Guillermo Rauch: Number one is you can be as ambitious as you want in terms of what you ask the tool. If you can steer the tool towards some kind of inspiration that you have, you’re always going to get better results. If you don’t have ideas on what to build or what to prompt, I would recommend using the v0 community so that you can find something to fork to get started. I would say in some ways, if you have technical skills, this one is interesting, have some suspension of disbelief. It humbled me, I was saying about accessibility. So be open-minded about whether the tool actually knows some things that you might not know, and so focus more on the product description, focus more on what do you want the end user to experience? What do you want the product to do? And try to be open-minded about how well the tool can implement it. Those would be my main wants.
You also have to have a sense of iteration, I guess. Think of it this way, if you were working with a design firm or an agency that you’ve hired, you will go back and forth and say, “Try something else.” If you were coaching an engineer that’s getting stuck in something, you would say, “Try something else.” It’s amazing how many times I’ve gotten unstuck in v0 by just saying, “Just try something else.”
Letting AI Drive Design Creativity
Lenny Rachitsky: Just saying that as the prompt, not even giving direct-
Guillermo Rauch: Just saying that. I mean, the chat is like-
The Secret to Product Quality
Lenny Rachitsky: Wow.
Guillermo Rauch: “v0, we need to have … ” It’s like, “Yeah.” Like you have a one-on-one performance review with a tool. “Hey, way to talk, try something else. What you’re doing so far is not working. And it’s amazing.” One fitness function that I’m keeping in my head is I really want to find the thing that it cannot build with v0. So as part of the v0 community, I have my own profile. We’ll share the link with people. You can see six or seven things that I’ve built that I consider to be pretty impressive. So for example, I was flying from Tokyo to San Francisco. The internet was horrible. What I like to do during flights is I like to monitor our own flight while I’m on the flight. So I open Flightradar or whatever, and I was extremely bored as well.
And I noticed that Flightradar, I don’t know which one it was, Flightradar, there’s like four or five of them. They were very bloated. They had ads. They were not what I wanted the flight radar to look like. So I built my own during the flight with the worst internet connection that you could imagine in the world, integrated into a flight data API called Edge Aviation. So this is what I told v0, “You’re going to build the best flight radar on the planet.” I wasn’t prescriptive at how, so it used a tool called Mapbox and a JavaScript library called Leaflet. I didn’t tell him that, or her, I don’t know, v0, what it is. And subsequently, once we cooked on the design, which looks, I would say beautiful, I then got more ambitious and I said, “All right, let’s make it real now.”
And by the way, that’s actually how I would work. So it’s how I like to work. I like to work experience first, and that’s also how Vercel was built. “Let’s start with the front end. Let’s start with the planes on the screen.” And by the way, there’s a lot of subtleties, here. For example, there’s so many flights going on at any given time that there’s just too many. So I had to work with v0 on improving performance. And once again, I wasn’t prescriptive. I just said, “We have a lot of flights, chief. Let’s- “
How AI Is Changing Teamwork
Lenny Rachitsky: Did you say, “Chief?”
Guillermo Rauch: Yeah, I do say that a lot. And this is, I think when I shared it on X, it blew a lot of engineers’ minds, because it created a canvas-based, canvas is the sort of underlying rendering surface that very sophisticated products use like Figma. And it created this awesome overlay on top of the map that can render tens of thousands of flights at any given time. And then I told it, “Let’s make it a full stack application. Okay, plug into the flights’ API.” So that’s an example of we cooked and there was no limit. And so I’m always in the lookout. The service that I’m providing to the v0 community is I’m part of the team that is really trying to break this and say, “Can it not build something?” And even when it does build it, we’re very obsessed with quality and performance. It has to be real. That’s our commitment to our users.
Anyone Can Build Now
Lenny Rachitsky: And how much did this cost, how much time does this take to make something like this?
Guillermo Rauch: So the flight radar example or v0?
Lenny Rachitsky: Yeah, the flight radar example specifically just like very-
Guillermo Rauch: I mean, that one probably took less than two hours-
Lenny Rachitsky: Less than two hours?
Guillermo Rauch: … with the worst internet.
Lenny Rachitsky: Yeah, what-
Guillermo Rauch: Sorry, Japan Airlines, I love you, but you give me a hard time.
Lenny Rachitsky: And what did that cost? Like 10 bucks? What would you estimate?
Guillermo Rauch: I mean, I pay for the $20 v0 subscription.
Lenny Rachitsky: 20 bucks, okay, for a month. So it’s like a month, but you used it for two hours, 20 bucks.
Guillermo Rauch: Yeah.
Lenny Rachitsky: If you had engineers building this, how much do you think that would cost? How long do you think that would take?
Guillermo Rauch: I mean, weeks, easily. Easily.
Lenny Rachitsky: And that’s like tens of thousands of dollars.
Guillermo Rauch: Maybe the most cracked engineer at Vercel could knock it out in … without using any AI, could knock it out in a couple days. But then what about the design? What about me? Because I’m the bottleneck, not the engineer. And this is what’s amazing about this collaboration because I’m providing the product guidance. I’m saying, “Draw a dashed line between the … ” And by the way, v0 just blew my mind so hard. I said, “Draw a dashed line between the two destination airports.” And v0 said, “Well, I have to account for the spherical, or what is it, it’s a pseudosphere, for the curvature of the earth.” It’s like, “Okay, v0, super genius, whatever.” And so that’s what I mentioned about how you can go back and forth. It’s like a product copilot, it’s like an all-knowing being.
One of our users yesterday submitted feedback to the tool and it was positive feedback. They were very happy, what they were saying, “v0 is a super genius five-year old PhD with ADHD.” So you still have to, I’m not going to oversell this like, “It knows everything about everything. It gives everything perfect,” of course. But it has these sparks of brilliance. Really, truly, I think, I’ve been a big believer that AGI undersells what we are collectively building because we already have, all of this sparks of super intelligence. I don’t believe that v0 is an AGI if it knows everything about how to draw a dashed line according to the curvature of the earth and this high-performance map of airplanes. That’s just superhuman. And yeah, it’s a joy to use.
MUSIC: (instrumental music)
Lenny Rachitsky:
As you talk, it’s interesting, the way I’m thinking about this now, there’s almost like three core skills in building apps with AI. There’s figuring out what to build, there’s making it look good, like design, and then there’s getting it unstuck.
Guillermo Rauch: Yeah,
Lenny Rachitsky: And it’s interesting how these are going to move.
Guillermo Rauch: And coaching.
Lenny Rachitsky: Coaching it. Yeah. Or just like, “Oh, here’s the database error. I don’t know. It’s not figuring it out.”
Guillermo Rauch: Yeah.
Lenny Rachitsky: I guess does that resonate? I’ve never thought about [inaudible 00:46:16] before.
Guillermo Rauch: Oh, absolutely. In fact, I’ll tell you a little bit of a story of something. So even going way back in time, Next.js builds on React. React was this UI component library that Facebook created, actually with very similar goals. They had so many cracked engineers, and they had to help them collaborate on an enormous product surface. So they invented or at least pioneered, I would say the concept of this component as a unit of reusability, as a building block, as a Lego brick of how you build software. It’s no coincidence that LLMs love to work with React components, by the way. And one of the things that always has stood out to me about that model is it basically enables people to scale in how they work together. And one of the key design principles that they embedded into this thing, is they called it escape hatch.
The API, when when React doesn’t perfectly model your problem with its component system, they give you escape hatch. They say, “Okay, engineer. You are on your own now. There’s no guardrails.” And in fact, one of these escape hatches is called dangerously set inner HTML. They want the developer to know uncharted territory. But they did give people the API. That is a profound systems design engineering principle. And throughout my life, I’ve always thought about escape hatches.
One amazing escape hatch that v0 has is that you’re looking at the code that we’re generating with Next.js. You can edit it, you can even have other experts look at it. One thing that one of our demos last night came from this awesome company, Lumalabs. They’re creating one of the most amazing video models in the world, and they use v0 and Vercel extensively to build their application, their websites, et cetera. And the design engineer was talking about how he was on a v0 that had 120 or so iterations. So he was knee-deep into the latent space. He was in the matrix. And at one point he got stuck. But you know what he did? He copied and pasted the code that we generated and he gave it to ChatGPT o1 and ChatGPT o1 thought about the solution.
Honestly, I’d never even thought about this myself. I was so blown away. And it does speak to, I love that your third point of, “You need to learn a skill of how to get unstuck.” It’s like a profound life lesson. It’s just more a generic life advice you need to get. Facebook actually had a principle, “Don’t get blocked. Seek to get unblocked, seek help from other people.” What’s fascinating is that you can seek help from other AIs to get unstuck. And those escape hatches of actually understanding and seeing the code underneath, and even being able to say, “Okay, now let’s use Git. Let’s turn this into more of a hybrid project, not just prompts, but also traditional software engineering.” The fact that that door is open to you is extremely valuable.
Lenny Rachitsky: Let’s actually make the super concrete and show people what this actually looks like in v0. So pull up, we’ll share screen, and then we’ll do a little live demo. We’ll keep it brief. I find people are like, “Okay, I get it.” But we’ll make it fun and brief at the same time. There it is. I see it.
Guillermo Rauch: Beautiful. Okay.
Lenny Rachitsky: How can I help you ship?
Guillermo Rauch: Yeah, of course. We’re all about shipping. Okay, so as I mentioned, you write in English, you yap into the tool. I’ll say for a demo, let’s create a contact sales form in the style of … By the way, I had a typo. I don’t care. Let’s get it. It’s Elf Supreme, the clothing company for an online store. Now, I mentioned that sometimes people get blocked, there is a writer paralysis at this step. So we added enhanced prompt. So now you’re tapping into the latent space of the model, which has a random component to it.
And by the way, this is still not a substitute. It doesn’t contradict what I said earlier, knowing the meaningful tokens, knowing what the right style is, and what it’s called, and whatever is still highly valuable. So the first thing you’re going to notice is that as the model thinks, you can introspect its thinking. So we added this recently. It’s been mostly inspired actually by the Deepseek revolution. I would say.
So the fact that when you tell it, “Develop a contact sales form,” what is it going to do? We talked about escape hatches. Okay, it’s going to use shadcn/ui, it’s going to use Tailwind CSS, it’s going to use React. And this is your opportunity that if v0 is not doing exactly what you wanted, this is your opportunity to actually go and correct, or influence, or give feedback and so on. So you’re going to notice it spits out a bunch of files, and it gives me the thing that I wanted. I’m going to zoom out a little bit, here. A couple of things that stand out here that again, as an experienced engineer, I can point out. The underlying component system that it uses is the same component system that the best tools on the planet are built with. This is called shadcn. If you go to grok.com today, they’re using shadcn to build their UI. They’re using Next.js. You’re getting that caliber of code.
The other thing that it did is people on social media talk about this a lot. When you use a global shared component system with the world, you don’t want everything to look the same. So the fact that he was able to apply the style and he kind of knew what supreme looked like was kind of cool. But now I’m going to say, “Actually, because I am building a financial institution, make it more serious, make it in the style of let’s say Charles Schwab. Change typefaces.’ So this is the iteration process of like, “I’m going to go and give feedback to the model. I’m going to make it try different things.” So once that initial generation was already created, now the model is actually acting more as an editor. It’s going and making tweaks to what’s already been built.
And this actually scales to very large projects. You could have started with something much bigger. So in the meantime, I’m going to show you what Lumalabs created with v0, which is absolutely phenomenal. I learned about this last night. It already has 2,000 forks. I was telling you about the power of our community. So by the way, you can just click community here on the v0 sidebar. I’m going to fork it, because they generously shared it with the world. Notice all the incredible animations here? By the way, they shipped this to hire and attract talent to their company. I recommend them, by the way, you should, if you want to be a brand designer, take them into consideration. Notice that it’s an interactive, everything is AI generated, they used their own AI image generation tool to create these beautiful frames. These are all AI generated as well.
Lenny Rachitsky: Wow.
Guillermo Rauch: And it’s interactive. So there is the autoplaying functionality. This is actually a complex layout in animation system that they built entirely in v0. I was telling you that at one point they even got some advice from O-Wan, so shout out to OpenAI. I’m going to say, “Make it sepia style colors.” So this is an example of like, “Okay, I forked something. I already have a starting point.” My bank grade contact form is ready. In the meantime, another fun thing to do is you can start with a screenshot. So I’ll use another Next.js user as an example, which is fortune.com. Shout out to them. They built a slick website.
But let’s say that I’m actually wanting to break into the news business, so I’m just going to paste a screenshot. I could have also attached the Figma file. And I’m going to have, v0 already knows, v0 can answer questions as well about the engineering design product world. So I can ask v0, “What is a newsletter? Explain with a diagram. Use Lenny as an example.” So v0 is also a knowledge seeking tool. But we do strongly like, “Steer the tool to create things.” So if I paste a screenshot, as you can see, it’s cooking on creating a hopefully awesome news website. I specifically asked, because I think it’s funny, to explain a newsletter with a diagram, so v0 can create again, explanations, content, knowledge. The creator is Lenny, you were a former Airbnb product lead. I guess I should-
Lenny Rachitsky: It’s all- [inaudible 00:55:55]
Guillermo Rauch: … have used some examples from Airbnb, by the way. But let’s look at here-
Lenny Rachitsky: It’s all good.
Guillermo Rauch: … what it created with Fortune.
Lenny Rachitsky: Wow.
Guillermo Rauch: So notice that, I’m just noticing now the cyber should have been on the center. I’m going to zoom out a little bit. Let’s use the refinement tool to center this. I call this, by the way, one of the hardest problems in computer science is actually centering things.
Lenny Rachitsky: With CSS.
Guillermo Rauch: That’s right, centering a div. And in fact, look at it. It was a div. So notice that I did a precise inline prompt? And the difference between v0 and a lot of other tools is that yes, you do have the code and code is very important, but I call it code last rather than code first. You’re living in the product. So center that. Another website that I love also built with Next.js is Semaphore. So I really like their sepia style. So I’m going to say, “Apply this style instead, including- ”
Lenny Rachitsky: So you’re sharing a screen. So you used a screenshot to design, to build a site, and now you’re using a different screenshot to tell it, “Make it look like this.”
Guillermo Rauch: Yes.
Lenny Rachitsky: Very cool.
Guillermo Rauch: And so the idea is that v0 can Grok different aspects of what it needs to build. It can be functional aspects, it can be layout aspects. And one of the things that’s also very important to know is we influence the model. So a lot of the things that you would have had to prompt you might get for free. One that’s important to call out is responsiveness. So as an example, if I notice that if I do this, it’s going to make it work quite well on mobile, it’s going to give me that hamburger menu. I can now tell it like, “Apply that style to everything.”
In the meantime, I’ll show you, this is actually to me very, very impressive. And I don’t know why today I’m so fixated on the theme of sepia. But notice that not only did it change the background, I hope people can notice this. It applied it to the checkboxes and it applied a CSS. I’m assuming this is a CSS filter. Yeah, it applied a CSS filter. Just for the sake of it, because I’m a nerd, I’m going to look at it. But yes, it applied a CSS filter. Confession time, I actually didn’t know that there was a sepia function in the filter property of CSS. There were many ways to accomplish this. You could have also written the images or the videos to a canvas, and apply all kinds of algorithms, and whatever.
Lenny Rachitsky: I like that it did more elegantly than you would have.
Guillermo Rauch: Yeah, exactly. So that’s why you can’t be too opinionated with the tool. So another cool thing is I do like showing screenshots, but I do want to remind people that the idea is not to clone other people’s websites, necessarily. Right? It’s-
Lenny Rachitsky: It’s just a cool demo. It’s a simple way to show off what it can do.
Guillermo Rauch: Exactly.
Lenny Rachitsky: Yeah.
Guillermo Rauch: Take screenshots of your own things. Take screenshots of your art boards, take screenshots of things that people post in Slack, and also don’t hesitate add functionality.
Lenny Rachitsky: Incredible. Thank you for doing the demo. I’m just trying to imagine having an engineer I’m working with, asking them to do these things, and not only just how annoying that would be, like, “Make it sepia.”
Guillermo Rauch: Yeah.
Lenny Rachitsky: But just how much time it would take from, “Okay, do this thing, copy fortune.com.” It’d be like days, weeks. Here, it’s just-
Guillermo Rauch: Months.
Lenny Rachitsky: … check it out here. Months.
Guillermo Rauch: If ever.
Lenny Rachitsky: Yeah.
Guillermo Rauch: Maybe it never ships.
Lenny Rachitsky: That’s right. Well, something that I noticed that I loved at the beginning when you were doing the prompting and that prompt improvement feature is it basically is best practices to make it look good and look better. Which I think is one of the more interesting, I don’t know, levers to working with AI is it just has best practices to help you build things that are beautiful and also feels like there’s this opportunity of just helping you figure out if what you’re building is at all a good idea. “What is the problem you’re trying to solve?” It feels like there’s a PM1 pager step that should exist. Like, “How do you know this is a problem? What have users told you? How many people have told you this?” Things like that.
Guillermo Rauch: Yeah. There’s something to be said about the fact that over time we’re more and more peeking into the mind of the AI. That in itself is becoming a killer feature. So the Deepseek stream, the thinking tokens moment was a very big moment for our industry, I think. Because OpenAI did have the technology, but they decided that for competitive reasons, which, it’s a reasonable think to think, no pun intended, they were going to withhold it. And also it wasn’t clear that there was going to be product end user and product utility. But when Deepseek hit, it was very obvious that people really liked the idea of understanding how the AI thinks and influencing where it should go. We’ve gotten actually amazing feedback and bug reports where people actually specifically point out, “Look, this is where the AI went wrong. Please fix it.” So the more people we get on this product, the more thumbs up, thumbs down, the more user feedback we get.
And by the way, I’ll tell you for people out there building products, my number one guidance or piece of advice I would give to any startup founder was, “Create a lot of opportunities for people to give you feedback inside the product.” I drew inspiration from Stripe. And this was amazing for the early days of Vercel, there was a feedback button with a very slick inline form, with four emojis that would allow you to decide how you were feeling about the feature, the product at that very moment. And that would go straight into Slack. And we were building day in and day out, just streaming users’ thoughts right into our consciousness. And maybe we would get, I don’t know, tens, hundreds a day, especially the early days, maybe a couple a day and whatever. When you’re building AI products, it’s a constant stream of user feedback. So for people that are thinking about not building AI products, it’s going to be hard to compete with something that has such a tight feedback loop with users.
The whole idea is to capture users’ feedback so the next iteration of the model, the prompt, the fine-tuning, the examples, the rag is better. And one of the things that Vercel has done as a result of this insight is we’ve open-sourced a lot of what makes v0 work. So let’s say that you wanted to create the v0 for doctors as an example. You can go to vercel.com/templates, and you can clone a ChatGPT template that basically follows all of the best practices in the world for really high-performance, awesome UIs, and now you can go out and build your own AI products. We’ve also open-sourced the AISDK, which is the foundational plumbing of v0. It allows you to connect any model and generate UI from its responses, not just output text, but actually generate UI. So maybe because I love showing stuff, I’ll just really quickly show you this.
Lenny Rachitsky: Okay, cool.
Guillermo Rauch: Because I’m excited about it.
Lenny Rachitsky: Let’s do it.
Guillermo Rauch: So if you go to chat.vercel@ai super quick, you’re going to see this is the open-source ChatGPT demo that we’ve built. You can ask questions like old-school LLM. But also, you can ask, let’s actually finish this, let’s ask, “What is the weather in San Francisco?” We call this generative UI. It’s responding not with just plain text, it’s creating components as a result. Last but not least, and this is a v0 style opportunity, let’s ask it to help me write an essay about Silicon Valley. It’s going to create a canvas or artifacts style experience, and everything is generative, but also users can edit, refine, et cetera, et cetera, et cetera.
Lenny Rachitsky: This actually reminds me of something I’ve been thinking about. There’s all these startups that are building vertical AI tools. This is a little bit of a tangent, and there’s always this AI stuff for lawyers, AI stuff for doctors, nurses, and the pitch there is that these are going to be founders that know a lot about the specific problem in this-
Guillermo Rauch: Totally.
Lenny Rachitsky: … useless market, and so they’ll build the tools that are very specific to them.
Guillermo Rauch: Yeah, I’m absolutely convinced that expert AI tools are the future. There’s an amazing product being built on Vercel called chatprd.com. It’s the v0 for writing PRDs and it’s going to get a v0 integration soon so that you can write your PRD with AI and then you can create it with AI. That’s just an example of a vertical that you can go after. There’s also OpenEvidence. It’s like the ChatGPT for doctors, actually. There is an amazing startup building x-ray AI tooling. So the ideas I think are infinite, and what I’ve seen from users of AI at Vercel, for example, our legal team loves this tool called Get GC.AI. They could in theory go to ChatGPT to ask legal questions, but someone out there decided, “I’m going to build the best legal AI tool in the world.” It’s going to be up to date. I’m going to obsess about this problem.” The CEO herself is a lawyer, so it’s going to be hard to compete with that, I think.
Lenny Rachitsky: But here’s what I’m thinking. This is almost the opposite and I’m curious to get your take, but let’s not spend too much time on this, because this is a complete change in-
Guillermo Rauch: No, I love it.
Lenny Rachitsky: So you showed me the weather widget that you just built, basically it’s like a little mini app that the AI built as you’re talking to it. Is there a world where when AI, when AGI is far enough and approaching super intelligence? Can it just build you a Harvey, for example, in real time? “Here’s the best experience for a lawyer. Here we go. We got it for you.”
Guillermo Rauch: Totally, totally. I believe that eventually, yes, but humans will always want to have some guardrails. The reality is that Get GC is taking a double job. One is making the best tools for lawyers possible, but also putting their weight behind it, saying, “We’ve actually used this and we believe that this is what the future should look like.” There is a sense of direction and opinion about things and I think left to its own devices, AI, I don’t know, this is the double-edged like prompt embellishment. AI doesn’t always know exactly what we want or what we need. It’s still very much a copilot, a partner, an assistant. It’s not really running our lives, and I don’t know that we even would want that, ultimately.
Lenny Rachitsky: Okay, I’m going to go in a whole different direction, which is taste. We hear this word taste all the time. It feels like a thing that people are always suggesting. This will continue to be an important skill, to know what is good, basically to know what people are likely to find valuable and good. And I know clearly you have great taste. You’re building incredibly beautiful products, v0’s clearly, it’s like the most beautiful by default builder out there, as we’ve seen. So in terms of building taste, people are always like, “How the hell do I do that? I have great taste. I know I do. I don’t need to.” How have you built taste? How do you think you build taste and any advice for folks that are trying to improve their taste?
Guillermo Rauch: Yes, I think it’s extremely important to try lots of products. You need to get yourself out there. I think it’s very important to go back to that, get into the world, ship things. Don’t be hesitant of self-promotion in a way. So being very honest with yourself, building something, getting it out there, see how people react. Go back to the drawing board. I think it’s about exposure. At Vercel we have one of our internal operating principles as increasing exposure hours. Try to quantify how much time you expose yourself to watching how people use your products, even to watch how people use other products, and you’ll develop that muscle. Taste, sometimes I think we think of as this inaccessible thing that, “Oh, that person was born with taste.” I see it as a skill that it can develop.
And again, the AI will help you a lot here because we try and capture some of the universal principles of it. But there’s also trends in the world. I’m not a super couture guy, but you can see that every year Paris Fashion Week has a theme to it and there is some innovations, there have some breakthroughs, whatever. And so trying to stay at the frontier or even try and define the frontier as well is certainly very exciting.
Lenny Rachitsky: I love how doable this is, increasing your exposure hours. Basically what I’m hearing is, “Use the best apps.”
Guillermo Rauch: Yes.
Lenny Rachitsky: There’s a feedback cycle component to it. Just like, “Show people the thing.”
Guillermo Rauch: And understand these nuances. Right?
Lenny Rachitsky: Mm-hmm.
Guillermo Rauch: So I actually recently created, I published it to my community, [inaudible 01:10:01] v0. I created a ChatGPT style interface inspired by Grok. And I captured a few things that Grok does that are just so smart. So on mobile web, when you press enter on their input, they default to creating a new line. Because they know that the way that people are used to submitting things on mobile is not by hitting enter, like we would do on a desktop computer. You can tap the little icon and your message goes out. On desktop, they inverted it. When you press enter, you’re expected to submit. And I think if you got a new line, I think a lot of people would get frustrated that most people don’t know that they can press command, enter to submit and whatever, and it slows everything down. And you can basically prompt for those things.
But you have to pay attention to the details and you have to decide what you want to see in the world. And sometimes that means either defining best practices, or seeking the best practices, and learning from others. Another aspect of exposure hours is that you tend to overrate how well your products work. It’s very important to give your product to another person and watch them interact with it, expose yourself to the pain of reality. And the more you submerge yourself in the real deal, nitty-gritty of what happens when people use your interfaces and whatnot, I think you you’ll come out stronger, more grounded, hopefully more humbled.
Lenny Rachitsky: We don’t like pain, though, and I like that this is a push, “Create some more pain in your life. Show people the thing you’re building.” Do you have a heuristic or number of how many exposure hours per week, per month you want your team to have or is it just more is always better?
Guillermo Rauch: Yeah, I’m more is always better. I mean, because the inertia is to get inside your head, and the inertia is to think that you know everything, and assume that everything is going good, and, “There are no errors. Of course it’s fast. It worked on my machine.” I think it’s always a push for more. I do sometimes little things like I asked my team to color my calendar. So I say I have to have a certain amount of one-on-ones with my team represented on my calendar, kind of like meetings so that I can sync with people and see how the company’s doing. Then I want to have customer meetings. And during those customer meetings I push myself to use the products. In fact, with our enterprise customers, something that I do is I try to forget how things are built, what feature of [inaudible 01:12:41] or Vercel they use and whatever. I just frequently use their products. And I want the product to be great, that’s all. And then I could try to work backwards.
So a form of exposure hours for me is seeing what kind of success our customers are having in the real world. But again, it’s just heuristic. Maybe one third of my meetings this week where customer meetings I tried and watched them do. Another really quick one is we invite people frequently to demo how they use the product live, sometimes to the executive team, sometimes to the whole company. And we always inevitably discover something interesting from the customer about maybe there is something that they’re in pain about that we didn’t know about, or maybe something was not as intuitive as we thought.
Lenny Rachitsky: And I find with these sorts of things, when you do them, when you talk to customers, you have them show how they use the product. You always like, “Why have I not done this more often? What am I thinking?” It’s just so mind-blowing usually.
Guillermo Rauch: Yes.
Lenny Rachitsky: I want to talk about limitations of v0 at this point. So what should people know about just what v0 can’t do? If you have an existing code base, can you plug it in and start doing stuff? Or is that coming? What else should people know? Just like, “Okay, it’s not going to do this yet. But- ”
Guillermo Rauch: Yeah, you can import code bases through zip files and Git is coming very soon. It can do full stack development, it can connect to APIs. In the next couple of days, maybe even before this podcast is out, we’ll have these very tight integrations so that if you need a database, or if you need an AI model, or if the AI decides it needs that, it’ll just seamlessly install it from the Vercel marketplace. And the Vercel marketplace has already curated some of the best infrastructure products in the world to store data, to search data, et cetera. So it’s going to make the product even more powerful. I’ll say again, I did that exercise, and I do that exercise every day of I have a wild idea and try to see if it can come to life. It’s very powerful so far. AIs are still very much a work in progress. They can make mistakes. We have it as a little disclaimer underneath the input. You will find errors, our fitness function. And we’ve seen such a strong correlation between user love and retention.
v0’s actually their retentive product compared to other AI products that I’ve built in the past, or little demos that we’ve done, or whatever. People subscribe and use it every single day, and are very, if they notice a bug, they’re very, very jittery about it because they’re depending on it day in and day out. But I’ll say errors are still possible. Every once in a while you might get a runtime error or whatever, but a lot of the technology that we’ve added is so that v0 is very agentic. It has a lot of agency in how to act. So you’re going to see very frequently that if it runs into errors, v0 tries to solve them itself.
And then last I will say, when products get really big, AI today is just not as good at dealing with massive code bases. But going back to that idea of the React component, because we break down things into files and components, we tend to do quite well in that dimension. In fact, one thing that Next.js was known for is that in order to start a project, you just create a file, and Next.js will route to that page. If anyone is familiar with PHP, it’s like how PHP worked. And so it’s so good that LLMs are good at working with files now, because it fits very naturally into our world. And if you can scope down when things get really big, if you can give it a smaller task, to work on a specific component or a specific file, you decrease that likelihood of the LLM not being able to reason over very, very, very long context windows.
Lenny Rachitsky: I want to go back to design. We talked about how v0 is really good at just great design by default. To lean into that more, if someone wants to improve the design of their product, most people are not designers, they don’t really know how to make it look good. They don’t know what to ask for. Any just tips and best practices for making their app even better, look even nicer?
Guillermo Rauch: Yeah, it was really interesting. The other day I met with a CIO of a large bank who, on the side does a lot of coding, or tries out new technologies and whatnot. And I showed him v0. And he immediately became a v0 addict. He texts me every day with feedback. He moved two websites of his own from another website builder type provider to v0 and Vercel, deployed them, gave them a domain name, they’re live in production. And then he said, “Look, I have this challenge. I have this music festival that I organize with a couple of friends and this is what the designer gave us.” And he had this brochure. It looked very much like a print style design. And so he gave that to v0 and the first result, he was dinging me for it. He’s like, “Look, this doesn’t look good.”
And then, because I have experience with the tool, I said, “Why don’t I just give it the feedback?” Literally you were asking me yesterday, earlier, some of the things that I’ve learned with the product or the best practice, what would I recommend if it were sitting next to someone? Not only, you should not hesitate to give the AI feedback, it’s so interesting, dude. Sometimes people will press a feedback button to tell us what they wanted v0 to do, and literally all we had to do, in many cases is just, “Can you just tell v0 that?” And so he sent me this message saying, “Yeah, I just don’t like the design.” And I gave him back a prompt that I would’ve given. I don’t know what I said specifically, but it’s like, “Make it more jazzy, make it more, make it pop.”
And so trying, and again, it goes back to try to draw inspiration from variety that the AI already knows about. So in a couple of prompts, we ended up something that was in his mind, better than the original print design of that brochure, that concert lineup. And at that time, and again, I’m even learning about what v0 is capable of and the best ways to use it. But with design, I think unleashing its creativity, and seeing things, and playing with it is definitely super helpful.
Lenny Rachitsky: So one thing I’m hearing here is just tell it, “Make this look better.” Or, “I don’t like- ”
Guillermo Rauch: “Make it pop.”
Lenny Rachitsky: “Make it pop.”
Guillermo Rauch: You can, totally. And if you can use tokens that are relevant, so, “Neobrutalist, minimalist, newspaper-like, vintage, make it look like a telegram.” You can try and reach for things that maybe would not naturally come to mind and you’ll be surprised about how well it can transfer those ideas into reality.
Lenny Rachitsky: Incredible. Too easy. Maybe to close out our conversation, we’ll see where this topic goes. I had this tweet that I loved, that I super resonate with, “The secrets of product quality is blood, sweat, and tears.” I completely agree. I think that’s why I think my newsletter’s been successful. I spend so much time on every newsletter post, more than I think anyone spends on a newsletter post, like 10, 20, 30 hours. And that’s why I think it works. Is there anything more behind that tweet, anything you’ve learned in just the importance of working hard, I guess to great, great stuff?
Guillermo Rauch: Yeah, I mentioned exposure hours is a good example of like, “Look, it can be painful. It can be painful to see your baby break in front of everyone and noticing all the … ” The other thing is that a great product is made up of a thousand little details and so you’re never really done. There’s a humility that comes from the process also of why the best product builders will say nine nos for every yes. Because when you say yes, it’s like adopting a puppy. A feature is like adopting a puppy. It grows into a beast that you have to take care of, and it’s very demanding and loving. But also it’s a lot, and poops everywhere. So you have to have a creative restraint. And while you also have to have a give, you have to withhold, sometimes with the respect of the real world complexity that emerges.
A little thing that I kind of obsess about. I’ll give kudos to the Midjourney team. I really love how Midjourney works on mobile web. I don’t know if they have an app yet, like a native app, but their mobile website is phenomenal. And to get it to be that good, by the way, it’s possible. It’s actually possible to make great things on mobile web. But it needs that sense of love, and restraint, and obsession, and testing a lot, and using your own products a lot. Dogfooding is a great mechanism, obviously. So we use the heck out of Vercel and v0 to make Vercel and v0, and hopefully that helps us do better. But there is a lot of blood, sweat, and tears in the process.
Lenny Rachitsky: Yeah. You can tell how much you use the product. It comes through in everything you say. Let me actually ask about this. You talked about how you said you have 600 engineers?
Guillermo Rauch: No, 600 people, total and a hundred-
Lenny Rachitsky: 600 people total?
Guillermo Rauch: … 150.
Lenny Rachitsky: How is AI changing the way they work? Is there anything there? Because I feel like you guys are the cutting edge of how products are built. What’s happening? Is it just everyone’s on Cursor and v0 to build stuff?
Guillermo Rauch: Yeah. Yes, but actually it’s more profound. I think it’s the, everybody can ship, it’s the, we build with AI principles in mind. I actually give a shout-out to the Lumalabs engineer who said, “Well, I’ll use AI for everything. I’ll use AI also to generate the images for the website.” And I’m seeing, for example, our designers that are working on our next conference generate all of the animations with video models. I’m looking at, our marketing team are creating demos of how the infrastructure works with v0 that are better than any static diagram or landing page that I’ve ever seen. One of my most viral xeets or X posts is something that one of our designers created, which explains how our compute infrastructure works with an interactive demo. And until he created that, by the way he designed, it and created, and we shipped it all in the tool, first of all, it wasn’t part of his day-to-day job to do that.
v0 is making you such a powerful generalist that you can step out of your comfort zone of like, “Well, my job was to do only this.” You can just create. We have a ritual every Friday, we had it this morning, called Demo Fridays. And so it’s very important to create the space for people to step out of that comfort zone and use AI. So us giving permission to people to build and ship things is part of that cultural backdrop that makes these things possible.
We had a demo today as part of the Demo Friday of our VP of sales engineering also creating an amazing tool that he’s going to use to help prospects understand Vercel with v0. So I’ve heard from DevOps and infrastructure engineers how much they use tools like Cursor to work on the low levels of the Vercel infrastructure. So I think very quickly we’re seeing AI being embedded everywhere. I just heard a product request from a customer that was saying, “Okay, Vercel, you sell domain names. Let me come up with new domain ideas with AI.” So I just see a future where AI becomes synonymous with software. I do look forward to it because we need to stop talking about AI at some point. I foresee, it’s probably not going to happen, but it is useful to remind people that AI equals software now, and we are a software company. We build software, and we use software to build software.
Lenny Rachitsky: And AI is just a part of that.
Guillermo Rauch: Yeah.
Lenny Rachitsky: Guillermo, what a beautiful way to end it. Is there anything else you wanted to mention? Anything else that you want to leave listeners with before I let you go?
Guillermo Rauch: I’ll leave you with my vision of the future, which is we have this billboard in San Francisco, which is, “Everybody Can Cook.” It is also part of the Ratatouille film, one of my favorite movies. I look forward to a future where everybody can get their ideas out there. If you can dream it, you can ship it. And also that when you use products and when you see the creations of other people and the things that they put out into the world, that we are collectively making the world better. So anything you experience hopefully gets faster, higher quality, fewer bugs as we go along. And I think we’re all contributing to that. And I look forward to that and I look forward to everyone’s feedback on how Vercel can play a part in that future.
Lenny Rachitsky: So to build on that, where can folks find you online? Should they just go to vercel.com, visit v0.com?
Guillermo Rauch: Yeah. And go to v0.dev-
Lenny Rachitsky: .dev.
Guillermo Rauch: … to get started. I did mention if you want to build your own v0, this is more advanced, but check out our templates on vercel.com/templates. And also I’m BrouchG on X, so you can DM me or tweet at me at any time.
Lenny Rachitsky: Amazing. Guillermo, thank you so much for being here.
Guillermo Rauch: Thank you, Lenny. It was so fun.
Lenny Rachitsky: Bye, everyone.
MUSIC: (instrumental music)
Lenny Rachitsky: Thank you so much for listening. If you found this valuable, you can subscribe to the show on Apple Podcasts, Spotify, or your favorite podcast app. Also, please consider giving us a rating or leaving a review as that really helps other listeners find the podcast. You can find all past episodes or learn more about the show at lennyspodcasts.com. See you in the next episode.
Glossary
| English | 中文 |
|---|---|
dangerouslySetInnerHTML | dangerouslySetInnerHTML(React 中的一个特殊属性,用于直接插入 HTML) |
| AGI | AGI(通用人工智能) |
| artifacts | artifacts(Claude 推出的可共享内容块功能,保留原文) |
| Bolt | Bolt(AI 代码生成平台,保留原文) |
| box model | box model(CSS 盒模型) |
| builders | 构建者 |
| canvas | canvas(OpenAI 推出的交互式编辑画布功能,保留原文) |
| code last / code first | code last/code first(先产品后代码 / 先代码后产品的工作理念,保留原文) |
| copilot | copilot(辅助驾驶/智能助手,在此指 AI 辅助角色,保留原文) |
| cracked | 顶尖的(俚语,形容极其出色的工程师) |
| design engineering | design engineering(设计工程,设计与工程的交叉领域) |
| Edge Aviation | Edge Aviation(飞行数据 API,保留原文) |
| escape hatch | escape hatch(逃生舱口,React 中的底层 API 机制,允许开发者绕过框架限制) |
| exposure hours | 接触时长(exposure hours) |
| Figma | Figma(设计工具,保留原文) |
| fitness function | fitness function(优化中的适应度函数,此处比喻评判标准,保留原文) |
| flexbox | flexbox(CSS 弹性盒子布局) |
| Flightradar | Flightradar(航班追踪应用,保留原文) |
| fork | fork(代码分叉/项目复制,保留原文) |
| full stack | 全栈 |
| generative UI | generative UI(生成式 UI,根据 AI 响应动态生成界面组件) |
| Get GC.AI | Get GC.AI(面向法律行业的 AI 工具,保留原文) |
| Grok | Grok(源自科幻小说,意为深度理解,此处作动词使用,保留原文) |
| Guillermo Rauch | Guillermo Rauch(Vercel 创始人兼 CEO,保留原文) |
| hamburger menu | 汉堡菜单(移动端常见的折叠菜单图标) |
| Harvey | Harvey(面向法律行业的 AI 平台,保留原文) |
| inline prompt | 行内提示(inline prompt,针对特定代码片段的局部提示) |
| Ivan | Ivan(Notion 联合创始人 Ivan Zhao,保留原文) |
| latent space | latent space(潜在空间,机器学习中的隐含表征空间) |
| Leaflet | Leaflet(JavaScript 地图库,保留原文) |
| Lenny Rachitsky | Lenny Rachitsky(播客主持人,保留原文) |
| lingua franca | 通用语言(lingua franca) |
| Lumalabs | Lumalabs(AI 视频生成公司,保留原文) |
| Mapbox | Mapbox(地图平台服务,保留原文) |
| marginal cost | 边际成本 |
| Neobrutalist | 新粗野主义(一种视觉设计风格) |
| Next.js | Next.js(由 Guillermo 创建的 React 框架,保留原文) |
| OpenEvidence | OpenEvidence(面向医疗行业的 AI 产品,保留原文) |
| Oracle | Oracle(在此比喻为可代为执行任务的预言机/神谕,保留原文) |
| Paris Fashion Week | 巴黎时装周 |
| PM one-pager | PM one-pager(一页纸产品文档,产品经理的简要需求概述) |
| PRD | PRD(Product Requirements Document,产品需求文档,保留原文) |
| prompt enhancement | 提示词增强 |
| RAG | RAG(Retrieval-Augmented Generation,检索增强生成) |
| React | React(前端 JavaScript 库,保留原文) |
| shadcn | shadcn(React UI 组件库,保留原文) |
| shape rotator | shape rotator(指偏重数学/逻辑思维的人,源自网络梗,保留原文) |
| social coding | social coding(社交编程,GitHub 早期标语,保留原文) |
| social product building | 社交化产品构建 |
| Socket.IO | Socket.IO(Guillermo 创建的实时通信开源库,保留原文) |
| spec | spec(在此用作动词,意为编写详细规格说明,保留原文) |
| Tailwind | Tailwind(CSS 样式框架,保留原文) |
| TAM (Total Addressable Market) | TAM(可寻址市场) |
| taste | 品味 |
| thinking tokens | thinking tokens(AI 模型在推理过程中生成的思维链 token) |
| transformer 架构 | transformer 架构(深度学习架构,保留原文) |
| under the hood | 底层工作原理 |
| v0 | v0(Vercel 推出的 AI 驱动前端开发工具,保留原文不译) |
| v0 Community | v0 Community(v0 的社区分享功能,保留原文) |
| word cell | word cell(指偏重语言/沟通能力的人,源自网络梗,保留原文) |
| zero links | 零链接(zero links) |
Reformatted by reformat_english.py
现在人人都是工程师:深入 v0 创造一亿构建者的使命 | Guillermo Rauch
逐字稿
v0 的直观印象
Guillermo Rauch: 我们的一位用户昨天提交了反馈,他们说:“v0 就像一个超级天才的五岁 ADHD 博士。“我不想过度吹捧。它无所不知,而且会迸发出天才般的灵感火花。
Lenny Rachitsky: 你认为对于产品经理、产品团队来说,事情会发生怎样的变化?
Guillermo Rauch: 人们可以变得更加全栈。想象一下,一个设计师能交付完整的产品,一个产品经理能做原型并直接上线。我们不应该给自己设限——限制我们能构建什么、能交付什么、能梦想在这些网页界面上实现什么。
Lenny Rachitsky: 很多人都在想,“工程师会怎样?我还要学写代码吗?”
Guillermo Rauch: 很多过去作为专业分工存在的编程工作,我认为正在某种意义上逐渐消失。它们本质上是翻译任务,但了解底层工作原理对你来说将非常重要,因为你能更好地引导模型,让它更准确地遵循你的意图。
Lenny Rachitsky: 我们总是听到”品味”这个词,在构建品味方面,人们总在问”到底怎么培养?”
Guillermo Rauch: 品味,有时候我觉得我们把它想成了一种遥不可及的东西,“哦,那个人天生就有品味。“但我认为它是一种可以培养的技能。我觉得大量尝试产品非常重要。我们内部有一个运营原则叫”增加接触时长(exposure hours)“。试着量化你花多少时间去观察人们如何使用你的产品,你就能锻炼出那种能力。
Lenny Rachitsky: 你认为最大的变化会发生在哪里?
Guillermo Rauch: 我们需要在某个时刻停止谈论 AI。我看到的是一个 AI 与软件同义的未来。我们构建软件,并且用软件来构建软件。
嘉宾介绍
Lenny Rachitsky: 今天的嘉宾是 Guillermo Rauch。Guillermo 是 Vercel 的创始人兼 CEO,Vercel 旗下有一款产品叫 v0,它已成为全球最受欢迎的 AI 网站构建工具之一。他同时也是一位传奇工程师和开源贡献者,创建了一些全球最受欢迎的 JavaScript 框架,比如 Next.js 和 Socket.IO。他既是一位构建者,也在打造一款将改变我们所有人构建产品方式的产品。这期节目非常精彩。如果你想真正理解产品开发将如何随 AI 的崛起而改变,以及你现在应该重点培养哪些技能,我强烈推荐你继续收听。
Lenny Rachitsky: Guillermo,非常感谢你来到这里。欢迎来到播客。
Guillermo Rauch: 谢谢邀请。长期听众,第一次参与节目,很高兴来到这里。
v0 的受欢迎程度
Lenny Rachitsky: 太感谢了。好,我知道你看到了——我最近做了一项调查,问我的读者”作为产品构建者或产品经理,你在日常工作中最常使用哪些工具?“在工程工具类别中,v0 排在 Cursor 和 GitHub 之后,是人们最常用的 AI 构建工具。显然,大家很喜欢你们在做的事情。
Vercel 与 v0 的定位
Guillermo Rauch: 是的,看到这个结果我们非常高兴。对我们来说,在某种意义上我们还处于旅程的起点,因为 v0 是一个相对较新的工具,但 Vercel 这家公司已经存在一段时间了。我向大家解释的方式是:“任何时候你使用互联网,如果有一个网站或 Web 应用非常快、非常创新,那它很可能运行在我们的平台上。“我们就在那里。我们在大规模运行大量网站。如果你最近看了超级碗,有三家不同的公司在推广基于 Vercel 构建和交付的数字产品。所以你不仅可以在 Vercel 上部署和构建你的想法,它们还能扩展到巨大的流量和庞大的受众。
很多人因为我们创建的 Next.js 框架而认识我们。这是一个基于 React 技术的开源框架,由 Meta 开源,驱动着互联网上一些最具创新性的产品。所以当你使用 Claude、Grok 或 Midjourney 时,你用的就是 Next.js,用的是 Vercel 的技术。而 v0,我们试图做的事情是——说起来挺有意思,因为你把我们放在调查中的构建或开发类别里,这很合理——但我们在 v0 上想做的,是帮助更多人参与到软件构建中来,扩大真正在交付产品、交付真实产品的受众群。与此同时,就像你使用 ChatGPT 一样,我们希望 v0 极其易用,并且它生成的输出尽可能精致、逼真。你用 v0 创建的东西,希望能达到互联网上那些最大最好的网站所设定的标准。
v0 的起源
Lenny Rachitsky: 我本来想问你 v0 是怎么从 Vercel 中诞生的,我的理论是你们坐在一起想”怎么让更多人建网站?“然后说”那就帮他们轻松搞定。“这本质上是 Vercel 的 TAM(Total Addressable Market,可寻址市场)扩展,对吗?
Guillermo Rauch: 没错。
Lenny Rachitsky: 或者说——
开发者工具之路与 v0 的起源
Guillermo Rauch: 某种程度上,我一直在做的事情——不仅是做 Vercel 这近十年,也许是我一辈子——因为我作为开发者的优势有点”元”:就是创造开发者工具。我创建了一批非常流行的开源框架。Next.js 是其中之一,但在此之前,我在上一段”人生”中还创建过一个工具叫 Socket.IO,它是一个实时通信机制。比如说,每次你使用 Notion 的时候——我想你采访过 Ivan——当 Notion 需要向其他协作者实时广播消息时,他们使用的正是我为 Socket.IO 构建的实时引擎。
所以初创公司和大公司过去使用我的产品,原因在于我把一些非常困难但又非常吸引人的事情变得简单了。过去是实时通信,后来是用 Next.js 在 Web 上构建前沿应用。我尽可能让这一切变得简单,但你仍然需要掌握开发技能。对我们来说,机会在于:如果大约有五百万 React 开发者——React 是我们使用的库引擎——大概有两千万 JavaScript 开发者,那么有多少产品构建者,即有志于构建产品的人存在?我粗略估算,下限是一亿。
我来告诉你这个数字的来历,还挺有意思的。Slack 大约有一亿月活跃用户。你在 Slack 上做的事情就是进入各个频道和人聊天。其中很多人正在构建数字产品,他们互相讨论想在世界上看到什么,通过共享频道与客户对话——我很喜欢那个功能。我们和很多 Vercel 客户交流,他们告诉我们:“我想做这个,我想看到那个。我要这个功能,我要那个东西。“所以 v0 的机会在于:不是说你不再需要和别人交流了,而是如果你能对着电脑说,然后看到事情发生——构建原型、构建产品的第一个版本、构建 demo、构建全栈产品——构建并发布,会怎样?
所以 v0 的灵感与 Vercel 的使命非常自然地契合。但具体来说,它的起源故事是这样的:当 ChatGPT 出来的时候,我们发现它非常擅长写我们工具所使用的代码。ChatGPT 一上来就擅长 JavaScript,擅长 Tailwind——一种 CSS 样式技术——擅长 Next.js。这又体现了开源的力量,我们的工具已经在互联网的训练数据中了。那个长期的开源押注和远见真的得到了回报。正因为模型如此擅长写这类代码,v0 的想法自然浮现了:“如果我们能构建一个用来搭建 Web 产品的 ChatGPT,会怎样?“
模型选择与技术栈
Lenny Rachitsky: 说到这个,我之前其实不知道。我之前请过 Bolt 的 CEO 上播客,他谈到 Claude 在某种程度上解锁了他们正在做的事情。你们是基于 ChatGPT 和 OpenAI 的东西吗?
Guillermo Rauch: 我们最初用的是 OpenAI,并且一直使用多个模型的组合。有趣的是,现在 Twitter 上有一个百万浏览量的帖子,大家在尝试逆向工程我们用的 prompt 和模型。
Lenny Rachitsky: 我在 Reddit 上看到了。
Guillermo Rauch: 他们发现里面有各种专精不同任务的模型,还有一个模型流水线,一个模型可以把工作交给另一个模型。包括 OpenAI、Gemini、Claude,但我们比 Anthropic 更早开始。我要把功劳归于 ChatGPT——它的实用性如此通用,而且从第一个版本开始就非常好用。事实上,如果我没记错的话,v0 的第一个原型可能甚至早于 ChatGPT,或者至少我们当时跑的是 GPT-3.5。所以我们一直有这个愿景:通过 LLM 为 Web 解锁更多能力。顺便说一下,关于为什么语言模型恰好如此擅长 Web 设计和 Web 开发这个任务,有很多非常有趣的技术细节,我们可以深入聊。但对我们来说,时机堪称完美。
v0 的规模与社区
Lenny Rachitsky: 我想回过来聊这个,这确实是个很好的话题。但让我先问几个其他问题。关于 v0,目前规模如何?我们听到这个领域各种数字满天飞,你能分享一些 v0 的进展吗?
Guillermo Rauch: 我可以分享的是它正在指数级增长,截至目前已有超过 130 万用户与 v0 互动。昨天是我们有史以来最大的一天,而今天又创新高。目前我们已经是大多数云服务商的最大客户之一,正在触及这个星球上每一个 GPU、每一个 LLM 基础设施的极限。而最让我兴奋的是我看到人们在 v0 上构建的东西。大约一个月前——可能还不到一个月——我们发布了一个叫 v0 Community 的功能,已经有两万个提交了。我相信你听众中很多人都用过 Figma,我非常喜欢 Figma 的一点是 Figma 文件——我可以去抓一个现成的起点,可能是一个 logo,可能是一个菜单,你可以从别人已经贡献的东西开始,就像开源的精神一样。
不到一个月的时间里,我们已有超过两万个社区提交。我们由此学到了很多关于构建 AI 产品的经验,并且持续开源和分享我们的最佳实践。但我确实学到的一点是:prompting 看起来像是世界上最简单的界面,因为它就是一个输入框,你往里面放文字就行了。但有时候会有一种”写作卡壳”的感觉。所以我最喜欢看到的一件事——我现在就在看首页——你能看到社区提交的随机排列,有 1200 个 fork,1500 个 fork,6000 个 fork。每一次都是人们在说:“与其从零开始,不如从别人已经构建好的应用开始,然后通过 prompt 修改它,把它变成自己的。”
Lenny Rachitsky: 所以社区提交就是人们在 v0 上构建应用并分享他们的作品?
Guillermo Rauch: 对。
Lenny Rachitsky: 你可以看代码然后 fork?
Guillermo Rauch: 它正在变成一种复利投资。有人分享一个东西,另一个人拿过来改进它,也许到那个时候你就直接用了。在很多方面,我把它看作 GitHub 的下一个演进。GitHub 对软件开发来说是一个奇迹——不知道你还记不记得,GitHub logo 下面最初那句小标语是 “social coding”。它对构建软件产生了民主化的效果,但你仍然需要会写代码。所以我们的目标在某种程度上是社交化产品构建——每个人都应该能够”烹饪”并分享他们正在构建的东西。
Lenny Rachitsky: 我之前没这样想过,但我很喜欢它与你的开源根基如此紧密相连——人们在 v0 上构建,然后分享他们构建的东西,其他人又可以在这些基础上继续构建。它有点像一种开源 AI 构建体验。
Git commit 与 v0 的范式逆转
Guillermo Rauch: 这很迷人,对吧?在很多方面,如果你想想 Git commit,Git commit 非常有趣。如果你观察工程师的工作方式,他们会审视一个问题,在代码编辑器里花大量时间,最后说,“我觉得搞定了,我觉得修复好了。“然后他们产出一个 Git commit。他们是在完成工作之后,才总结自己的意图和所做的事情。v0 把这个过程反转了。Git commit 变成你走进聊天界面说,“请把这个按钮的颜色改一下,点击的时候把这个表单保存到数据库。“你是从意图出发,输出的是代码。
作为附带效果,我们还可以帮你生成 Git commit。这个功能还没上线,但接下来几天就会发布。先给大家透个底。所以我喜欢这个想法——我们可以在平台上创造一个涵盖所有软件构建的超集。这也忠实于我创立 Vercel 的初衷。我们的使命是让全世界都能构建和发布最好的产品。让尽可能多的人获得这种能力,对我来说非常令人兴奋。
产品构建的未来:消除协作壁垒
Lenny Rachitsky: 那我们来聊聊很多人心中的大问题——看着这些变化发生,那些长期以某种方式工作的产品构建者,面对这样的应用,你只需输入一句话,它就能帮你构建出来,而且很漂亮。你认为产品经理、产品团队的工作方式会发生怎样的变化?最大的变化会出现在哪里?你认为未来几年产品会怎样被构建?
Guillermo Rauch: 我之前提到过的最深刻的一点是,产品构建者与客户之间的对话,将会被这些零链接、这些 artifact 所中介。我觉得当 Claude 提出 “artifacts” 这个名字的时候,我觉得它太妙了,因为我们都身处这个世界,尤其是我们这群人,我们在这里的目标就是构建出精彩的东西,然后与世界分享。Steve Jobs 曾做过一段精彩的演讲,大意是”我们对世界的回馈方式就是尽自己所能做到最好,然后与世界分享”。所以,如果当我们交流的时候,却无法将这些想法变为现实,那对我来说是一种损失。我希望看到人们始终生活在产品中,沉浸在设计里,花时间调整和尝试新的想法。这才是未来理想的工作方式,而不是——再说一次——那种抽象化,那种远离产品的状态,甚至有时候你会感到无力,无法改变什么。
这种情况在组织内部部门协作时经常发生。市场部想让设计部做点什么,市场部需要工程部的支持,工程部又需要设计部。总是这样互相牵制。我们在 Vercel 博客上发布了一篇关于 design engineering(设计工程)的文章,引起了很多人的共鸣,因为我们注意到,在 Vercel 最成功的人,往往是同时具备设计和工程技能的人。这其实也是 v0 的一个巨大驱动力和灵感来源,因为我们意识到人们可以变得更加全栈。我们不应该对自己设限,不应该限制我们能构建什么、能发布什么、能梦想在这些 Web 界面上实现什么。
全栈能力的释放
所以你可以想象,移除所有限制之后——设计师可以发布一个完整的产品,产品经理可以制作原型并直接上线到生产环境。很多使用 v0 的人是后端工程师,他们以前没有能力——他们可以发布一个 API,可以构建出色的底层基础设施系统,但要真正将自己的端到端愿景变为现实,v0 正在帮他们补上这一环。
工程师的未来
Lenny Rachitsky: 让我顺着工程师这个话题继续。很多人在问,“未来我们还需要工程师吗?工程师会怎样?我还应该学编程吗?“你作为长期从事工程工作的人,对那些正在为自己职业方向做决定的人有什么想法?
Guillermo Rauch: 我认为,了解事物的工作原理是这个世界上最重要的技能。我预见到很多人将变得极具影响力——构建和发布出色的产品,建立庞大的公司,你能想象到的一切——一个人就能完成一百个人在一百个不同专业领域的工作。举个例子,构建前端产品有一项非常重要的技能,就是你需要知道如何用 CSS 或 Tailwind 来进行样式设计。曾经,我会专门雇佣在这方面真正专精的人,他们的任务是——拿到一份 Figma 设计稿或某种草图,将其转化为现实,因为他们非常擅长操控布局、布局代码、box model 代码——我们这么叫它——以及边框、内边距、外边距、flexbox,所有这些用于样式的技术。
注意,我实际上非常刻意地使用了”翻译”这个词,因为 LLM——或者至少 transformer 架构——的起源,可以追溯到 Google Translate 这类系统的架构。它们本质上就是生成式的 LLM 技术。它们就是这样跨越了那道鸿沟的——还记得吗,翻译工具曾经很差,然后某一天这个问题就被解决了?我把很多过去属于专业化的编程工作——我认为它们正在消失,或者更准确地说,那些待完成的任务——视为翻译任务。我们过去是在把截图、意图或设计翻译成 React、Tailwind 和 CSS 的实现。
而现在,v0 在这方面已经极其出色。它好到什么程度呢——每次我们发布新一代模型,我都会做一个测试:转换我自己的网站,尝试用 v0 来生成它。上一次做这个测试的时候,我大概用了 10 个 prompt 就复刻出来了。要知道我是一个专家级的前端工程师,从大概 10 岁就进入这个领域,现在我 35 岁。我做这个测试,几乎是一种自我施加的谦逊测试——“我记得非常清楚,我用 Next.js 这个我自己创建的框架来构建和发布我的网站花了多长时间。“上一次的模型,大概用了 10 到 15 个 prompt?而最新的模型,我只用了两个 prompt 就完成了。
所以,从设计意图到可运行的实现,这种翻译——我常跟人分享的另一个轶事是,因为 v0 试图嵌入 Web 的所有最佳实践,模型输出的代码在无障碍性方面比我写的还好。它比我能更好地遵循 Web 标准组织发布的无障碍指南,因为它就是知道一切。所以那些几乎可以建模为翻译任务的工作,确实正在消失。但了解事物的底层工作原理——注意,在这次对话中我一直在使用特定的术语。我在说”CSS”,我在说”Layout”,我在列举各种样式属性。掌握这些术语对你来说会非常重要,因为这样你就能更好地引导模型,让它更准确地遵循你的意图。
所以简单来说:了解事物的工作原理,掌握那些符号系统。这意味着你可能需要对每个主题投入的深度会减少。我在 Vercel 有工程师能背诵每一个 CSS 属性。他们知道某个属性是什么时候在某个浏览器中可用的,一直在跟踪这些规范。几乎就像是一部每个 CSS 属性的活百科全书。未来你大概不需要这些了,而这大概是件好事,因为你可以把心智释放出来去做更有雄心的事情。
培养面向未来的能力
Lenny Rachitsky: 这太有意思了。所以我听到的是一项无论未来 AI 发展到什么程度都会持续有价值的技能——从概念上理解软件端到端的工作方式——我想再深入追问一下。
Guillermo Rauch: 是的,绝对如此。
Lenny Rachitsky: ——系统、数据库、CSS 这些东西。我不知道你有没有孩子——不管有没有——假设他们在考虑”我应该学什么才能在这个未来中脱颖而出?“你会怎么总结?走多远?他们应该进入软件工程领域吗?
Guillermo Rauch: 这个问题很好,因为我有五个孩子,而且我已经把他们送进了”G 学校”——当然是我自己办的学校——意思是说我已经在引导他们学习我认为对他们非常有用的东西。理解事物的工作原理,我认为理解事物背后的基本逻辑的能力,极其有价值。所以我在数学上对他们非常严格。“如果你数学学不好,就给我滚出去。“开个玩笑。但这确实是我希望他们掌握的一项基本技能。还有口才。我有时会开玩笑。你听过那个”word cells”对”——”
Lenny Rachitsky: 对——
Guillermo Rauch: ——shape rotators”的梗吗?
Lenny Rachitsky: 听过。
Guillermo Rauch: 所谓 shape rotator 就是那种只有数学大脑的人。你可以说硅谷的国王和王后们一直是 shape rotators,因为这些工作在历史上拥有最高的地位、尊重和净资产等等。然后还有 word cells,就是那些擅长沟通的,更偏文科方向的。苹果也有一张经典而很棒的幻灯片,说他们站在文科与技术的交汇处。我对大脑的两侧——这么说吧——一直抱有极大的敬意。但我认为培养出色的口才,记住我刚才提到的那些符号(tokens),知道如何在这个符号系统的全局心智地图中引用各种事物,将会非常有价值。我们确实有一些工具来帮助人们更好地写提示词,但提示词的增强和修饰不能替代思考,也不能替代你想要注入这个世界的创造力。
所以 v0 做的一件事就是它尝试——而且我认为成功地——开箱即用就创建出非常漂亮的设计。我们试图融入我们所学到的关于人们通常认为什么是好的 Web 设计的知识,并沿那个方向影响了模型。但我们也不希望整个互联网看起来千篇一律。所以你用语言引导模型走向那些参考、那些灵感的能力,将会非常重要。
口才与语言能力的重要性
我这里其实有一个很棒的轶事。昨晚我们在旧金山的 Vercel 总部举办了一场设计演示之夜。我们展示了 Vercel 如何使用 v0 来构建 v0 和构建 Vercel。我们的一位设计师展示了两个非常惊艳的动画,都是他用 v0 做出来的。其中一个是一个令人惊叹的三角形动画,我原以为不可能做出来——但它确实全部是用 v0 构建的。他用了”turbulence”(湍流)这个词来描述他想要的效果。
我想特别提一下这件事,因为知道这个词和不知道这个词的区别,就在于能不能把那种风格融入他创造的那个美丽的交互三角形中——它可能很快就会出现在你在 vercel.com 上访问的某个落地页上。所以培养口才和语言能力我认为会非常重要。我希望我的孩子们也能懂得这一点。还有分享事物、展现自己、向世界展示自己的想法——我带我孩子去参加 hackathon 也是出于这个原因。我们刚刚去了一场在旧金山大学(USF)举办的超棒的 hackathon,叫 BLOOM Hackathon。我带了两个孩子去,我想让他们看看人们是如何展示自己的想法的,我们玩得很开心。当然我们还吃了华夫饼和烤三明治,这是额外的收获。
展现自我与构建受众
展示和展现自我。我在播客开头聊天时提到过,我从你和你的嘉宾那里学到了很多,因为你在 X 上发布了这些精彩的小帖子、这些视频和访谈片段。所以展示你所构建的东西、展现自我的能力,在将来是极其重要的技能。尤其在一个生产软件和新事物的边际成本不断下降的世界里,你需要建立受众,你需要知道如何与人交流,你需要打造自己的标志性品牌和风格。所以他们可能还太小,还做不了这些,但带他们去 hackathon 或许就像是在影响他们的神经网络,为他们的未来做预训练数据。
Lenny Rachitsky: 我太喜欢了。他们会跟朋友说,“我爸带我去了 hackathon。""那是什么?“那你会鼓励他们学编程吗?因为你刚才提到的东西很有意思——
Guillermo Rauch: 是的。
Lenny Rachitsky: ——数学、口才、展示,然后,好的,还要学编程。
Guillermo Rauch: 对,我认为还是一样,学会如何写提示词,学会编程。在 v0 中,我们构建东西时会向你展示代码。所以如果你能建立起那种映射——也许不一定要把”学编程”当作一个抽象概念来学——如果你确实有这方面的天赋,我也非常相信——我的五个孩子性格和倾向差异巨大,我不想强推他们去做他们不想做的事情。所以抽象地学编程对某些人来说可能是好的,但对其他人来说可能不是件有趣的事。所以我建议的是,试着理解事物的工作原理。如果你用 v0 或其他工具生成了一些代码,试着从高层理解它做了什么。这其实甚至可以说是口才能力的一种延伸。
基础设施的力量
我在 Vercel 早期下的一注赌注,后来证明非常值得——Vercel 对很多人来说,打个比方就像简单模式的 AWS。我们有一个非常庞大的用户群体,他们本来无法配置云端的所有细节,但确实想要那种规模、灵活性、速度等等。他们想创建非常高质量的产品和服务。我喜欢举超级碗的例子,因为我们的客户 Ramp 在他们的广告播出时,流量暴增了 43 倍。负责这件事的工程师只需要学习 Next.js。然后他们把代码推送到 Vercel,就能触达一亿观众的受众,没有任何波动,百分百正常运行时间。
这种超能力来自于我们让入门变得尽可能简单,而我们选择的语言在这个故事中其实非常关键。JavaScript 在我看来几乎就像编程语言中的英语。如果你学会了它,你就能触达数十亿设备。所以当你让 ChatGPT、Anthropic 或 Gemini 为你构建 Web 应用时,它们使用这些工具——JavaScript、React——这并非巧合。它已经成为在 Web 上构建产品的通用语言。所以我会对我的孩子们说,“看,如果你确实想深入编程,从这里开始学。“你可以触达大量的人。如果你有热情的话,我想说,会有一项基础性的工程技能在未来几十年甚至几百年都会有价值,那就是创建基础性基础设施。
LLM 与基础设施的关系
Guillermo Rauch: 可以这样理解 LLM——它们就像能替你编写软件的 Oracle,但它们能编写的软件量是有限的。有上下文窗口的约束,也有时间和算力的限制。所以今天的 agent 很难说:“我要从零开始写一个云端服务,我要写所有的基础服务,我要从零开始写框架,我要写编译器。“不是这样的。LM 是在编排那些已有的工具和基础设施,而不是从零开始写编译器。否则你就会陷入牛顿的问题——为了创造一个苹果,你必须先创造整个底层的宇宙。不是这样的,各个要素是在与现存宇宙进行互操作的。因此,掌握基础基础设施的工程师,在未来很多年里大概率仍然会拥有极大的优势。
Lenny Rachitsky: 有一种说法是 ChatGPT 会构建下一代 ChatGPT。我从你这里听到的是,那一天还远得很——如果真有那么一天的话。
Guillermo Rauch: 完全同意。这也是为什么一个常见的、流传甚广的玩笑是,所有这些 AI 公司的职业页面——你打开一看——
Lenny Rachitsky: 全在招工程师。
全员皆工程师
Guillermo Rauch: ——“工程师、工程师、工程师。“但与之形成对比的是,Vercel 之前有 150 名会写代码的工程师,总员工数是 600 人。现在我们有了 600 名工程师。我在 v0 上看到的一些最出色的作品,并不是来自我们的工程团队——它们来自市场团队、销售团队、产品管理团队。产品管理团队的情况尤其有意思,因为他们现在真的在构建产品了。比如昨晚我看到了一个用 v0 搭建的、可以理解为实时 PRD 的东西——我们把 v0 部署到 Vercel 的新功能是如何运作的,全部在里面 spec 出来了。那个 v0 里包含的细节量——我们所有人看完都在说:“直接上线吧,没什么好讨论的了。“它是带动画的、可交互的。我们展示了错误状态、成功状态、缓慢流式传输状态。所以它赋予产品构建者的不仅是技术能力——我认为这种说法是对这个工具的低估——它赋予了他们探索和增强思维的能力,让他们能考虑到许多否则不会想到的东西,考虑到产品的许多状态——那些否则不会考虑到的状态。
v0 不仅是原型工具
Lenny Rachitsky: v0 这个名字暗示这个产品是用来做原型的——第一次尝试的东西。确实,所有这类工具目前找到产品市场契合点的地方都是原型阶段——PM 展示一个可运行的方案,而不仅仅是设计稿。你认为 v0 和其他工具能达到这样的程度吗——你可以用它构建 salesforce.com,并将其扩展到数十亿美元的规模?
Guillermo Rauch: 完全可以。
Lenny Rachitsky: 你真的这么认为?好。
Guillermo Rauch: 我们已经有一家 v0 的企业客户,完全只用 v0 工作。他们所有的产品、所有的功能、所有的客户沟通都是 v0 native 的。两天前,我在 X 上偶然看到有人告诉我:“我哥哥刚刚把一个完全用 v0 构建的网站卖给了客户。“昨天在一个投资者会议上,一位投资人走过来对我说:“我有两个朋友在 v0 上订婚了。“我心想:“好吧,v0 现在是个约会应用了。“订婚网站、求婚页面、婚礼——全部是 v0 native 的。
因为我们已经把 v0 与 Vercel 的基础设施整合在一起,所以我们可以实现我刚才告诉你的那种体验——“我有一个网站要建,我可以让它触达一亿人。“我们现在可以为所有人提供这种能力。端到端的全栈、v0 native,构建在这个出色的、流畅的 serverless 基础设施之上,可扩展到服务数十亿人——而这一切只需要提示词、截图,或者把你的 PRD 复制粘贴到工具里。
使用 v0 的建议
Lenny Rachitsky: 让我们帮大家更好地使用 v0 吧,之后我们也做一个演示。不过在此之前,我想问你一个问题:假设你能神奇地坐到一个即将第一次使用 v0 的人旁边,在他耳边悄悄说一个建议,帮他成功使用 v0。你会给出哪几条建议?
Guillermo Rauch: 第一,你在向工具提出需求时可以尽可能大胆。如果你能把工具引导到你已有的某个灵感方向上,总是会得到更好的结果。如果你没有想法、不知道要构建什么或如何提示,我建议使用 v0 Community,找一个可以 fork 的项目作为起点。我想说,从某种意义上讲,如果你有技术背景,这一条很有意思——请保持一点”悬置怀疑”的心态。就像我之前提到无障碍性时说的,它让我感到了谦逊。所以请保持开放的心态——工具可能确实知道一些你不知道的东西。把更多注意力放在产品描述上,放在你希望最终用户体验到什么、你希望产品做什么上。对工具能多好地实现它保持开放态度。这些是我最主要的建议。
你还需要有一种迭代意识。可以这样想:如果你跟一家设计公司或代理机构合作,你们会来回沟通,说”试试别的方案”。如果你在指导一个卡住的工程师,你会说”试试别的方案”。令人惊叹的是,我在 v0 上有多少次就是通过说一句”试试别的方案”就走出了困境。
Lenny Rachitsky: 就是直接把这句话当作提示词,甚至不给具体指导——
Guillermo Rauch: 就说这句话。聊天框就像——
Lenny Rachitsky: 哇。
Guillermo Rauch: “v0,我们需要……”就像是你跟工具在做一对一绩效面谈。“嘿,说得好,试试别的吧。你目前做的这个不太行。“真的很神奇。我脑子里一直有一个 fitness function——我真的很想找到 v0 做不了的东西。作为 v0 Community 的一部分,我有自己的个人主页,之后我会把链接分享给大家。你可以看到我构建的六七个作品,我认为都相当不错。举个例子,有一次我从东京飞旧金山。机上网络糟糕透顶。我在飞行时喜欢做的事情就是监控自己乘坐的航班——打开 Flightradar 之类的应用——而且我当时也非常无聊。
我注意到 Flightradar——具体是哪一个我不记得了,这类应用有四五个——都非常臃肿,广告满天飞,完全不是我想要的航班雷达的样子。于是我在飞机上用你能想象到的最差的网络连接,自己建了一个,集成了一个叫 Edge Aviation 的飞行数据 API。我告诉 v0 的是:“你要构建地球上最好的航班雷达。“我没有具体规定怎么做,所以它用了一个叫 Mapbox 的工具和一个叫 Leaflet 的 JavaScript 库。我没告诉它——或者说他或她,我不知道 v0 是什么——该怎么用。后来,一旦我们在设计上磨合好了——看起来确实很漂亮——我就更有野心了,我说:“好,现在让它变成真的。“
经验优先的工作方式
顺便说一下,这其实也是我的工作方式。我喜欢的方式。我喜欢先从体验出发,Vercel 也是这样构建的。“先从前端开始,先让飞机出现在屏幕上。“而且这里面有很多细节问题。比如,任何时刻都有太多的航班在飞,多到根本显示不过来。所以我不得不和 v0 一起优化性能。我同样没有给出具体指示,我只是说:“航班太多了,伙计,我们——”
Lenny Rachitsky: 你刚才说了”伙计”?
Guillermo Rauch: 对,我确实经常这么说。我想当我在 X 上分享这个项目的时候,很多工程师都震惊了,因为它创建了一个基于 canvas 的渲染层——canvas 是一种底层渲染表面,像 Figma 这样非常复杂的产品都在使用。它在地图上创建了一个非常棒的叠加层,可以同时渲染数以万计的航班。然后我对它说:“把它做成一个全栈应用。好,接入航班 API。“这就是一个我们不断发挥、没有上限的例子。所以我一直在寻找这样的机会。我为 v0 Community 提供的服务就是,我属于那个真正试图挑战极限的团队,我们会问:“它有没有做不到的事?“即便它做到了,我们也对质量和性能极其执着。它必须是真实可用的。这是我们对用户的承诺。
Lenny Rachitsky: 那这花了多少钱?做这样的东西需要多长时间?
Guillermo Rauch: 你是说 Flightradar 那个例子,还是说 v0?
Lenny Rachitsky: Flightradar 那个例子,具体来说就是——
Guillermo Rauch: 那个大概花了不到两个小时——而且还是在最差的网络条件下。不好意思日本航空,我很爱你们,但你们给我出了不少难题。
Lenny Rachitsky: 那花了多少钱?大概十块钱?你估计呢?
Guillermo Rauch: 我用的是 v0 每月 20 美元的订阅。
Lenny Rachitsky: 20 美元,一个月。所以是一个月的费用,但你只用了两个小时,20 美元。如果让工程师来开发这个,你觉得要花多少钱?多长时间?
Guillermo Rauch: 几周吧,轻轻松松。轻轻松松。
Lenny Rachitsky: 那就是几万美元了。
Guillermo Rauch: 也许 Vercel 最顶尖的工程师不用任何 AI,能在几天内搞出来。但设计呢?我呢?因为瓶颈在我这里,不在工程师那里。这就是这种协作方式最令人惊叹的地方——我在提供产品指导。我会说:“在两个目的地机场之间画一条虚线。“顺便说一下,v0 那一刻真的让我大吃一惊。我说:“在两个目的地机场之间画一条虚线。“然后 v0 说:“我需要考虑球面的——或者叫什么来着——伪球面,要考虑地球的曲率。“我心想:“好吧 v0,你个超级天才,行行行。“这就是我之前说的那种来回迭代的方式。它就像一个产品副驾驶,一个全知全能的存在。
超智能的闪光时刻
昨天我们有个用户提交了对工具的反馈,是正面反馈。他们非常满意,说的是:“v0 是一个超级天才的、拥有博士学位的五岁小孩,还带有多动症。“所以我也不想过分吹捧,说它”无所不知,一切都完美”,当然不是。但它确实会有一些闪耀的天才火花。真的。我一直坚信,AGI 这个说法其实低估了我们正在共同构建的东西,因为我们已经拥有了所有这些超智能的闪光时刻。我不认为 v0 是一个 AGI——如果它只是知道如何根据地球曲率来画虚线、构建这种高性能的飞机地图的话。这已经是超人的了。用它真的很愉快。
用 AI 构建应用的三项核心技能
Lenny Rachitsky: 听你这么说,我觉得很有意思。我现在在想,用 AI 构建应用几乎有三项核心技能:想清楚要做什么、让它看起来好看——就是设计——然后还有让它摆脱困境。
Guillermo Rauch: 对,还有引导。
Lenny Rachitsky: 引导它。对。或者说,“哦,这里有个数据库错误。我不知道怎么回事,它自己解决不了。“这么说你觉得有道理吗?我之前从来没想过这个。
Guillermo Rauch: 哦,完全认同。实际上我给你讲一个小故事。即使追溯到很久以前,Next.js 是建立在 React 之上的。React 是 Facebook 创建的 UI 组件库,实际上目标非常相似。他们有那么多顶尖工程师,需要帮助他们在庞大的产品面上协作。所以他们发明了——或者至少是率先提出了——组件这个概念,作为可复用的单元、构建块,就像搭乐高积木一样构建软件。顺便说一下,LLM 之所以喜欢用 React 组件来工作,绝非偶然。这个模型中一直让我印象深刻的一点是,它本质上让人们能够在协作方式上实现规模化扩展。他们嵌入其中的一个核心设计原则,叫做 escape hatch(逃生舱口)。
逃生舱口的设计哲学
当 React 的组件系统不能完美地建模你的问题时,API 会给你一个 escape hatch。他们说:“好了,工程师,现在靠你自己了。没有护栏了。“实际上,其中一种 escape hatch 就叫做 dangerouslySetInnerHTML。他们想让开发者知道自己正在进入未知领域。但他们确实给了开发者这个 API。这是一个深刻的系统 design engineering 原则。在我整个职业生涯中,我一直在思考 escape hatch 这个概念。
v0 有一个非常棒的 escape hatch,那就是你可以看到我们用 Next.js 生成的代码。你可以编辑它,甚至可以让其他专家来审查。昨晚我们的一个演示来自一家很棒的公司 Lumalabs。他们在打造世界上最令人惊叹的视频模型之一,大量使用 v0 和 Vercel 来构建他们的应用和网站。那位 design engineer 谈到他在一个已经迭代了 120 多次的 v0 项目上工作。他深入到了 latent space(潜在空间)之中,整个人都在矩阵里了。到了某个阶段他卡住了。但你知道他怎么做的吗?他把我们生成的代码复制粘贴下来,交给了 ChatGPT o1,让 ChatGPT o1 来思考解决方案。
v0 现场演示
**Lenny Rachitsky:**说实话,我自己之前甚至都没想过这一点。我真的太震撼了。这也印证了我特别喜欢你说的第三点——“你需要学会如何摆脱困境。“这就像一条深刻的人生哲理,更像是通用的生活建议。Facebook 其实有一条原则:“不要被阻塞。主动寻求解除阻塞的方法,主动向他人寻求帮助。“令人着迷的是,你现在可以向其他 AI 寻求帮助来摆脱困境。那些能够真正理解并看到底层代码的 escape hatch,甚至能让你说:“好,现在我们用 Git。把这个项目变成一个混合项目,不再只是提示词,而是结合传统软件工程。“这扇门对你敞开,这一点极其有价值。
**Lenny Rachitsky:**让我们把它变得非常具体,让大家看看在 v0 中到底是什么样子。我们把屏幕共享出来,做个小型现场演示。会简短一些。我发现大家的反应通常是:“好的,我明白了。“但我们会让它既有趣又简短。来了,我看到了。
**Guillermo Rauch:**好的。
Lenny Rachitsky:“How can I help you ship?”
**Guillermo Rauch:**对,当然。我们就是要把东西交付出去。好,正如我提到的,你用英语写作,对着工具说就行。我来演示一下,创建一个联系销售团队的表单,风格参考……顺便说一句,我打了个错别字,无所谓。风格是 Elf Supreme,那家服装公司的在线商店。我提到过有时候人们会卡住,在这一步会有写作焦虑。所以我们添加了提示词增强功能。现在你是在利用模型的 latent space(潜在空间),而它有一个随机成分。
顺便说一下,这仍然不能替代我之前说的——了解那些有意义的 token,了解正确的风格是什么、它叫什么,这些仍然非常有价值。你会注意到的第一件事是,随着模型思考,你可以观察它的思维过程。这是我们最近添加的功能。实际上很大程度上受到了 Deepseek 革命的启发。
代码生成与迭代
当你告诉它”开发一个联系销售的表单”时,它会做什么?我们谈到了 escape hatch。好,它会使用 shadcn/ui,会使用 Tailwind CSS,会使用 React。这正是你的机会——如果 v0 没有做你想要的东西,这就是你实际介入、纠正、施加影响或给出反馈的机会。你会注意到它生成了若干文件,然后给了我想要的东西。我稍微缩小一下。这里有几件值得注意的事情,作为有经验的工程师,我可以指出来。它使用的底层组件系统,与全球最优秀工具所用的是同一套。这叫做 shadcn。你今天去 grok.com,他们就是用 shadcn 构建 UI 的。他们也用 Next.js。你得到的就是那个水准的代码。
另一个值得注意的事情是,社交媒体上人们经常讨论这一点。当你使用一个全球共享的组件系统时,你不希望所有东西看起来都一样。所以它能够应用 Supreme 的风格,而且它大概知道 Supreme 长什么样,这一点挺酷的。但现在我要说:“实际上,因为我是在建一个金融机构,让它更严肃一些,风格参考 Charles Schwab。更换字体。“这就是迭代过程——“我要去给模型反馈,让它尝试不同的东西。“一旦初始生成完成后,模型实际上更像一个编辑者。它在对已经构建好的东西进行调整。
社区分享与大型项目
这其实可以扩展到非常大的项目。你完全可以从更大的东西开始。与此同时,我给大家看看 Lumalabs 用 v0 做的作品,真的非常惊艳。我昨晚才了解到。它已经有 2000 个 fork 了。我之前跟你讲过我们社区的力量。顺便说一下,你只需点击 v0 侧边栏上的 community 就可以了。我要 fork 它,因为他们慷慨地分享给了全世界。注意看这些令人难以置信的动画效果?顺便说一下,他们做这个是为了招聘和吸引人才加入公司。我推荐他们,如果你想成为一名品牌设计师,应该把他们纳入考虑。注意这是交互式的,所有东西都是 AI 生成的,他们用自己的 AI 图像生成工具创建了这些精美的画面。这些也全都是 AI 生成的。
**Lenny Rachitsky:**哇。
**Guillermo Rauch:**而且它是交互式的。有自动播放功能。这实际上是一个复杂的布局和动画系统,他们完全在 v0 中构建的。我跟你说过,他们甚至在某个阶段从 O-Wan 那里获得了一些建议,向 OpenAI 致敬。我准备说”让它变成褐色调配色”。这是一个例子——“我 fork 了某个东西,已经有了一个起点。“我的银行级联系表单已经准备好了。与此同时,另一个有趣的功能是你可以用截图作为起点。我用另一个 Next.js 用户来举例,就是 fortune.com。向他们致敬,他们做了一个非常精致的网站。
从截图生成与知识问答
假设我实际上想进入新闻行业,所以我就粘贴一张截图。我也可以附加 Figma 文件。而且 v0 已经知道了,v0 也能回答关于工程、设计、产品领域的问题。所以我可以问 v0:“什么是 newsletter?用图示解释,用 Lenny 作为例子。“所以 v0 也是一个知识检索工具。但我们确实强烈建议——“引导这个工具去创建东西。“所以当我粘贴一张截图时,如你所见,它正在着手创建一个希望很棒的新闻网站。我特别要求了,因为我觉得挺有趣,用图示来解释 newsletter,所以 v0 也可以创建解释、内容、知识。创建者是 Lenny,你是前 Airbnb 的产品负责人。我想我应——
**Lenny Rachitsky:**这都——
Guillermo Rauch:——其实应该用一些 Airbnb 的例子。但让我们看看——
**Lenny Rachitsky:**没关系。
Guillermo Rauch:——它用 Fortune 的风格创建了什么。
**Lenny Rachitsky:**哇。
CSS 居中难题
**Guillermo Rauch:**注意,我刚才注意到这个 Cyber 应该在中间。我缩小一点。让我们用精修工具把它居中。顺便说一下,我称之为计算机科学中最难的问题之一,就是让东西居中。
**Lenny Rachitsky:**用 CSS。
**Guillermo Rauch:**没错,让一个 div 居中。实际上你看,它确实是一个 div。注意我做了一个精确的行内提示。v0 和很多其他工具的区别在于,你确实能看到代码,代码很重要,但我称之为 code last 而不是 code first。你是在产品中操作的。把它居中。另一个我很喜欢的、同样用 Next.js 构建的网站是 Semaphore。我非常喜欢他们的褐色调风格。所以我要说”改用这个风格,包括——”
**Lenny Rachitsky:**所以你正在共享屏幕。你用一张截图来设计、构建一个网站,现在又用另一张截图来告诉它”让它看起来像这个样子”。
**Guillermo Rauch:**是的。
**Lenny Rachitsky:**非常酷。
v0 的多维度理解能力
**Guillermo Rauch:**所以核心理念是,v0 能够深度理解(Grok)它需要构建的东西的不同层面——可以是功能层面,也可以是布局层面。还有一点很重要,我们会对模型施加影响。所以很多你原本需要手动提示的东西,现在可能自动就有了。一个值得特别提到的例子是响应式设计。比如,如果我这样做,它会自动让页面在移动端也很好用,会给我生成汉堡菜单。然后我可以告诉它,“把这个样式应用到所有地方。”
顺便给你看一个我觉得非常、非常厉害的细节。我不知道为什么今天对复古棕褐色调(sepia)这个主题如此执着。但注意,它不仅改了背景——希望大家能看到——它还把它应用到了复选框上,并且应用了一个 CSS。我猜这是一个 CSS filter。没错,它用了一个 CSS filter。出于极客的好奇心,我要看一下代码。确实是 CSS filter。坦白说,我之前其实不知道 CSS 的 filter 属性里有一个 sepia 函数。实现这个效果的方法有很多——你也可以把图片或视频写入 canvas,然后应用各种算法,诸如此类。
**Lenny Rachitsky:**我很喜欢它做得比你想到的方案更优雅。
**Guillermo Rauch:**没错。所以这就是为什么工具不能太过自作主张。还有一个很酷的功能——我确实喜欢展示截图的效果,但我想提醒大家,核心目的不一定是去克隆别人的网站。对吧?它是——
**Lenny Rachitsky:**这只是个很酷的演示。是一种简单直观的方式来展示它的能力。
**Guillermo Rauch:**正是。
**Lenny Rachitsky:**对。
**Guillermo Rauch:**你可以截自己的东西——你自己的设计稿、别人在 Slack 里发的截图——而且不要犹豫去添加功能。
从数周到数秒
**Lenny Rachitsky:**太不可思议了。谢谢你做这个演示。我脑海中在想象,如果我正在和一个工程师合作,让他做这些事情——先不说这会有多烦人,就”把它改成棕褐色调”这种要求——
**Guillermo Rauch:**是的。
**Lenny Rachitsky:**光是所需要的时间——从”好的,做这个东西,照着 fortune.com 抄”开始——那可能是几天、几周。而在这里,只需要——
**Guillermo Rauch:**几个月。
**Lenny Rachitsky:**看,搞定。几个月。
**Guillermo Rauch:**甚至可能永远不会交付。
**Lenny Rachitsky:**没错。
**Guillermo Rauch:**也许永远都不会上线。
提示词增强与最佳实践
**Lenny Rachitsky:**确实如此。不过有一件我在开头注意到的、我很喜欢的事——当你做提示词的时候,那个提示词增强功能——它本质上就是把最佳实践注入进去,让结果看起来更好、更美观。我觉得这是与 AI 协作中最有意思的杠杆之一:它内置了最佳实践来帮你构建出漂亮的东西。而且我觉得还有一种机会,就是帮你判断你正在做的东西到底是不是个好主意。“你想解决什么问题?“——感觉应该有一个 PM one-pager 的步骤,比如”你怎么知道这是一个问题?用户跟你说了什么?有多少人跟你提过这个?“诸如此类。
窥探 AI 的思维
**Guillermo Rauch:**是的。有一点很值得说——随着时间推移,我们越来越多地窥探到 AI 的思维过程。这本身正在成为一个杀手级功能。所以 Deepseek 展示的流式输出、thinking tokens 的那个时刻,我认为对我们行业来说是一个非常重要的时刻。因为 OpenAI 其实拥有这项技术,但他们出于竞争原因——这想法也合理,没有双关的意思——决定将其保留不公开。而且当时也不清楚这到底有没有终端用户和产品层面的实用价值。但当 Deepseek 发布之后,非常明显地看出,人们真的很喜欢理解 AI 的思考方式,并对其方向施加影响。我们收到了非常棒的反馈和 bug 报告——人们会具体指出,“看,AI 在这里出错了,请修复。“所以使用这个产品的人越多,我们获得的点赞、点踩和用户反馈就越多。
AI 产品的反馈闭环
顺便说一下,我想告诉那些正在做产品的人——我给所有创业创始人的一条最重要的建议就是:“在产品内部创造大量让用户给你反馈的机会。“我从 Stripe 那里获得了灵感。这在 Vercel 早期发挥了巨大作用——我们有一个反馈按钮,搭配一个非常精致的内联表单,上面有四个表情符号,让你表达对当前功能或产品的感受。这些反馈会直接进入 Slack。我们日复一日地构建产品,用户的声音源源不断地涌入我们的意识。早期可能每天收到几个、几十个、上百个反馈。但当你构建 AI 产品时,用户反馈是一条持续不断的流。所以那些不打算构建 AI 产品的人要注意了,要跟一个与用户之间有如此紧密反馈闭环的产品竞争,会非常困难。
整个理念就是捕获用户反馈,让下一轮迭代的模型、提示词、微调、示例、RAG 都变得更好。基于这个认知,Vercel 做了一件事——我们把很多让 v0 运转的核心技术开源了。假设你想打造一个面向医生的 v0,你可以去 vercel.com/templates,克隆一个 ChatGPT 模板——它基本上汇集了全球最佳实践,用于构建高性能、出色的 UI——然后你就可以出去构建自己的 AI 产品了。我们还开源了 AI SDK,这是 v0 的基础管道。它允许你连接任何模型,并从模型响应中生成 UI——不仅仅是输出文本,而是真正生成 UI。也许因为我太喜欢展示东西了,我快速给你演示一下。
**Lenny Rachitsky:**好,来吧。
**Guillermo Rauch:**因为我很兴奋。
**Lenny Rachitsky:**展示吧。
Generative UI 演示
**Guillermo Rauch:**如果你去 chat.vercel.ai,快速看一下——这是我们开源的 ChatGPT 演示。你可以像传统 LLM 一样提问。但不仅如此,比如我们等这个问题回答完,然后问”旧金山的天气怎么样?“——我们称之为 generative UI(生成式 UI)。它不只是用纯文本回复,而是根据结果创建组件。最后,还有一个 v0 风格的机会——让它帮我写一篇关于硅谷的文章。它会创建一个类似 canvas 或 artifacts 风格的体验,一切都是生成式的,但用户也可以编辑、优化,等等。
垂直 AI 工具的思考
**Lenny Rachitsky:**这让我想到一件我一直在琢磨的事。现在有这么多创业公司在做垂直 AI 工具——这稍微有点跑题——总有一些面向律师的 AI 工具、面向医生护士的 AI 工具,他们的 pitch 是:这些创始人非常了解特定领域的问题——
**Guillermo Rauch:**完全同意。
Lenny Rachitsky:——特定市场,所以他们会为这些用户打造非常专属的工具。
**Guillermo Rauch:**我完全相信,专业 AI 工具就是未来。有一个在 Vercel 上构建的出色产品叫 chatprd.com。它就是写 PRD 的 v0,而且很快会接入 v0 集成,这样你就可以用 AI 写 PRD,然后用 AI 把它创建出来。这只是你可以切入的一个垂直领域的例子。还有 OpenEvidence,实际上它就是面向医生的 ChatGPT。还有一家很棒的创业公司在做 X 光 AI 工具。所以我认为想法是无穷无尽的。我从 Vercel 的 AI 用户那里看到,比如我们的法务团队非常喜欢一个叫 Get GC.AI 的工具。理论上他们可以去 ChatGPT 问法律问题,但有人决定,“我要打造世界上最好的法律 AI 工具。“它将保持最新。我会痴迷于解决这个问题。“CEO 本身就是律师,所以我认为这很难被竞争过。
**Lenny Rachitsky:**但我在想的是另一面。这几乎是相反的思路,我很想听听你的看法,但别在这上面花太多时间,因为这完全转向了——
**Guillermo Rauch:**不,我很喜欢这个话题。
**Lenny Rachitsky:**你给我展示了你刚才构建的天气小部件,基本上就是 AI 在你跟它对话时构建的一个小应用。是否存在这样一种可能:当 AI、当 AGI 发展得足够远、接近超级智能的时候,它能不能实时给你构建一个 Harvey 出来?比如”这是面向律师的最佳体验。来,给你做好了。”
**Guillermo Rauch:**完全可能,完全可能。我相信最终是可以的,但人类总是需要一些护栏。现实是 Get GC 承担了双重角色:一方面是为律师打造最好的工具,另一方面是把他们的信誉押在上面,说”我们确实用过这个,我们相信这就是未来应该有的样子。“这背后有一种方向感和对事物的判断。我认为如果完全放任 AI 自己来——我不知道——这就像提示词增强的双刃剑。AI 并不总是确切知道我们想要什么或需要什么。它仍然很大程度上是一个 copilot、一个伙伴、一个助手。它并不是在主导我们的生活,而且我也不知道我们最终是否真的希望那样。
品味的培养
**Lenny Rachitsky:**好,我要换一个完全不同的话题了,就是品味。我们到处都听到这个词。感觉人们一直在暗示,这将持续是一项重要技能——知道什么是好的,基本上就是知道人们可能觉得有价值、觉得好的东西。而且我清楚地知道你有很好的品味。你在构建极其漂亮的产品,v0 显然是——它就像默认最漂亮的构建者工具,正如我们所见。那么关于培养品味,人们总是说,“我到底该怎么做?我有很好的品味。我知道我有。我不需要——“你是如何培养品味的?你认为人们应该如何培养品味?对那些想提升品味的人有什么建议?
**Guillermo Rauch:**是的,我认为大量尝试各种产品极其重要。你需要把自己推出去。我觉得回到这一点很重要——走进真实世界,发布东西。在某种程度上不要害怕自我推广。对自己诚实,构建一些东西,把它发布出去,看看人们的反应,然后回到绘图板前。我认为关键在于接触。在 Vercel,我们有一个内部运营原则就是增加接触时长(exposure hours)。试着去量化你花了多少时间观察人们如何使用你的产品,甚至观察人们如何使用其他产品,你就会培养出这种能力。品味,有时候我觉得我们会把它看作一种高不可攀的东西,“哦,那个人天生就有品味。“我认为它是一种可以培养的技能。
AI 在这方面也会帮你很多,因为我们试图捕捉其中的一些普遍原则。但世界上也有趋势。我不是什么时尚达人,但你可以看到每年巴黎时装周都有一个主题,会有一些创新,会有一些突破之类的。所以努力站在前沿,甚至去定义前沿,当然也非常令人兴奋。
**Lenny Rachitsky:**我喜欢这个方法的可操作性——增加你的接触时长。基本上我听到的是,“用最好的应用。”
**Guillermo Rauch:**是的。
**Lenny Rachitsky:**其中还有一个反馈循环的成分。就是”把东西展示给别人看”。
**Guillermo Rauch:**并且理解这些细微差别。对吧?
**Lenny Rachitsky:**嗯。
**Guillermo Rauch:**我最近其实创建了一个——我发布到了我的社区里——一个受 Grok 启发的 ChatGPT 风格界面。我捕捉到了 Grok 做的几个非常聪明的设计。比如在移动端网页上,当你在输入框按回车时,它默认创建新行。因为他们知道人们在移动端提交内容的习惯不是按回车,像我们在桌面电脑上那样。你可以点一下那个小图标,消息就发出去了。在桌面端,他们反过来。按回车就是提交。我觉得如果按回车得到新行的话,很多人会感到沮丧——大多数人不知道可以按 command+enter 来提交之类的,这会拖慢一切。你基本上可以在提示词中指定这些行为。
但你必须关注细节,必须决定你想在世界上看到什么。有时候这意味着定义最佳实践,或者寻找最佳实践,向他人学习。接触时长的另一个方面是,你往往会高估自己产品的表现。把你的产品交给另一个人,观察他们如何与之交互,让自己直面现实的痛苦,这非常重要。你越是沉浸在实际的、细枝末节的用户体验中——当人们使用你的界面时到底发生了什么——我觉得你就会变得更强、更踏实, hopefully 也更谦逊。
**Lenny Rachitsky:**我们不喜欢痛苦,但我喜欢你这种推动——“在生活中多制造一些痛苦。把你正在构建的东西展示给别人看。“你有没有一个经验法则或者数字,比如每周、每月你希望团队有多少接触时长,还是说越多越好?
**Guillermo Rauch:**是的,我倾向于越多越好。因为惯性会让你困在自己的脑子里,惯性会让你以为自己什么都知道,假设一切都很顺利,“没有报错。当然很快。在我机器上没问题。“我觉得这始终是要推自己多做的动力。我确实会做一些小事,比如我让团队给我的日历涂色。我要求日历上必须有与团队一定数量的一对一会议,这样我就能和人同步,了解公司的状态。然后我还希望安排客户会议。在那些客户会议中,我会推动自己去使用产品。事实上,对于我们的企业客户,我做的一件事是尽量忘记东西是怎么构建的、他们用了什么功能、Vercel 的哪个特性之类的。我就直接频繁使用他们的产品。我只想要产品是好的,仅此而已。然后我就可以倒推回去。
客户接触时长的实践
**Guillermo Rauch:**所以对我而言,接触时长的一种形式是观察客户在真实世界中取得了什么样的成功。但再说一次,这只是启发式方法。这周大概有三分之一的会议是客户会议,我尝试去观察他们的操作。另一个很快捷的方式是我们经常邀请人们来现场演示他们如何使用产品,有时面向高管团队,有时面向全公司。我们总能不可避免地从客户那里发现一些有趣的东西——也许他们在某个我们不知道的地方感到痛苦,或者某些东西没有我们想象的那么直观。
**Lenny Rachitsky:**我发现这类事情,当你真正去做的时候,当你和客户交谈、让他们展示如何使用产品时,你总会想,“为什么我没有更频繁地做这件事?我到底在想什么?“通常真的会让人大开眼界。
**Guillermo Rauch:**是的。
v0 的局限性
**Lenny Rachitsky:**我想谈谈 v0 目前的局限性。大家应该了解 v0 做不到什么?如果你有一个现有的代码库,能不能接入进去开始操作?还是说这个功能即将推出?还有什么大家应该知道的?比如,“好吧,它目前还做不到这个。但是——”
**Guillermo Rauch:**是的,你可以通过 zip 文件导入代码库,Git 支持很快也会上线。它可以做全栈开发,可以连接 API。接下来几天内,也许甚至在这个播客上线之前,我们会推出非常紧密的集成——如果你需要一个数据库,或者需要一个 AI 模型,或者 AI 判定需要这些,它会直接从 Vercel marketplace 无缝安装。而 Vercel marketplace 已经策展了世界上一些最好的基础设施产品,用于存储数据、搜索数据等等。所以产品会变得更加强大。我想再说一遍,我做了那个练习,而且我每天都在做——我有一个天马行空的想法,然后试着看它能不能被实现。到目前为止它非常强大。AI 仍然在很大程度上是半成品,它们会犯错。我们在输入框下方有一个小小的免责声明。你会遇到错误,这是我们的 fitness function。而且我们观察到用户喜爱度和留存率之间有很强的相关性。
v0 实际上是我所构建过的 AI 产品中留存率最高的,相比过去做过的其他 AI 产品或小 demo 之类的。人们订阅并且每天都在使用,而且如果他们注意到一个 bug,会非常紧张,因为他们日复一日地依赖它。但我要说错误仍然是可能的。偶尔你可能会遇到运行时错误之类的,但我们添加的很多技术是为了让 v0 非常 agentic,它在行动方式上具有很强的自主性。所以你会非常频繁地看到,如果遇到错误,v0 会尝试自己解决。
最后我想说的是,当产品变得非常庞大时,今天的 AI 在处理大型代码库方面还没有那么好。但回到 React 组件那个理念,因为我们把东西拆分为文件和组件,在这方面我们表现得相当不错。事实上,Next.js 的一个知名特点是,要开始一个项目,你只需创建一个文件,Next.js 就会路由到那个页面。如果有人熟悉 PHP 的话,它的工作方式和 PHP 类似。所以 LLM 现在擅长处理文件这件事太好了,因为它非常自然地契合我们的世界。当项目变得很大时,如果你能把范围缩小,给它一个更小的任务——去处理一个特定的组件或特定的文件——你就降低了 LLM 无法在非常非常长的上下文窗口上进行推理的可能性。
设计改进的建议
**Lenny Rachitsky:**我想回到设计这个话题。我们谈到 v0 默认就能做出非常好的设计。想在这方面再深入聊聊——如果有人想改进自己产品的设计,大多数人不是设计师,不太知道怎么让它好看。他们不知道该要求什么。对于让应用变得更好、看起来更漂亮,你有什么建议或最佳实践吗?
**Guillermo Rauch:**是的,有件事很有意思。前几天我见了一家大型银行的 CIO,他平时会做很多编程,也会尝试新技术之类的。我给他展示了 v0,他立刻成了 v0 的重度用户。他每天都给我发反馈。他把自己的两个网站从另一个建站工具迁移到了 v0 和 Vercel,部署后绑定了域名,已经在生产环境中上线了。然后他说,“看,我有一个挑战。我和几个朋友一起组织一个音乐节,这是设计师给我们的方案。“他拿出了一份宣传册,看起来非常像印刷风格的设计。他把那个给了 v0,第一次出来的结果,他马上来找我抱怨,“看,这不好看。”
然后,因为我有使用这个工具的经验,我说,“为什么不直接给它反馈呢?“就像你之前问我的,关于我使用这个产品学到的东西或最佳实践,如果我坐在别人旁边我会推荐什么——你完全不应该犹豫给 AI 反馈,这真的很有意思,伙计。有时候人们会按反馈按钮告诉我们他们想让 v0 做什么,而在很多情况下,我们只需要说,“你能不能直接告诉 v0?“所以他给我发了条消息说,“嗯,我就是不喜欢这个设计。“我回了他一个我会用的提示词。我不记得具体说了什么,但大概是,“让它更有活力,让它更亮眼。“
让 AI 发挥设计创意
所以尝试一下——再说一次,这回到了那个理念——从 AI 已经了解的多样性中汲取灵感。经过几轮提示词,我们最终得到了一个在他心目中比那份宣传册原始印刷设计更好的方案,那个音乐节的演出阵容。而且在那个时候,我甚至也在不断了解 v0 的能力以及最佳使用方式。但在设计方面,我认为释放它的创造力、去看效果、去尝试,绝对是非常有帮助的。
**Lenny Rachitsky:**所以我从你这里听到的一点就是直接告诉它,“让这个看起来更好。“或者,“我不喜欢——”
Guillermo Rauch:“让它更亮眼。”
Lenny Rachitsky:“让它更亮眼。”
**Guillermo Rauch:**完全可以。如果你能使用相关的 token,比如,“Neobrutalist、极简主义、报纸风格、复古风、让它看起来像一份电报。“你可以尝试触及那些可能不会自然想到的东西,你会惊讶于它能多么出色地将这些想法转化为现实。
产品质量的秘密
**Lenny Rachitsky:**太不可思议了。太简单了。也许可以作为我们对话的收尾,看看这个话题会引向哪里。我有一条我非常喜欢的推文,我深有共鸣,“产品质量的秘密就是血、汗和泪。“我完全同意。我认为这也是我的 newsletter 能够成功的原因。我在每篇 newsletter 上花的时间非常多,比任何人在一篇 newsletter 上花的时间都多,大概十、二十、三十个小时。我认为这就是它有效的原因。那条推文背后还有更深的含义吗?关于努力工作对做出伟大产品的重要性,你有什么心得?
**Guillermo Rauch:**对,我之前提到接触时长(exposure hours)就是一个很好的例子——“你看,这可能会很痛苦。眼看着你的宝贝在所有人面前崩溃,注意到所有那些问题……”另一件事是,一个伟大的产品由一千个微小的细节组成,所以你永远谈不上真正完成。这个过程也会带来一种谦逊,这也是为什么最优秀的产品构建者每说一个 yes 之前会说九个 no。因为当你说 yes 的时候,就像领养了一只小狗。一个功能就像领养一只小狗。它会长大成一头你必须照顾的猛兽,既苛刻又需要爱心,但也确实是个不小的负担,还会到处拉屎。所以你必须有一种创造性的克制。而在给予的同时,你也要懂得保留,有时候是对现实世界中涌现的复杂性保持敬畏。
有一件我一直很执着的小事。我要向 Midjourney 团队致敬,我非常喜欢 Midjourney 在移动端网页上的表现。我不知道他们现在有没有原生应用,但他们的移动网站做得很出色。顺便说一句,做到那么好是完全可能的,在移动端网页上做出优秀的产品确实是可以实现的。但它需要那种热爱、克制、执念,需要大量测试,需要大量使用自己的产品。显然,吃自己的狗粮(dogfooding)是一个很好的机制。所以我们疯狂地使用 Vercel 和 v0 来构建 Vercel 和 v0,希望这能帮助我们做得更好。但这个过程中确实有大量的血、汗和泪。
**Lenny Rachitsky:**看得出来你有多么深度使用这个产品。你说的每一句话都能感受到这一点。让我问一下这个,你刚才说你们有 600 名工程师?
**Guillermo Rauch:**不,600 人是总共,一百——
**Lenny Rachitsky:**总共 600 人?
**Guillermo Rauch:**150。
AI 正在如何改变团队的工作方式
**Lenny Rachitsky:**AI 正在如何改变他们的工作方式?有什么可以分享的吗?因为我觉得你们代表了产品构建的最前沿。现在是什么情况?是不是大家都在用 Cursor 和 v0 来做东西?
**Guillermo Rauch:**是的,但实际上变化更加深远。我认为核心是每个人都能交付——我们以 AI 原则来构建产品。我要特别提到一位 Lumalabs 的工程师,他说:“我会在一切事情上使用 AI,包括用 AI 来生成网站的图片。“我看到我们的设计师正在为下一场大会制作所有的动画,全部用视频模型生成。我看到营销团队用 v0 创建基础设施运行原理的 demo,比我见过的任何静态图表或落地页都要好。我发过的最火的推文之一,就是我们的一位设计师创作的——用一个交互式 demo 来解释我们的计算基础设施是如何运作的。顺便说一句,在他做出这个之前,他自己设计、创建并发布上线——首先,这并不是他日常工作的一部分。
v0 让你成为一个如此强大的通才,以至于你可以走出自己的舒适区——“好吧,我原来只负责做这个。“你可以直接创造。我们每周五有一个惯例,今天早上刚搞过,叫做 Demo Fridays。所以为人们创造走出舒适区、使用 AI 的空间非常重要。我们给予人们构建和发布产品的许可,正是使这一切成为可能的文化背景的一部分。
今天在 Demo Friday 上,我们的销售工程 VP 也做了一个 demo,他用 v0 创建了一个出色的工具,用来帮助潜在客户理解 Vercel。我听 DevOps 和基础设施工程师说他们大量使用 Cursor 之类的工具来处理 Vercel 基础设施的底层部分。所以我觉得非常快地,我们看到 AI 正在嵌入到方方面面。我刚收到一个客户的产品需求,他说:“好吧 Vercel,你们卖域名,让我用 AI 来生成新的域名创意吧。“所以我看到了一个 AI 与软件同义的未来。我确实期待这一点,因为我们需要在某个时候不再谈论 AI。我预见到——虽然可能不会实现——但提醒人们 AI 如今等于软件是有益的,而我们是一家软件公司。我们构建软件,我们用软件来构建软件。
**Lenny Rachitsky:**而 AI 只是其中的一部分。
**Guillermo Rauch:**对。
每个人都能创造
**Lenny Rachitsky:**Guillermo,用这个来收尾真是太美了。你还有什么想说的吗?在我放你走之前,还有什么想留给听众的?
**Guillermo Rauch:**我想留给你们我对未来的愿景。我们在旧金山有一块广告牌,上面写着”Everybody Can Cook”。这也是《料理鼠王》中的一句话,那是我最喜欢的电影之一。我期待一个人人都能把自己的想法表达出来的未来。如果你能想到,你就能发布。同时,当你使用产品、当你看到其他人的创造和他们向世界展示的作品时,我们正在共同让这个世界变得更好。所以你体验到的任何东西,都会随着我们的前行变得更快速、更高质量、更少的 bug。我认为我们所有人都在为此做出贡献。我对此充满期待,也期待每个人对 Vercel 如何参与这个未来提出反馈。
**Lenny Rachitsky:**在此基础上,大家在网上哪里可以找到你?直接去 vercel.com,或者访问 v0.com?
**Guillermo Rauch:**对,去 v0.dev——
Lenny Rachitsky:.dev。
**Guillermo Rauch:**开始使用。我还提一下,如果你想构建自己的 v0,这个比较进阶,但可以看看我们在 vercel.com/templates 上的模板。另外我在 X 上是 BrouchG,随时可以私信我或者 @我。
**Lenny Rachitsky:**太棒了。Guillermo,非常感谢你来。
**Guillermo Rauch:**谢谢你,Lenny。很开心。
**Lenny Rachitsky:**大家再见。
(器乐)
**Lenny Rachitsky:**非常感谢收听。如果你觉得这期节目有价值,可以在 Apple Podcasts、Spotify 或你喜欢的播客应用上订阅。也请考虑给我们评分或留下评论,这真的能帮助其他听众发现这个播客。你可以在 lennyspodcasts.com 找到所有往期节目或了解更多关于这个节目的信息。下期再见。
术语表
| 原文 | 中文 |
|---|---|
dangerouslySetInnerHTML | dangerouslySetInnerHTML(React 中的一个特殊属性,用于直接插入 HTML) |
| AGI | AGI(通用人工智能) |
| artifacts | artifacts(Claude 推出的可共享内容块功能,保留原文) |
| Bolt | Bolt(AI 代码生成平台,保留原文) |
| box model | box model(CSS 盒模型) |
| builders | 构建者 |
| canvas | canvas(OpenAI 推出的交互式编辑画布功能,保留原文) |
| code last / code first | code last/code first(先产品后代码 / 先代码后产品的工作理念,保留原文) |
| copilot | copilot(辅助驾驶/智能助手,在此指 AI 辅助角色,保留原文) |
| cracked | 顶尖的(俚语,形容极其出色的工程师) |
| design engineering | design engineering(设计工程,设计与工程的交叉领域) |
| Edge Aviation | Edge Aviation(飞行数据 API,保留原文) |
| escape hatch | escape hatch(逃生舱口,React 中的底层 API 机制,允许开发者绕过框架限制) |
| exposure hours | 接触时长(exposure hours) |
| Figma | Figma(设计工具,保留原文) |
| fitness function | fitness function(优化中的适应度函数,此处比喻评判标准,保留原文) |
| flexbox | flexbox(CSS 弹性盒子布局) |
| Flightradar | Flightradar(航班追踪应用,保留原文) |
| fork | fork(代码分叉/项目复制,保留原文) |
| full stack | 全栈 |
| generative UI | generative UI(生成式 UI,根据 AI 响应动态生成界面组件) |
| Get GC.AI | Get GC.AI(面向法律行业的 AI 工具,保留原文) |
| Grok | Grok(源自科幻小说,意为深度理解,此处作动词使用,保留原文) |
| Guillermo Rauch | Guillermo Rauch(Vercel 创始人兼 CEO,保留原文) |
| hamburger menu | 汉堡菜单(移动端常见的折叠菜单图标) |
| Harvey | Harvey(面向法律行业的 AI 平台,保留原文) |
| inline prompt | 行内提示(inline prompt,针对特定代码片段的局部提示) |
| Ivan | Ivan(Notion 联合创始人 Ivan Zhao,保留原文) |
| latent space | latent space(潜在空间,机器学习中的隐含表征空间) |
| Leaflet | Leaflet(JavaScript 地图库,保留原文) |
| Lenny Rachitsky | Lenny Rachitsky(播客主持人,保留原文) |
| lingua franca | 通用语言(lingua franca) |
| Lumalabs | Lumalabs(AI 视频生成公司,保留原文) |
| Mapbox | Mapbox(地图平台服务,保留原文) |
| marginal cost | 边际成本 |
| Neobrutalist | 新粗野主义(一种视觉设计风格) |
| Next.js | Next.js(由 Guillermo 创建的 React 框架,保留原文) |
| OpenEvidence | OpenEvidence(面向医疗行业的 AI 产品,保留原文) |
| Oracle | Oracle(在此比喻为可代为执行任务的预言机/神谕,保留原文) |
| Paris Fashion Week | 巴黎时装周 |
| PM one-pager | PM one-pager(一页纸产品文档,产品经理的简要需求概述) |
| PRD | PRD(Product Requirements Document,产品需求文档,保留原文) |
| prompt enhancement | 提示词增强 |
| RAG | RAG(Retrieval-Augmented Generation,检索增强生成) |
| React | React(前端 JavaScript 库,保留原文) |
| shadcn | shadcn(React UI 组件库,保留原文) |
| shape rotator | shape rotator(指偏重数学/逻辑思维的人,源自网络梗,保留原文) |
| social coding | social coding(社交编程,GitHub 早期标语,保留原文) |
| social product building | 社交化产品构建 |
| Socket.IO | Socket.IO(Guillermo 创建的实时通信开源库,保留原文) |
| spec | spec(在此用作动词,意为编写详细规格说明,保留原文) |
| Tailwind | Tailwind(CSS 样式框架,保留原文) |
| TAM (Total Addressable Market) | TAM(可寻址市场) |
| taste | 品味 |
| thinking tokens | thinking tokens(AI 模型在推理过程中生成的思维链 token) |
| transformer 架构 | transformer 架构(深度学习架构,保留原文) |
| under the hood | 底层工作原理 |
| v0 | v0(Vercel 推出的 AI 驱动前端开发工具,保留原文不译) |
| v0 Community | v0 Community(v0 的社区分享功能,保留原文) |
| word cell | word cell(指偏重语言/沟通能力的人,源自网络梗,保留原文) |
| zero links | 零链接(zero links) |
此文档由 AI 分片翻译(translate_long_document)