I Should Be Charging $999 for This AI Prototyping Masterclass

Nadav Abrami (co-founder of Wix) breaks down the complete AI prototyping workflow for PMs. When to prototype, how to build divergent solutions, when to go high fidelity, how to hand off to engineers - all live demos using Dazzle. Full Writeup: https://www.news.aakashg.com/p/nadav-abrahami-podcast Transcript: https://www.aakashg.com/ai-prototyping-for-pms-complete-guide-nadav-abrami/ Dazl: https://dazl.dev/?utm_source=productgrowth&utm_medium=youtube --- Timestamps: 0:00 - Intro 1:33 - Guest introduction 1:46 - Will AI replace developers? 3:03 - When should PMs use AI prototyping? 6:07 - Problem space vs solution space 8:02 - Live demo: starting from your design system 10:12 - Ads 11:40 - Design system template workflow 19:53 - Building divergent solutions live 22:37 - How to prompt clearly 30:31 - Ads 33:16 - Visual editing vs prompting 52:05 - When to go high fidelity 58:21 - Engineer handoff 1:02:50 - PRD plus prototype: the new standard --- 🏆 Thanks to our sponsors: 1. Pendo: The #1 software experience management platform - http://www.pendo.io/aakash 2. Testkube: Leading test orchestration platform - http://testkube.io/ 3. Gamma: Turn customer feedback into product decisions with AI - https://gamma.app/?utm_campaign=prompt&utm_content=Aakash+Gupta&utm_source=LinkedIn 4. Product Faculty: Get $550 off the AI PM Certification with code AAKASH550C7 - https://maven.com/product-faculty/ai-product-management-certification?promoCode=AAKASH550C7 5. Mobbin: Discover real-world design inspiration - http://mobbin.com/aakash --- Key Takeaways: 1. AI prototyping doesn't replace problem space work - it accelerates solution space work. Before opening any prototyping tool, lock down the problem, the user story, and the rough shape of the solution. If you can't write all three in one paragraph, you're not ready. 2. Always start from your design system, not a blank page - Drop a screenshot of your existing product and ask the tool to recreate it. Save that as a team template. Every prototype you build from that point looks like it belongs in the product. 3. Build 3 to 4 divergent solutions before choosing one - The entire point of AI prototyping is that building a second and third version costs almost nothing now. We built two versions of the sentiment analysis feature live. Neither was perfect. Both were useful. That comparison is the point. 4. Use visual editing for fine-tuning, not prompting - Once you've picked the strongest direction, switch to direct visual editing. Move elements, match colours with the eyedropper, adjust spacing. It's faster because the result is immediate. 5. Single-page prototypes miss too much - Build the full end-to-end flow. The moment you start connecting pages, edge cases surface automatically. We found two edge cases in minutes that would have cost engineering time in sprint. 6. Prompt clarity beats prompt engineering - Any ambiguity in your prompt will get exploited statistically. Before running a complex prompt, paste it into a separate chat and ask it to find the contradictions. Fix those first. 7. Use discuss mode before building anything major - Don't ask the AI if it can do something. That always gets a yes. Ask what it thinks the right approach is. The answer is far more honest and useful. 8. High fidelity is for selling and usability testing - Low fidelity is for team exploration. Any prototype going in front of users needs to feel real, otherwise you get feedback about the roughness, not the experience. 9. The PRD and prototype should live together - The PRD covers edge cases, empty states, error conditions. The prototype covers the 90% flows. Together they leave zero open questions for engineers. If someone reads both and still has a question, something is missing. 10. The prototype is already standard code - A functional prototype built in Dazzle is a full server-side and client-side application. Download the project folder, drop it next to the production codebase, and tell Cursor to copy the interaction. Most of the implementation gets handled automatically. --- 👨‍💻 Where to find Nadav Abrami: LinkedIn: https://www.linkedin.com/in/nadav-abrahami-7507604/ 👨‍💻 Where to find Aakash: Twitter: https://www.x.com/aakashg0 LinkedIn: https://www.linkedin.com/in/aagupta/ Newsletter: https://www.news.aakashg.com #aiprototyping #aipm --- 🧠 About Product Growth: The world's largest podcast focused solely on product + growth, with over 200K+ listeners. 🔔 Subscribe and turn on notifications to get more videos like this.

Nadav AbramiguestAakash Guptahost

Feb 27, 20261h 16mWatch on YouTube ↗

EVERY SPOKEN WORD

70 min read · 13,676 words

0:00 – 1:33
Intro
1. NANadav Abrami
  If you can't build a production app without AI, it's gonna be really hard to build a production app.
2. AGAakash Gupta
  Is there a point where AI starts to replace developers or replace product managers?
3. NANadav Abrami
  I think what PMs really need to do is level up the skill of understanding what they're building.
4. AGAakash Gupta
  Nadav Abrami is one of the co-founders of Wix, the five and a half billion dollar online website building giant, whose stock has five X'd since its IPO in twenty thirteen.
5. NANadav Abrami
  What happened for PMs is that they were just gotten a huge get out of no developers J card. Now, with AI, it's not a huge investment. It's the cheapest option, time-wise.
6. AGAakash Gupta
  Why should they be using an AI prototyping tool, or when should they be using an AI prototyping tool?
7. NANadav Abrami
  You get an experience that is something that's more functional, that you can play around with, that you can put users in front of, and they can actually get the real experience.
8. AGAakash Gupta
  How should PMs be preparing themselves for whatever's happening in the next three to five years with AI? 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 Mobbin, Arise, Relay App, Dovetail, Linear, Magic Patterns, DeepSky, Reforge Build, Descript, and Speechify. So be sure to check that out at bundle.aakashg.com, and now into today's episode.
1:33 – 1:46
Guest introduction
1. AGAakash Gupta
  Nadav, welcome to the podcast.
2. NANadav Abrami
  Hi, Aakash. Happy to be here.
3. AGAakash Gupta
  I want to jump right into this. Everyone thinks AI will replace developers, but you have a different perspective. What's your take?
1:46 – 3:03
Will AI replace developers?
1. NANadav Abrami
  I think AI is a, it's a tool, and it's a tool that lets you do a lot of things, but you can create in it only so much more than you can understand or that you do understand. So it depends on, uh, whose exactly are you and, and what exactly is your skill set. But it's not a anybody can build anything tool. It is an amazing tool for some things. It's an amazing tool for PMs that build prototypes all the time. Uh, it's an amazing tool if I want to just build a small app that I can use for something that's not my main business or just an enabling tool as part of my business. So it-- there's so many use cases. But I think the most amazing ones are for product managers.
2. AGAakash Gupta
  So you can't really build a production app with AI today, you would say?
3. NANadav Abrami
  It really depends on who you are. If you can build a production app without AI, then definitely can build a production, uh, app with AI. If you can't build a production app without AI, it's gonna be really hard to use AI correctly to build a production app. And, and it's a gap of knowledge, a lot of it. It... And it's not a gap that's gonna stay there.
4. AGAakash Gupta
  That makes sense. So you need to be able to understand the code behind it, and we will live demo that for you guys in a second.
3:03 – 6:07
When should PMs use AI prototyping?
1. AGAakash Gupta
  So when should people be using AI prototyping tools?
2. NANadav Abrami
  All the time. They're amazing. They're magical. I've heard of so many use cases that you would not imagine. It's, uh, from closet companies, like small family businesses, building an editor to design their closets just so they don't do it in paper anymore and printing that, to my kids building a small platformer where, uh, they need to escape the, the farts of sheep.
3. AGAakash Gupta
  [laughs]
4. NANadav Abrami
  It really, really is endless. And, and those are just like the, the cases where you say, "I want something small, and I can do it myself," and they couldn't before, and nobody would build it before. But I think, again, the people that are gonna use it daily, that is gonna become their main tool of work, are PMs because they keep getting to the point where they want to create something and experiment with it more than anybody else. And also, they really know how to talk to developers and explain what they want. And basically, what they got now is an virtual developer.
5. AGAakash Gupta
  So when a PM is using it, why should they be using a AI prototyping tool, or when should they be using an AI prototyping tool versus Figma or Cursor's new visual editor?
