Using The Virten Prompt Library And Daydal To Rapidly Prototype Frontend Designs and Features

Using The Virten Prompt Library And Daydal To Rapidly Prototype Frontend Designs and Features 00:00:02    Hello, Terren here, founder of https://virten.app.app and producer of the Virten prompt library. In this video, you're going to see me use one of and one or more of the https://virten.app prompt library prompt snippets to create a session, a working session with the AI where we will be rapidly prototyping front-end designs. So, here in the chat message, I've added uh the front end as screenshots. And I've given a special order to the AI to uh gather information and write code. Okay, this tells the AI every uh every response, write uh your response in a 00:00:47    new folder, write the code in that new folder and write a document telling me about that code. And then I added some custom instructions basically reiterating and telling the AI that what we're doing is we're looking at the original screenshots. We're going to create prototypes, mockups of new functionality. Oh, I clicked around there. All right, let me show you this. This was the prompt that I'm talking about. Gather information and write code. So then um I added a bit more details to the prompt uh to tell the AI 00:01:20    exactly what I want to happen which is every round to create a new project prototype mockup so that I can download uh this this codebase that we create here together and uh view it on my local web browser to you know get uh to get a view of the mockups. So let's see how the AI responds to this prompt. So, we had some kind of glitch. The AI did not manage to utilize the web container. So, typically uh this this just requires that you tell the AI message like this. None of your response made it into the web container at all. 00:02:00    Write the new prototype example to its new folder in your web container and it'll try again. Let's see how it goes. All right. Well, the problem persisted with it not being able to contact its web container again. I simply started a new chat and sent the master message right off the bat and it seems to be writing code this time. Let's see how it goes. We should be getting our first prototype remix of the https://virten.app prompt library presentation and front end from the AI right now. Okay, it finished writing up that 00:02:35    first prototype. Let's ask for another one. create another prototype front end that is very creative. Introduce a new feature and it's display elements that we'll just say perhaps no one would have ever thought of at a first or second glance. go ahead and remix the color schemes for a modern office professional look as well. Okay, so after we get the second prototype, hopefully this one goes smoothly. We should see the AI create a new folder where it'll create a new HTML project. Then what we'll do is download 00:03:25    the code and try to view these prototypes locally on the computer. All right. So, now we've gotten two prototypes out of the AI and I'm looking for one more. This time, thought I'd be creative. So, I went into the Virgin Prompt library, fun and marketing, offbeat marketing. What if a famous person used my app? And uh I popped in uh you know, the uh famous world wrestling champion Randy Savage reviews your application prompt. So, this produces a really funny response from the AI all about Randy Savage, the Macho Man, using your 00:04:06    application and his thoughts while he's using it. And uh so I just popped that prompt in here and I said, "Okay, in your next prototype, use this as inspiration. Let's see what it comes up with." And after we get this third print of a prototype from the AI, we'll download the code and take a look at uh the remixes that the AI has come up with. All right, so now we've got several prototypes from the bot. Let's see how this rapid prototyping expedition is going. I don't know if it's an expedition or a safari, 00:04:44    but we should see something interesting here. start with uh the creative prototype. Okay, so this is what we started with. I said just start iterating and be creative and do something really crazy with this one. And it tried to turn it into some kind of full-blown dashboard where you can which is kind of interesting, right? And then trending prompts. This looks a bit like uh something that's built into this where it presents cards like this. I've seen someone else with a website where they're trying to called promptly they 00:05:28    called it. Uh let's see. So that's what we got out of that. I don't know if any of these buttons will work. No, this is just a mockup. So this is like a login with a profile. Very interesting. Maybe I could get something out of that. What's next? What was the chat category page? Okay, so it's sort of used the vertrompt library organization to create a a subpage. Okay, that's an interesting prototype. See the search prototype. This one should look more like the VPL as it is with some addition of a search 00:06:16    function. Let's see. Okay, so it looks pretty similar to the VPL as it is and it gives you this. Asked for a dynamic search results box and it mocked this one up using HTML and CSS and some JavaScript and here we have it. So this would actually be a pretty decent way to search. So, if you don't have anything in the search bar, it's just out of your way. And I kind of like this one. And if I search for um code, right? And then it it would search at the actual data files of the Virgin Prompt library prompts and bring up 00:06:58    answers just like this. This one's pretty good and it might be the an uh what I've been looking for for how to integrate a search functionality for those who don't like to uh be real familiar with a toolbox or if you just need to be able to search a prompt by the idea you have and you don't want to click around. I think this could help people use the VPL. Uh okay, so that's pretty good. So, this is a a pretty good prototype um building session, right? We've got some real possible new uh new way to integrate a a 00:07:36    valuable function to our application. Okay, we've got one more. I had a macho man prototype. Let's see how that one should be funny looking. Hopefully, everything loads correctly. Oh, it's gone cookooky. It's got a quote. Oh, no. the the image hot link that the AI chose is not loading there on the top left. So, what do we have here? Quote, production Easter egg. Oh my goodness. Top prompts. Okay, so it definitely has some kind of pre-built template that it's using for for this aspect. Uh, pain dispenser warming up. The bugs 00:08:29    are feeling a little discomfort. Dispense pain. Target the bugs in your code. The bugs are feeling the heat. The tower of power is crushing those bugs. Total annihilation. The bugs have been eliminated. Dig it. Okay, so this is cool. It even down here has a return to normal VPL button, which actually I hadn't thought of that. Inspires me quite a bit because I could actually just create an Easter egg in the settings page that takes you to the crazy VPL, the Macho Man VPL or whatnot. And uh so we'll see how that goes. Now, 00:09:10    what was the point of the session? What did we see? We saw a rapid iteration process using the vert prompt library. Gather information and code prompt with a little bit of custom instructions specifically telling the AI we want to prototype the content. Uh create new front-end designs, create a new and then specifically create a new HTML project per response in in its own folder for each prototype example that we generate during the session. And uh so combining a little bit of custom instructions with vert prompt library 00:09:46    snippets is what creates uh is sort of the how to uh how to say it like chess is easy to learn and hard to master. Well the vert prompt library it's not that it's hard to master. It's certainly easy to learn. you just use the general use a prompts and uh but to master it is more like you just get to be more and more creative using the tools the prompt snippets as tools to build more interesting prompts uh so you can have an experience like this for rapid iteration u for prototyping a front end you could also use this technique to 00:10:21    prototype more complex like abstract algorithms and things like that uh but that you don't have you'd have to be a whole different workflow than what we're uh or process or frame of mind than what we're doing mostly as uh our vibe coding and software development days today. Okay. So, if you enjoyed this video, please like, subscribe, leave a comment. Let me know if you're having any trouble with any of your vibe coding or software development stuff. Maybe someone in the community uh can give you some feedback 00:10:48    or help you out, too. I'd like to see you as a subscriber with a https://virten.app account. Go to launch.vertin vertent.app and get all the details that you need to know about the https://virten.app prompt library. You'll get a promo code there for 20% off for your first three months. Take advantage of that. And uh this is Terren signing off.