Hey Dev Community👋
Welcome to part 2 of "Build with Lovable" series!
Today let's come straight to the point, you just sign up for the lovable.dev and now you want to randomly build out something, just like everyone else, you wanted something, which can helpful to yourself.
So, today I decided to build simple AI directory, we'll build static AI directory with top recommendation from top industry experts. So, let's I will provide you the prompt, we daily have only 5 credit in lovable, means we can insert 5 prompt daily before we run out of credit to wait for another day or to make paid version of lovable tool.
So, Let me give you first prompt, and after giving first prompt, what results you'll get. you'll see in the screenshot.
Create a sleek and modern AI tools directory with a clean, SaaS-inspired design, drawing inspiration from platforms like Product Hunt and SaaShub.
Key requirements:
Sections & Layout: Organize tools into distinct sections. Within each section, display AI tools as interactive cards.
Card Design: Each card should include the AI tool's name, a short description, and a clickable link.
Hover Effects: Add smooth, intuitive hover effects. The entire card should be clickable — not just the link — to improve usability.
Consistency & Flow: Maintain a cohesive design system with consistent card styles, section layouts, and responsive elements for a seamless browsing experience.
Scroll & Navigation: Enable smooth scrolling with subtle animations to enhance the directory's flow.
SaaS Vibes: Prioritize a polished, professional aesthetic that immediately communicates "AI tools directory," with modern typography, spacing, and vibrant accents.
The final design should feel dynamic, visually engaging, and built for discovery — making it easy and enjoyable for users to explore a curated collection of AI tools.
first section data for you below
1. AI Assistants
The Best in Al Assistants
ChatGPT
Get answers, find inspiration and be more productive
https://chatgpt.com/
Perplexity
Al search engine that delivers answers with precision
https://www.perplexity.ai/
Claude
Advanced chatbot built for deep collaboration
https://claude.ai/new
Sana Al
Your productivity work assistant for smarter workflows
https://sana.ai/
Agent.ai
Professional network and marketplace for Al agents
https://agent.ai/
Below is image of complete UI of AI directory will be generated after first prompt.
do you like it? I think, its quite good as a beginner.
This is my second prompt which I give after giving data of few new tools with section to add.
Refine the UI for a fully responsive, polished experience across all devices:
Responsive Navbar: Design a sleek, mobile-friendly navbar with a collapsible menu for smaller screens (hamburger icon). Ensure smooth transitions and clear, touch-friendly elements.
Homepage Layout: Make the entire homepage fully responsive with fluid grids, flexible card layouts, and optimized typography that adapts to any screen size.
Spacing & Padding: Use consistent spacing, padding, and margins to maintain a balanced, breathable design. Avoid clutter and ensure elements have room to stand out.
Footer Design: Build a clean, well-structured footer with links, contact info, and social icons. Keep it sticky on smaller screens for easy access.
Touch & Click Optimization: Ensure buttons and cards have appropriate tap targets, with hover effects replaced by subtle touch interactions on mobile.
Performance & Accessibility: Prioritize fast load times, image optimization, and WCAG-compliant contrast ratios for readability.
Consistent Design System: Maintain design harmony across sections — consistent color schemes, shadows, and font sizes — for a unified look and feel.
The goal is to create a smooth, responsive, and visually cohesive experience, ensuring users can explore the directory effortlessly, whether on desktop or mobile devices.
below is 3rd prompt which i give to lovable.dev for refinement in UI.
first of all fixed, when hemnburger menu show, it must have close cutton after it open,
remove below things from hero section
Explore our curated collection of cutting-edge AI tools designed to boost your productivity, creativity, and effectiveness in today's digital landscape.
Explore Tools
Submit a Tool
remove above section which is above from a footer
Ready to enhance your workflow?
Explore our comprehensive collection of AI tools and discover how they can transform your productivity and creativity.
Explore All Categories
Submit Your Tool
remnove icon like github , facebook , and isntagram from footer, remove subscriberr placed holder,
remove privacy policy, terms of services, cookie policy, contact,
in Quick links, remove submit a tool, and in navbar, remove a submit a tool button,
and this is my final outcome of deployed version - https://aihub-zecs.netlify.app/
Let me know do you like it? do you want all complete prompts? do you suggest any refinement? let me know in comments, if you like my work, and want prompts and codebase for the product, join our community of AI builders. Limited people to fill out, only for first 100 people.
Subscribe my newsletter to get all prompts for the products I build.
Top comments (0)