6. NANadav Abrami
  You get something else from Figma and from vibe coding tools. You get an experience that is, uh, something that's more functional, that you can play around with, that you can put users in front of, and they can actually get the real experience. And, and it's not like functional prototypes are something totally new. Uh, we built them. We used to build them a lot in Wix for big features, for stuff that we really want to test out with users. We used to build them, but it was just a huge investment. Now, with AI, it's not a huge investment. It's the cheapest option, time-wise. It's the fastest way to get to something I can play with. It's something I can even look at. So it, it really changed it. If it's something that used to be very rare for really complex features, now there's no feature that goes through the ideation stage without at least a few functional prototypes. So every feature goes through this step. But it's, it's really a matter of, of where to use it in the process because you want it to come at the ideation step. You want to try out a number of new ideas. Sometimes you really don't want to give a spec. You just want to give an idea and see what the AI does, and maybe run that a few times and see what the AI does differently. Because first of all, it'll open your mind. It's super interesting. And it really lets you not just imagine it on a piece of paper and imagine how it is to play with it. It lets you play with all of these variations. And the second place is really after choosing, sometimes after Figma, you want to get it to feel production ready. It doesn't need to be production ready, but you really want to get the prototype. If you really want validation for the feature and you really want to play with it with users, there's another step there where you take the, uh, idea you chose and the design you chose, and you want to get it in front of users as fast as you can, and it's always faster to do a prototype than to get it to production.
7. AGAakash Gupta
  One
6:07 – 8:02
Problem space vs solution space
1. AGAakash Gupta
  criticism I've heard of these tools, and this has come from people even as famous as Itamar Gilad, who's one of the most well-known PM influencers. He said that if when we jump into prototyping for ideation, for instance, we sometimes are going too fast into the solution space. We're not spending enough time on the problem space. How do PMs think about the life cycle of product development and what they should be doing in the problem space and when they should move to the solution space and start looking at a prototype?
2. NANadav Abrami
  That's a really interesting question, first of all. Vibe coding tools and, and basically also Figma, every prototyping tool, every tool where you give the output ofWhat's there, what, what you want there means that you want what. Know what's there. And I totally agree. I think research is super important in a PM's job, both research on the web and using AI tools for research, uh, just to research how this feature looks like, what user stories you have. There's a lot to do before you even get to prototyping, and I would never give up that step. I think it's, it's all about research and communicating with users. The visual aspect of the feature you're building is usually not the big thing. It is a big part of the job, obviously, but it's-- By the time you got to it, you already know what the feature is that you want exactly, and that's really the big decision.
3. AGAakash Gupta
  So really, you need to understand what problem you're solving, what user story, and the rough shape of the feature, right? So these three elements, if you guys truly want to master AI prototyping, you can't just jump into the solution space. That's why we wanted to start here, you guys, to give you the context of what we're about to show you. This is when to use it. Don't overuse a tool. Whenever a new tool comes out, we just wanna use a hammer on everything. AI prototyping has its place, and now we're gonna show you exactly what its place is. So let's get into
8:02 – 10:12
Live demo: starting from your design system
1. AGAakash Gupta
  it. Can you show us how to build something from scratch in Dazzle?
2. NANadav Abrami
  Okay. So I'll start by opening Dazzle, and, and let's try to go for a flow really, the flow that our PMs go through, the flow that I really believe for, uh, PMs in using such products. So as you said, we could choose what we wanted, and we were, uh, talking to you on LinkedIn, so we chose to add a feature to LinkedIn. And we're gonna simulate like we're a product manager working in LinkedIn. We have a great idea for a new feature. But even before we start, the first thing we really want is we want to build on something. We want to start by having something that looks like our product that we can start from. So let's start from there.
3. AGAakash Gupta
  Mm.
4. NANadav Abrami
  Uh, I'm gonna... Already, uh, took a screenshot of LinkedIn, so I'm just gonna drop it here and tell it a small prompt to recreate the page, and we're sending it to go. So it's gonna take it a minute or so, and it's important to understand what it does in the meantime. Dazzle, uh, ramps up really a server for you. I, I know I'm diving into technicals here, but I think it's important to understand. I always think it's important to understand, uh, as a PM, some about-- some of the technical decisions behind your product. In this case, it means that it's very much open. You actually have a server it can talk to wherever you want, bring data from wherever you want, and pretty much do anything you can imagine on the web. It does take a bit more time, and it just finished raising the server, and it's starting to write the code. Now, the, the reason I said that it's, uh... I, I always start with this. I start with copying the product I want to add a feature to, at the very least, the, the visual aspects of it. So I'm not starting from a blank page, and I can basically see where I want to fit the new feature inside. Also, it's super important because I, I can save that. I can reuse that. I can then build a lot of features from that, which is really, it's gonna save me a lot of time in the flow later.
10:12 – 11:40
Ads
1. AGAakash Gupta
  Today's podcast is brought to you by Pendo, the leading software experience management platform. McKinsey found that seventy-eight percent 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/aakash. That's P-E-N-D-O.I-O/A-A-K-A-S-H. AI is writing code faster than ever, but can your testing keep up? TestKube is the Kubernetes native platform that scales testing at the pace of AI accelerated development. One dashboard, all your tools, full oversight. Run functional and load tests in minutes, not hours, across any framework, any environment. No vendor lock-in, no bottlenecks, just confidence that your AI-driven releases are tested, reliable, and ready to ship. TestKube, scale testing for the AI era. See more at testkube.io/aakash. That's T-E-S-T-K-U-B-E.I-O/A-A-K-A-S-H.
11:40 – 19:53
Design system template workflow
1. AGAakash Gupta
  So it sounds like as a product leader, if you're introducing Dazzle or an AI prototyping tool to your team, you might want to do this first step for people where it brings in the design system. It starts to look like their existing product, so that they can just pick it up and start using it from that.
2. NANadav Abrami
  Totally. You want to do that, and you want to save it with a template. That feature is coming really soon to Dazzle, and you want to save it as a template and reuse it across your organization. You want to then start building all the features from this, and you want to probably keep maintaining that project as your project evolves. Keep it tight and very close visually, not just visually, even almost functionally to your product. So you can open the same screen, so you can see the same experiences, and then everybody can just copy that and mutate from that.
3. AGAakash Gupta
  It seems like if you want visual fidelity, it might even make sense to bring in a designer just to get those details right for the template that everyone's using.
4. NANadav Abrami
  For sure. And, and this is one of the places where really Dazzle shines because you can really tweak it visually and get it to where you want. Okay. I think it'sIt's about almost done. It's probably gonna take it a few more seconds.
5. AGAakash Gupta
  One of the things you've mentioned and you've emphasized whenever we work together is it's important to understand what's going on at the back end. So maybe can you just sh- ex-- read through and explain some of those green check marks, what exactly it's done so far?
6. NANadav Abrami
  Sure. So what's happening behind the, the... basically behi- under the hood is that, uh, Dazzle is starting to write code for your project. Now, the first thing that's done here, it's wrote the theme CSS. It's basically the design system of this project. We're gonna take a deep dive into it later and maybe tweak it a bit. And then it basically started writing the data and the styles and the components for this homepage that we requested. Uh, when it finishes to do that, it's gonna go through a validating step. Basically, there's a lot of tools developers use to, to validate their code. If it's a type checking and build errors and a lot of things that you can see just to check that the code is working well. And it just finished writing the code, and now it's gonna basically validate it. So as I said, it's gonna type check. It's gonna check that there are no broken images. It's gonna check that there are no errors, then that basically you can continue from this point.
7. AGAakash Gupta
  And you said CSS. Those are cascading style sheets. This is used in basically every single website out there. Is Dazzle gonna be building on top of Tailwind?
