Live Vibe Coding Session: How to Build Your Own Suite of CX Tools | Episode 105 的完整文字稿

Whereas in vibe coding, you know, you're essentially becoming the architect. 00:02:51.770 --> 00:02:58.250 Um, and this is happening right now in software development, but it's also happening right now outside of software development. 00:02:58.409 --> 00:03:03.850 Uh so you're not necessarily hauling bricks around and actually doing the construction work. 00:03:03.930 --> 00:03:09.370 You're making the decisions about what you want the building to look like after it's done. 00:03:09.530 --> 00:03:13.689 And, you know, to some extent in the process and making adjustments and those kinds of things. 00:03:13.850 --> 00:03:25.050 So, you know, AI, the construction crew, so to speak, handles the construction and the implementation, and you handle essentially the vision and the vibe of what it is you want to build. 00:03:25.290 --> 00:03:27.130 Now, there are some implications here. 00:03:27.210 --> 00:03:35.450 I've consumed a lot of content about this in recent months, and the implications are essentially boiled down to three things. 00:03:35.610 --> 00:03:42.409 First off, we're going to start seeing a lot more niche uh micro-SaaS software out there. 00:03:42.570 --> 00:03:49.610 Things that are developed to do a very, very specific thing in a very, very specific way. 00:03:50.250 --> 00:04:01.930 Um, because you can now essentially code or you know create these kinds of um software applications, web pages, all those kinds of things that do a very specific thing. 00:04:02.090 --> 00:04:15.610 The second implication here is that teams are now gonna have the ability to essentially solve their own problems instead of immediately looking for a vendor, a software vendor doing an RFP to solve their problems. 00:04:15.770 --> 00:04:27.290 Um you're gonna have teams that develop tools and applications that help them with a business process and help them with a business process in the way that they want to operate that process. 00:04:27.850 --> 00:04:41.370 And that leads to the third implication that, you know, in the not too distant future, the days of bending your own processes to the way a specific software operates are somewhat limited, to be honest. 00:04:41.609 --> 00:04:54.969 Now, of course, we're not getting rid of Salesforce.com or HubSpot or Gainsight or Vitally or any of the CSPs or any of those big platforms anytime soon. 00:04:55.129 --> 00:05:05.370 There is a lot of inherent complexity and functionality and infrastructure built around these uh fundamental platforms that you're not just gonna go vibecode, right? 00:05:05.529 --> 00:05:08.810 Let's kind of shove that to the side. 00:05:09.849 --> 00:05:13.529 That's not to say in 10 years you won't be able to, or maybe less than that. 00:05:13.769 --> 00:05:29.849 What I'm talking about, though, are all of those other things where you are manually doing things in spreadsheets and you know, docs and other places that could be an application or an automation. 00:05:30.009 --> 00:05:43.049 It could be something that feeds data and information into one of those platforms like a Salesforce or a HubSpot or works collaboratively with them via the API or whatnot, right? 00:05:43.289 --> 00:05:53.769 So we're somewhat limited right now in terms of our imagination of what could be built with this kind of technology. 00:05:53.930 --> 00:06:08.009 And obviously, also there are some security implications here because you know with generic kind of vibe coding, you're just kind of putting stuff out there, not necessarily in a secure way, right? 00:06:08.169 --> 00:06:15.689 So what I'm not talking about right now is things that handle sensitive customer data, although you can definitely do that. 00:06:15.930 --> 00:06:25.049 And if you, you know, if you hire somebody to vibe code that does have some engineering background, at that point you can you can probably build something securely. 00:06:25.209 --> 00:06:35.849 But for your everyday, what what I'm here to really talk about is just everyday usage and potential implications for vibe coding in your day-to-day. 00:06:36.009 --> 00:06:46.569 When we talk about vibe coding, there's really a uh kind of an iterative loop process that we follow when we write something or when we vibe something. 00:06:46.729 --> 00:06:49.449 And this iterative loop essentially takes four steps. 00:06:49.609 --> 00:06:50.490 First is the prompt. 00:06:50.569 --> 00:06:52.009 You describe what it is you want. 00:06:52.089 --> 00:06:53.849 That's pretty self-explanatory. 00:06:54.089 --> 00:06:57.849 And of course, good prompting equals good results. 00:06:58.089 --> 00:07:02.810 Uh, the reveal, which means AI builds it somewhat instantly. 00:07:02.889 --> 00:07:06.810 It takes, can take seconds, can take minutes, depending on what you're building. 00:07:07.049 --> 00:07:08.490 Then comes the vibe check. 00:07:08.649 --> 00:07:33.049 You look at it and you say, okay, change the functionality of this button, or you know, this field doesn't look quite right, or you know, the the colors are a little bit off, or whatever the, you know, whatever your feedback might be, you work iteratively with your preferred vibe coding tool to make those changes, and it'll make those changes, which is essentially the refinement step. 00:07:33.129 --> 00:07:39.609 You're you're vibing back and forth with the AI so that it matches hopefully the picture in your head. 00:07:39.769 --> 00:07:45.449 And again, the better you are at prompting up front, um the easier it is. 00:07:45.529 --> 00:07:56.569 And and I've got a huge unlock for you here in a second that um that will make that first initial prompt pretty much like it'll get you 80% of the way there. 00:07:56.810 --> 00:08:11.930 Now, quick note if you're building something very complex, I'm talking about um building you know, a web app with multiple tabs and sections and databases and all that kind of stuff. 00:08:12.089 --> 00:08:15.209 Um, and by the way, you can vibe code spreadsheets

