Ep 292: Claude Prototypes - Goodbye Replit? Lovable? Cursor?

There's a new feature in Claude, and it might help Anthropic eat the lunch of other tools... that already run the Claude API. It's an interesting cannibalization. Sorry that this one doesn't work as well as an audio-only podcast! I try to describe everything.

Holy cats, it's here! You can now buy my new book in most formats. https://AtomicPMF.com 

Check out my free webinar about better product-market fit and using AI thoughtfully in UX qual research! https://atomicpmf.com/lightning

Transcript

SPEAKER_00 0:54

Welcome, low ego action heroes and phoenixes. I'm Debbie Levitch from Delta CX. Hey, new Delta CX website, check it out. Um, and uh don't forget to join our community and take our courses and read our books. We got so much to offer, and a lot of it is free. So all the links are at dcx.to. Welcome to the people who are listening to our audio only podcast, though I have to apologize. Today is going to be a very visual show. So uh you might want to look up episode 292 over on our YouTube Delta CX Hive channel. Um, this is a special Monday broadcast where we're going to take a look at a new feature in Claude. I have a Claude Pro account, um, and this is going to be a totally interactive demo. So I, if you are watching live, I welcome your questions, your commentary, your input on this. Um, and so we're going to be jumping uh right into Claude today and possibly burning through my usage for the week just so we can talk about this. Now, um, some of you are aware of or have tried or used tools like Replit, Lovable, Cursor, Figma Make, et cetera. There's lots of tools out there. I think even Miro has one that claim to do AI-based prototyping. Um, some of them, if you look under the hood, they're actually using Claude. So, for example, uh, some of the time when you're in Replit and some other tools, you're actually using Claude. Um, so recently, Claude released their own features that rival what these other companies do. And that's something you'll see in some of my recent articles. I also talked about it in chapter uh 11 of my new Atomic Product Market Fit book that came out in late February 2026, about how I think we're going to see a reduction in some of the AI tools that are out there, because um we're gonna find that the main tools we use, like a Claude or a Chat GPT, that we can do the work in that. And we don't need all of these third-party companies. Uh, I say that neutrally, I'm not for it or against it. There's pros and cons. Um, but check it out. So let's just jump into my Claude demo and I'll I'll read some stuff out loud in case people are listening but not watching. But again, this is going to be a visual adventure. So I started a chat. Now notice I'm chat-based. I'm not in Claude Code, uh, I'm not in any of these other systems. I'm just in a web-based chat with Claude, and right now I'm talking to Sonnet 4.6, which as of when I'm recording this in late March 2026 is the latest Sonnet model. And I told Sonnet that we're doing a live demo of how it can create prototypes and web pages and now visualize and preview those. Um, and so Claude was like, cool. And then I told it that I'm streaming from the perspective of can this replace Replit, cursor, lovable, and things like that. And Claude basically said, okay, interesting topic. Claude's opinion was that if you're really just prototyping stuff, that uh where Claude is right now is good enough. Hi, Anna Lucia. Um, but if you're really trying to push stuff into a real dev environment, uh, Claude says Replit and Lovable are probably more about deployment. However, I think if you're really about pushing into an environment, you might be looking at Claude code, which I'm not because I'm not a dev uh person. So my question today is just really what does prototyping look like in Claude? So not pushing it to a dev environment or things like that. I'm I'm not there yet. I just want to see what this looks like and how it works because this is uh relatively, a relatively new feature. So, Anna Lucia, what would you like to see Claude prototype? Um, and uh Claude suggests a SaaS landing page, a task manager or Kanban board, a little quiz or an interactive calculator, a fake dashboard with charts. I was gonna ask it for a LinkedIn or social media ripoff. Um, but uh you tell me if there's anything you want, uh, anybody who's watching live, anybody on Twitch, uh, YouTube, LinkedIn, what do you want to see? What do you want to see, Claude, make? If nobody says anything, I'm going to go with my fake LinkedIn thing. All right. Uh, because I don't know if anyone's typing. That's the downside to live streaming. I don't oh, Anna Lucia says a turbo tax competitor. I was talking about it. Okay, so like for filing your taxes, that's so I wasn't going to get into anything today that had deep functionality because I was just going to look more at prototyping the idea and not really getting into the functionality. Uh, by the way, I am doing this for reels in another claude chat where I had it start to prototype an interface. And then next when I come back to it, I'm going to start connecting APIs and a database and real data. So I'm going to see how far I can go with this because I'm not a developer, not comfortable with dev environments, I'm not comfortable with claud code. So um, so we're not going to make this very functional right now. It's going to be more of a of a concept or a prototype. Um, so I think I think a tax filing thing is probably too many steps and and too detailed for the type of uh quick um demonstration that we're we're trying to do. Uh I'm gonna ask it to um um let's try a uh social media feed, perhaps something, a to-do list. Uh okay, we could do that. Let's try a to-do list where people can add items or check them off as done. Let's see what it does. Classic. Here we go. So the next thing that usually happens is Claude builds some sort of HTML adding checkboxes and good vibes, and then typically it makes an HTML file, and then it will show me a preview of it. Um right now that is very simple. Okay, so that is very simple. Um can you build that as an HTML file with string replaced so I can uh preview it and interact with it? Uh let's see. So uh Claude is checking uh what skills it has to take care of what I'm doing. It's now building an HTML uh file. We can see it writing some CSS classes with some different visual design elements. It created uh a color palette. Um I can see it's got CSS classes for checkboxes and containers, and I saw some pills just go by. Now it's making a bunch of divs. Um, I see it's got days and months. So I don't know what it's doing. We gave it very little information. We set a to-do list, and um, now let's see what it's made. Okay. So if you are looking at my screen, you can see that uh half of the screen is my chat with Claude and half of it is this interactive experience. Um when I check the box to say that I took care of an item and went down into the completed area. If I uncheck something, it moves up into the task area, and I'm gonna type go live in a to-do, and I'm gonna click add and it becomes added to the task. It's got a little pill for three remaining, so it's giving you a little count of how many. Um, can you reorder things? Uh no. Um uh what if I want to reorder the tasks? Would we be able to use drag bars? Uh Claude says drag to reorder is doable. We can add a drag handle, the classic grippy dots on the left of each item, and use HTML5. Do you want me to update the file or rebuild it fresh? Um, if we can string replace, let's update. So so uh uh so what makes this different from some of what you might do in a Replit or cursor or lovable? Right now, there is no database underneath this. So if we try to send this live, it's not going to work because there's nowhere that these tasks are being stored. Right now, these just live in this page and this interface as a prototype. And if we wanted this to be stored, we would have to uh build this out a little bit more robustly where it becomes connected to a database and things like that. Um, Claude says, okay, you now have grip lines. It thinks they appear on hover, but I see them. And if it really only did them on hover, I would have it change that because that's not good for accessibility. Drag an item and the list will reorder. So let's put a third thing in here. Go live. Okay, so we have three things. Now let's try moving this one up to the top, and that worked. I was able to drag and reorder. Obviously, not totally accessible if someone doesn't use a mouse that that might not fly. But as you can see, uh, we are um uh doing some prototyping at a very uh fast speed. Um let's use 366295 as our key color, and you can be creative from there. So I don't have a real design system, I'm just gonna give it a color. It's using kind of a clawed, um, I don't even know what color that is, orangey brown. Um, so I gave it Delta CX blue, which is 366295, and uh it says it will build, oh, it's calling it terracotta is the color of Claude's logo. So now it said it will build a color palette around the single color that I gave it. But again, you don't uh you can give it uh colors if you want. Does Claude tie into design systems? I don't know, um, because we're just in a chat interface right now. So again, probably the more advanced you're going with this, the more you're probably going to end up in a Claude code type of uh scenario. So Claude, taking my blue, uh, ended up putting the interface on a dark background, but the problem is now I think it would fail accessibility because there's a lot of things here that are now uh medium colors on dark and a medium blue on a dark blue. Um thanks, but this now fails accessibility standards, too many medium colors on dark. Can you please rethink some of the palette for good color contrast? What's Claude prototype? Yeah, so Claude Prototype is not a product. I'm just in a Claude chat, but Claude Chat can now do prototyping. So if you're looking at my screen, you'll see that I'm just talking in a chat to Claude about what I want it to do. And it's building the prototype on the other half of my screen. Right now, this is not hooked up to any database, it's not hooked up to any APIs or live code. It's just a single page prototyped experience. And if we wanted to usability test this or roam with it in some way, this is an HTML page. We would have to export that and and host it somewhere. Obviously, that's a little bit different than what you might get from a replit or lovable or cursor. But my point today is that there is now a lot we can do inside of a chat with Claude. And notice I'm in Sonnet 4.6, I'm not in Opus, I'm not in Claude Code. There's a lot that we can get done without we could go as far as we want with it. So I'm starting here. I started building something last week this exact way, and the next thing we're going to do is we are going to connect it to a database and to APIs, and I'm going to make it a real thing. Um, we might even connect it to a uh to the Stripe API and charge for it and let people sign up for it. So who knows? Okay, so Claude reconfigured some of the colors trying to make uh trying to improve accessibility. And again, if I already know what colors I want, I can certainly tell Claude because we know it's written CSS here. Um in fact, you can see it. You can go from this eyeball, which is the preview, to the code itself. And so if you wanted to, you could do something with the code. You could copy it and paste it, you could download it, you could tell it, oh, I don't like how round your rectangles are. You can uh, you know, I can't rewrite the code here. This is what Claude's written, but I could always download this or take this and and move it to somewhere else. So again, is it completely a replacement for Replit and Lovable and all that? So far for me it is, but it really depends, as Claude pointed out earlier, where you're trying to eventually go with this prototype. Is this just a concept you're playing with and you want to get it moving fast? Um, Analusius says, what about a Google Calendar API? It could be a meeting and a to-do list. Yeah, absolutely. And and the other Claude that I'm working with on building my secret little project, it see it said, I'm very confident that I can build this, but it's going to have me, we're FTPing files up to my server, which I have to do manually. Um, so that's what's different. Whereas when you say to Replit, okay, publish this, it now lives somewhere, but it's on Replit and you have to keep paying Replit. With the thing I'm building with Claude, it's going to it's writing Python files for me. I put them up on my website, I go into Putty and I start the file. Claude taught me all of that. I didn't know that. I have a degree in music. Um, let's add something else to here. Um, can we add a time, um, a date, a picker, picker to say what day each task might be due. So again, we're just playing with with something. Uh, we had the idea of a to-do list. If somebody wants to see me start from scratch with a totally different thing and have Claude build that out, I'm happy to start uh another uh chat. Just let me know and uh we'll we'll start something different. But I wanted people to know that you can make some HTML prototyping in Claude. Um, is this code ready to go on a server? Not necessarily. Is it hooked up to a database and totally functional? No, it isn't. Um, but it could be. And uh and and all of this is done from chat. So uh and I it's a relatively new feature, and I think people didn't know. Okay, so Claude is now g adding the ability for when I add a task, I can add a due date. It looks like it's put in a date thing and a calendar picker. It made a bunch of new pills so that my project proposal now says due today, and follow-up emails now says due April 2nd. So I can say uh my task is go live, and let's see if I click on the calendar. Does anything happen? Okay, right now, oh yep, clicking on the calendar brought up a very real calendar. So I can say that's due April 9th, and I can click add. And now on my to-do list is go live due April 9th. But again, this is just a single page experience. There is no database here. So if we refresh this, the go live that I just added is gone because this is not being stored to a database. So this is just a very simple prototype right now without the deeper functions of anything being stored or data being called on. Anna Lucia said, I wonder if you could host it somewhere like Vercel app. I don't know how to pronounce them. I had this idea that it was free to build small things, which could work for prototypes, can't be sure. Yeah, so ultimately what I'm doing with my other Claude project is I had it start by making a one-page experience, and then we ended up making a number of pages, like account and settings and all this stuff. We made a bunch of pages, or Claude made pages based on what I was saying. And then the next thing we're gonna do is start connecting APIs. But as I said, um, right now Claude doesn't host it, and uh maybe they'll offer that at some point, but this is something that uh I would have to uh download this or copy it and paste it uh onto my hosting, and that's what I'm doing right now. And so um, and some of you know that um some months ago I used a chat and Claude to build my own Android app. So it's not on the Android Marketplace, it's just for me on my phone, and um, it is fully functioning, it absolutely works. It connects with the Twilio API, and it is totally working. And Claude taught me how to bring different files into Android Studio and debug and test it there, and then to bring those files uh to put some of them on my server, which was by FTP, then to go into Putty and start the Python app, and uh and I've got a working system. So so again, there's definitely benefits to some of the features you could get from a Replit cursor lovable where they have the hosting built in and you can deploy it and it lives on their servers. But when I tried Replit last year, because I first became aware of Replit in March 2025, I think I tried it out in April or so, and I found that uh I burned through tokens bizarrely fast. I was spending way more money than I wanted to, and then as soon as I stopped paying, it was no longer live. And and so that didn't feel good either. And and also, if I'm gonna send something live that the public can use, now I have to be concerned about um data hacking and and breaches and things like that. And so for me, I'm still staying in prototype land for now. Um, Vid says putting this on our own server and hosting ourselves is also costly, right? Then it's better to use Replit. Why worry on infrastructure? Really depends. Um, there's lots of hosting packages out there that are very inexpensive. I think you'd be surprised. Um the I happen to have a VPS um package with DreamHost. Hashtag not sponsored. There's lots of inexpensive hosting vid. I don't know what country you're in. In Europe, I might be slightly biased, but I'm hearing good things about cloud86 and hashtag not sponsored. In America, I'm thank you, honey. In America, I'm I'm still using DreamHost. Sometimes you can get hosting for a few dollars a month. I think my package is$300 a year, and I can run a hundred websites on that package, and I feel like I do. I've got lots of domain names. So putting it on your own server is not necessarily costly. You have to see what different hosting packages uh cost. And um, and no, it might not necessarily be costly. And and when you think about the cost of stuff, okay, what does Claude cost? What does a Replit or a cursor cost? When I tried Replit last year, it was so easy to burn through$50 of stuff and feel like nothing got done. Um that was the experience I had. Some people are having a better experience. Um, so I decided I didn't want that, especially since when I was once I was done making the thing, if I wanted to keep looking at it or playing with it, I had to keep paying Replit every month. And so I've kind of been preferring Claude because A, I'm paying for it anyway. And B, um then I obviously, if I'm doing no work on the thing, it just sits here dormant until I come back to it. I can download it at any time or export it. Sorry, I'm uh getting over tonsillitis. So again, you you don't have to worry about the infrastructure if you don't want to. If you'd rather that it sits on a replit and lovable whatever, I'm not telling you not to. I'm just saying we have more options than we think, and some of these options are less expensive than we realized. So I'm paying for hosting anyway, so this costs me nothing extra. I just make a new folder or a new domain name, and I just FTP the file up, and then I go into Putty and I make sure the Python file is running because Claude told me how to do this. I don't know how to do this. So uh, but I do worry about the infrastructure in that for my own Android app, I I think any that that's unlikely to be something someone wants to breach. I'm the only human using it. There's pretty much no data you'd want in there. But for this other thing I'm working on, I'm trying to figure out how to build it with almost no information about anybody who might sign up for it, so that it would also be less likely to be hacked, but I would still have to work with somebody who's gonna make sure it can it can be safe. But but what do I know? That's the downside for some of the vibe coding and things like that, is uh a lot of people are not thinking about security and privacy and hacking, and so um things keep getting exposed. Uh but yeah, thanks, Vidr. Uh great questions. Any other questions or anything anybody wants me to ask Claude to do, either with this little to-do list that we improvised or anything else? Uh while I wait to see what other people think, um let's uh let's see. Um can I edit an existing task so I can change the name and date? Let's try adding an edit function, but again, this is an HTML page, everything exists on that page. Once you hit refresh, everything's gone. There is no database here. It reminds me a lot of the way I used to prototype with Axer, A-X-U-R-E, which I was a big fan of for at least 10 or 12 years, haven't been using it lately. But there, there was no database, there was no API. And so as soon as you hit refresh, anything you did or added in the interface was gone. And so that's kind of where I am with today's uh demonstration today. So if you want to start messing with an idea, if you want to um export this as HTML and host it somewhere and let people play with it, you can. And you can do that without uh paying other companies. Okay, so Claude says find the pencil icon. So I would probably still bug Claude for the accessibility here on the X and the pencil icon. I think these are too dark. The hover state is definitely easier to see, but the not hover state is too dark for accessibility. I would probably tell it to change those to white. Well, let's try it. Um review project proposal, review vids project proposal, and we'll change it from today to Thursday, and I'll hit save. And there you go. And we can drag and reorder these. But again, as soon as I refresh this, that will all be gone because that's where we are right now. There is no database uh uh underlying this. Um let's ask Claude about that. Um, if we wanted this to be a more robust prototype and have a database storing these, how would you do that? And Claude's response is the honest answer is it depends how prototype versus real app you want to go. For a prototype that just needs persistence, so task survive a page, refresh, and feel real. The simplest move is local storage. One line change, no back end, no database. That's fine for demoing to stakeholders, but it's browser only, no sharing between users or devices. So sounds like it must create a cookie or something like that. Um then it's making other suggestions about Node and Python and SQLite and uh Postgres and all this stuff. So ultimately, it sounds like if we were to continue with this uh chat, uh Claude would be able to create a database and connect these things so that if we wanted to, we would be able to uh move it to hosting and have it work more realistically, which is what I'll be doing with my other hobby project. It will require a database, um, it will require an API and a database, and uh, we're gonna connect it to Twilio to send some text messages, and um, that's where I'm gonna start as a minimum viable product before I charge anybody money or do anything fancier than that. It's going to be a minimum viable uh product in that I could release it, but also a prototype. Um so any other thoughts or questions about this? This is obviously the first uh iteration of this new Claude feature where you can preview and visualize uh HTML files while working in a Claude chat. So again, this is outside of Claude Code or some of the other places where people are used to writing code or previewing code. This is just in a web-based chat. Um, any thoughts or questions about this before I wind down the show? I just wanted to do a quick demo and tell all of you who might have Claude accounts to test it out, play with it, be familiar with it. Always good to know how to do uh these types of things. And again, there's uh we did such little work today. There were very few things that I told Claude to do with the fonts or the visual design or or any of that. But uh, those of you who've worked with Replit and the like, that's running Claude. This is Claude. I'm sure I would be able to talk to it similarly. Um Vid says we can use the Snowflake Data Cloud. It's a database, they provide a 30-day trial account to test this. Totally true. We we hear about a lot of people who are working on vibe-coded things and cloud-based things working with Snowflake. Um, I haven't personally tried it, mostly because I don't have to, because I have um VPS hosting with DreamHost, hashtag not sponsored, um, where I can I can put stuff up and create databases and things like that. And so I've already got my paid for space where I can I can do that. Um but yeah, I think really good for people to experiment this with this and get to know other tools. And I think that ultimately there will be a serious question of do we still need Replit lovable cursor and some of these types of tools if you can accomplish this in Claude. I believe, and I know I'm not the only one saying this, so I'm not gonna pretend I'm the first, but I do believe that we're going to see Claude end up more of a platform. There's so many things that Claude can do and so many directions that they're going with it, that I think we're going to see Claude turning into more of a platform where Claude is really the brains at the center of a lot of other things that you're going to do that are interconnected. We're already seeing Claude for what PowerPoint and Microsoft Excel, where you can install them as add-ons, and they Claude will work right in your applications, not the web-based versions, I think. The applications, maybe the web-based versions also. I didn't play with that yet. I played with Claude in PowerPoint, in my copy of PowerPoint. Um uh there's Claude Co-work, which I'm not comfortable with, so I haven't tried, which is where Claude lives on your desktop and can do things in your computer. I don't feel comfortable with that. I even asked Claude about that, and Claude was like, don't do it. So thank you. Another thing I'm not doing with Claude, and Claude agrees, is um Claude has a browser plugin. Hey, guess what? I don't want Claude to see every web page I'm visiting and everything I'm typing into everything. I I don't need Claude that endlessly. My my current business and personal uses of Claude work very well in the chat interface, um, and I'm I'm very happy with that. Um don't forget my new book, Atomic Product Market Fit, and don't forget my new courses. Um, I've got courses on um how I use AI in research and problem finding and problem solving, dcx.to slash courses, if you want to check it out. We've got a free Patreon and a free Discord community. Um truly free. Come on and join. And other than that, um we usually don't stream Mondays, but I wanted to throw this in as an extra. We are going to be streaming tomorrow, a little earlier than usual. I'm testing some new times to see if earlier is better than later. I honestly don't know. So you just want to check our events calendar, dcx.to slash events, to see when things are coming up. But tomorrow we will be reading and discussing my new article called uh something like uh fire people who say that their industry is dead. I'm so tired of design is dead said by a design leader. Well then why do you have a job? I am so tired of agile is dead said by an agile coach. Well then why do you have a job? So I've got a spicy take on X is Dead, and um people on LinkedIn seem to love it. It went kind of viral on LinkedIn, so we're gonna read that article, and uh, you're welcome to come agree, disagree, and ask questions. That will be live tomorrow at 3 p.m. Central Europe time, 9 a.m. East Coast America time. And India, I'm not sure. 7:30 p.m. Please check India. Uh let's see, that will be 2 p.m. on Illusia time. And Vid, I don't know where you are. Vid, where are you? And are you okay? All of our streams uh go out on uh Twitch, LinkedIn, and YouTube. The archives are only on YouTube, uh, and then we don't stream to YouTube when it's karaoke stream, just for fun. So ah, a reminder from me to me to take my next antibiotic because I'm in the middle of tonsillitis. Uh you don't want to see it. I'm doing much better today. Uh IND, so that's either gonna be India or Indiana. Uh so hopefully I think you are uh I think you yep. So you are probably uh I think four and a half. We know we just moved our clocks. You might be three and a half. Hold on. I have a clock on my phone, and I think I added no, I thought I had India on there. Okay. I think you're three and a half ahead. Are you 11 p.m.? Hello, Oz, wherever you are today. Hard to figure out. Hi, Oz. Talking a little bit about some of the things you can do with Claude. Um, in case you missed it, we were talking about how you can now make visual prototypes in Claude and do a little um kind of HTML prototypes without writing HTML and uh and how that's interesting for our words. 2306, yes, exactly. Okay, so in so India will be three and a half hours ahead for me in Central Europe. So that means uh tomorrow's show at my experimental time will be 6 30 p.m. in India, also known as 1830. Um, so that will be tomorrow. Um and then Wednesday, we keep right now we're keeping that at the same time. That's 7 p.m. uh Italy time, 10.30 at night, India, and it's my Wednesday Ask Me Anything. And then you're welcome to ask me anything. If I can mentor, coach, help, advise, discuss, that's the Wednesday show. Usually no Monday show. Today was a special add-on I wanted to throw in to get people thinking about some of what Claude can do from the chat interface, not just from the Claude code interface. All right, I'm going to hit the wrap up the show button and uh thank everybody again who joined both live as well as who might watch the video archive later on YouTube. This is episode 292. Um, Oz says, I'm in Portland for a few days. Excellent. Um, before going back to Vegas, agree with you about not wanting Claude going through your local files. Yeah, yeah. Um, I I'm paying for Claude. There's a lot I like about Claude. Um, but I I also believe in healthy boundaries. Uh okay, so thanks again to everybody who joined, and uh see you tomorrow for the uh fire people who say X is dead, uh spicy discussion. Thanks everybody and have a great rest of your day or night.