8. NANadav Abrami
  Well, we're thinking of adding Tailwind support. But I have to say, m- my feeling about the matter is that Tailwind is great if you want to create stuff that looks like it was built exactly in that design system. You can tweak it a bit, but if you really want to get out of the box, you see people, even like influencers that are really pushing Tailwind, you see them using Tailwind and something. And it's because it's really nice for, for getting the, uh, fast, simple design, but you, you're getting the same design system. It, it really, it's a technical thing in a way, and, uh, maybe technical for designers more than technical for developers. But there's a lot to be said to having your own design system and tweaking your own design system and not just building on that. So first of all, you can see that Dazzle, uh, built a page. Looks pretty much like screenshot I took. I do feel that some of the colors are a bit off, so let's start, uh, visually editing before we do something else.
9. AGAakash Gupta
  Yeah, that was what stood out to me as well, the colors.
10. NANadav Abrami
  Yeah, right? This one is totally off. So you know what, what I'm gonna do is I, I want a reference, so I'm just gonna click Add here, and I'm gonna add the image here. And basically, let's put the LinkedIn image here just so it's easy to compare. One second, I'm gonna drag it here into the upload, and let's select it. And now I can see the image here, and you can see that the colors are really off. So let's go back here, and I want a custom color, and I want this one. Much better. And-
11. AGAakash Gupta
  Nice. So you can just use an eyedropper tool to match your colors.
12. NANadav Abrami
  Oh, yeah, yeah, for sure. Uh, you can drag images inside. There's a lot of visual editing that you're gonna see here, and I'm, I'm gonna mention some of it, what I'm doing, but a lot of the things you're gonna see here is not something you're gonna see somewhere else. So that's it. And now I'm gonna click backspace and delete this image because it was just there for reference. Okay.
13. AGAakash Gupta
  Oh, it was pretty easy to remove. It didn't mess up anything?
14. NANadav Abrami
  Oh, no. Uh, you can really, uh... Let's say I want this button to the right. Most of the things I can really do pretty simply in a way that you're not gonna see in any other visual editor of code or any other vibe coding tool. This is what we do. This is, uh, like... I, I co-founded Wix. I love visual editors. So, uh, that's one tweak. Uh, another thing is let's... Obviously, this is not the Dazzle image. Let's choose product media and choose this thing. Much better. And now, what do you think? Anything else you want to tweak before we, uh, continue to add a new feature?
15. AGAakash Gupta
  Maybe we also update the Dazzle image on the page posts down a little bit further. Yeah.
16. NANadav Abrami
  This one?
17. AGAakash Gupta
  Yeah.
18. NANadav Abrami
  Oh, for sure. Excellent. Okay.
19. AGAakash Gupta
  All right. I would say it's like a nine and a half out of ten. It's basically there.
20. NANadav Abrami
  It can always be better, and I think it's, it's really, as, as you said, Aakash, it's, it's putting a bit more prompts into it or putting a bit more visual tweaks into it. If you're working with a designer, maybe get him to contribute some to the project and, and get it to look right to him, because I'm not a designer. I'm, I'm sure all the designers looking at this right now are saying, "No, it doesn't look good enough." And, and I don't even see it. And which is okay. I'm more a PM and technical person than a designer, and, and it's not my job to see it, uh, just to be all that and then fix it.
21. AGAakash Gupta
  [laughs]
22. NANadav Abrami
  Uh, so let's, let's do-- build a feature. So, uh, what I was thinking about is let's add a sentiment analysis, basically something that just says about the comments of, uh, each feature, uh, of each, uh, post, sorry, whether it's... the sentiments are positive, negative, and so on. So I made up a, prepaid a prompt here, and let's just send it in. It's not a big prompt, as you can see, and it's not a big feature. And it's... A lot of times it's not about the big features. It's, it's being unlocked. I feel like what happened for PMs is that they were just gotten a huge, uh, get out of no developer's jail card. Uh, well, before that, they were blocked whenever they wanted to do something small, and now it's just magic.
23. AGAakash Gupta
  Yeah, I'm actually coaching somebody who, she got hired before they hired the engineering team. So they hired the PM first, just happened that way. AndFor the first couple weeks, it was like, "What is she going to do?" Then the first thing we did is we said, "Okay, let's get access to an AI prototyping tool so that we can at least come up with some good specs, validate those specs before the engineers come on board, so that when they come on board, they can hit the ground running." And so it happened. Like, they hired some Google engineer on day one. He was one of those guys who was just hitting the ground running. And because she had four or five AI prototypes, he found, okay, this one is really easy one, and he got to work, and in the first week he was able to ship something. So this can really accelerate your ability to work with a small or no engineering team.
24. NANadav Abrami
  And the fact that you can actually... It's-- You have a server, you have an entire application. It is something you could start a production app for. If you're technical enough or want to invest enough, you could get to a production app. I do feel like the main use case, though, is, is playing around in prototyping. For that, this technology is super exciting and super amazing. So okay, I can see we have... Let's go to previews and kind of play around with it. So we have a sentiment here, and I see that there's some rollover of it. What do you say, Aakash? What do you want to change about
19:53 – 22:37
Building divergent solutions live
1. NANadav Abrami
  it?
2. AGAakash Gupta
  Well, I think the most powerful thing about these AI prototyping tools is that you can actually create very quickly divergent solutions. So we have one implementation here. Maybe what we can do, is there a way for us to maybe branch this or try out a second implementation that, that looks visually different?
3. NANadav Abrami
  Well, what we can do is ask the AI to add a toggle at the top and have these two behaviors. So what do you want the second behavior of the sentiment to be?
4. AGAakash Gupta
  Maybe right now we have, like, sentiment... It's attached to the page posts. What if we had sentiment as its separate bucket on the page below the page posts that was like sentiment analysis of your page posts, and maybe it just showed a quick summary of your last few, and then you could click in to get more details.
5. NANadav Abrami
  Okay, so let's add it as a different section and then decide if to hide the second thing. Uh, add a section to the page where we see the sentiments of page posts. What do you want exactly? Like, let's do a summary of this? Like f- uh, summary of positive versus, uh, negative posts and so on?
6. AGAakash Gupta
  Yeah. Maybe it's like it shows a summary of the last four posts, and it kind of shows your overall sentiment.
7. NANadav Abrami
  Overall sentiment, uh, as a graph by cohorts.
8. AGAakash Gupta
  Nice. So pretty simple, natural language prompt.
9. NANadav Abrami
  Uh-
10. AGAakash Gupta
  Not super special.
11. NANadav Abrami
  No, uh, I don't think it's about the, the super technical prompts. It's really not about it. Unless it's something super specifically and you're super technical and you know exactly what you want, it's better to let the AI choose the technology for you. It's, it's amazing to understand what it did, but I think it's separate things. It-- One thing is directing it, and second thing is understanding it and, and then directing yourself in a way, directing both of you. But I don't go into any technical, uh, uh, specs when, when I'm prompting. Uh, the main thing I want to do is to, to get the experience right. And it's really complex, by the way, because words so many times have more than one meaning, and most of the mistakes that happen that I saw is, is miscommunication. A lot of times it's just about... And it's the same miscommunication you have with a developer. But then the developer says, "Are you sure you mean that? It doesn't make sense." And you talk again. And the AI is really not good at telling you, "This does not make sense."
12. AGAakash Gupta
  So what's interesting about these prompts, right, then the takeaway for PMs is you don't need to build a system prompt level prompt engineering.
22:37 – 30:31
How to prompt clearly
1. AGAakash Gupta
  You don't need to say, "Act as," and, "Here's a few close shot examples," and, "Here's the frameworks to use," and, "Don't do this and do that." Instead, it's really about the clarity of what the feature is because you don't have that back and forth with developers. Is that right?