as well. 00:08:15.370 --> 00:08:25.529 Claude is especially good at that, where you can build a very complex um spreadsheet or model, or you know, I've used it for a staffing model, for instance. 00:08:25.769 --> 00:08:33.210 Um the more complex it is, the more you're gonna want to take things in bite-sized chunks, just like a software developer does today. 00:08:33.370 --> 00:08:37.690 In other words, you're not gonna want to vibe code the entire thing all at once. 00:08:37.769 --> 00:08:46.570 Um, but you are, you know, it's good to get a general layout, but then you're gonna want to focus on quote unquote feature by feature. 00:08:46.730 --> 00:08:54.970 Uh, focus on building certain functionality out and then moving on to the next rather than just you know vibing on the entire thing itself. 00:08:55.210 --> 00:09:14.569 We'll jump into this here in a second, but one of the things that I wanted to give you some practical advice on and just kind of a lay of the land on is what vibe coding tools are out there and and and do so in order of sophistication, so to speak. 00:09:14.730 --> 00:09:25.850 Now, I can't take total credit for this, although I have amended it a little bit, but um, Sabrina Romanoff, if you don't follow her on socials, she's all over TikTok and Instagram and YouTube. 00:09:26.250 --> 00:09:32.649 Sabrina Sabrina Romanoff is a fantastic AI educator. 00:09:32.889 --> 00:09:36.090 I've spent a lot of time consuming her content. 00:09:36.250 --> 00:09:41.210 And so she has these four stages essentially of vibe coding tools. 00:09:41.449 --> 00:09:47.370 The first one being you're essentially you're a non-technical beginner, you're just getting in, you're kicking the tires. 00:09:47.529 --> 00:09:52.730 Maybe you want to build a simple landing page, a lead funnel, simple tools. 00:09:52.970 --> 00:10:01.289 You're gonna want to look for a tool like base 44, for instance, which is you know very, very simple, but also somewhat limited. 00:10:01.370 --> 00:10:12.009 Uh Google AI Studio as well, if you're in the Google Suite, check out Google AI Studio because it does it allow it does allow you to do some vibe coding, but it does a lot of automation type stuff too. 00:10:12.169 --> 00:10:23.289 Um, if you happen to be on a WordPress instance and you want some WordPress done, um those three tools kind of fall into this stage one category. 00:10:23.449 --> 00:10:32.970 So if you don't even know what vibe coding is and you want to just kind of figure it out and build some simple stuff, um, check out base 44, Google AI Studio, 10 Web. 00:10:33.129 --> 00:10:53.049 When we move to stage two, we add a little bit more complexity and a little bit more capability into the system where you know you can have most of these tools allow you to manage, you know, either your own database or use their native uh databases, for example. 00:10:53.289 --> 00:11:03.610 Um, these tools can be a little bit harder to fix bugs or make edits without just burning

through credits. 00:11:03.769 --> 00:11:15.529 And so again, that points to what I alluded to earlier, where you're gonna want to spend a little bit more time up front making sure that you are prompting really well from the get-go. 00:11:16.169 --> 00:11:23.769 Um, but some of these tools are emergent, lovable is probably the biggest one out there that a lot of people know about. 00:11:24.090 --> 00:11:28.889 Bolt.new and replit are among those in this category. 00:11:29.049 --> 00:11:32.649 Not the only ones, but those are kind of like the front runners, so to speak. 00:11:32.809 --> 00:11:36.329 So that's kind of that stage two intermediate vibe coder. 00:11:37.049 --> 00:11:45.769 Stage three is where you're moving if you do have some technical background, but maybe you're not a software engineer, but you have some code level familiarity. 00:11:46.009 --> 00:11:56.250 These essentially AI-powered IDEs allow you to much more easily refine and debug and expand on code that was generated in earlier um stages. 00:11:56.569 --> 00:12:14.809 And you know, it's it's pretty common for you to maybe do a prototype in a stage two tool like Lovable, and then move over into, you know, let's say Cursor or Google's Antigravity to do some more enhanced uh coding and revisions with these kinds of tools. 00:12:14.889 --> 00:12:22.649 So again, cursor AI, Windsurf AI, and Google's Anti-Gravity, which is super cool, um are essentially in that stage three. 00:12:22.730 --> 00:12:36.409 Now, stage four is this is is going to be your your highest quality uh and and highest bang for your buck um output in terms of being able to build code in a truly kind of agentic way. 00:12:36.649 --> 00:12:45.449 Um and and you know, stage four is essentially what software engineers are using today to build like production level high-quality code. 00:12:45.610 --> 00:12:54.809 Uh, it does require some technical oversight and know-how to be able to manage and maintain the code as well as to implement security features. 00:12:54.889 --> 00:13:04.730 But this is, you know, this is the stage you move to when you have hundreds and thousands of users and uh, you know, a complex code base to maintain. 00:13:04.809 --> 00:13:07.370 Uh, you're gonna basically use cloud code for this. 00:13:07.529 --> 00:13:39.210 Now, there is a relatively newer intermediary here in the anthropic slash cloud claud ecosystem called um cloud co-work, which essentially what it does is it combines claud code with just claude chat um and is is uh acting as an interface, so to speak, between claud code and claude, so that you can get those kind of claud code outputs um using natural language, so to speak. 00:13:39.370 --> 00:13:48.970 But um again, if you're if you're really advanced or whatnot, a lot of folks are going to be using claud code um probably within something like Visual Studio. 00:13:49.210 --> 00:13:53.689 So those are the four stages of uh vibe coding tools. 00:13:53.850 --> 00:13:58.329 Again, shout out to Sabrina Romanoff for the baseline of this. 00:13:58.569 --> 00:14:06.490 What we will be doing here in a second is I'll break into a screen share and we can start vibe coding. 00:14:06.730 --> 00:14:18.090 The process that I like to follow, and this is probably the biggest unlock for getting the best results possible from your first iteration, is that, well, first off, you're gonna want to gather your context. 00:14:18.329 --> 00:14:33.129 So, you know, whatever tool you're building or spreadsheet you're building, or whatever it is you do, you want to gather as much context and details about what it is you want to build as possible. 00:14:33.289 --> 00:14:37.210 Because the clearer you are up front with it, the better your result is going to be. 00:14:37.370 --> 00:14:38.490 So, what are you gonna build? 00:14:38.569 --> 00:14:40.329 What's the problem you're trying to solve for? 00:14:40.409 --> 00:14:41.529 What do you want it to look like? 00:14:41.689 --> 00:14:43.689 What features do you want to incorporate? 00:14:43.850 --> 00:14:45.850 What aesthetic are you going for? 00:14:46.090 --> 00:14:49.289 What do you want it not to do specifically? 00:14:49.449 --> 00:14:53.289 Those are the kinds of things that you'll want to gather when you're doing this. 00:14:53.449 --> 00:15:04.970 Now, um, here's where my biggest recommendation comes in is do the initial prompt or produce the initial prompt outside of your vibe coding tool. 00:15:05.129 --> 00:15:20.250 So you're gonna use whatever you use on a regular basis or prefer ChatGPT, Gemini, or Claude to generate that initial vibe coding prompt for you that you're gonna then put into uh that vibe coding tool. 00:15:20.490 --> 00:15:28.409 Now I am gonna give you that that prompt that I'm gonna show you shortly so you can you know use it as a baseline foundation. 00:15:28.569 --> 00:15:41.689 Um but essentially what you're asking ChatGPT or Gemini or Claude for is you know, give me a ready-to-go prompt that is, you know, that I can plug into lovable. 00:15:41.769 --> 00:15:46.649 Let's say we're gonna use lovable today, um, so that I can get the best result possible. 00:15:46.809 --> 00:16:04.730 So what we're gonna actually do here shortly is we're going to go into one of these tools, we're gonna ask it to give us the vibe coding prompt, and then we're gonna go into the vibe coding tool, we're going to pop that in and get uh, you know, and and watch it essentially build something for us. 00:16:04.889 --> 00:16:29.210 Now, in terms of what you want to build, this is where the infinite possibilities essentially open up where you can and okay, I gotta be honest, it it took a pretty big mindset shift for me to start thinking about how I could incorporate this into my daily life. 00:16:29.449 --> 00:16:40.889 So, I mean, look, one of the first things that I vibe coded for myself was a tool to help me publish these episodes that you're listening to. 00:16:41.210 --> 00:16:49.289 Um, because

