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
Top comments (0)