2. NANadav Abrami
  That's totally right. I think developers would tell you when something you're saying is not correct, and AI will take your choice, correct or not. So it really... If you're super technical and you do know what you're saying, maybe tell it what to do, but otherwise, it's really better to explain very coherently what you want. And, and it's really important because any- anything that can be misinterpreted will statistically be misinterpreted. It's not every time. It's like talking to a genie, and 99% of the time it will do what you want, or 95% of the times. But if, uh, 5% of the time the genie will find everything you said that is flawed and will do the exact, uh, opposite of what you wanted. And, and we find that we do a lot of prompt engineering for our own prompts, obviously, running them many, many times and, and doing the dissection and the statistics and seeing what works and what doesn't. And, and a lot of times, by the way, after we've seen that something statistically doesn't pass well enough, asking AI why, and a lot of the times you just see a contradiction. There's something that we missed, something that can be understood in two ways, and sometimes it'll understand it in the, that different way. And you make it a bit more clear, uh, that issue goes away. So obviously it's, it's not gonna hit you every time. We, we see it statistically when we're looking at, uh, hundreds, thousand of, uh, of, uh, iterations. If you're doing it 95% of the time, even if you don't say exactly what you want, it's gonna understand you, even if you're not totally clear. But those 5% of the times can be so time-consuming that it's really... That's the main thing. If you do want to do anything with your prompt beforehand, take it to a LLM and just ask it, "What are the contradictions? What's unclear?" Because again, it's not about going technical. It's about going clear.
3. AGAakash Gupta
  Clarity is the key here, and use LLMs if you need to to clarify your prompts. Now, while this is working, what's happening differently here in Dazzl versus Bolt or Lovable or Claude Artifacts?
4. NANadav Abrami
  There's a number of things. Uh, first thing is that, uh, I'll go back to the server and, and say that what Dazzl builds is a full-fledged server-side application, server-side and client-side. Uh, that means a few things. It means that if-You bring it to developers in your team, it'll just look like any other web applications that they saw. Nothing special, nothing proprietary. It also means that you can run it anywhere, and you can take it to your computer, and it'll run the same way, or just host it yourself if you want somewhere. Second thing is obviously the inspection and the visual edits. Now, it's happening also while the AI is generating. It's not just for the user. All of the information that we know how to expose of the styles and the properties and, and the state of the HTML and so on, all of the hidden state of the application, it's exposed to the AI. And, and I think that makes the AI so much smarter. There's so many things that just looking at the code and trying to understand why it fails, that's super hard. And if you look at the application with debugging tools, super easy. So basically, the same debugging tools, the same inspection tools, the same overview tools that we give to users, they're all exposed to the AI as well, and it makes for just... makes it so much smarter.
5. AGAakash Gupta
  Mm. And one thing I would say that I personally noticed is that you're bringing a lot of that Wix expertise around having a really world-class visual editor into here as well. We saw that a little bit, and I think we'll go into that a little bit more. So let's take a look at what the AI built here. This is our second variation of the sentiment analysis. How do we think it did?
6. NANadav Abrami
  I kind of like it. Uh, obviously, it only gave us positive reviews because it's AI.
7. AGAakash Gupta
  [laughs]
8. NANadav Abrami
  And-- But all in all, I pretty much like it. What do you say? What would you change?
9. AGAakash Gupta
  I like it. Like, what I wanna emphasize and triple click on for people is that what this tool unlocks is your ability to do these different solution explorations. We just did two for you guys, but you should think about, along the two that you did, do a couple more iterations. So you could iterate this. You could say, "Hey, put in some negative data." You could say, "Hey, I currently think that the sentiment analysis, it's a little too big," or maybe, "I think it should go below the page posts." So you can do those little iterations, but then don't even stop there. We have two iterations. Why not come up with a third or a fourth? I think the magic of this tool is that it allows you to come up with three or four so quickly, so that then you can really play with it and understand, okay, after playing with it, which one of these is the best one?
10. NANadav Abrami
  I totally, totally agree. I think you want to first play around, make a few variations. Then the one that you really like, that one you want to get perfect. But it's, it's never the first step.
11. AGAakash Gupta
  Awesome. So maybe you can showcase for us now, like, the next level. Let's say we're sticking with one of these. You choose which one you like better. How are we gonna go ahead and edit this further with natural language, with code, with component level changes?
12. NANadav Abrami
  So, uh, Dazzle offers you a number of ways of editing it. So let's look at this, uh, sentiment analysis element. So this is the entirety of the sentiment analysis. First of all, uh, once it's selected, you can see that it's represented in the chat, and the agent is obviously aware that this is the selected element. Now, here, as well as in many other places, this connection is really, really strong. It's something that we are very proud of. It knows the exact place of the code. It knows the properties. One thing that you can see, it's something that's, I think, important. It's, uh, as I said, there's some leveling up to do, I think, that PMs are gonna need to do, some understanding of the complexity. This is a part of this complexity. You can see here that this element basically in the HTML is both the sentiment analysis, but it's also a card, and in the end, this card is a div. Now, it's something that you won't see in other tools, and it's, it's something that is important because editing this div may, may, means editing all the cards. Editing this card means this card instance. And ending-- editing this sentiment analysis, meaning, means editing only this instance of sentiments analysis in your application. So this is one thing that you can see that is very different. Second thing that is interesting, that whenever something has, uh, properties that are interesting, you can see them here. In this case, you can see basically that it has data that is bound. It's not something that's here. It's not something that's simple to edit. But I can also basically see what the value is. So if I look at company posts, it got four company posts here. And if I really want to understand what's going on to see, this is basically the data the comp- comp- component got. Now, it's not something that you-- I open all the time. It's something that I open when I want to understand the data flow in the application. Usually, it's part of, of debugging. It's part of playing around and, and understanding that, uh, my card or... In this case, I didn't expect to see a different number of items. But in some cases, you're seeing four item, and you expect to see ten. This basically shows you at what level it's broken. You can go down the component tree and see where the data doesn't pass as you expected.
30:31 – 33:16
Ads
1. AGAakash Gupta
  Today's episode is brought to you by Jira Product Discovery. If you're like most product managers, you're probably in Jira tracking tickets and managing the backlog. But what about everything that happens before delivery? Jira Product Discovery helps you move your discovery, prioritization, and even roadmapping work out of spreadsheets and into a purpose-built tool designed for product teams. Capture insights, prioritize what matters, and create roadmaps you can easily tailor for any audience. And because it's built to work with Jira, everything stays connected from idea to delivery. Used by product teams at Canva, Deliveroo, and even The Economist, check out why and try it for free today at atlassian.com/product-discovery. That's A-T-L-A-S-S-I-A-N.com/product-discovery. Jira Product Discovery, build the right thing.I hope you're enjoying today's episode. Are you interested in becoming an AI product manager, making hundreds of thousands of dollars more, joining OpenAI and Anthropic? Then you might wanna do a course that I've taken myself, the AI PM Certificate ran by OpenAI product leader Miqdad Jaffer. If you use my code and my link, you get a special discount on this course. It is a course that I highly recommend. We have done a lot of collaborations together on things like AI product strategy. So check out our newsletter articles if you want to see the quality of the type of thinking you'll get. One of my frequent collaborators, Pavel Hern, is the Build Labs leader, so you're gonna live build an AI product with Pavel's feedback if you take this AI PM certificate. So be sure to check that out. Be sure to use my code and my link in order to get a special discount. And now back into today's episode. Before we dive deeper, let's talk about something every PM faces, getting alignment on product decisions. You know that feeling when you're trying to explain a user flow to engineering or justify a design choice to leadership, and you're just describing it with your hands? That's where Mobbin comes in. Mobbin is the world's largest library of real-world mobile and web app designs from industry-leading apps like Airbnb, Uber, and Pinterest. Instead of spending hours taking screenshots or hunting for inspiration, you can instantly find exactly how successful products handle onboarding, paywalls, checkout flows, whatever you're facing. Over one point seven million product builders use Mobbin to benchmark against best-in-class products and show their teams proven solutions. Whether you need to convince stakeholders there's a better way to handle user activation or research how top apps approach feature discovery, Mobbin gives you the visual proof to back up your product decisions. Check out mobbin.com/aakash. That's M-O-B-B-I-N.com/A-A-K-A-S-H, and get twenty percent off your first year.