what you don't see coming out of recording these episodes is all of the post-production work that goes into it. 00:16:49.449 --> 00:16:56.649 Um, yes, you gotta edit the show and do all that kind of stuff, but then you know, you've got to have your show notes ready for YouTube. 00:16:56.730 --> 00:17:03.769 You have to have your um, you know, chapter, chapters and timestamps ready, uh, as well as your description. 00:17:03.929 --> 00:17:13.690 You gotta have your show notes ready for you know the podcast platforms, uh, you got to have some LinkedIn posts ready to go, you gotta have some a newsletter companion ready to go. 00:17:13.850 --> 00:17:26.250 Like it's there's a bunch of outputs uh that we can generate pretty easily now uh with the input of let's say a transcript, for instance. 00:17:26.410 --> 00:17:55.769 So what typically what I'll do is I'll get this episode edited, I will export the transcript with timestamps, I'll plug into this tool that I vibe coded, and the tool in I don't know, 10 seconds or so gives me all of those outputs so that I can then proofread them, make some edits, pop them into whatever tool, YouTube or um, you know, podcast platforms or whatever, so that I can, you know, really quickly get that content updated and I'm not spending a ton of time writing. 00:17:55.930 --> 00:18:03.609 Now I know there are some people out there that will be like, hey, he's just, you know, you're using AI-generated content. 00:18:03.849 --> 00:18:09.129 And um, yeah, I I take issue with that a little bit because the content is all mine. 00:18:09.369 --> 00:18:11.289 The transcript is not AI. 00:18:11.369 --> 00:18:16.410 This is me talking, this is me sharing ideas, this is me talking about these things specifically. 00:18:16.569 --> 00:18:29.849 I'm I am using artificial intelligence to, you know, create the outlines of things and to identify key moments um along a podcast's kind of episode and story arc, so to speak. 00:18:30.009 --> 00:18:40.730 Um, and you know, I'm I I am a big kind of advocate for having artificial intelligence do 80% of the work for you. 00:18:40.970 --> 00:18:50.569 I am not an advocate of just having AI do stuff for you and then you blindly posting stuff because I've seen that done and it does not look good, and you can tell. 00:18:50.809 --> 00:19:02.569 Um, so you know, whenever whenever you use artificial intelligence just in general to create content, you always gotta give it that human eye and you always gotta make sure that, you know, this is actually what you want to say. 00:19:02.650 --> 00:19:04.970 So I'll get off my soap soapbox around that. 00:19:05.129 --> 00:19:22.170 But point being, that was one of the first things that I vibe coded was a web app that helps me take a show from transcript to a bunch of different assets that I can then take, edit, and implement in a fraction of the time that it took me before artificial intelligence. 00:19:22.250 --> 00:19:31.210 When I first launched the show, I

