← The Growth Podcast
Loading summary
Transcript125 lines
- [00:00]
A
PMs are designing AI products completely wrong.
- [00:03]
B
Designing with AI isn't about prompting. It's about understanding the entire workflow, the system, the constraints and the behaviors.
- [00:11]
A
Ginron is using Google, AI Studio and Stitch to create full fledged prototypes that are actually designed.
- [00:18]
B
Well, I can make it very refined or yolo, which is going crazy. You know, everyone can rely on AI to generate something, but again, AI is not human, right? It does not really have enough empathy. And that's why this GPT is meant for the very first prompt to AI prototyping.
- [00:34]
A
And you didn't use Claude for the prompt. You preferred ChatGPT for the prompt.
- [00:38]
B
I like to shift it to ChatGPT in order to save tokens for Claude. There are also other tools like subframe magic patterns, but they are more specific. I know many people are always facing the blank canvas question. I wanted to design something out of AI, but I'm not really clear about what I wanted to design for.
- [00:57]
A
Wait, show me what that really means. Before we go any further, do me a favor and check that you are subscribed on YouTube and following on Apple and Spotify podcasts. And if you want to get access to amazing AI tools, check out my bundle where if you become an annual subscriber to my newsletter, you get a full year free of the paid plans of Mobin, Arise Relay App, Dovetail, Linear Magic Patterns, Deep Sky, Reforge, Build, Descript and Speechify. So be sure to check that out@buildle.akashg.com and now into today's episode. Zhinran, welcome to the podcast.
- [01:36]
B
Thank you so much for having me.
- [01:37]
A
My pleasure. I've been following you online and I think you are one of the world's leading experts on design with AI, the title of your newsletter. And I'm really excited for you to bring this knowledge to everybody. And I think one of the first things we need to do is we need to build the neural circuitry to understand what is designed with AI. We need to build the neuronal connections. We need to build a mind map. So can you explain to us what is design with AI? What is the universe of design with AI that people should know?
- [02:02]
B
Design with AI covers a lot of things. You know, design and AI are very broad topics. So to make things easier to understand, I actually did a mind map. Let me show you. First of all, there is a part of design with AI which is about prompting, like how can we prompt better in order to get better results? There are also about tactical things like how can we ideate with AI better Using AI as assistant to generate better ideas that human is hard to think about. Not to mention there are also other design areas such as design and prototyping with the help of AI. And there are some workflows that I can explain more. Last but not least is a part of the landscape that fewer people talk about. That is aside from those tactics about prompting, designing, ideating and prototyping, there is also a part of world where we need to design, we need to stay conscious. Designing with AI and staying conscious mean how can we bring more intentions and thoughtfulness into the things that we are designing. And that also involves in the awareness of different kind of risks and how to mitigate those risks. So that's just a broad overview of the items and I can walk through each of the sections really quickly. And if you have any questions Aakash, feel free to ask me.
- [03:16]
A
Yeah, let's start at the top. Prompting with AI, I guess it's kind of a universal skill. A lot of people might kind of roll their eyes like I've seen so many influencers post prompt prompting frameworks. What do they need to know about prompting with AI to use these AI design tools? Well, cool.
- [03:29]
B
Let me zoom in a little bit because it's easy to get distracted when you see a lot of things. So let's start with prompt with AI. In my opinion, I've got to see many prompting frameworks and I believe Akash, that you've seen over the years as well. There are so many of the frameworks out there. But in my opinion to its core, prompting with AI, it's just a way of how human interact with AI in order to get better results. And I try to make things as simple as possible in from a design perspective as opposed to, you know, introducing so many frameworks that people can choose. So from that regard I jotted down some of the areas that I think are essential to prompt with AI to get better design results. The very first one is clarifying the ask. Before we ever even engage with AI, it's important to know what we want to get out of AI. So you can see clarifying the ask as request what you want to get out of AI, what do you want to include, what do you want to avoid? And if you don't know, know those things, which is okay because oftentimes it depends on the scenarios. We just don't know what we want and that is okay. We can leverage people for help. We can even ask AI for help to gain some clarity. So those are really the small things around clarifying the ask context is also very important and I believe Akash, you've seen this trend of context engineering becomes more trendy terms versus prompt engineering. It's just because of the fact that people realize how important context can be and it can amplify the effectiveness of prompt and regarding context, first of all I wanted to call out that not more context means better but the necessary context that is related to the goal. I think those are the things around context that really matters. That's why as you can see at the very first part I mentioned about providing context is really about clarifying the outcome so so that the clarity can help inform what to provide for the context and only providing the necessary context that involves. What role are you in? What are the unmet user needs? What timeline are you facing? Basically constraints, right? Time constraint, technical constraints. Is there any existing ideas that AI needs to know? Because if you have many ideas already, you might want AI to know, right? It really depends on your perspective. Some people wanted to hide some ideas from AI so AI can come up with some fresh ideas. But some people want AI to have something to base off from as opposed to drifting too far. So it's really about that. What is your prioritization criteria? AI struggles with priority because it does not really know what you want. So if you have something to prioritize and to focus on, that information could be really helpful. Who is the audience? Audience matters when you are trying to frame experience for a particular set of users. And that really helps if you can provide the audience information. What are the design principles and what are the brand guidelines? Those are all important constraints that you can provide to AI. Depends on different scenarios. There are some miscellaneous points like be aware of the existing memory, refresh certain memory by opening up a new chat, but those are just tactical things. Providing references also helps because we have learned that when providing references, whether it's text reference output format, visual references, code references, AI tends to give you better design outcome. There are some extra tips around prompting such as structure, unit structure out, simplicity, it's okay to be imperfect, reverse prompting, and so on, so forth.
- [07:02]
A
How much should you define the exact design you want? Because of course AI is going to do a much better job at giving you what you want if you're really specific. But at the same time then you kind of lose that exploratory lens and magic. And part of the magic is you can get three to four divergent designs. So I think we'll have to explore that as part of one of the workflows. But when you think about prompting, do you feel like you need to prompt these design tools with a very structured mega prompt or you can just do like the shorter kind of to the point prompts.
- [07:35]
B
I think it's an art in some ways. By saying art meaning sometimes we want more control of the outcome and sometimes we want to give AI more space to brainstorm. And it's really a fine balance. It's as if you were hiring someone, right? Sometimes you wanted to be very specific and sometimes you wanted to give her or him a vast amount of creativity or space to brainstorm. So based on my experience, it really depends. Regardless, I think some of the structure helps. If you can introduce it relatively early, that often helps as opposed to, you know, starting everything from scratch. You know, it is okay to do things that way, but it also requires a lot of time and tokens for sure.
- [08:26]
A
Awesome. So maybe we can go into the details of it as we think about ideation with AI which I think was one of your next points.
- [08:32]
B
Sure, yeah. Ideation, ideating with AI. I actually have two parts which is ideating with AI, design and prototyping with AI. They really go hand in hand as opposed to, you know, this is ideation, this is design, this is prototyping. Right. Given AI has bring some convergence to those, those things but just wanted to give some ideas around those early stage ideation such as brainstorming an idea. Right? Let's say Akash, we are thinking of a fresh product, ideas. We need some early stages stage brainstorming such as, you know, providing necessary business goals and problems, user goals and problems just to provide certain context or guardrails and you know, relevant user insights, relevant constraints and those are the things that we can provide for some early product idea brainstorming and regarding convergent thinking is also important because AI can get really, really wide and extensive and that's why we also need things to converge a bit. For example, ask for ranking ideas or ask for examples for better evaluation. Sometimes you ask AI, AI give you lot of ideas but you don't know where that idea come from. So it's basically asking you, can you keep providing me some examples and where did the examples come from? What are the sources? So can you use those to do your due diligence if AI is just making things up or you think that the sources that AI provide ended up being credible. Right? Just for your own sake, for better evaluation. So that's that regarding design and prototyping with AI it's more like an extension of ideating with AI. That's why I said they go hand in hand. There are some common best practices, right? Specifying instruction, specifying the context, brainstorming design variations, keep track of design variations, navigate between options. So Aakash, as you can see those areas like the first, let's say the second one and third one it can be reflected in prompting, right? The very first one can be indirectly reflected in prompting, but the fourth, fifth and sixth ones are become more ambiguous. It's more like how you operate within the design landscape versus mere prompting. And those are the things were a challenge like years ago, but as more and more AI tools realized this pain point and they started to have new features that addressed those pain points, that is easier for designers or non designers to design I would say. So those are some principles and best common practices I would say around design with AI. And of course there are workflows. Workflows I put into two big buckets. One is more like from an idea to design and oftentimes it is leaning more heavily on text or ideas versus actual existing designs. And I included here you can clarify the ideas through different AI tools such as ChatGPT, Claude and Gemini or I will mention a custom GPT that I've built in a bit. So it's essentially a type of chatgpt. It's just that I provided some extra thoughts to it to save people's time and to save my time regarding AI tools, I can explain further about the nuances between different AI tools so that those are not treated equally and it really depends on what you want to get out of them. Regarding from an existing experience to design, well that actually requires more guardrails around what you want to do, right? And maybe you have existing website that you can take snapshots from or you have existing figma file because figma is the go to design tools by many designers, right? So there are different workflows I can talk about in this area as well.
- [12:29]
A
Today's episode is brought to you by NIA1. In tech, buying speed is survival. How fast you can get a product in front of customers decides if you will win. If it takes you nine months to buy one piece of tech, you're dead in the water. Right now financial services are under pressure to get AI live, but in a regulated industry, the roadblocks are real. NIA1 changes that their air gapped cloud agnostic sandbox lets you find, test and validate new AI tools much faster. From months to weeks from stuck to shipped. If you're ready to accelerate AI adoption, check out NIA1@nayaone.com Akash that's N A Y-A O-N-E.com A-K-A-S-H Today's podcast is brought to you by Pendo, the leading software experience management platform. McKinsey found that 78% of companies are using Genai, but just as many have reported no bottom line improvements. So how do you know if your AI agents are actually working? Are they giving users the wrong answers? Creating more work instead of less, improving retention or hurting it? When your software data and AI data are disconnected, you can't answer these questions. But when you bring all your usage data together in one place, you can see what users do before, during and after they use AI, showing you when agents work, how they help you grow, and when to prioritize on your roadmap. Pendo Agent analytics is the only solution built to do this for product teams. Start measuring your AI's performance with agent analytics at Pendo IO Akash that's P E N D O IO Aakash
- [14:01]
B
how
- [14:01]
A
many designers are using the Figma make to Figma workflow?
- [14:04]
B
Yeah, great question. So I've talked with many designers the design the product designers in the states are using Figma make quite a bit just because the fact that they have the Figma paid plans that's why they have access to Figma make already. But when I talk with people outside of the US for example I talked with another designer who's based in Asia and he told me that they not a lot of people are using Figma make and I was surprised because they do have access to Figma. I don't know why. And for Europe some of them, and I know some of them, they just don't have access to Figma make for like whatever reasons.
- [14:42]
A
So it seems like if designers get access they are using it quite a bit. So that's really interesting the pickup on these AI prototyping tools not just for PMs but clearly for designers as well. What's that fourth area you had about being conscious with AI? Can you give us the next layer deeper on it?
- [14:57]
B
Sure, the being conscious with AI. It's more about aside from all the tactics of how can we use AI to design better, smarter and faster. I do wanted to bring another layer of things. I may not have a lot of time to cover this today, but I believe that for during some of the workflows this is already indirectly interjected in some of my demos. It's basically how to bring more intentions and thoughts on around what you are generating as opposed to fully 100% being driven by AI, I still think some control as a human or some intentionality can go a long way. So for example, some awareness about risks. You know like I just mentioned about the early brainstorming with AI critical ideas, right? We need to be aware that there are some hallucinations, you know, biased insights, outdated insights, irrelevant insights or low quality generic insights that can be part of the insights that we subconsciously have brought in. Like for example, let's say I'm designing for something, let's say designing for whatever experience. Like restaurant booking experience, right? If I were just to ask ChatGPT what's the main pain point of the users, it can give me very general insights or or even bias insights that are tailored around a specific type of users, right? So that could be dangerous or they just make things up or they provide generic insights that not really helpful. So that's that regarding recommendations are just ways to mitigate your risks. Like for example, you know, keep human in the loop during the research ideation process, double check the sources. Empathy with the people that you're designing for becomes even more important because you know everyone can rely on AI to generate something. But again AI is not here human, right? It does not really have the enough empathy with the people who are YouTube. They don't really care. To a certain extent including diverse perspectives in the process become very important. Again, this is also about design intentionality and this is a huge deal for for product designers giving user control over automated decision and important data. I think this is pretty self evident audit for AI outputs nuanced information matters mere transcripts. So this is also another interesting point I want to call out. It's just because of fact and I noticed a lot of PMs and including designers, they would fetch different information, they would feed information into different AI tools and they get certain insights and then they just build and design on top of those insights. But again there are so much to it. For example the behavior insights or sarcasm or hesitation, right? Those kind of behavior clues that can. It's really hard for AI to understand with mere transcripts. So just a way to call out that, you know, before we actually generating something out of AI just make sure the insights are high quality makes sense.
- [18:00]
A
So if you had to pick two workflows to demo for folks, what are the things that people need to walk away and learn from this video?
- [18:06]
B
There are two things I can demo one of the workflow which is around this area that is from a blue sky idea more or less to design because some People are working in this area. I can also give another workflow which is about from existing experience to design. I can give a demo of something like both of the workflows that I will show today are not very commonly used by people. And I thought maybe that can also bring some fresh perspectives.
- [18:36]
A
All right, let's do it. And promise me you're going to show me all of the details, right? Not hide anything from us.
- [18:43]
B
Of course, of course. Actually, as a matter of fact, I would be surprised if there's no bugs occurred during a live AI demo. That's just the nature or reality of things and I wanted to show if in case that happens to you all as well.
- [18:59]
A
All right, let's do workflow one.
- [19:01]
B
So the workflow I'm going to explain is more about custom GPTs to PRD for prototyping and a lot of AI tools. I know this slide can be confusing, whether it's really mean. Let me explain a little bit. So, first of all, I have built a custom GPT. A custom GPT, you can consider that as a ChatGPT, but with my personal instructions. And I will show you how I follow the steps within that custom GPTs to generate a effective quote, unquote, PRD for prototyping. So it's not a broad PRD for everything, it's only for AI prototyping. So then I can copy paste that PRD for prototyping into any of the AI tools that you want. Although, as I mentioned earlier, there are some difference between different AI tools. But for now, you don't have to worry too much about that area. We can just focus on this area first. And during the demo, I also, you know, paste into a couple of tools to give you a sense of how it, how it works. Does that sound good to you, Aakash?
- [20:04]
A
Yeah. Maybe you can show us, like if somebody was building this custom GPT from scratch, how they would build it go.
- [20:10]
B
I think that will also touch upon some areas. Do you want me to show you how to build a custom GPT from scratch? Or more about the frameworks, how I can better build a system?
- [20:26]
A
Well, how to build this one. Right. Because I guess this custom GPT is about PRDs for prototyping tools. So maybe we can just kind of show people like, these are the inputs I would put into the custom GPT generator.
- [20:36]
B
Sure, sure. I can give you some of the general guidelines as I mentioned earlier. Right. Effective prototypes is about request what you want to get out of AI, the context and reference. Right. Those are very broad items. I Can be a little bit more specific here. So in this particular scenario is that. I don't know Aakash, but I know many people are always facing the blank canvas question. I wanted to design something out of AI, but I'm not really clear about what I wanted to design for. That's why I have to vibe coding quote unquote, right, one sentence at a time. But sometimes it can easily go into loops, which is frustrating because you're not clear in the first place. And that's why I started to build this custom GPT because I wanted to bring myself some clarity around what I need to put into the prompt and that is tied to the context. For example, who am I designing for? Right. That is important. And sometimes when we're writing things in AI tools this is something can be neglected. What are their needs? This is also a question that I put in the custom instruction of the custom GPT just to give me some thoughts to think about. What are we trying? What are they trying to achieve? And this is about user goals, right? And which experience do you want to focus on? This is an interesting one because oftentimes we focus on too many things and AI struggles if we just wanted to build a full stack app from scratch. And that's why I want to bring myself or bring others some clarity around which specific area, whether it's the platform or the user flow that you want to prioritize building first. And once that gets figured out, it's much easier for you to scale up. For example, if the mobile web solution is good, then it's much easier for you to scale it up or to apply to another type of experience. And let's say if the core user flow is figured out, then the login logout experience become so easy because it's not addressing the core user needs. It's pretty standard elsewhere. That's why I try to be hyper focused for the very first prompt and very first prompt matters. And I believe Akashi have some similar experience that the very first prompt will set the stage for a lot of things. And that's why this GPT is meant for the very first prompt to AI prototyping.
- [23:04]
A
Got it. So you load up a go to custom GPT generator. You load it up with this information. This is what an effective versus a bad prompt is and this is the context questions I want you to answer. Makes sense.
- [23:15]
B
Yes. And again, this is just one type of the custom GPTs. You can build your own custom GPTs based on your needs. So this is more of a simplified version of Quickly generate something or quickly generating a effective prototype that matches your idea and you can build more, you know, more complex things over over it.
- [23:38]
A
Yep.
- [23:38]
B
Cool. All right, so I can give a demo. So let me drag this over here and I can click here to start again. This is also what I built in the custom GPT as well. So just make it easier for people to onboard. All right, great, great. Let's get started. As you can see, I broke questions into different smaller chunks. That is easier for user to control. So what is the main goal of your product? For the sake of the demo I would just go with whatever comes, you know, shows here by default. You know, if we have time towards the end we can, I'm, I'm happy to go crazy like we can come up with something from scratch, but for the sake of demo, let's just go easy with whatever suggested here. So let's say help user track expenses, right? That's the project goal or what user want to do. What are the intended user of the product? So let's say freelancers.
- [24:30]
A
Okay. So you built this custom GPT in sort of a way where it's extracting the information from you before it gives you the prompt.
- [24:37]
B
Right? It's like asking me some questions in order for it to better perform the task.
- [24:44]
A
Yeah.
- [24:44]
B
Cool. Third question, what platform is your product for? And this is also something special about the custom GPT is that I make it really specific as you can tell here. So in this case I can just type a number like, let's say one. All right. A responsive. Okay, so those are the key user flows that help users achieve the goal. As you can see here Akash, that I. It does not generate login or it does not recommend or provide login and log out as the option. And I did that on purpose. It is specifically called out in the system instruction is that I do not want that to be a part of recommendation. The reason is that if you just using some other ChatGPT like using other custom GPTs or the general ChatGPT, chances are the first thing it will recommend you do is to include the sign up, sign in experience. But to me that is not the key user flow that we need to focus on first. Right? It's not directly solving the user problem. That's why see it generated some ideas for you. So I can say something like you know, one and maybe part of two. It really depends. I can say one, I can say two, I can say three. I can say all of them again. I try to keep things simple. All right, so Here's a preview of your design spec draft. This is a preview and I can always check, you know, if there's any issue or something like that. But as you can tell, this is a very lightweight prd and I don't really call it a PRD because it's more like a spec. A spec for AI tools to generate a prototype. So the focus is really on front end presentations such as components and interactions. Right, Let me scroll down. Like, do you get to see those kind of like backend logics or technology? You don't just because of. I specifically ask it to not include those things so that, you know, AI can be more focused to generate the front end experience first. So that's that. And I always encourage people to make some revisions and double check if that makes sense as opposed to just blindly rely on what AI has generated. All right, this preview looks good to you and this is also a checking point that I built in the system instruction. Right, Check if does it look good to you? If not, make revisions. If yes, it will generate the final markdown. So let's say yes, this is the markdown format in a code block. And I specifically asked for this in the backend because it just makes things easier for me as opposed to first, as opposed to copy paste into any other AI prototyping tools. And also I made it easier for me because it's a markdown format. It can retain better retain the hierarchy of the spec so that it can make AI easier to understand in order to get better results.
- [27:34]
A
Yeah, I see you're kind of doing two things here, right? You're not making this too long so that you experience context rot, but at the same time you are being very, very specific about. These are the four screens I want to see. This is the key user flow. So you're defining the front end quite specifically, but nothing else.
- [27:54]
B
Right. I try to find a balance and I know some people prefer a bit more details. Some people, some people prefer less details, but this is more like a sweet spot that I found for a lot of my use cases. Again, you know, other people can customize from there. Cool. All right, so let's say we're happy with this. Right. I'm going to paste into any of the AI popular AI prototyping tools. Let me start with claude, or we can call it Claude AI or CLAUDE Artifact. Right. The reason I like about CLAUDE is not because it can generate the best quality of design. It's more about. It's a well rounded tool that can give me a quick mock run of what I can expect from this prompt. Right. If I were to ask you, Akash, if this makes sense. It's hard for you to visualize things, right? It's hard to tell just because there's so much information. So I like to use Claude AI as a lightweight Mach run tool to double check if the prompt makes sense or if it's running into any arrows or something I'm not aware of. If so, I can always go back to the drawing board to revise.
- [29:07]
A
Got it. And you didn't use Claude for the prompt. You preferred ChatGPT for the prompt.
- [29:11]
B
Yes. Great question. The reason I do this is that just because of the fact that I know Claude can be very powerful in terms of code related tasks. That's why I like to offset things are not correlated in ChatGPT or Gemini. For example, clarity related stuff. I like to shift it to ChatGPT in order to save tokens for Claude.
- [29:39]
A
Yes, the Claude tokens. I'm on the 20x max plan right now. You're paid.
- [29:45]
B
That's incredible. So that's not a problem for you then?
- [29:49]
A
Well, I still hit the limits. I push Claude code to the limit every day.
- [29:55]
B
It's funny because I. Yes, like I hit the limit as well a couple of times. But I'm not on the max plan though.
- [30:02]
A
If you've been enjoying today's episode, you are going to Love Ginron's Course AI for product designers. It is on Maven. It has 4.6 stars with 116 reviews. It is a two week intensive live bootcamp where you're not just going to learn what we showed in this episode, but the next layer deeper. You're going to learn from all of his expertise in trying out all of these different tools. Hundreds of other students have taken his course so that they can get better at product design. We're all feeling that anxiety about AI. If you want to become better at product design, whether you're a PM product designer or engineer, check out his course AI for Product Designers. On Maven. You get a discount by using my code AKASHXMaven. It's $100. We might even update it to more. So go get that code. Use my link, check out his course. And now back to today's episode. Here's the dirty secret about prototyping. You spend two weeks building a prototype. You validate your assumptions. Engineering loves the direction. Then what happens? You throw the whole thing away. Bolt changes this completely. When you prototype in Bolt, you're not building throw away mock up. You're building real front end code that integrates with your existing design system so when you hand it to engineering they don't throw it away. They ship on top of what you've built. I use Bolt every single day. I host my land PM job cohort on it and honestly I'm up till 2am some days just vibing in the tool, having fun and building. That's when you know a product is good. When you're using it past midnight. Not because you need to, but because you want to. Check out Bold at Bold New that's B O L T N E W A A K A S H link in the show notes. You know what kills momentum? Spending 30 minutes on a brainstorm with Claude and then copy pasting it into a slide tool to create the slides. That loop is dead. Gamma now works inside Claude through CLAUDE connectors so you can go from thinking to a finished presentation without ever leaving the conversation. Here's what that actually looks like. You're brainstorming a product strategy. In Claude mid conversation you say turn this into a deck. Gamma generates it right there. You keep refining your thinking and the presentation updates with you. No copying, no pasting, no starting over in another tool. And it gets better. Connect Gmail, Notion or GitHub alongside Gamma and Claude will use those connections to pull live data straight into your slides. Weekly business reviews feature PRDs all generated from the data you're already using. Your deck finally keeps up with your ideas. Try it now. Connect Gamma to Claude Claude at Gamma app. Go from thinking to presenting in one flow. Claude helps you think, Gamma helps you show it. Okay, yeah, it's. It's an addiction at this point. Claude tokens.
- [32:32]
B
Yeah, indeed.
- [32:34]
A
So I guess theoretically you could just like you architected the custom GPT, you could build a Claude skill or a CLAUDE project to build the prompt if somebody wanted to. The the keys when they're building that prom generator. I think we saw where like make sure you get absolute clarity on the front end, make sure that the user kind of agrees with it and then make sure it just generates a very simple prompt that's not going to be like overstuffed with random details like success metrics or this is the user group. Like it's really focused on defining the
- [33:01]
B
front end 100% because it's very easy for you to put a lot of details into the prompt, like irrelevant details. And as I mentioned earlier, it's very important to only provide the necessary context and that is relevant to your goal. So I try to be very careful about here and as you back to what you said, yes, you can build a cloud project, something like that. You can also use GEM by Gemini, but to me, GEM by Gemini is more like a simplified version of custom GPT based on what you can do in the backend, but it's also free, which is good for Gemini.
- [33:37]
A
Oh, there you go.
- [33:39]
B
All right, so let's put. Let's double check what it can do, you know, because as I mentioned earlier, for Claude, I don't expect something really great. You know, it's really, really simple.
- [33:50]
A
Yeah. One thing that immediately sticks out to me is the purple, which is kind of the infamous mark of designing with AI.
- [33:58]
B
Oh, that's. That's funny. Yeah, yeah. Like, you know, this is off the. Off the screen. It has some essay. Let's play with it. Date, let's say December 19th with whatever, you know, Thai food, which I had this noon.
- [34:20]
A
Yes.
- [34:22]
B
Well, it's very heavy, so I'm still digesting. You got a curry? Yeah, I got a tofu pai Thai. Nice. But it's also a little bit overpriced. Save expense. View summary. Yeah.
- [34:38]
A
Wow. I mean, that's the coolest thing about these tools is you got three or four screens in a product in minutes.
- [34:45]
B
Yeah. So excuse me, let me. Let me change the screen size a little bit so you get a better preview of what it looks like. I have not tracked the spec, ironically, because usually I check it, but again, this is a visual printer presentation of what I provided to it. You know, the key flows, adding new expense, see updated summary, something like that. So at least it gives me a visual representation of what this prompt will entail. In other words, if I were to feed this into other AI prototyping tools that are more robust than CLAUDE AI, chances are I might get a similar experience. In other words, if I see something dramatically off here, maybe it's because of the prompt, so that I can go back to the drawing boards to make revisions.
- [35:29]
A
Okay, so we'll assume the prompt is correct. What's the next step?
- [35:31]
B
By the way? Usually this is already the final step, if you are comfortable with prototyping CLAUDE AI, which I believe not the case for most people. So I like to do a mock run, as I mentioned, to double check if the prompt makes sense and for the next step, likely. Right. I don't think these people want to end at cloud AI. So you can go to any of the AI prototyping tools that are out there. So let me open up Larvable. So I know some PMs like to use Laravel. So let me copy paste the same prompt and let me paste it in
- [36:07]
A
Larable and across all the tools that you've tried. Like how would you describe the pros and cons in your favorite one?
- [36:14]
B
So wow, there's a lot. Let's start with Laraverbowl V0 boat because those three are were established relatively early around AI prototyping and in my opinion they are similar. I know Lovable has they has built a lot of things over the past six months. So if you're looking for a higher quality design with a very it has a particular vibe around those design styles. Some people like it, some people not. But if you're looking for a well rounded tool that can deliver a good design results and you don't mind paying extra for the well rounded experience for the actual features and Lovable is the one for V0. I think quality wise is similar with Lovable. I also like the fact that you can edit the code without upgrading to the paid plan which is more accessible in a lot of ways for v0. But again I just have honor the impression that you know, Lovable has been really updating a lot of things and some people prefer V0 design aesthetics over Laravel. It's really a, it's really a personal choice for Larvable's design. Vibe is more like very glamorous, you know, very vibrant. So that's, that's the difference. But overall they're, they're quite similar. The Lovable may have some other bells and whistles regarding both. I no longer use as much. It's just because of the fact that V0 and lovable are doing quite well. But if you're interested in a like full stack prototype then I do find Boat has more better integrations because of the team behind bote. So that's Laravel, V0 and boat. There are some other tools as well like Google AI Studio is something relatively new in terms of its prototyping capabilities. Google AI Studio has been around for a long time but it's just recently it's really shifted its focus from you know, a development developer based tools to like Vibe coding tools that everyone can use. And I found it interesting. It's having some of the new features, it's free which is good for more accessible for many people. But regarding the design quality, I feel like it's still catching up with the tools like Laravel and V0. There are also other tools like Subframe Magic Patterns but they are more little bit more specific. They're similar with well magic patterns is similar with Lovable per se, similar with V0, but it has some extra features that are centered around product design. And Magic Patterns explicitly does not have a backend, as you can see. That's. That's a difference. That's like a deliberate business decision that they've made. There's also pros and cons, depending on what you want to get out of it. So this is the level one.
- [38:58]
A
At least we don't get the purple Lovable has put into their system prompt. Avoid that purple gradient because Opus 4.5 overuses that. Or maybe it's not using Opus 4.5 on the back end. We don't know. This is a simple enough app.
- [39:10]
B
Yeah. This is also something. A new trend I've seen in AI tools such as Lovable or Cursor is that they're not just dependent on one specific AI model. They have more than one model from one company to leverage so that they can get a little bit smarter and less dependent on those, you know, AI model companies.
- [39:31]
A
Yeah. You mentioned, by the way, Magic Patterns. Magic Patterns is totally free for paid subscribers of my newsletter. They get a year free of that as well as Reforge Build, which is another one. I think both of those are really specific for like front end PM design prototypes. Like you said, like a Bolt or a Replit is much more powerful if you want to build a full stack.
- [39:49]
B
Right? Yeah, we didn't mention Replit exactly. Especially you wanted to build a full stack prototype. I found Replit has a lot of things that can get you hooked up to the backend. Again, that also comes at a cost. That means that you have to pay extra for that holistic experience in Replit.
- [40:07]
A
So what do we take away from this Lovable prototype?
- [40:09]
B
The loveable prototype? As you can see from a detail standpoint, there are small areas that are more upgraded compared to the cloud AI experience. Right. You know, just like random things, save expense slightly. There's an arrow state, as you can tell, the drop down the color. It's more refined in a lot of ways and save expense. There's, you know, the confirmation page.
- [40:34]
A
It's a lot better than Claude. Yeah.
- [40:36]
B
As you can see. Yeah. They. They've spent a lot of work in terms of the. The. How do you say, I refer to it as sub AI agents between the LLM model layer to the actual presentation layer. So there's something unique about different AI tools or system prompts. In other words.
- [40:55]
A
Yeah. It's not just a claw dropper anymore.
- [40:58]
B
Exactly. The actual layers actually helps.
- [41:00]
A
So I Think another thing that designers probably care a lot about is Lovable just shipped visual editing. Do you use that a lot?
- [41:06]
B
Not that much in the sense that it is helpful to a certain degree. And it still in my opinion is still catching up with the similar feature in v0 and figma make. So it's not that robust in my opinion, but it's getting better and better.
- [41:23]
A
All right, so shall we move into workflow too? What's the second workflow people need to understand to really understand design with AI?
- [41:30]
B
Sure. So the second workflow, it's more about new combination of tools that are Google Stitch and Google Stitch and Google AI Studio. This is very new by the way, because I know some people know about Google AI Studio. But over the past, I think about two months ago, Google AI Studio announced its new Vibe coding whatever engine that you get to build things, build prototypes within Google AI Studio, which is exciting news. However, at this point Google AI Studio still feels like, you know, like lovable, that you get to see the code you get to using, you get to use prompt to generate a prototype. Right. But it's lacking something that is the early stage design explorations and not a lot of AI tools out there can empower that. Stitch is a good example. So Stitch is a Google product. The about July, Google acquired Galileo AI and rebranded as Stitch. And over the past two months or one month specifically Google Stitch has been actively updating its different features and in a very fast speed, like every week, there are, there were, there are new updates and Stitch is a tool that can help everyone easily generate design ideas. So you can see the Stitch Google AI Studio combo as you know, getting the best of both worlds. Google AI Studio is more like for, you know, prototyping interactions, whereas Stitch is more of early stage ideation. And I found there are some interesting synergy between the two and that's why I wanted to showcase to you all. And by the way, you can do similar things in magic patterns, which I'm more familiar with by the way than stytch. But just given how new things are, I wanted to give you all overview and hope that can be helpful. Cool.
- [43:28]
A
Yeah, I haven't seen much about Google Stitch yet. Excited.
- [43:31]
B
It's very new. All right, so let me pull out a Google Stitch. So first of all, as you can see right here is that we can actually paste directly copy paste the prompt in my chatgpt to here. You know, I can copy paste it here. This is one use case of using Stitch is that you generate a set of designs from an Idea similar with what we did for lovable. Right. But for this case I wanted to try something special. So in this case, let me show you something. If I go to redfin.com if I go to any of the sections, I'm trying to find example that is easier for people to get. Trying to see if there is a. There is a ascariff. So let's say we are finding a house in Seattle. I wanted to showcase you a particular example that we can leverage Stitch to play with. Oh, we're actually in a B test as well right here. Never mind, I can grab another snapshot. I think it's easier for you to people to understand. So right here, let me grab something. Do you see this? This is a snapshot of a home detail page for a real estate platform. And there's one section called Ask Redfin. And this is the experience of so called AI chat for people to understand more about the home. Let's say we are designing the experience for this specific area. What could be the other design variants that we can get out of this existing experience? And I wanted to bring this up is because this sounds like a totally different challenge, design challenge than the one we talked about earlier, right. So that just brings some, bring some diversity to our workflows. So if I were to go back to Stitch, so let's say I copy paste the design, the existing scenarios here and I can describe the design and for the sake of time, right before this call, I actually wrote down some of things as an initial prompt so that I can save my time typing here. So as you can see, I put it in some of the guardrails around what I want it to generate. Number one is contacts. You are reviewing the AI chat section on a home detail page of a real estate website. When potential home buyers browse a listing and interact with the section, an AI chat window will pop up. So those are just context. The business goal is this, the user goal is that. And this is my evaluate the existing experience, identify actionable improvements and generate better design ideas accordingly. For the Ask reference section, I don't usually do things like that. Is it because I'm combining several asks into one? I could have just, you know, break it down into steps. But for the sake of demo, let me do this just for the sake of simplicity. And something interesting about Stitch is that you can toggle between app and web. So in this case, let's start with web and under here is different models. It's funny because a week ago there are only three models here and then there's a thinking with 3 Pro. So how about let's try out this. This is very new by the way. And what I'm doing now, again as recap, is to generate design ideas based off a snapshot of existing design with. Along with some of my context and requests.
- [47:07]
A
So this can be your. On the divergent path. When you're exploring divergent solutions, this can be your thought partner.
- [47:13]
B
Correct. If I were to go to the diagram again, you can use prompts one idea at a time or you can generate multiple ideas. And I can explain this further. Akash. So there is an option or feature in Stitch where you can generate multiple options. So you can stay with this mode or you can switch to a more divergent mode for design brainstorming. Cool. Let me close out Lobable and probably I can close out those two as well and just wait a bit for the things to do. All right, so as you can see by default it generates two options. I can actually specify, you know, I can make it more. I can generate three options here. So let's take a look at what I generated based on what I. There are a lot of things like, as you can see, there is still some randomness in the outcome regarding the area outside of the Ask Redfin section. But I don't care about those section as much, so we can ignore it. So let's look at this section, Ask Redfin. You know, compared to the existing design, it actually saved up some space for the prompt window prompt box, which is arguably more clear in this way. And there's also more context around this area. So that's something. That's just something as a, you know, like, like an idea to think about. What about the other idea? This idea? If we were to compare with the original side by side, I think. Let me make that larger. If that's easier for you to see. I can. I think I'm gonna do this big. All right, so if you were to compare with that one, it's closer, right? It's similar, but it's just a matter of like spacing and layout. All right, so we have something very preliminary and those two options help. But let's say we are. Oh, before I go further, I'm going to take a pause. Any questions you have here, I guess they're somewhat divergent.
- [49:04]
A
Should we try to ask it to give even more?
- [49:06]
B
Yeah, sure. So let's talk about this area. Like this option. So let's say we are interested in exploring this area more. You know, I could have taken another snapshot, but let's just start from there. I can click here, drop down and there is a regenerate feature where I can rerun it again if I'm not happy with what I see right here. Which is always a little trick for generate more ideas. But I can also do variation which I use it more often. So let's say for. So first of all, I can define how many options I can generate. So I can make it four, I can make it two, but let's just make three as the default for now. Creative range. I can make it very refined. Or Yulo, which is going crazy. How about Yulo? Let's be more divergent at this point. So for the Ask Redfin section, based on the business and user goal and user goals that I provided earlier, generate. Generate more design options aspects to vary. You can, you know, let's say layout. Color scheme. Color scheme, yeah, why not Images doesn't. I don't need it Text found. I don't need text content. Yes. So generate variations. It can probably go pretty crazy because we are in this YOLO mode right now, but we'll see.
- [50:36]
A
YOLO means you only live once. If somebody's wondering, it's funny that they've put that directly into their product.
- [50:43]
B
I know it's funny that you can. I have to Google it to look it up every time.
- [50:48]
A
Yeah, it's from a Drake song in like 2014, I want to say. So shout out to the Canadian rapper Drake making it into a Google product.
- [50:56]
B
Great. Should have a, you know, gif or image in some sort of success message.
- [51:02]
A
Oh man. I think like the song he personally published on this was pretty explicit and so Google probably wouldn't allow it.
- [51:09]
B
Cool, cool, cool. That makes sense. Otherwise I was thinking introducing the MV here while we're waiting. All right. Wow.
- [51:17]
A
Way more divergent. I like this. So the hack here is use YOLO mode in Stitch to get divergent solutions. And then we're going to take these from Stytch to Studio.
- [51:28]
B
Yes. As I mentioned, you can keep ideating from here. Right. So if I were to go back to. To my. If you remember my mind map, we can just keep diverging from here and you can ask a prompt here as well. Right. And there are different models that you can play with by the way, for fast model that you can export to Figma in the future and it's something odd. Right. It should allow you to export to Figma and Google AI Studio for any of the models here. However, for some reason it only allows you to export figma if you're under the fast mode. Just. Just a heads up. Another thing Akash, it's redesign model is very interesting. It also gives you a lot of creative ideas by doing redesign. So you wanted to check that out.
- [52:12]
A
Let's see it.
- [52:13]
B
More ideas for the sake of time. Let me just give you a. Oh, I think I. Yeah, I think I selected the right one.
- [52:19]
A
You need to make sure to select the right frame so it knows what to diverge off of.
- [52:23]
B
Exactly. Yeah. And this is a perfect time to introduce any kind of ads or envy. So back to what I'm saying right here. It really depends on needs. Let's say if we are happy with the idea, we think there are some potential we can export to Google AI Studio for further. Wow. No, it's getting now it's going wild
- [52:43]
A
on the design system but at least it's something different.
- [52:46]
B
Yeah, that's true. So let's say if we still like this one. I know it's getting. It's not really what we asked for to be honest Akash. But let's go with this one. So let's say we wanted to export to Google AI Studio by default. This is the one. And I can say turn this into an interactive prototype. By the way, we don't have to provide anything here. We can leave this blank because I'll show in a bit that it just essentially copy paste the same thing in Google AI Studio. That's that for some developers I know they like drools which is more, you know, if you have a GitHub repo you can download code and copy the code as well. But those, those are the features that I don't use much.
- [53:29]
A
That's like Google's coding agent, right?
- [53:31]
B
Yeah, that's, that's the nature of Google products. In other words, like Stitch, Google AI Studio, they have so many different experiments or products that they are not very well connected in my opinion. And that's why we still get to see this Stitch to Go AI Studio workflow which could have been more streamlined.
- [53:48]
A
Yeah. And we previously had director of product Jacqueline Kunzelman on and she had like Opal and there's so many different products that Google is kind of like experimenting with. Some risk I guess you have is that they just stop supporting it like a stitch for instance. But while they have it, it's pretty useful I think.
- [54:04]
B
True. Yeah, that's a great point. There's a risk on the other side of being free.
- [54:10]
A
Oh, stitch is free. Wow.
- [54:12]
B
Yes. Stitch is free.
- [54:13]
A
Cool.
- [54:14]
B
All right. So what it just did is that it's selecting design and then with the HTML file for reference which is helpful and then with a prompt. I think one thing I didn't do here, Akash, we didn't have the time to do here is sometimes I don't just stay with this page. I ask for what will be the page if people click on the CTA button.
- [54:38]
A
So you get a full prototype.
- [54:40]
B
Exactly, exactly. And I can select multiple of them and export to Google AI Studio.
- [54:47]
A
Yep.
- [54:47]
B
So for example I can select multiple of them as opposed to just selecting one. But for the sake of demo let's keep it simple for now.
- [54:53]
A
And then Google A Studio is going to go out there just kind of like we saw Claude and Lovable do. And if you had to rank kind of the three, like in terms of prototyping, how would you rank the order of them Lovable at the top if
- [55:04]
B
price is not a factor? Because I know price is important for people to access to certain tools. If we don't consider price as a bottleneck then I like Larable, then Google
- [55:15]
A
AI Studio, then Claude. Is that how you'd rank it?
- [55:17]
B
Well Claude, I don't see it as the same tier with Larvable or Google AI Studio because Claude is really about how to say like a well rounded nice tool that can do a lot of things. So I don't put them into the same bucket as Laravel and Google AI Studio. So if I were to rank things I would more around ranking things within larvable or v0 or Google AI Studio if that makes sense to you.
- [55:44]
A
And what would be the ranking of those three?
- [55:46]
B
I like Lovable the most in terms of how well rounded it is and followed by V0 followed by Google AI Studio. And those are only judged by design quality, like visual quality.
- [56:00]
A
Yeah, me too. So are there any advanced tips before we close out on Google AI Studio for people who want to become experts at using Google AI Studio?
- [56:08]
B
I think the something that I if I only to have to say one tip, I would say you have the ability to type in the system instruction on the main page. So if you click here, it's sort of hidden that you can type system instruction here. So for example you could be very specific about the style that you wanted to generate or you can be specific about other things but this can provide some actual context. Similar with Lovable it has the knowledge base which is a similar idea I would say. So that's Google AI Studio. And another thing I wanted to call out is that if you go to the interface there is one thing which is Annotate app. It's similar with Visual Edit is the counterpart of Visual Edit in Google AI Studio which is quite interesting. So if you go to add comment, you can drag things and make comments and it's just like a built in tool for you to add comments. Whatever those comments are, you can add to chat altogether to make revisions.
- [57:11]
A
Nice. So you can kind of more simulate the multiplayer way you would normally iterate on a design in Figma here with AI.
- [57:19]
B
Right. And by the way I have this tool which allow me to annotate anyway before this feature was introduced. But again it's an interesting feature in my opinion which is different from many other tools.
- [57:33]
A
Yeah, we're talking about these visual editors and I think one other sort of divergent tool we need to cover for people is Cursor because they just released their visual editor. So how would you say that stacks up against these tools that we've seen today?
- [57:44]
B
Yes, I've seen some exciting updates about Cursor over the past two months. You know the browser tool which is exciting and it's launching new feature that is tailored more around visual visual editing which is also exciting. But you know, I did a quick table just to explain my point. This may change depending on how fast tools move but this is the current state. Like in my opinion I felt like Cursor still has a slow learning curve even with all those little updates. It is not very friendly for non technical folks or people with minimum technical experience to work to work in still. So that's Cursor regarding the quality, it can really goes from okay to great depending on your skill sets or like how specific you how specific you do things with Cursor. And in terms of speed, it's just because of Claude Artifact which is, you know, artifacting cloud AI make things really easy for people and I consider it much faster than cursor. Same with Stitch and V0. I consider them faster than Cursor just because of fact that they work in a browser based environment. You don't have to set up different things. It's faster that way. In terms of use cases I found it helpful. If you are really wanting to seriously build something then Cursor, it's a well rounded, flexible tool compared to those browser based tools like Stytch V0 Cloud artifact. So it's really pros and cons here. Right. Some people want to have this kind of freedom to do things that they want but a lot of people out there, it's just not, you know, still not comfortable with using Cursor and It is. Okay, then those tools are, you know, better for those needs.
- [59:38]
A
Okay. Amazing. Wow. Shinran. This was a masterclass. If I had to sum it up for everybody who listened, we covered the four key areas of what it means to design with AI, and we deep dove into two really important workflows. Workflow number one, build a custom GPT, a cloud project, a cloud skill, or Gemini Gem to help you prompt your prototyping tool. Well, because that prompt sets the context. Workflow number two, use a tool like Google Stitch to dream up divergent solutions. What we saw today was when you use the YOLO mode, the redesign mode features that they've built in, you can generate 15, 16 different ideas and that's how you get alpha from using AI. You don't want to use AI to just do a worse job of what you would have done before. You want it to enable you with new superpowers. Because the designers and PMs who have new superpowers from AI, they will replace the designers and PMs who are just using AI generically. It's not like design and PM are suddenly going to get replaced overnight. It's that those people using AI, well, like some of the workflows we demoed for you today will replace others. So if you want to use Jinran's custom GPT, the link is in the description below. It's also in my newsletter issue where you can find all of the details of the workflows and the mind map that he shared today. Zhinran, thanks for this masterclass.
- [60:59]
B
Thank you. Thank you for having me. I hope you enjoyed that episode.
- [61:02]
A
If you could take a moment to double check that you have followed on Apple and Spotify podcasts, subscribed on YouTube, left a rating or review on Apple or Spotify, and commented on YouTube or all these things will help the algorithm distribute the show to more and more people. As we distribute the show to more people, we can grow the show, improve the quality of the content in the production to get you better insights to stay ahead in your career. Finally, do check out my bundle@buildle.akashtri.com to get access to nine AI products for an entire year for free. This includes Dovetail, Mobin, Linear, Reforge, Build, Descript, and many other amazing tools that will help you as an AI product manager builder succeed. I'll see you in the next episode.