Entire landing page using no code + 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'm not a copywriter. However, I did manage to create a landing page despite not having any of these skills in just a matter of hours using just a few off the shelve AI tools which are accessible to anyone with a computer and an internet connection.
I’m sure like me you have heard a lot about the advancements in AI and seen first-hand some of the incredible output produced by AI tools. However, I personally found it tricky and frustrating to use some of the tools and couldn't reproduce what I found online. As my curiosity grew over the last few weeks I felt I was consuming a lot of content without creating anything. So I decided to create a quick experiment to test some of the AI tools I had been playing with and try to produce something which made use of them all.
As part of this experiment, I created a few constraints. Firstly the tools needed to be accessible to everyone, free, with zero coding involved and with little learning curve required. This ensured I didn’t get carried away with more advanced tools until I could understand the basics.
Lastly, just to give you an idea of how much I used AI to generate the website, I used Chat GPT-3 to suggest all the website copy, including the titles, subtitles, testimonials, features, fonts, HEX colour codes and much more. I used generative image tools to create all the images and AI background removal tools. Additionally, I used audio and video AI tools.
In the interest of sharing my learnings I'm currently in the process of documenting every tool, prompt and hack I used to produce this website.
In the meantime here is the stack I used below:
• Webflow - website
• Mid Journey - all graphics
• Chat GPT3 - all copy, colour code and font suggestions
• Eleven labs - audio
• Photo room - background image removal
Check the site out and let me know what you think
Awesome! Pretty unbelievable what you can do with no-code these days.
Looks cool, man
Thanks 😀 it's an on-going project but it's been a blast learning about all these new tools
I love how when I go to another tab, the title changes to "Hey, come back!" 😂 Was that you, or did AI generate that too?
That's actually a simple piece of code I added to my site. Feel free to use it below.
<!-- Title focus START -->
<script>
var title = document.title;
var blurMessage = "Hey, come back!";
window.addEventListener("blur", function () {
document.title = blurMessage;
});
window.addEventListener("focus", function(){
document.title = title;
});
</script>
<!-- Title focus END -->
Awesome, thank you!
wow! that's exactly what I was looking for. Webflow is an amazing tool, I will definitely use it to create my first blog and my portfolio.
This is great. Someone just needs to build a business that automates building the site from all the AI generated content and voila!
Great content! Using Midjourney and ChatGPT is one thing but to get the results you want, you need to know how to write a good prompt.
Learn about Midjourney prompts here:https://promptengineer.medium.com/mastering-the-art-of-midjourney-tips-for-generating-high-quality-images-26f45c23beec
Learn about ChatGPT prompts here: https://promptengineer.medium.com/writing-prompts-that-work-the-secret-to-better-chatgpt-performance-b86b1a234d14
Here is my write up and step to step guide - let me know what you think https://www.samdickie.me/writing/experiment-1-creating-a-landing-page-using-ai-tools-no-code
well! but i'm not sure that, will it help for customize the page?
Update: After struggling to find a good no-code solution to add audio to my AI landing page experiment I gave ChatGPT-3 a shot and wrote a basic prompt to generate the JavaScript which I could embed into Webflow. All I then needed to do is replace the source URL and class IDs and a bit of styling and I had a button which plays audio in a matter of minutes on my site.
I'm absolutely blown away. Just think of the possibilities this opens up for non-technical folks.
You can see the prompt and result here https://twitter.com/thisdickie/status/1624386147769110528?s=20&t=MypucI1PSNjtZRiQgOHU6w
Really cool how AI is accelerating processes like this!
And if anyone is building an AI tool, check out Evoke
Basically handles the backend and cloud stuff for you AI tool, especially if you're doing image generation.