would spend a half day basically um, you know, pull listening to the episode, pulling out things that I wanted to make sure were in there and those kinds of things. 00:19:31.289 --> 00:19:34.170 So that's um that has been a huge lifesaver. 00:19:34.650 --> 00:19:49.129 Um you know, it when when we were uh debating on what to vibe code during the conference last week, there were a lot of ideas uh that were brought up in that in the process of doing so. 00:19:49.450 --> 00:19:54.490 And those ideas um were kind of all across the board. 00:19:54.569 --> 00:19:55.609 A lot of it was like personal. 00:19:56.089 --> 00:20:02.650 Somebody said, hey, let's vibe code like a kid's chore chart uh or a chore tracker or something like that. 00:20:02.809 --> 00:20:23.930 So you can, you know, you can identify those little moments within your daily life where you're like, hey, it would be cool to have kind of an app for that and to you know really figure out how you can, you know, build something to make those kinds of daily activities or weekly activities easier to do. 00:20:24.089 --> 00:20:29.609 So for the purposes of this demonstration, um, what I've chosen to do is something a little bit different. 00:20:29.690 --> 00:20:33.609 Um, it is essentially a live poll or vote app. 00:20:33.930 --> 00:20:43.609 So it allows you to essentially collect answers in real time that are displayed with you know things like animated charts or whatever. 00:20:43.849 --> 00:20:57.210 Um, uh the reason why I I thought about this is because, you know, we in the in the conference we did use a uh you know a polling app, ones that you see kind of integrated into uh PowerPoint, for instance. 00:20:57.369 --> 00:21:04.250 But I thought, hmm, we could probably vibe code something similar on our own and and see if that works. 00:21:04.329 --> 00:21:10.329 And so what we're gonna do live on the podcast is just you know see if we can live code something like this. 00:21:10.490 --> 00:21:14.889 And it may fall completely on our faces or it may not. 00:21:14.970 --> 00:21:16.490 And it may be a really cool thing. 00:21:16.650 --> 00:21:30.569 Either way, after this episode, I will give you access via the show notes to a link where you can view the app, but then you can also download the the prompting that I used to get to that app. 00:21:30.730 --> 00:21:35.369 So we're gonna switch over to screen share and uh we're gonna get to some vibe coding. 00:21:35.609 --> 00:21:47.129 Okay, so what you're seeing here is a Google Doc that I um came up with and already have a misspelling on, which um it gives us our first prompt. 00:21:47.210 --> 00:21:51.609 I went ahead and pre-wrote it because you don't want to watch me like write a prompt for this, right? 00:21:51.769 --> 00:23:27.799 But um, I'll walk you through some of the key points of the prompt. 00:23:27.959 --> 00:23:34.279 First off, um like any good prompt, you're gonna want to essentially give AI a role to play. 00:23:34.359 --> 00:23:39.240 In this case, I said act as an expert in live polling survey technology. 00:23:39.719 --> 00:23:41.399 Kind of broad, but okay, cool. 00:23:41.719 --> 00:23:51.159 Uh with a high proficiency in vibe coding with level, then I gave it uh basically some context and what I want to build. 00:23:51.480 --> 00:23:54.439 Um I Said what I want it to do. 00:23:54.519 --> 00:24:02.119 So I would like you to produce a detailed prompt that I can enter into Lovable to get the best result possible for the first iteration. 00:24:02.919 --> 00:24:13.719 I gave it a primary goal for the app, which is essentially to run live polls with web browsers, either with an audience or on live streams, for instance. 00:24:14.199 --> 00:24:18.119 I gave it some specifics on specific features, right? 00:24:18.199 --> 00:24:20.519 So I said, hey, let's do two views. 00:24:20.599 --> 00:24:23.480 So let's do a host view and an audience view. 00:24:23.799 --> 00:24:27.480 Gave it a few specifics there, but nothing too crazy. 00:24:27.959 --> 00:24:35.559 I said the host should have the ability to display a QR code to allow the audience to scan via mobile phone. 00:24:36.039 --> 00:24:41.159 The audience view should be responsive so that it can be displayed on a variety of devices. 00:24:41.319 --> 00:24:47.240 I said the dashboard and the audience view should update in real time based on votes being cast. 00:24:47.399 --> 00:24:51.639 I said use animated progress bars and vote count tickers. 00:24:51.879 --> 00:24:56.679 Then I said, hey, you know, features don't need to be limited to the above, but definitely contain the above. 00:24:56.839 --> 00:25:05.559 And I said, use your practical knowledge of other live polling apps, core features, to determine additional functionality that might be needed. 00:25:05.799 --> 00:25:07.559 I said, this is going to be interesting. 00:25:07.799 --> 00:25:12.279 I said, um, basically look at my website and copy some of the aesthetic there. 00:25:12.359 --> 00:25:24.519 So I'm having it, I'm having, in this case, Gemini go and crawl digitalcustomer success.com to try and pull out some um, you know, some some color language there, maybe. 00:25:24.679 --> 00:25:30.919 Um, now here is basically the thing that I include in most any prompt these days. 00:25:31.079 --> 00:25:33.559 I actually just you know copied and pasted it over. 00:25:33.639 --> 00:25:36.839 But I include this because it's a great method to get even more detail out. 00:25:37.079 --> 00:25:45.000 So I said, ask me clarifying questions one by one until you're 100% sure that you can deliver this request to a high degree of accuracy. 00:25:45.159 --> 00:25:54.839 Um, here's something I've been um adding here recently a lot, which is provide me with a confidence score with each question that you ask. 00:25:55.079 --> 00:26:00.279 Once your certainty score reaches 100%, produce the lovable prompt for me. 00:26:00.519 --> 00:26:09.480 Do not produce a new lovable prompt