33:16 – 52:05
Visual editing vs prompting
1. NANadav Abrami
  Now, I, I opened this, and I opened it in the Elements panel. The Elements panel is something that is gonna be familiar to a lot of, uh, not just developer, I think also product managers and designer. It's basically much like any the, the dev tools that you see in any browser these days. But it is much more connected to the code and much more connected to the application itself. So one thing you're gonna see here that you're not gonna see in the dev tools is, again, this separation between the, the component and the instance, because it is aware of the components. Second thing is that everything I do here, if I edit it, I, I... It's not a change that is transient. It's something that is immediately saved to my code, and, and you can immediately see it appearing in the left side. I, I chose something that I, I have no idea what I'm changing right now. I'm sure it's changing a color there somewhere, but, uh, maybe not a good idea. Let's, let's take something like this. You can see that the background right now is a natural color. I can tweak it, but it's not just tweaking it like in the dev tools, and then I refresh, and it's not there. You can see the second that I'm doing it, there is a change to, uh, the, the CSS file. And this CSS file, in this case, I'm gonna discard it. We did something very ugly here. But-
2. AGAakash Gupta
  [laughs]
3. NANadav Abrami
  ... it's immediate changes. Now, it's important to understand, uh, most of the things I want to do that are simple editing, I'm gonna do from here, from this bar. But just understanding the structure and when I want to change it and where I want to change it, I'm gonna need a tree, because the HTML is a tree. And most of the things, it's really easy to select on stage. But some of the times, there's elements that have the same size, that elements that are hiding each others. Uh, there's a lot of stuff that you want. If I want to actually even select just as context to the AI, I'm gonna need this tool. Second thing is, as I said, it's multi-level. So we already saw some chat edits. I think we saw a number of, uh, visual edits from, uh, the top bar and a number of visual edits from here. Uh, the third option that we have, or fourth, what is it? Uh, is basically just to go to code wherever you want. So again, if I want to look at this div, I can inspect it like we did before, but I can also view its code, and it'll take me immediately to the code of the element. And it's important to understand if I change it, here I, I'll see change immediately on stage. Maybe-
4. AGAakash Gupta
  For people who are kind of like they're not able to read this code, can you just walk us through how to read this here in the bottom right?
5. NANadav Abrami
  Sure. So basically, this is a React code. It's, uh, describes HTML. It describes the, the structure that we see on stage, but it is not the structure. It can run many times. A lot of times it's gonna be repeated. Uh, it's gonna run with different properties and show different data. So it is a representation of the dynamic HTML of your application. Some of the things you see here are gonna look very similar to the elements tree because, again, it's HTML. It's the same div. The main thing that's gonna change is that you're gonna see a lot of these, uh, squiggly lines here. Uh, the curly braces mean it's an expression. It's something that is gonna be dynamic. So this thing is a dynamic text in the middle of the div. And what I did is basically went after the curly braces and said, "I just want to add some text here." So say positive assessment. Now, I can do it from here, but it's definitely not my go-to to do it from here. Also, as a developer, usually I'll do it from here. It makes a lot more sense. It makes a... And you can see that immediately it does the same thing. It immediately changes it in the code. It's exactly the same, uh, behavior as editing it in the code.And, and you talked before about Cursor a bit. I think this is, like, the major difference. Cursor visual editing, which I think it's an amazing feature, I'm not dissing it at all. But I think it's important to understand how it works. It's basically a way of more than visually editing, visually prompting. Because everything you do is then passed as a, this is what the user changed to the AI to then write it to your code. There's positive things to be said for it and negative things to be said for it. But I think it, it-- the main thing it's lacking is the immediacy. It's the fact that I change something, and this is how it's gonna look. There's no second guessing. There's no going to the LLM to try to implement it. And many times it'll get to ninety-nine percent of what I wanted, but many times it won't. And I already did the work, so it feels like kind of, uh, I don't know, it feels kind of annoying to be able to do this. I added the icon I wanted, I added the text I wanted, but then the LLM needs to do it again.
6. AGAakash Gupta
  I didn't know that about Cursor. That's really interesting.
7. NANadav Abrami
  Uh, it is really interesting, and it really changes what you can do in it. I'm just gonna space it a bit here.
8. AGAakash Gupta
  And we used a couple technical definitions. For the people who got lost when we said those, can you just clearly define for us, what is a div? What is a card? What is a component?
9. NANadav Abrami
  Sure. So the way the browser works is, uh, something called a DOM tree. It's basically the browser gets a document, a text document, an HTML document, and then it creates live nodes from it. These live nodes are what you see on stage. And the browser offers a number of, of native nodes, a lot of them, basically. It offers an input, and it offers an image, and it offers a video, a lot of native elements. And for the most stuff, that's what you want to use. It's, it's the platform. It's the-- what's gonna work best in it. But sometimes it's just not enough. It doesn't give you, uh, for instance, a tag input, a gradient picker. Just something else that is-- you repeat a lot in your application. The main thing it doesn't give you out of the box is repeatability and the ability to create dynamic stuff. Now, it doesn't give it to you out of the box, but they added a layer for that, and that's called JavaScript, which basically lets you play around with the same document model we discussed before, the same, uh, structure of HTML, the live one on stage, not the text that you loaded. But the second it's visually on stage, JavaScript can play around with it. It can add element, it can remove elements, it can do a lot of these things. And, and that gave rise to a lot of frameworks like React that basically handle these dynamics, uh, the, the dynamic data for you. And what they let you do is write something that looks a lot like HTML, but is code and is dynamic. Renders, again, which is really important because an HTML page, it renders once on the server, and then it shows the static stuff. It shows what rendered. And with JavaScript and React applications and, and other frameworks, you get something that's living, and you get something else. You get the fact that you, you start rendering on the client side and not on the rend- server side. You start changing the HTML while it's in the browser. And that means that on the client side as well, you, you don't want to rewrite this HTML all the time. You want to keep it componentized. And I think that's something that's really important. It's also-- It's not just important because of the, the, of the dynamic data. It's also really important just because you don't want to recreate the same visuals again and again and again. So components are basically taking a substructure of HTML, uh, divs and images and videos and whatnot, and, and grouping all, all of that into something you can reuse that gets properties, which are basically its data. And, and you can reuse across the page many, many times without reloading this HTML many times, without repeating the HTML in your application many times. So it's also a matter of, of performance sometimes. Now, the, the core HTML, for some reason, they decided to call it a div for dividing stuff. It's, it's basically a box. In any design tool you, you're gonna meet, it's gonna be called a box. There's some strange behavior for a box. By, by default, it's a vertical, uh, stack. But basically, it's just the most native box you have in HTML. Card is basically saying, "My box, I want it to always have the same borders. I want it to always have the same background, and I want to reuse that." So card is basically also a box, but it's my box.
10. AGAakash Gupta
  So the reason I ask that question is I want all of you guys listening to be fluent with the code. Open up the code editor. Now, when should PMs be editing in code versus editing via prompting versus editing visually?
11. NANadav Abrami
  I, I don't think PMs should be ever editing in code. When, when PMs get to the point where they have to edit in code, it's not their ideal flow. It means something did not work as expected. I think basically, I, I do a lot of visual edits. I, I think a lot of visual edix-- edits do make sense. It's, it's a more clear way of editing the code. It's-Something that saves time. I don't need to understand where I am in the project. I can see it immediately on stage. I can experiment much faster. Obviously, I do write code, but it's because I'm used to writing code. And, and I find myself writing less and less and less code. I think the most important thing that you get from all the visual tools and the code tools and everything else that is not LLM based is the immediacy. It's the fact that you-- I, I can go here and I can ask the AI to make this... I, I want a blue background or a green background for this section, the card header. It's gonna take... If it's a fast AI, it's gonna take a few seconds, and then I'm gonna see the color that it shows. It does not make sense. This is something I want to do like this and see it immediately on stage. And also, when I'm done, I want to know that it's done. That's it. It's not gonna change. There's no other code writing gonna go on before this. And, and I think this is a, this is a big advantage. It lets me play faster. And, and basically, what we all want is to play faster. Now, the AI gives us an amazing run with this. For the initial generation, for the big things, it does it so much faster than I can do visually, in code, in whatever other way I could imagine. But for changing stuff later, it's, it's not the fastest option. It's not the most fluent option. It's not the option that I can get faster at also. If you look at, uh, how designers work in, uh, in Figma or in-- people working the software where they're really, really proficient, they're lightning fast. They use all of the keyboard shortcuts. They do things so much faster than y- than the 20 seconds, 10 seconds it takes you to first prompt it and then wait for the AI to do it. It, it makes sense for a lot of things that can't be wrong, but for some things it just doesn't.
