我的氛围编程手册💡

再也没有借口了。你已经有这些工具。你可以直接用英语跟它们交流，它们就会为你编写代码。

There's no more excuses. You have these tools. You can just use English to talk to them, and they will write code for you.

那是Shopify的设计副总裁Darren Haneen，他表达了一种我最近从很多设计领导者那里听到的共同观点。设计师必须开始更熟练地使用代码来解决问题。因此，我想重点分享一下浏览器公司设计主管Dustin Cinos提出的一种思考作品集的新方式。

That's the VP of design at Shopify, Darren Haneen, and he's sharing a sentiment that I'm hearing from a lot of design leaders today. Designers have to start getting more comfortable using code to solve problems. So I wanna highlight a clip from Dustin Cinos, who's the head of design at the browser company, and he shares a new way to think about your portfolio.

我会非常、非常专注于解决实际问题，并用解决问题的经历来构建自己的作品集。我更愿意看到有人这样说，嘿，我去了当地的食品银行，采访了他们一周，了解了他们的需求，然后我为他们开发了这个软件。你看，他们以前在这些方面有很多困难，现在这个软件帮助他们解决了所有这些问题。归根结底，我们必须构建能够解决人类问题并真正帮助人们的东西。

I would really, really focus on solving actual problems and have a portfolio of solving problems. I would much rather see someone be like, hey, I went to like the local food bank and I interviewed them for a week and figured, well, and I built this software for them. And look. They used to struggle with all this stuff, and now this software has helped them with all of that stuff. It's it's at the end of the day, we we we have to build things that solve problems for humans and help humans along.

所以我建议你去追寻这类项目，用真正为真实的人解决实际问题的经历来充实你的作品集。你能否在人类面临的问题之间找到共性？选择合适的工具和合适的设计来解决这些问题。

So I would chase that stuff down and fill my portfolio with, like, actually solving real problems for real people. Can you pattern match across human problems that people are having? Choose the right tool and choose the right design to solve that problem.

所以，这期节目的核心就是通过‘氛围编程’来解决问题，正如Dustin喜欢说的那样，也可以称为‘氛围设计’。

So this episode is all about solving problems by vibe coding, as Dustin likes to call it, vibe designing.

不要把它看作是氛围编程，而应看作是氛围设计。赶快安装Claude Code或者你偏好的氛围编程工具。思考一个可能已经存在的问题，在AI的协助下尝试解决它，把它当作你的副驾驶，看看最终能走到哪一步。在这个过程中保持好奇心，并在AI执行时不断向它提问。

Don't look at it as like vibe coding. Look at it as like vibe designing, and very quickly go install Claude Code or your vibe coding tool of choice. Think about a problem that maybe already exists. Do it with AI as, like, your copilot and see where it goes and just stay curious with the process and ask the AI questions while it's doing it.

在深入讲解你可以用来端到端解决问题的具体策略之前，我想强调刚才那段话中两个非常重要的部分。第一点是，要从一个你关心的问题开始。如果你只是为了摆弄而摆弄，那么一旦遇到困难你就会放弃。Meng Tu说过，如果你没有选择一个真正能激励你的方向，其他一切都毫无意义。

Now before we get into the specific tactics that you can use to solve a problem end to end, I wanna underline two parts from that clip that I think are super important. The first is starting with a problem that you care about. But if you're just tinkering for the sake of it, then you're gonna give up when it gets hard. Meng Tu said nothing else matters if you don't pick something that truly motivates you.

这是最重要的部分。这个问题必须深深触动你的内心，以至于即使遇到困难你也不会放弃。举个例子，你用Figma创建了一个原型，你发自内心地希望能让这个表单具备功能，你希望可以把它提交到真正的数据库中。当你进入这个阶段，面对一个你无法通过非代码手段解决的问题时，那就是学习代码的完美时机。利用这种感觉、这种情绪，创造出你的第一个作品。

This is the most important part. It has to shake your core to a point where you're not gonna give up when you're gonna get there. So for example, you create a prototype in Figma and you're gonna be like, I wish to my core that I can make this form functional. And I wish I can just submit it to a real database. When you get to that phase where you have a problem in front of you that you cannot solve by something that is not code, then that's a perfect segue to learn code and use that feeling, use that emotion to create your first artifact.

如果你能做到这一点，我认为代码就不会那么可怕了。

If you do that, then I I think code is not that scary.

快速说一下，我们马上回来继续。我最近一直在为In Flight做很多演示。有时候我一连要参加四场半小时的会议。说实话，如果没有Granola，我真不知道该怎么应对。它就像Apple Notes一样，但会为每场会议自动生成转录内容，并在之后优化我的笔记。