after each clarifying question, but wait to produce it once you have that complete certainty. 00:26:09.799 --> 00:26:23.399 That last bit is something I've been doing recently because a lot of times what it'll want to do is produce a whole new prompt with every question that you answer, and it just wastes a whole bunch of time and tokens, and it's just not useful. 00:26:23.639 --> 00:26:27.559 So um, yeah, but I always have it ask me clarifying questions. 00:26:27.639 --> 00:26:34.359 I like seeing the confidence score because it tells me roughly how far we are until 100% certainty. 00:26:34.679 --> 00:26:37.799 So that's basically the prompt that I'm gonna start with. 00:26:37.879 --> 00:26:45.799 And again, this is the prompt that I'm feeding either ChatGPT, Gemini, or Claude to get that initial lovable prompt. 00:26:46.039 --> 00:26:48.279 So I will copy and paste that. 00:26:48.599 --> 00:27:00.279 And for this example, we're gonna use Gemini for no real reason other than I had it pulled up, I guess. 00:27:00.359 --> 00:27:02.919 Um, you could totally use ChatGPT for this. 00:27:03.079 --> 00:27:06.439 I think you can totally use Claude for this as well. 00:27:06.599 --> 00:27:10.439 I think it just kind of depends on what you're most comfortable with. 00:27:10.599 --> 00:27:15.000 Um, you know, I am going to use Pro because why not? 00:27:15.159 --> 00:27:21.559 But whatever you have the most history in and whatever, you know, knows you knows the context of you most, uh, you can use. 00:27:21.719 --> 00:27:23.240 Claude is a whole different beast. 00:27:23.399 --> 00:27:32.439 And I might do a future episode on Claude Co-work because there's some cool kind of vibe coding kind of things that you can do in Claude Co-work and Claude Code as well. 00:27:32.519 --> 00:27:36.919 So that's kind of specifically why I didn't choose Claude for this particular exercise. 00:27:37.240 --> 00:27:42.119 Anyway, um, we fed it that prompt and we're gonna let it chug for a second. 00:27:42.279 --> 00:27:44.759 So I just clicked show thinking. 00:27:45.240 --> 00:27:47.559 Of course, it sounds like a fantastic project. 00:27:47.719 --> 00:27:49.639 Current confidence score is 70%. 00:27:50.279 --> 00:27:55.719 First clarifying question: how do you want to handle authentication and vote integrity? 00:27:55.879 --> 00:27:57.000 That's a cool question. 00:27:57.159 --> 00:27:57.480 Okay. 00:27:57.719 --> 00:28:03.799 Uh, should the host have a have a login system to have their polling sessions for future use? 00:28:04.359 --> 00:28:12.359 I think it would be cool to do a login, but for the for the sake of this demonstration, I think we'll just leave it open. 00:28:12.439 --> 00:28:19.719 And in fact, I'm gonna put it on the um I'll host it on my website so that y'all can go play with it. 00:28:19.799 --> 00:28:20.519 How about that? 00:28:20.679 --> 00:28:35.319 Um, so we're just going to uh for number one, oops, for number one, we're going to leave it open for anyone to access. 00:28:35.879 --> 00:28:49.159 Okay, number two is for the audience, should they remain completely anonymous using browser local storage cookies simply for the Vogue in twice? 00:28:49.480 --> 00:28:53.799 Or do you want them to input a name, nickname before voting? 00:28:54.759 --> 00:28:55.639 Let's do this. 00:28:55.799 --> 00:29:08.039 Uh let's say that name entry can be optional in the case that a name isn't entered. 00:29:12.839 --> 00:29:21.079 The audience member who voted will remain anonymous. 00:29:21.319 --> 00:29:24.199 And I see I misspelled member, but that's okay. 00:29:25.159 --> 00:29:26.679 Gemini's smart enough. 00:29:26.919 --> 00:29:28.519 Um let's see. 00:29:28.679 --> 00:29:30.039 Do we need to say anything else about that? 00:29:30.119 --> 00:29:30.599 I don't think so. 00:29:30.679 --> 00:29:31.959 So we're gonna submit that. 00:29:32.119 --> 00:29:35.319 We're gonna see what the confidence score is next. 00:29:36.519 --> 00:29:42.679 But you see how we kind of um get all of this out of the way before we go into the vibe coding tool. 00:29:42.759 --> 00:29:52.919 Um, because these are all things that I would need to A, first think about and ideate on, um, and then implement in later stages in the vibe coding tool. 00:29:53.000 --> 00:30:01.319 This way we're coming to the vibe coding tool with a very uh kind of well-thought out plan and a super detailed plan. 00:30:01.799 --> 00:30:05.559 Next clarifying question: what types of question polls should we support? 00:30:05.719 --> 00:30:06.679 I like it. 00:30:07.000 --> 00:30:16.439 Uh strictly multiple choice or single answer, multiple answer, word cloud free text rating slide scale. 00:30:16.839 --> 00:30:25.959 Um for this first iteration, why don't we just do for first iteration? 00:30:26.759 --> 00:30:35.079 Let's keep it to multiple or single. 00:30:38.279 --> 00:30:39.639 I can't type today. 00:30:39.799 --> 00:30:59.879 Multiple choice or single answer um questions where the host has the ability to select which type of question they want to ask. 00:31:02.199 --> 00:31:16.679 Use the check boxes for multiple choice and radial button or yeah for single select. 00:31:17.480 --> 00:31:18.119 Cool. 00:31:18.839 --> 00:31:20.599 Let's see where we end up next. 00:31:21.079 --> 00:31:24.439 Identifying color palette, current confidence score 92%. 00:31:24.839 --> 00:31:25.799 That's very specific. 00:31:25.959 --> 00:31:26.519 Perfect. 00:31:26.759 --> 00:31:29.480 Uh single answer radio buttons. 00:31:29.719 --> 00:31:31.159 Um, okay. 00:31:31.639 --> 00:31:35.399 There's one final set of clarifying questions to get me 100% aesthetics. 00:31:35.480 --> 00:31:48.359 Do you have specific primary, secondary hex codes for the digital customer brand that you want me to include in the prompt, or should I instruct Lovable to use modern clean B2B SaaS aesthetic? 00:31:49.319 --> 00:31:49.799 Good place. 00:31:50.279 --> 00:31:54.599 So I did not necessarily pick