12. AGAakash Gupta
  So stick to visual editing for the most part.
13. NANadav Abrami
  I don't know if for the most part. It is taking maybe most, uh, more of my time because, uh, because when I'm sending the AI to do something, I, I usually do something else. But I don't think most of the-- definitely not most of the code being written by me is done visually. Most of it is done by AI.
14. AGAakash Gupta
  Got it. What are the biggest mistakes PMs make when editing?
15. NANadav Abrami
  I think the, the, um... There's a number of things. Uh, I- I'll start by answering-- Because it's a multiple-- I think it-- there's many places I can take this question. I'll take it to prompt it first, because I think editing through the, uh, the AI has so much complexities in itself and so many places to be better at, to, to... Or you can go wrong at, and you should really be careful about it. And I, I think the first thing is something we already hinted on. It's that basically you write in a prompt, maybe it understood you, maybe it didn't, and then it's gonna run and do it. And it's gonna run so fast, and it's gonna be so eager to do exactly what it understood wrong from what you said. And I think that's like the one big thing that I see. And, and, and this is, by the way, why it's really important to go to plan mode, go to discuss mode. Tell the AI, "I'm gonna do this. What do you think? How do you understand me?" Like you would with a developer sometimes. It's not for anything. I wouldn't do it if I ask it to add something small to an existing page or something like that. If I'm changing something that's major, I'm gonna have discussing. I'm gonna discuss it for-- with it first. And, and when-- only when the answer I get back makes real sense. And I'm gonna make my, uh, questions such that it's not clear what it needs to answer to please me. Right? If, if I say, uh, something like, "Do you think I can do this?" "Yeah, sure you can do this." I'd ask, "What do you think? Should I do this?" And it's a totally different question. You're gonna get a different answer. And it's really, really important. Now, another thing that I see is that people take, uh, the time to do research, and then they create huge, huge, huge prompts, and they pass it to the AI as one step. And there's tools to go around it in all kinds of AIs. We, we all build around this and build around the problem of context, which is, like, the major problem when building AI tools. But I think a lot of the times what we do is not gonna be as good as what you do when you build your prompt beforehand. So this is like... An example of this is that I could say, in this example that we did now, I could put everything, including the image, in one prompt and say, "Just add a feature." And it's probably gonna do a less, uh, not as good as job on any one of the parts. AI has context switches, just like people. It's more problematic with AI because when we have a context switch, we usually stop and we think, and it doesn't. It just works with the wrong data. So I think those are, like, the three main things that I would say when, when prompting.
16. AGAakash Gupta
  So we've built pretty good prototype. How do we make this the next level? How do we make this more complex, whether it's multiple pages or hooking up into APIs? Where do we go from here to make this a real world PM prototype?
17. NANadav Abrami
  It's a really good question. It's... Everything is possible. So I think the real question is what do we want to show? Because again, it's, it's a server with a very smart AI that really can connect anything we would want here. I don't know. What do you-- Do you have any idea of what you would want to connect to this?
18. AGAakash Gupta
  I think multi-page application is the next step, right? Because most your prototypes are not just gonna exist on one page. In fact, I think one of the peak powers of prototyping is we used to build a PRDThen the designers and developers would go build it, and they would learn all these edge cases. They would have all these questions. So one of the most powerful things to do in prototype is to actually build out the end-to-end flow, actually look at everything. So one edge case we already know right here is, what if you have less than three or four posts? That's one edge case that came to our mind. And then a flow that comes is, well, we have these post boxes, these cards, essentially, post one, post two, post three, post four. Perhaps a user might want to click into them. So then we should probably design the experience. And so maybe that's the next step we can do is, what happens if somebody clicks on post one box or post two box?
19. NANadav Abrami
  Okay, let's, let's do it. Let's add, uh... What do you think? It should open the sentiment page or the post page?
20. AGAakash Gupta
  I guess it should really open the post, but below it, the post, instead of just showing the comments, it should show the comments along with how it coded the sentiment.
21. NANadav Abrami
  Okay, so let's, uh, give it a prompt. Basically, uh, [keyboard clicking] when a scorecard is clicked, go to a new dynamic page showing that post. And have an explanation of how the sentiment was collected for it, something like that.
22. AGAakash Gupta
  Perfect. As we said before, the clarity in this prompt is really important. So if we say how the sentiment was collected for it, it's going to deliver one thing versus if we said, "Show me the coding of the comments." So be really careful with the prompt, but I like this prompt, so let's go with that.
23. NANadav Abrami
  Okay, and maybe like, uh, and a way of seeing the comments according to sentiment. [keyboard clicking] Okay.
24. AGAakash Gupta
  So while it's working here, we are building essentially a high fidelity prototype
52:05 – 58:21
When to go high fidelity
1. AGAakash Gupta
  now. It's even clickable. You can even go see other pages. When should PMs be building a high fidelity prototype?
2. NANadav Abrami
  Well, it's, it's really a matter of, of what you're trying to achieve, and I'm not just talking about the feature. It's what you personally are trying to achieve. A lot of cases, a feature doesn't have the buy-in of the organization yet, and, and high fidelity is, is a tool for selling. It's a way of, of showing everybody in the organization or the people that are the decision makers, the people that affect the decision maker how amazing this feature is going to be, and it so-- works so much better with high fidelity. It has to look nice for that. If I added something ugly here, it'll be really hard to, to, to look at the functionality and not think about it. So I think high fidelity is, is... First of all, it's a tool for selling the idea. And this is, this is also important for solo entrepreneurs. A lot of times you actually use that to get an investment. But also for PMs, it's, it's the same. The bigger the organization, it's going to be harder to sometimes convince people that the feature is necessary, that it's important, that it's something that needs to happen now. And, and this is a great tool for this sell. Second thing is that after you finish the ideation phase and you want to put it in front of users, usability is-- work a lot less with low fidelity. And you have to have the entirety of the product in a way in low fidelity. If something is low fidelity in the middle of something that's high fidelity, that is... One second. I'll, I'll just tell it to, okay, do it. [keyboard clicking] So, uh, as I said, there's basically one thing is about selling it. Second thing is about usability and the fact that usability does not work well on low fidelity products, and definitely not on Frankenstein products where you have something that's high fidelity and you patched on something that's low fidelity. That works even, even less. So in, in my experience and in what we're doing here, it's basically we do a lot of low fidelity ideation step prototypes. It's usually us that play around with them, just the team. And then when we choose one, it goes to high fidelity. It goes to high fidelity, usually in vibe coding tools. The idea behind it is exactly to put it in front of users as fast as we can, and both talking to users that we already have and getting them on calls and try this in usability, especially if they asked for the feature, it's a godsend. It's really-- If you have somebody that knows what he wants, he knows exactly how he wants the feature, and you can let him play around with it and say, "Yeah, okay, that's what I meant." It, it's-- It does two things. It both keeps the user super motivated, and it really gives you the strongest validation of the feature that you can get.
3. AGAakash Gupta
  Are there any, um, cool workflows? I think, like, people these days, they're, like, taking some of these prototypes onto a site like usertesting.com just to get, like, ten people to use it or something. Are there any of those types of workflows you would recommend PMs pick up?
4. NANadav Abrami
  Definitely. Uh, uh, anything you can do to get people to play around with the product. But again, ideally, it's not just some people, it's your users. So there's really, there's really no way of going around, uh, and there shouldn't be a way of going around having a personal contact to the most advanced users you have, to the most engaged users you have, to those that are willing to talk to you, basically, and getting them to try it makes so much more sense. And, and you really, you don't need anything but, uh, uh, to jump on a video call with them and to have something published that they can play with, a prototype. It's as simple as that. So again, uh, I'm, I'm-- Maybe you're in the start, maybe you need user testing for something like that. Maybe-Uh, but ideally, it's your users and, and you're the one bringing them on for this.
