Building a Landing Page in 15 minutes with AI Chat bot

Thuan — Wed, 07 Aug 2024 13:01:00 +0000

I recently created a landing page for my new Chrome extension, SnooIt, in just 15 minutes using Claude 3.5 Sonnet. For comparison, a similar task with another app, AskTube, took me a whole day. Here's a detailed breakdown of the process, along with tips and lessons learned.

The Process

Since I was just testing the idea, my goal was to create a simple and quick landing page.

1. Maintain a Summary for Context

Throughout the development of SnooIt, I used AI chatbots like Claude Sonet 3.5 and GPT-4. To provide context, I kept an updated summary of the app as new requirements emerged.

Tip: Have an LLM chatbot summarize your conversation and store the summary. This way, you can easily provide context for future prompts.

2. Initial Prompt


Context: 
## SnooIt App
I'm creating a Chrome extension called SnooIt,
which allows users to set reminders for web pages.
...
...
### Features
...
### Brand Style
Primary colors
#f97316 (orange)

--- 

Please help me create a landing page using Tailwind CSS.

The initial result was ugly.

3. Refinement Prompt

I requested some changes after the initial attempt:


- The colors were not appealing, so I asked
 to keep only the primary brand color and define
 additional colors.

- Added placeholders for an icon (128x128) 
and a screenshot (1280x800).

- Enhanced the call-to-action button (download button)
with gradient colors for a more attractive look.

Adding images

The code was simple.

4. Privacy Page

The prompt:


Add a new page for displaying privacy policy content (HTML). 
Just put some example HTML for the content.

5. Deployment

Deployment was straightforward. I used Cloudflare Pages, connected it to GitHub, and deployed the site in just 5 minutes. The final landing page is available at https://snooit.kikitop.com/.

What I Learned

Choose Popular & Simple Technologies: LLMs are well-trained on widely-used technologies. Using Tailwind CSS and plain HTML made the setup quick and easy. I chose the CDN version of Tailwind CSS for simplicity.
Be Specific About Images: I specified the icon (128x128) and screenshot (800x600). The AI generated suitable placeholders, which I replaced with actual URLs later.
Leverage AI: The time spent doesn't always correlate with the results. Using AI tools efficiently can significantly speed up the development process.

Conclusion

The SnooIt app went from idea to release in just 2 days. This included everything from brainstorming, designing, implementing the app, choosing a name, creating the logo and images, to deploying and publishing the final product.

If you found this helpful, please like and share this post. I’ll keep sharing how I use AI to achieve these results!

Check out the landing page code: GitHub - thuansb/SnooIt

DEV Community: Thuan