up on the colors from the website. 00:31:54.679 --> 00:31:59.959 I didn't really think it would, but um poll lifecycle on the host dashboard. 00:32:00.119 --> 00:32:07.799 Do we need the ability to create a queue of multiple questions in advance so that you can toggle them live one by one? 00:32:08.199 --> 00:32:09.399 Okay, this is cool. 00:32:09.559 --> 00:32:15.639 So yeah, that second question with the poll lifecycle, obviously that introduces complexity, right? 00:32:15.959 --> 00:32:24.919 And so at this point, you may decide to reduce complexity and just do a single question at a time. 00:32:25.159 --> 00:32:38.599 Or in this case, we're just gonna throw caution to the wind and essentially have it build the ability to create multiple questions that it then uh allows the host to move through. 00:32:38.839 --> 00:32:44.199 Okay, so I have grabbed my colors, primary and secondary from the website. 00:32:44.279 --> 00:32:51.079 It's that annoying orange that you see everywhere, and uh that green secondary color that I use. 00:32:52.119 --> 00:33:14.279 And for the poll lifecycle, we're just going to say let's create a queue where the host can pre-define multiple questions that they can cycle through live during the event. 00:33:15.399 --> 00:33:19.159 Okay, this might get us to 100%. 00:33:19.639 --> 00:33:21.879 We shall see here shortly. 00:33:23.000 --> 00:33:25.319 Okay, current confidence score. 00:33:25.559 --> 00:33:26.119 100%. 00:33:26.599 --> 00:33:28.119 That is exactly what I needed. 00:33:28.279 --> 00:33:28.839 I know. 00:33:29.000 --> 00:33:30.119 Okay, cool. 00:33:30.359 --> 00:33:32.199 Uh since I have all the details. 00:33:32.359 --> 00:33:44.919 Okay, and so here what you'll see is a prompt that I can copy and paste into Lovable to start vibe coding this app. 00:33:45.480 --> 00:33:52.519 Um, now we're not gonna spend a ton of time on this for the sake of this demonstration. 00:33:52.679 --> 00:33:54.919 Okay, this is interesting down here, by the way. 00:33:55.079 --> 00:33:57.480 Um, it says Superbase setup. 00:33:57.559 --> 00:34:06.439 For those of you who may not be familiar with Superbase, it is essentially a um a database platform that Lovable partners with. 00:34:06.519 --> 00:34:08.360 And so they have a very tight integration. 00:34:08.519 --> 00:34:17.079 And for something like this, the app is going to want to create its own database so it can store the questions and the responses and all that kind of stuff, right? 00:34:17.240 --> 00:34:24.760 Um, and so a lot of times the reason why lovable is so approachable is because you don't have to create your own database and whatnot. 00:34:24.920 --> 00:34:29.079 It will essentially do it for you, uh, which is super cool. 00:34:29.320 --> 00:34:37.559 And then it is telling me that I can essentially iterate um with lovable from here on out, which is yeah, it's exactly what we're gonna be doing. 00:34:37.800 --> 00:34:40.280 But point is I'm gonna copy and paste this. 00:34:40.440 --> 00:34:45.240 Um, what I would normally do actually is put this into like a doc. 00:34:45.559 --> 00:34:46.760 In fact, I may do that. 00:34:46.920 --> 00:34:53.559 So this is the document that I will be sharing with you, or that is shared in the links down below in the show notes. 00:34:53.639 --> 00:34:54.599 So go grab it. 00:34:54.760 --> 00:34:57.639 I'm going to add another tab. 00:34:57.960 --> 00:35:06.840 And this is where I'm going to put in the initial, the uh say first lovable prompt. 00:35:07.400 --> 00:35:07.960 Cool. 00:35:08.199 --> 00:35:13.000 And so you see, it does put a very clear prompt before you. 00:35:13.159 --> 00:35:31.480 This is if we were to just go lovable and start prompting like we did in Gemini, uh, we would be further behind because this is what it's actually, it's actually starting to predetermine what some of the requirements are for the data table and the back end essentially. 00:35:31.639 --> 00:35:39.159 So it's saying that you know you're gonna need a uh a poll table and options and votes and whatnot. 00:35:39.320 --> 00:35:45.880 But for the most part, you can directly attribute a lot of this back to you know the prompting and the questions that we got. 00:35:46.039 --> 00:35:48.440 Um, so just quick scan. 00:35:49.880 --> 00:35:55.880 I don't see anything crazy that we need to change. 00:35:55.960 --> 00:36:06.279 What I would do normally is go through this with a fine-tooth comb and just kind of add remove things just based on you know what the image in my head is of this thing. 00:36:06.440 --> 00:36:09.000 I'm not seeing anything crazy that we need to omit. 00:36:09.079 --> 00:36:12.279 And there's even some interesting choices here. 00:36:12.440 --> 00:36:15.719 For instance, ensure real-time changes feel magical. 00:36:15.880 --> 00:36:17.000 That's kind of cool. 00:36:17.159 --> 00:36:21.639 We'll see what magical uh we'll see what lovable thinks magical is. 00:36:21.799 --> 00:36:24.360 Uh, but we're just gonna run with this, right? 00:36:24.519 --> 00:36:31.239 We're just going to take all of this and we're gonna go over to lovable. 00:36:31.559 --> 00:36:33.559 This is what lovable looks like. 00:36:33.799 --> 00:36:39.880 Um, and I'm gonna just paste that prompt in there while we're talking. 00:36:40.199 --> 00:36:52.759 One thing to note is with lovable, you know, much like a lot of other um, you know, tools, you can uh, you know, predetermine certain connectors you want to use. 00:36:53.000 --> 00:36:57.480 This is where I could, you know, tell it some of my design choices as well. 00:36:57.639 --> 00:37:01.480 You can attach files, spreadsheets, whatever it may be. 00:37:01.719 --> 00:37:03.639 In this case, we're not doing any of that. 00:37:03.799 --> 00:37:09.000 Um, there is another interesting feature that lovable does have, which is this plan mode. 00:37:09.239 --> 00:37:19.400 What's cool about that is you can essentially plan the app a little bit with lovable before

you actually vibe code the app. 00:37:19.719 --> 00:37:34.199 Again, this is this would be another thing that I would actually recommend you do, where you're going into plan mode, you're iterating on the plan a little bit before it actually builds it for you, so that then you know you're not iterating after it's already built it. 00:37:34.360 --> 00:37:41.480 In other words, you're iterating on it so that you're not spending a bunch of tokens iterating in real time on an already built app. 00:37:41.639 --> 00:37:44.679 In this case, we're just going for broke here, right? 00:37:44.759 --> 00:37:49.319 So I'm gonna hit submit on that, and we're gonna see what it comes back with. 00:37:49.480 --> 00:38:11.159 Now, one of the first things it's probably gonna ask me here is for permission for it to build the back end, um, which should be popping up right here, but um, you will start to be able to, as it initializes, you'll be able to start getting more details on what it is actually doing. 00:38:11.319 --> 00:38:14.839 And so, yep, just like we thought, enable cloud. 00:38:14.920 --> 00:38:24.759 This is essentially us giving permission to enable SuboBase to be set up on our behalf in the background. 00:38:25.000 --> 00:38:32.440 I don't have it set to just always allow just because I like that kind of control, but I've just allowed it to. 00:38:32.599 --> 00:38:42.279 And so now what it is doing is it is establishing the database and it is going to start writing this app before our very eyes. 00:38:42.839 --> 00:38:54.039 And once it gets a little bit further along, we're actually going to be able to get some details in terms of what is actually happening live. 00:38:55.319 --> 00:38:59.719 And so, yeah, you start to see those kinds of things populating. 00:39:00.119 --> 00:39:09.480 And so, you know, if you like watching this kind of thing, you can definitely get the details, or you know, you can close the details if you want to. 00:39:09.639 --> 00:39:14.279 Uh, this is asking me for some changes it needs to make to the database. 00:39:14.679 --> 00:39:18.119 This might get annoying if it asks me to do that a lot. 00:39:20.920 --> 00:39:24.839 Alright, so we're starting to see a little bit more detail populate here. 00:39:26.199 --> 00:39:31.239 And it basically just told me you're creating a very unsecure app, which is kind of true. 00:39:31.559 --> 00:39:40.759 So, yeah, it's starting to essentially create the back end, and you can see what it is writing and editing in real time. 00:39:41.719 --> 00:39:43.960 Okay, so um a couple things. 00:39:44.199 --> 00:39:51.880 This is about five minutes or so that this has taken me, and um, you'll see we are now seeing a live preview. 00:39:52.039 --> 00:39:59.799 It has described essentially what it has built, and uh the colors are kind of cool. 00:39:59.960 --> 00:40:03.880 I kind of like how it flipped at the primary and the secondary. 00:40:04.119 --> 00:40:06.519 Well, the secondary, I guess, used for a background, right? 00:40:06.679 --> 00:40:07.639 So cool. 00:40:07.799 --> 00:40:09.880 Um built the back end. 00:40:09.960 --> 00:40:14.360 It did have a quick issue, which it essentially fixed itself. 00:40:14.679 --> 00:40:21.159 But now we have a live kind of view of the app that I mean, okay, cool. 00:40:21.319 --> 00:40:22.839 It's a landing page. 00:40:22.920 --> 00:40:32.920 You can go to the host dashboard or you can go to the audience vote, which the colors on this little bit suspect, so we're gonna need to address that. 00:40:33.079 --> 00:40:38.759 Um, but if we go to the host dashboard, it's super simple, which is cool. 00:40:38.920 --> 00:40:40.759 What is your favorite color? 00:40:41.079 --> 00:40:45.239 We are going to select a single answer option. 00:40:45.400 --> 00:40:49.239 We're going to say red, yellow. 00:40:49.960 --> 00:40:53.319 We're going to add an option of blue. 00:40:54.279 --> 00:40:58.279 So now we're basically what we're doing here is we're just testing this thing. 00:40:58.519 --> 00:41:01.559 Um, and it created a question. 00:41:01.960 --> 00:41:13.559 Uh, and it is in draft, which I don't really know what that means, but I'm assuming that I can either trash it or I can go live with this question. 00:41:14.279 --> 00:41:15.880 Okay, the question is live. 00:41:16.039 --> 00:41:23.400 There is a QR code, and there is a link to go to that question. 00:41:23.639 --> 00:41:28.279 I will copy that link and I will paste it in this second tab. 00:41:28.839 --> 00:41:30.839 Okay, so there's my name. 00:41:31.000 --> 00:41:33.319 Uh, here's red, yellow, blue. 00:41:33.400 --> 00:41:39.159 We're gonna submit the vote, and now we're waiting for the next question. 00:41:39.719 --> 00:41:43.480 And I would assume that somewhere over here. 00:41:45.079 --> 00:41:46.440 So this hasn't come back yet. 00:41:46.519 --> 00:41:55.400 So look, I mean for a first iteration, this isn't bad. 00:41:55.559 --> 00:41:57.319 I don't know what I just did. 00:41:57.799 --> 00:42:00.440 I think I just got uh I don't know. 00:42:00.839 --> 00:42:05.000 It's closed for a first iteration, this isn't bad. 00:42:05.239 --> 00:42:19.559 Now, what I would do next is you know, as I'm kind of testing this, what I would be doing is essentially jotting some things down that aren't quite right. 00:42:19.960 --> 00:42:27.559 So, you know, the button on the front where it said audience, I think it was answer questions, something like that. 00:42:27.799 --> 00:42:29.880 Uh the colors were all weird here. 00:42:30.039 --> 00:42:37.239 Now, here I don't see any kind of ability to see answers. 00:42:37.799 --> 00:42:44.599 And maybe this is because we haven't published it yet, but um, and we can maybe publish it and see if that works. 00:42:44.759 --> 00:42:52.599 Now, publishing here, you can provide your own URL and things like that for for for you know these kind of instances. 00:42:52.759 --> 00:43:00.440 You know, I'll just use lovable's URL and