5. AGAakash Gupta
  Yeah. You're gonna get much better feedback from them. So I think a key takeaway for all the product leaders listening is if you aren't giving your PMs an AI prototyping tool and the ability to, to go talk to customers like that, have a few customers on speed dial, you're really handicapping them in this era. And if you are a PM who doesn't have that capability, go make the case, send them this video. But on top of that, try to build this into your normal workflow, that before I build a feature, I'm gonna go get a high fidelity prototype. Some of the users that I have on speed dial or who specifically requested this feature, I'm gonna go put this in their hands. That's when you get the real benefits of this workflow. So I think it's completed. Can we see how the multi-page application is looking?
6. NANadav Abrami
  Well, it's just validating the pages. I think we can already see the new page. Yeah. Okay, so one second.
7. AGAakash Gupta
  Oh, [laughs] because it's validating maybe. [laughs]
8. NANadav Abrami
  Yeah, yeah. It is fixing stuff, yeah, uh, still. It's almost done.
9. AGAakash Gupta
  So to summarize what we just covered for people, what we've done is we've built a high fidelity multi-page prototype, and we're gonna see the result in a second, in order to reduce usability risk, in order to sell a feature, in order to explore an idea. And these skills, what they're allowing you to do is a lot of the classic stuff we've talked about as a PM before AI prototyping tools, but just much better, at a much higher fidelity.
10. NANadav Abrami
  We used to have whole department for this. Like, we still have. It's not, uh... But it used to be three developers doing all of the prototypes for so many features in Wix. A lot of them starting out in low fidelity, even before AI in-- as functional prototypes. Okay, so one second. I'll go to preview. And...
11. AGAakash Gupta
  There we go. That's what we requested. So most people watching, they might say, "Ooh, I have some visual edits," or, "I have some ideas on the layout to change." That's the point really, is by doing this first prompt, simple prompt, you can go ahead and visually edit, and then you can really build this up. So let's say they did all the visual
58:21 – 1:02:50
Engineer handoff
1. AGAakash Gupta
  edits. How do you hand this off to engineers after prototyping?
2. NANadav Abrami
  There's a number of things, uh, uh, I can do here, and I think the main thing is that it's just standard code. But it's, it's not even about the code because most of the time, what really a developer wants is clarity of how you want it to behave, and just sending the prototype over does really ninety percent of the work. Second thing is that where something is more specific, more complex, more... It can save him a lot of time, a lot of the job, a lot of the work to basically just download this project, put it next to the project he's currently building, and tell Cursor to just copy the experience from there. So a lot of the end of now, it's basically in a way a code to agent. It's the, the developer is using the-- his own AI-based tools, and they can basically, especially if you're using, uh, like the flow before we said-- that we said before where you're starting out from a template and then you have some changes to it. Having the template and the changes just tells the AI basically, "Okay, this is what the user edited." And, and basically i-if you start from a template, it's gonna get that. It's basically the history of this project. Uh, it already has that once you download the project as, as kit information. So just doing that, and that's basically what we do. We download the project, we put it next to the project we're working on, and for us, it's Dazzle, and we tell the AI, "Copy the feature inside. Copy the interaction inside." Now, I'm not saying that it's 100%. Uh, definitely with complex products, the developer is gonna need to wire some of the things probably to see that they work correctly. And it's really dependent on how the developer works with AI, because projects that work a lot with AI and developers that work a lot with AI, a lot of the information of how a feature needs to be written into their product, it's already there. So just having the information of the code itself and the prototype, that's usually the end of you want. And, and a lot of it can be automated.
3. AGAakash Gupta
  So I think you basically, you just hit the Publish button, and then [laughs] you share that link with them. It's as simple as that.
4. NANadav Abrami
  Well, it's that. It's also letting them get the code if they want it, which obviously is also something you can do here. Uh, we're adding Git integration really, really, really soon. At that point, it'll be much easier to give them just the Git, uh, that you created so they can connect that basically to their ID, and it can read the code from there. It's not as if they even need to download it anymore. Second thing is that we saw here before in the dev tools, this is basically the project. This is the entirety of the file system of the project. I can always just download it as a folder to my computer. And I can also just take any file that I want, if I have a spec or anything else that I want to just... Having the project, just drag it in there. It'll be added obviously. Now, you talked about, uh, workflow before, and I think there's one thing that I really-- is important in, in my workflow with AI, and I think is also something that a lot of PMs are gonna need, and it's basically the idea of k- storing some of the data of the information of the specs of different parts of the system in the system. And it gives you a superpower. It's basically hitting that discuss mode we talked about before, discussing an entire spec or entire aspect of the system with the AI and then say-- just saying, "Okay, now write that to file." And that's-It's an asset that is also really important for the end of. Uh, the developer or his AI are gonna get it with the rest of the files. It's not something else. But it's also really important for your iteration work with AI because you just have points of data that you can refer to it. You can manage some of the context when it gets a bit bigger by yourself. You have, for instance, in this case we could say just what is a sentiment analysis, and how does it work? Even if it's not there yet, having this information in something that's separate from the code means that now if I do another variation, I do another feature, I expand the feature, all of these places, I already have the context.
5. AGAakash Gupta
  Very important point, and I actually wanna double-click on that
1:02:50 – 1:16:35
PRD plus prototype: the new standard
1. AGAakash Gupta
  a little bit. Let me share my screen here. So one of the hot topic questions that everybody is asking me is, "When do I use an AI prototype versus a PRD? Do I have a prototype and a PRD?" So what is the role of the PRD now?
2. NANadav Abrami
  Oh, that's a really good question. I, I think first of all, it's... PRDs are, are really important but also really notorious. They have a number of problems in them. First of all is that it's a lot of text that people sometimes skim over, and they miss some of the parts. Second thing is that everybody knows it takes 1,000 words to describe one picture, and an application, if you put it down to pictures, is, like, 1,000. So there's so much text, and you're gonna not gonna cover it all. Some things you're gonna take as self-explanatory, a lot of them, because that's the way it works. And, and I think the prototype and the PRD, they're not coming to replace each other. But for most people, they're gonna play around with the prototype and understand most of the things from the prototype. And in a way, the PRD becomes something that is more useful for the AI even. Now, I'm not saying it's not part of your deliverables. It is part of your deliverables. Uh, it is important. It's something that you need to see that makes sense. But if you do what we said before, if you manage it as something that's part of your project, the PRD, as, as something that is a living part of, of the system you're building in a way, and you make sure that it is part of the prototype, then it's gonna improve your prototype because one thing I can tell you is that the AI's gonna probably read it and not skim it.
3. AGAakash Gupta
  [laughs]
4. NANadav Abrami
  And, and it means that it's gonna, it's gonna create this sort of, uh, fidelity or mirroring between the PRD and the prototype. Now, it's not that, uh, that we don't read pr- the PRDs anymore, but they come second. They come as something that's for, for the edge cases, for the things that I didn't cover in the prototype. It'll cover a lot of things that maybe didn't make sense. We talked about, uh, before the edge cases, the, the empty screen in the case of the sentiments and so on. Some of these things are not gonna be represented in your prototype, right? We have a second edge case, which is basically we have too many posts. We didn't cover it, and it's... I don't think that it's that important that we didn't cover it. But if it comes to a developer at that point, between the PRD and the prototype, you don't want him to have any questions. I think that's like, uh, as a, a checklist for yourself. If you have anything that you feel like you need to say after somebody already read the PRD and played around with the prototype, then something is missing. So it's, it's really a way both of covering all the edge cases and making sure that they're there. And it's important to understand that code costs more to develop, costs-- uh, code costs more to maintain and to tweak, and text is cheaper, both in your time, your time to debug in it. The-- Because you don't need to debug text. You just need to read it. If it's an application, whenever you do a prompt, you want to, uh, might want to check different parts of it to see that everything works as expected and so on. It's so much simpler with text. So I would say cover the main 90% flows with the prototype, and make sure that all of the edge cases are in the PRD.
