DEV Community

Thuan
Thuan

Posted on

Building a Landing Page in 15 minutes with AI Chat bot

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.

SnooIt

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.

Enter fullscreen mode Exit fullscreen mode

The initial result was ugly.

SnooIt Landing Page - First Prompt

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.

Enter fullscreen mode Exit fullscreen mode

SnooIt Landing Page - Second Prompt

Adding images

SnooIt Landing Page - Adding Images

The code was simple.

Generated Code

4. Privacy Page

The prompt:


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

Enter fullscreen mode Exit fullscreen mode

Privacy Page

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

  1. 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.

  2. Be Specific About Images: I specified the icon (128x128) and screenshot (800x600). The AI generated suitable placeholders, which I replaced with actual URLs later.

  3. 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

Top comments (0)