we're gonna publish this public and see. 00:43:01.159 --> 00:43:04.839 Okay, we're just gonna publish this bad boy. 00:43:05.480 --> 00:43:07.239 And then maybe it'll work, right? 00:43:07.400 --> 00:43:15.239 So, you know, you can essentially do some testing, and then if you want to iterate on it, um, you're just gonna ask lovable. 00:43:15.400 --> 00:43:25.319 So um, you know, I would probably start with that button on the front page and say, hey, need to change the um the colors of that. 00:43:25.480 --> 00:43:38.679 Um, and then two, I would also say, you know, I don't see necessarily where I can view the different questions and the answers coming in and those kinds of things. 00:43:38.759 --> 00:43:42.360 Now we we've just published it, so we might test it out live here. 00:43:42.519 --> 00:43:44.759 I'm gonna go back to the host dashboard. 00:43:45.000 --> 00:43:46.199 What's your favorite color? 00:43:46.360 --> 00:43:47.319 Is closed. 00:43:47.639 --> 00:43:49.400 See, and I can't go back and edit it. 00:43:49.480 --> 00:43:51.000 So that might be an iteration. 00:43:51.159 --> 00:43:57.239 We say, hey, if a poll is closed, I'd like to be able to reopen it, for instance. 00:43:57.480 --> 00:44:09.319 Okay, so and you'll also notice that because we didn't don't have the live preview and the sidebar here, that the app is responsive and so it is kind of you know moving things around. 00:44:09.559 --> 00:44:14.360 We're gonna do um, I don't know, have you ever gone fishing? 00:44:15.880 --> 00:44:22.360 Single select, we're gonna do yes, no, create poll. 00:44:23.559 --> 00:44:26.519 Let's maybe create two of them. 00:44:27.000 --> 00:44:30.839 And maybe let's do a multiple choice and see what that looks like as well. 00:44:31.159 --> 00:44:36.839 Which of these is your favorite number? 00:44:37.400 --> 00:44:39.239 Three or four. 00:44:40.599 --> 00:44:41.400 Create poll. 00:44:41.480 --> 00:44:43.960 Okay, so now we have a couple more. 00:44:44.039 --> 00:44:48.279 Um, looks like we are going to launch one of these, perhaps. 00:44:48.920 --> 00:44:55.239 Okay, so it did update this page, which is super cool. 00:44:56.360 --> 00:44:59.480 Uh I'm gonna say yes and submit my vote. 00:44:59.719 --> 00:45:01.639 And then maybe, oh yeah, okay. 00:45:01.719 --> 00:45:07.319 So now because we published the app, it is basically seeing what's happening on the back end, right? 00:45:07.559 --> 00:45:14.679 And then if I go and I launch maybe the second one, it'll automatically close that first one. 00:45:14.759 --> 00:45:19.799 So the point I'm getting at here is that for a V1, this is a really great result. 00:45:20.039 --> 00:45:29.239 And you know, this is a somewhat complex app, but the point is you can build these things, and it's relatively simple. 00:45:29.400 --> 00:45:39.799 Now, what I would be doing next is going through taking note of you know what it is I need to fix and essentially having a conversation with Lovable to fix certain things. 00:45:39.960 --> 00:45:47.319 I would iterate upon it and I would keep iterating upon it until I get to the point where it is what I want it to be. 00:45:47.639 --> 00:45:50.839 You update the published version and you're good to go. 00:45:51.000 --> 00:45:52.199 So I'm gonna get out of screen share. 00:45:52.679 --> 00:45:55.960 Real quick, and then we'll wrap this episode up. 00:45:56.199 --> 00:46:07.960 When I first did this with the audience at the CS Summit in Austin, uh one of the things I did was I polled the audience in terms of their familiarity with vibe coding. 00:46:08.279 --> 00:46:17.880 And I was surprised to see that more than I'd say more than half the room didn't really know about vibe code coding. 00:46:18.039 --> 00:46:21.239 And I, you know, I guess that makes sense. 00:46:21.319 --> 00:46:23.319 It's it's a relatively new thing, right? 00:46:23.559 --> 00:46:33.559 And um, it's not necessarily mainstream, but it is incredibly powerful and it is the way that software is going. 00:46:33.719 --> 00:46:37.719 Whether you're a developer or you're not a developer, it's a thing. 00:46:38.039 --> 00:46:39.880 And it's a powerful thing. 00:46:40.119 --> 00:46:47.079 And so my goal for today is for those of you who are vibe coding, kudos to you. 00:46:47.159 --> 00:46:47.880 That's awesome. 00:46:47.960 --> 00:46:48.599 That's great. 00:46:48.759 --> 00:46:52.199 I would love to hear about the projects that you're working on. 00:46:52.519 --> 00:47:02.920 For those that aren't vibe coding, hopefully this kind of demystified it a little bit and maybe gave you the impetus to go try it out yourself. 00:47:03.159 --> 00:47:07.400 Now, here's a couple of caveats that I'm going to give you, and then we'll say goodbye. 00:47:07.559 --> 00:47:24.199 First off, you're not going to want to do this right now with sensitive information, customer information, company information, unless you are a thousand percent certain that the environment you're doing it in is a secure environment, right? 00:47:24.360 --> 00:47:51.960 Please don't go and create a bunch of like uh, you know, calculators or and things that ingest, you know, data in from your CRM and those kinds of things without really knowing what you're doing and without putting some guardrails around these systems because the chances of exposing that information elsewhere are pretty high if you don't know what you're doing. 00:47:52.199 --> 00:48:01.000 Second is we didn't really talk about integrations and things like that, but you can build these things in such a way to where they can integrate with all of your data, right? 00:48:01.159 --> 00:48:08.119 And so again, you're gonna want to do that in an enclosed environment and in a safe environment where that data is being transferred. 00:48:08.279 --> 00:48:17.079 Third, and kind of relating to all of that, a lot of you operate in a corporate environment that is incredibly locked down. 00:48:17.880 --> 00:48:20.279 I mean, that's

