Loading summary
Meng Tu
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. 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 want to highlight a clip from Dustin Sinos, who's the head of design at the browser company, and he shares a new way to think about your portfolio.
Dustin Sinos
I would really, really focus on sol 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 the 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 pat across human problems that people are having, choose the right tool and choose the right design to solve that problem.
Meng Tu
So this episode is all about solving problems by Vibe coding, or as Dustin likes to call it, Vibe design.
Dustin Sinos
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 co pilot 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 want to underline two parts from that clip that I think are super important. The first is starting with a problem that you care about. And if you're just tinkering for the sake of it, then you're going to give up when it gets hard. Meng2 said nothing else matters if you don't pick something that truly motivates you.
Emmett O'Connelly
This is the most important part. It has to shake your core to a point where you're not going to give up when you're going to get there. So for example, you create a prototype in Figma and you're going to 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 think code is not that scary.
Meng Tu
Real quick message and then we can jump back into it. So I've been doing a ton of demos for Inflight. I mean, Sometimes I'll have four 30 minute calls in a row and honestly I have no idea how I would do it without Granola. It's like Apple Notes, but it transcribes each meeting for me and then it's enhances my notes afterwards. 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 Granola for all all product conversations. 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 Tu? 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. I've tried every tool out there and Lovable is by far my favorite. There is 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 so 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. Just head to Dive Club Lovable to start building today. That's L O V A B L E. Okay, now on to the episode. Now, the second thing that Dustin mentioned was the importance of asking questions. 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. 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 happen to 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. 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 problems. So I'll explain my goals to ChatGPT and share a bunch about his workflow. And then here's the important part. I prompt ChatGPT to ask me questions to clarify its own understanding. So it'll generate a list of questions and then I'll just go through each one and ramble about the answers using the voice transcription. And, you know, we'll run that loop maybe 5, 10 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. 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. I then copy that doc and paste it back into ChatGPT 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. Now this back and forth between Cursor and chatgpt has really been a game changer for me. 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 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 0 to 1 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. And if you're inspired by other designers who are building their ideas, then I think you're going to like this week's episode with Emmett o' Connelly, who's the VP of Design at Intercom, because they've 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.
Dive Club 🤿: Episode Summary - "My Playbook for Vibe Coding💡"
Release Date: June 25, 2025
In this enlightening episode of Dive Club, host Ridd delves into the innovative concept of Vibe Coding, a term popularized by Dustin Sinos, the Head of Design at a notable browser company. The discussion centers around integrating coding into the design process to effectively solve real-world problems, emphasizing the synergy between design and development.
Dustin Sinos introduces the idea of Vibe Coding (or Vibe Designing) as a transformative approach for designers. He advocates for building portfolios that demonstrate solving genuine problems rather than just showcasing aesthetic designs.
Dustin Sinos [00:28]: "I would much rather see someone be like, hey, I went to the local food bank and I interviewed them for a week and figured out, and I built the software for them... We have to build things that solve problems for humans and help humans along."
Ridd highlights the essence of this approach, emphasizing the importance of tackling meaningful problems with the right tools and design strategies.
The conversation underscores two critical aspects for successful Vibe Coding:
Passion for the Problem: Selecting a problem that deeply resonates with you ensures persistence and dedication, especially when challenges arise.
Emmett O'Connelly [02:00]: "This is the most important part. It has to shake your core to a point where you're not going to give up when you're going to get there."
Continuous Learning through Inquiry: Engaging with AI as a co-pilot facilitates a deeper understanding of coding by encouraging designers to question and explore the rationale behind coding decisions.
Dustin Sinos [01:38]: "Stay curious with the process and ask the AI questions while it's doing it."
Ridd outlines specific strategies to implement Vibe Coding effectively:
Before diving into coding tools like Cursor, it's beneficial to brainstorm with ChatGPT to outline project goals and gather comprehensive context.
Example: For a proximity-based scheduling tool designed for an insurance adjuster, Ridd collaborates with ChatGPT to understand pain points and workflow intricacies.
Interactive Loop: Engage in a dynamic Q&A with ChatGPT to refine project understanding, ensuring clarity and comprehensive planning.
Once the project scope is defined, use ChatGPT to segment the project into actionable phases. For each phase:
Generate specific prompts tailored to the chosen coding tool (e.g., Cursor).
Implement coding tasks and have Cursor report back with detailed summaries and analyses.
Quality Assurance: Feed summaries back into ChatGPT to identify potential issues or areas for improvement before finalizing commits on platforms like GitHub Desktop.
Ridd [04:00]: "Now, it's made the entire process of going from 0 to 1 much more attainable for me. Hopefully, this creates an on-ramp that you can use to feel more confident building your ideas and solving real problems in code."
This iterative process ensures that each development phase aligns with the project's objectives and maintains high-quality standards.
The discussion also touches on the psychological barriers designers might face when approaching coding:
Emmett O'Connelly [02:00]: "...code is not that scary."
By selecting projects that deeply motivate designers, the fear of coding diminishes, fostering a more confident and seamless integration of design and development skills.
Ridd wraps up the episode by highlighting the transformative potential of Vibe Coding for designers. By leveraging AI tools and adopting a problem-centric approach, designers can bridge the gap between design and code, creating solutions that are both functional and user-centric.
Upcoming Episode Teaser:
Ridd hints at an upcoming conversation with Emmett O'Connelly, VP of Design at Intercom, who will discuss fostering a culture where designers take ownership of the front-end development process, further emphasizing the integration of design and coding.
Notable Quotes:
This episode serves as a compelling guide for designers eager to enhance their technical prowess and develop solutions that make a tangible impact. By embracing Vibe Coding, designers can seamlessly integrate creativity with functionality, paving the way for innovative and user-centric products.