My step to step guide to leverage no code AI tools to create a landing page. Use AI tools to generate code, suggest copy, font types, colour pallets, creating imagery, audio and video. Let me show you can do this too.
Imagine a future, a future when you can bring a conceptual idea for a software product to life by simply writing a basic prompt into an interface. You provide some high level context relating to your conceptual product or service and sit back and let an entire end-to-end AI development tool generate each element of your mobile app, web app or website. It would suggest all the copy based on the target market, branding, custom imagery and illustrations, optimal user journey, structure of the database, logic, APIs, you name it. Once it’s complete, you can play around with it and edit any elements you wish with an intuitive graphical interface, or if you prefer, jump in an edit any of the code directly to your preference.
Sadly, a full end-to-end AI-driven software development tool like this doesn’t exist…yet.
However, in this present moment we are living in an incredible time where software development and AI tools are innovating at breakneck speed and potentially moving us closer to this future.
I’m sure you’ve heard a lot recently about AI. Perhaps your sick of hearing about it, perhaps your curious, or perhaps you don’t particularly care. Personally, I was pretty slow to react to this new wave of hype, which is pretty unusual for me given my shiny object syndrome with new technologies. It’s the curious early adopter in me. Given the Crypto, NFT and Web3 bubbles over the past few years (which I admittedly got caught up in) it made me slightly hesitant to jump into the next hype cycle. However, this feels different; the advancements in AI feels different. Unlike previously hyped technologies that promised more utility and disruption in the future, AI doesn’t seem like a nascent technology. AI brings more broad utility which seem to be more accessible to the masses and there is certainly more to come.
There is no doubt that AI technologies like GPT-3 and MidJourney (to name a few) are still in their early stages, but they are quickly becoming ubiquitous. To stay ahead of the curve in the tech industry, and especially when building products, it is essential to understand how these technologies work and in particular, how these new technologies can improve our products, businesses and personal lives. The best way to prepare for the future is to get started and gain practical experience.
AI Experiment #1
In this post i’m going to walk you through each of the AI and no code tools I used to create this landing page experiment. I’m going to share every prompt used and explain some of the tips and tricks I learned alone the way. The best thing is, each of these tools are free and accessible to anyone with a computer and an internet connection.
Check the out the end result here before reading.
As part of this experiment I created a few constraints. Firstly, the tools needed to be accessible to everyone; free, zero coding involved and with little learning curve required. This ensured I didn’t get carried away on more advanced tools until I could understand the basics. To give you an idea of how much I used AI to generate the website, I then used Chat GPT-3 to suggest all the website copy, including the titles, sub titles, testimonials, features, fonts, HEX colour codes, video and audio scripts, code generation and much more. I also used generative image tools to create all the images you see and AI background removal tools. Lastly, I used audio and video AI tools.
First of all let me set something straight. I’m not a designer, I don’t know how to use specialist design tools like photoshop or illustrator, I’m not a developer and I barley know how to code and I am certainly not a copy writer. However, I spent the last 3 weeks getting familiar with a number of AI tools to better understand the utility of these products and the value they can provide as a maker and product manager. Not to mention the implications of these tools and the impending impact they will have on various professions.
It may seem pretty intimidating to get started, especially if you don’t have a technical experience, but I can assure you it’s not as daunting as you might perceive it to be.
Using Chat GPT-3
Before we dive into this section, it’s worth clarifying some of the terms in advance as I will make reference to these phrases throughout this post. The set of words you provide in Chat GPT-3 are called a prompt, and the answer you get back from GPT-3 is called a completion.
Let’s start with the copy for the landing page.
I initially came up with a basic outline for a hypothetical product “a new VR headset inspired by 80s design”. It was that simple. Taking this basic outline prompt, I wanted to understand what Chat GPT-3 could produce to help inspire me and flesh out the product features. My first prompt was to create a press release for the product as a starting point which I could build out from.
As you can see in the screenshot below, my prompt requested the tone of the press release to be ‘witty’ and I also added some details such as ‘VR headset’ which was ‘inspired by 80s design’. Not terribly detailed as you can see, however, the completion provided was impressive with little context or direction provided.
One incredible thing to note about Chat GPT is it’s aware of the previous context you provided it, and also the completion previously provided. This means you can ask it to elaborate on completions it has provided or refine them without having to repeat the prior prompt. Take for example the completion produced above. I could use the following prompts to further refine the completion:
- make the tone more/less ‘witty’
- elaborate further on point x
- condense/expand it further
Next up I wanted to define the headline for the website. As you can see, I refined the original completion to make the headline ‘shorter’ and ‘punchier’.
Now that I had provided some context and got some great output relating to the headline and sub text I wanted to explore some the hypothetical features of the product. I wanted the copy on the landing page to be entertaining, therefore, I requested the completion to include ‘silly features’.
Notice how it has taken all the previous context without me needing to remind it of the products specifics.
Once I selected a few of my favourite features provided, I prompted it to further elaborate some of the features. In this example below, I could include the completion within quotation marks or alternatively I could reference the numerical value in the numbered list from the completion, e.g. “elaborate further on point 1”.
Moving onto the testimonial section, I wanted to get some funny testimonials from early users of the product.