the truth of it. 00:48:20.519 --> 00:48:25.559 Um, some of you are operating in like a startup and it's a little bit more free, and you can do these kinds of things. 00:48:25.799 --> 00:48:29.159 So, uh a couple of um words of advice here. 00:48:29.400 --> 00:48:31.559 First off, build tools. 00:48:31.799 --> 00:48:39.880 Um, one of my CSMs built a renewal calculator using an existing spreadsheet we were using, we just you know turn it into a web app. 00:48:39.960 --> 00:48:48.679 The inputs are manual, the inputs are not anything like identifiable from a personal information standpoint. 00:48:48.839 --> 00:48:59.000 It is literally a tool that outputs things way quicker than you know, actually manually typing things or grabbing screenshots and whatnot. 00:48:59.239 --> 00:49:14.199 So the the point is build tools, build tools that aren't reliant on your data and go into your day and your week analyzing those opportunities where you can potentially build some efficiency in your day by just vibe coding a tool. 00:49:14.920 --> 00:49:17.960 Second, do this for your own personal life. 00:49:18.039 --> 00:49:30.279 Like if there's something that you're passionate about, if you're passionate about gardening, for instance, and you're doing seedlings, you can build a vibe coding app that helps you keep track of where your seedlings are on the trays as they you know sprout. 00:49:30.440 --> 00:49:35.880 Like, I mean, go nuts because you can you can do this stuff now. 00:49:36.039 --> 00:49:42.599 You can make these apps that are um that are personal to you and that work like you want them to. 00:49:43.319 --> 00:49:48.920 Third thing I will tell you is have fun with this. 00:49:49.159 --> 00:49:50.759 It's it is super fun. 00:49:51.319 --> 00:49:53.319 Play with it, get to know with it. 00:49:53.400 --> 00:49:57.159 You don't have to solve a massive problem, you don't have to build a great tool. 00:49:57.239 --> 00:50:01.480 You just need to know that this exists and how to go about doing it. 00:50:01.799 --> 00:50:13.880 Because this is going to be one of those durable skills that you need to have in your tool belt in order to really stay ahead of the curve and stay relevant. 00:50:13.960 --> 00:50:16.199 And again, you don't need to be an expert here. 00:50:16.440 --> 00:50:24.920 You just need to know what the deal is so that you can have intelligent conversations about it and you can suggest, hey, maybe we should vibe code something like this. 00:50:25.079 --> 00:50:28.039 So look, I hope this has been helpful. 00:50:28.199 --> 00:50:43.639 Um and I hope it didn't scare anyone, and I hope it um brought you some excitement about what the possibilities are because it literally, you can literally make anything you want these days for the most part. 00:50:43.799 --> 00:50:44.839 So I'll leave you with that. 00:50:45.000 --> 00:50:46.199 Let me know if you have any questions. 00:50:46.360 --> 00:50:47.400 I'd love to hear from you. 00:50:47.559 --> 00:50:50.039 If you're doing this stuff, what are you doing? 00:50:50.360 --> 00:50:55.960 And um we'll do more of this on future episodes, maybe in different little ways. 00:50:56.199 --> 00:50:57.799 I hope you have a great rest of your week. 00:50:57.960 --> 00:50:59.000 We'll talk to you soon. 00:50:59.319 --> 00:51:02.759 Thank you for joining me for this episode of the Digital CX Podcast. 00:51:02.920 --> 00:51:07.960 If you like what we're doing, uh consider leaving us a review on your podcast platform of choice. 00:51:08.119 --> 00:51:10.440 If you're watching on YouTube, leave a comment down below. 00:51:10.519 --> 00:51:21.159 It really helps us to grow and provide value to a broader audience and get more information about the show and some of the other things that we're doing at digitalcustomersuccess.com. 00:51:21.319 --> 00:51:22.519 I'm Alex Drogovic. 00:51:22.679 --> 00:51:25.079 Thanks so much for listening, and we'll talk to you next week.