Real quick message, and then we can jump back into it. So I've been doing a ton of demos for in flight. I mean, sometimes I'll have four thirty minute calls in a row. And how to say, have no idea how I would do it without granola. It's like Apple Notes, but it transcribes each meeting for me and then enhances my notes afterwards.

这样，就可以轻松获得简短的摘要，或者提取出团队需要的引语。我甚至可以直接通过Slack分享一个链接，或将内容导出到Notion。但更令人惊喜的是，我可以设置一个上下文窗口，向AI提问这些演示对话中的问题。例如，我可以让它生成一个项目符号列表，列出过去大约10次访谈中人们提到的所有功能想法。这简直太棒了，我坚信每一位设计师都应该在所有产品对话中使用Gronolah。

That way, it's easy to get little summaries or pull out quotes for the team. I can even share a link in Slack or export it directly to Notion. But what's really crazy is I can then set a context window to ask AI questions about those demo conversations. Like, I can tell it to create a bulleted list of all of the feature ideas that people have mentioned to me over the last 10 or so interviews. It's crazy, and I firmly believe every single designer should be using Granolah for all product conversations.

他们为Dive Club的听众提供了很大的折扣。如果你访问dive.club/granola，你和你的团队成员都可以免费使用三个月。还记得Meng Two吗？他曾经做过一期关于用AI构建工具的最受欢迎的节目。最近他发推文说Lovable简直太疯狂了，称它为设计师的梦想工具，他说得没错。

They're offering a big time discount for Dive Club listeners. If you head to dive.club/granola, you and people on your team can get three months for free. Remember Meng two? He had one of the most popular episodes on building with AI. Well, he recently tweeted that Lovable is insane and called it a designer's dream, and he's right.

我试过市面上所有的工具，Lovable是我最喜欢的。再也没有比它更容易将设计变为代码的方式了。只需用你自己的语言描述你的想法，就能看到它变成一个功能齐全的应用。而且迭代也很容易，因为他们有可视化编辑功能，你可以进行任何细微的修改，把细节做到完美。如果你还没用过Lovable，我保证它会让你大吃一惊。

And I've tried every tool out there, and Lovable is by far my favorite. There's simply no easier way to bring your designs to life in code. Just describe your idea in your own words and watch it transform into a fully functional app. And then iteration is easy because they have a visual edit feature, you can make any granular changes and get the finer details just right. If you haven't used Lovable yet, I promise it's going to blow your mind.

现在就前往dive.club/lovable开始今天的构建吧。是的，就是l o v a b l e这几个字母。好了，现在进入正题。接下来Dustin提到的第二点是提问的重要性。

Just head to dive.club/lovable to start building today. That's l o v a b l e. Okay. Now onto the episode. Now the second thing that Dustin mentioned was the importance of asking questions.

使用AI作为助手来构建项目是学习代码思维模型的绝佳方式。我经常会让AI解释某个建议背后的原因，或者提出几种不同的实现方式，并分析每种方式的优缺点，这样我就能理解用代码构建东西需要什么。在我深入细节之前，我会告诉AI我的目标不仅是做出一个东西，还要学习。所以我请求它：请留意任何可以用来提升我理解的机会，帮助我这个不太懂技术的人成长。

Building with AI as a copilot is a phenomenal way to learn the mental models of code. So all the time, I'll ask AI to explain the why behind a suggestion or maybe to propose a few different implementation ideas and then break down the pros and cons of each direction so that I can understand what it takes to build something with code. And before I get into the details, I'll let the AI know that my goal is not just to make something, but also to learn. So I ask it. Please look out for any opportunities that you can use to grow my understanding as someone who, you know, isn't that technical.

既然我们已经明确了这一点，那我们就来具体分析一下我在使用AI构建新项目时所采用的具体策略。我的第一个策略是：使用一个独立的工具作为你的首席技术官（CTO）。在我进入Cursor之前，我会先用ChatGPT进行头脑风暴。我会尽可能多地输入我想构建的内容的背景信息。例如，我正在为做保险理赔员的父亲开发一个基于地理位置的日程安排工具。

So now that we have that out of the way, let's break down the specific tactics that I use while building a new project with AI. Now my first tactic is to use a separate tool as your CTO. So before I hop into Cursor, I'll start brainstorming with ChatGPT. I'll just dump as much context as I can possibly think of for what I'm trying to build. For example, I'm working on a proximity based scheduling tool for my dad who's an insurance adjuster.