5. AGAakash Gupta
  I really like this distinction. Cover your 90% flows in your prototype, and then have all your edge cases in your PRD so that PRD plus prototype leads to no questions.
6. NANadav Abrami
  Exactly.
7. AGAakash Gupta
  So to review everything we covered for you guys today, we talked about when should a PM use AI prototyping versus other methods, ideation, to feel production ready, to sell an idea, to reduce usability risk. And we talked about this ideal workflow. You're gonna explore the problem space. You're gonna define a feature. You're gonna match it to your design system like we did in step one. You're gonna explore three to four divergent solutions. We explored two today. You're gonna visually edit the best solution. We showed you how to do that. Then you're gonna test it with real people, ideally your own users. And then you're gonna share that prototype with a developer team. Is there anything else in this workflow PMs should keep in mind?
8. NANadav Abrami
  Have fun. I mean-
9. AGAakash Gupta
  Have fun with it. [laughs]
10. NANadav Abrami
  Yeah. I mean, you've got such amazing creation tools. I, I think about how much work I needed to do to create my first Flash game, my first interactive content, and you just got, like, the most magical genie that can build things for you. So yeah, have fun with it. And it's, it's really about the variations as well. It's not being afraid to have fun and do a lot of variations.
11. AGAakash Gupta
  Yes. I would really emphasize this point. Three to four could even be low depending on what stage you are and what type of feature, how important that feature is. So before I let you go, Nadav, I have a couple hot questions for you. Hot question number one is why did you build Dazzl as a separate company and not inside of Wix?
12. NANadav Abrami
  Doy, it's, uh... There's so many answer to this one. Uh, Wix is a giant company, and it's the most amazing giant company. I, I had so much luck, uh, being a founder of this incredible company. It is also, uh-Big company. And big companies, in many ways, especially public companies, they are limited in how fast they can move. Wix is amazing in that regard, by the way. It moves really fast, but it's no startup. So I think in this time where everything is so volatile and changing so fast, uh, uh, I wanted to get on top of it. And, and that's, that's one of the reasons. Second reasons, uh, reason is the team that I have with me. I have the most amazing team of 30 people, some of them working with me more than 10 years. Built a number of the f- uh, of the Wix editors. Really amazing people. They're, they're superstar developers and superstar... Well, everything you can imagine in a startup. And some of them have been with me for, as I said, more than 10 years, but they really-- Wix is 20 years old almost, so, just now. So if you look at it, when they joined Wix, it was already kind of a big company, and we love working together. I don't want to stop working with them, but I think they, they should have their own company by this point. So it's also about the people and giving them the opportunity because I think as a startup they have much more ownership and much more stake in the game. And, and if they win, a bigger cash out also. Uh, so, so this is, I think, the second thing. Third thing is that when I look at what we're building and, and where we're taking it and what we believe, uh, at Dazzle, it's very different from Wix. Wix is-- has always been about simplicity, about targeting do it yourself, but also do it for me, but, uh, not, uh, the professional high tech community as such. And I think what we're doing with Dazzle aims a lot more at professionals. So it made sense in that regard also to split it.
13. AGAakash Gupta
  And the final hot question here. If we see the progress that this has made since ChatGPT released three years ago, it's been phenomenal. If you forecast out three, five more years, we can only expect this to get much, much better. Is there a point where AI starts to replace developers or replace product managers? What's your forecast for the future? And specifically, like, how should PMs be preparing themselves for whatever's happening in the next three to five years with AI?
14. NANadav Abrami
  Well, three to five years, I don't know if AI is going to replace developers. It's going to replace some very simple things, development tasks, in a way. What I think it does is it blurs the, the lines between developers and just tech-savvy people. If you want to become tech s-- Uh, tech-savvy is somebody that wants to be tech-savvy. It's somebody that wants to bother and understand a bit about what's going on inside this system. And really because writing code is, is not a limiting factor anymore, I think what PMs really need to do is, is level up the skill of understanding what they're building. Because I, I know it's, again, it's talking dirty because the PMs don't want to be developers, and, and they're right. It's something different. It's something else. And, and they're totally-- It's, it's such an important and interesting job to just bring in the input and design the feature. But I think sometimes now with these superpowers, you can just become unblocked. I see our, uh, product managers at Dazzle, they're pushing code into the main project as well. Not huge things, not like, uh, starting out and, and, I don't know, not building a huge new feature. But if we want to change the publish dialog, if we want to change the media gallery, if we want to... Not just visual stuff sometimes. We want to add a link to some other, uh, back office we have and stuff like that. This is done, done by the product managers and the designers, not by the developers many of the times. And, and it's gonna grow more, right? The, the-- When writing code is, is not a problem, in a way, the developers become the gatekeepers. They're in charge of making sure the code still makes sense in the end, but they're not gonna, they're not gonna be the only contributors of code. So one thing I'd suggest is level up. It's basically understand that the fact that you're not a developer doesn't mean that you don't write code anymore. I mean, obviously, you don't type the code, right? But you don't even have to type anything, just put it on speaker and, and talk to it. But, but you can contribute code, and you should contribute code, and it should be something small at the start. I think it's, it's a level up that all of your organization is gonna see. It's not gonna be simple, maybe, uh, politically, just making the organization accept that PMs are starting to put in code. But I think it's so worth it. And if you get your organization to do this, it's a huge level up. And also there's something you can do to start getting ready for it, which is basically sit down with whatever AI tool you want that has access to your project, to the actual project that your company is working on, and start asking it question. Ask it for a high-level diagram. Ask it for whatever you want to basically understand a bit more about the architecture. I think it's, it's a muscle. It's really something you can practice. You can, uh, look at, and you can also practice it on different applications. If you build something in whatever vibe coding tool you want, uh, not all of them have the amazing tools Dazzle have for looking at, at the output, but all of them have an amazing AI developer that can read the code and tell you stuff about it. And I think it's, it's, it's gonna teach you how to talk to the developers better also, right? N- Just talking to the AI about the code a bit, asking it about the big concept, it's-- that's gonna teach you so much. And if you do it on your project, that's amazing. You're gonna have a common language with the developers in the team that you never had before.
15. AGAakash Gupta
  What a great way to end it, guys. We just walked throughUsing Dazzl as a case study, but more importantly, all the fundamental skills for AI prototyping. We talked about the importance of not just jumping into your AI prototype, but exploring the problem space. Once you actually build your AI prototype, making sure it conforms to your design system, making sure you're exploring different divergent solutions, and then testing it with your users. I promise you, if you implement the things that Nadav taught you today into your work, you will be a better PM. More of your features will be successful. They will have a greater impact. So go out there, stop watching now, start using a tool, whatever tool you have access to. Hopefully, you have access to a tool like Dazzl. You can get a free month of Dazzl if you use my code, which is below in the description. So don't let that be your blocker. Get started today, and I'll see you in the next episode.
16. NANadav Abrami
  Can I say one more thing, Aakash?
17. AGAakash Gupta
  Yes.
18. NANadav Abrami
  Okay. So one thing I... If I can sum up and say, we keep working on new features. If you come and use Dazzl and you want to see it from the other side, how this usability looks, don't just use the coupon. Give us a holler on Discord, on the email, wherever you want. Talk to us, and you'll get to see one of these experiences w- from the other side, which is, I think, super interesting as well.
19. AGAakash Gupta
  Yeah. Take both sides of the chair, give them some feedback, and see it on the other end. Thanks so much, Nadav.
20. NANadav Abrami
  Thank you. It's been a pleasure, Aakash.
21. AGAakash Gupta
  Bye, everyone. I hope you enjoyed that episode. 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, 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 and the production to get you better insights to stay ahead in your career. Finally, do check out my bundle at bundle.aakashg.com to get access to nine AI products for an entire year for free. This includes Dovetail, Mobbin, Linear, Reforge Build, Descript, and many other amazing tools that will help you as an AI product manager or builder succeed. I'll see you in the next episode

Episode duration: 1:16:45

Install uListen for AI-powered chat & search across the full episode — Get Full Transcript

Transcript of episode rW4MZEwGYY0

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.

Add to Chrome