From the course: Generative AI for Innovation

Using AI to create a digital prototype

From the course: Generative AI for Innovation

Start my 1-month free trial Buy for my team

Using AI to create a digital prototype

“

- Many years ago, I discovered that people can't use their imagination if they don't have the actual expertise about something. Right, let me illustrate what I'm trying to say here. I'd like you to imagine a neo-futurist villa with a portico decorated with Mesoamerican ornamentation. And now, imagine an agrarian platter, heaped high with Saskatoon berry pierogis and maska buns. If you managed to imagine either of those scenarios, you did better than me. I've got no idea what any of that even means. So, if you're trying to get decision makers with no understanding of what a good sales checkout process looks like to buy into your new checkout concept, it's better to show them than to expect them to conjure it up in their imaginations. And that's what a prototype is all about. And this prompt can help you build one that runs inside a webpage. I've been using AI to build web tools and prototypes for a couple of years now, so I've learned quite a bit about how to do it well. It works best with a simple concept. You can't expect to build all the functionality of Photoshop with this, but you'll certainly be able to prototype a new way of selecting a color or saving a file. It starts at the end of your prompt, as usual, with a description of your idea in lots of lovely detail. If you're really clear on what you want, you'll often find that it gets you most of the way there in just a couple of minutes. Everything else is just refinement. The prompt asks your AI tool to split its response into multiple stages to improve the chance of nailing what you're looking for. At the first stage, it will outline a plan for the prototype. Read through this carefully and make any necessary amends, because it's easier to change things at this stage than asking it to unpick work later on. Over the next stages, it will write the HTML code for the page structure, the CSS code for fonts, colors, and style elements, and, finally, the JavaScript code for functionality. It will ask you for feedback at each stage, so you can make sure that you're happy with what it's building. And once everything is tickety-boo, you can download the code and run it in your browser. And, you can send it to people and share it with them. I love creating prototypes. If I have an idea, I prototype it early on, so that I can play with it, develop it, learn from it. In fact, later in the course, I'll be sharing a tool that I created in an evening while watching TV with a laptop in my knee. But, I'm getting ahead of myself here. Join me in the next lesson and watch me build a prototype in just a matter of minutes.

Contents