这是一个小问题，但对他的整个星期影响非常大。所以，作为一名设计师，我完全有资格去了解他的所有痛点，了解什么让他感到焦虑，并为他量身打造一个解决方案。我会向ChatGPT说明我的目标，并分享关于他工作流程的大量信息。接下来是关键部分。我会提示ChatGPT提出一些问题，以澄清它对项目的理解。

It's a small problem, but it really, really affects his week. So I'm just as qualified as anyone as a designer to learn all of his pain points, what's making him anxious, and create something tailored exactly for his set of problem. So I'll explain my goals to ChatchiPT and share a bunch about his workflow. And then here's the important part. I prompt Chatuche BT to ask me questions to clarify its own understanding.

然后它会生成一个提问列表，我会逐个用语音转录的方式随意地回答这些问题。通常我们会重复这个过程五到十次，直到ChatGPT告诉我它已经完全理解了这个项目。现在，第二个策略是让ChatGPT将整个项目分解成具体的阶段。对于每个阶段，我会让它生成一个提示，我可以将这个提示输入到我选择的工具中。就我目前的项目来说，它已经非常复杂了。

So it'll generate a list of questions, and then I'll just go through each one in a ramble about the answers using the voice transcription. And, you know, we'll run that loop maybe five, ten times until ChatGPT tells me that it has a perfect understanding of the project. Now tactic number two is to have ChatGPT then break down the project into concrete phases. And for each phase, I have it generate a prompt that I can feed into my tool of choice. Now for my current project, it's pretty robust.

我需要一个数据库，等等。所以我直接进入Cursor，把ChatGPT给我的内容粘贴进去，然后让Cursor准确地执行。接下来，我会告诉Cursor，在每个阶段结束时，它必须向我的CTO汇报。因此，它会生成一份详细的总结文档，包括所有更改、新增代码，以及它完成了什么、为什么这样完成。

I need a database off, all that kind of stuff. So I'm diving straight into Cursor. I just paste whatever ChatGPT gives me and then have Cursor implement it exactly. And from there, I tell Cursor that for each phase, it has to report back to my CTO. So it generates a robust summary doc of all the changes, all the new code, and a breakdown of what it accomplished and why.

然后我会复制这份文档，粘贴回ChatGPT进行分析。因为记住，它拥有我整个项目的上下文。我会让它找出漏洞，指出实现中任何看起来不对的地方。最终，当一切看起来没问题时，我就可以接受所有更改，并在GitHub Desktop中提交这一阶段的成果。接着我们回到ChatGPT获取下一阶段的简要说明，然后不断重复这个过程。

I then copy that doc and paste it back into ChatuchPut for an analysis. Because remember, it has all of the context of my project. So I ask it to just poke holes and highlight anything that feels off about the implementation. Eventually, once it looks good to go, I can just accept all the changes and make a commit in GitHub desktop for what that phase entailed. And then we head back to ChatGPT to get the brief for the next phase, and I just run that loop over and over.

现在，Cursor 和 ChatGPT 之间的这种交互对我而言真的改变了游戏规则。除非我在处理一些非常具体的 UI 细节，否则我很少会在 Cursor 中自己编写提示词。相反，我依赖那个 CTO 中介角色，将我的想法转化为有效的提示词，并在结果准备好后使用它来评估输出。现在，这让我从零到一的整个过程变得更加容易实现。因此，希望这能为你创造一个入门途径，让你在构建自己的想法以及用代码解决实际问题时更加自信。

Now this back and forth between Cursor and ChatGPT has really been a game changer for me. I mean, unless I'm working on super specific UI details, it's pretty rare that I'll write my own prompts in Cursor. Instead, I rely on that CTO intermediary to translate my ideas into a prompt that works and then use it to evaluate the output once it's ready. Now it's made the entire process of going from zero to one much more attainable for me. So, hopefully, this creates an on ramp that you can use to feel more confident building your ideas and solving real problems in code.

如果你受到其他实现自己想法的设计师的启发，那么我想你会喜欢本周的节目，我们邀请了 Emmett O'Connelley，他是 Intercom 的设计副总裁。因为他们全力营造了一种文化，让设计师直接发布到生产环境，并越来越多地负责前端开发。那么，我们周五见。

And if you're inspired by other designers who are building their ideas, then I think you're gonna like this week's episode with Emmett O'Connelley, who's the VP of design at Intercom, because they went all in on creating a culture where designers ship to production and own more and more of the front end. So I will see you on Friday.