Top 10 Powerful AI Prompts to Build Stunning Websites (UI/UX + Animations)

The difference between a mediocre AI-generated website and a stunning, professional one comes down to one thing: the prompt. A vague prompt gives you generic output. A structured, detailed prompt gives you production-ready code with beautiful UI, smooth animations, and responsive design.

Below are 10 battle-tested prompts that generate beautiful websites. Each prompt is copy-paste ready — use them in ChatGPT, Claude, or any AI coding tool. We've also included what to expect from each prompt and tips for customizing the output.

How to use these prompts: Copy the prompt, paste it into ChatGPT or Claude, and you'll get a complete, working HTML/CSS/JS website. Then customize the text, images, and colors to match your needs.

1 Premium Business Website UI

Act as a senior UI/UX designer and front-end developer.

Create a modern, premium business website with the following:

Design Style:
- Clean, minimal layout with generous whitespace
- Glassmorphism design (frosted glass cards with backdrop-blur)
- Smooth scroll-triggered animations (fade-in, slide-up)
- Professional color palette: deep navy (#0f172a) + white + gold accents

Sections:
1. Navigation bar — sticky, transparent on scroll, logo + links
2. Hero section — large headline, subtext, CTA button, background gradient
3. Services section — 3 glassmorphism cards with icons, hover effects
4. About section — image + text side by side, fade-in animation
5. Testimonials — carousel/slider with customer quotes
6. Contact section — form (name, email, message) with validation
7. Footer — social links, copyright, back-to-top button

Requirements:
- Mobile-first responsive (works perfectly on all devices)
- CSS animations (no external libraries)
- Smooth scrolling between sections
- SEO meta tags (title, description, og tags)
- Clean, commented HTML + CSS + JavaScript
- No frameworks — pure HTML/CSS/JS
- Production-ready, no placeholder lorem ipsum text

What you'll get: A complete, professional business website with glassmorphism cards, scroll animations, a contact form with validation, and a responsive layout. Ready to deploy.

2 Colorful Startup Landing Page

Act as a senior front-end developer specializing in startup websites.

Create a vibrant startup landing page with:

Design Style:
- Bold, energetic design with bright gradients (purple to blue to pink)
- Large, impactful typography (hero heading 4rem+)
- Animated buttons with hover effects (scale + glow)
- Modern UI components with rounded corners and shadows

Sections:
1. Hero — bold headline, subtext, email signup form, animated background
2. Features — 4 feature cards with icons and hover lift effect
3. How It Works — 3-step process with numbered circles and connecting lines
4. Pricing — 3 pricing tiers (Free, Pro, Enterprise) with highlighted recommended plan
5. Testimonials — 3 customer quotes with star ratings
6. FAQ — accordion-style expandable questions
7. CTA — final call-to-action with gradient background
8. Footer — links, social icons, newsletter signup

Requirements:
- Mobile-first responsive
- CSS-only animations (no JavaScript libraries)
- Gradient backgrounds and text gradients
- Micro-interactions on hover (buttons, cards)
- SEO optimized with meta tags
- Pure HTML/CSS/JS, no frameworks
- Production-ready content (no lorem ipsum)

What you'll get: A high-energy landing page with gradient backgrounds, animated buttons, pricing tables, an FAQ accordion, and a complete responsive layout.

3 Personal Portfolio Website

Act as a senior web developer and UI designer.

Create a personal developer portfolio website with:

Design Style:
- Dark theme (charcoal background #1a1a2e, light text)
- Smooth scrolling between sections
- Hover animations on project cards (scale + overlay)
- Typewriter effect on hero heading
- Subtle particle or gradient animation in hero background

Sections:
1. Hero — name, title (typewriter effect), short bio, CTA buttons (Resume, Contact)
2. About — photo, detailed bio, tech stack icons with tooltips
3. Skills — progress bars or skill cards with percentage indicators
4. Projects — 6 project cards with image, title, description, tech tags, live demo + GitHub links
5. Experience — timeline layout with company, role, dates, description
6. Contact — form (name, email, subject, message) + social links
7. Footer — copyright, back-to-top

Requirements:
- Dark mode by default
- Smooth scroll navigation
- Responsive (mobile, tablet, desktop)
- CSS animations only
- SEO meta tags
- Pure HTML/CSS/JS
- Real content (use "John Doe" as placeholder name)

What you'll get: A professional dark-themed portfolio with typewriter animation, project showcase, skills visualization, timeline, and a complete contact form.

4 E-Commerce Product Showcase

Act as a senior e-commerce UI developer.

Create a modern e-commerce website with:

Design Style:
- Clean, white background with subtle shadows
- Product cards with image zoom on hover
- Animated add-to-cart button
- Category filter tabs with smooth transitions
- Shopping cart icon with item count badge

Sections:
1. Header — logo, search bar, cart icon with badge, navigation
2. Hero banner — promotional slider with CTA buttons
3. Category filter — tabs (All, Shirts, Sarees, Dresses, Accessories)
4. Product grid — 12 products with image, name, price, "Add to Cart" button
5. Featured section — 3 highlighted products with larger cards
6. Newsletter — email signup with discount offer
7. Footer — links, payment icons, social media

Requirements:
- Product filter works without page reload (JavaScript tabs)
- Image hover zoom effect on product cards
- Mobile-responsive grid (4 cols desktop, 2 cols tablet, 1 col mobile)
- Animated transitions between filtered views
- SEO meta tags
- Pure HTML/CSS/JS
- Real product names and prices in INR (₹)

What you'll get: A fully functional product catalog with working category filters, hover effects, cart badge, and a responsive grid layout.

5 Admin Dashboard UI

Act as a senior front-end developer specializing in dashboards.

Create an admin dashboard interface with:

Design Style:
- Dark theme (#0f172a background, #1e293b cards)
- Sidebar navigation with icons and active state
- Smooth transitions between sections
- Data visualization with CSS-only charts

Sections:
1. Sidebar — collapsible, logo, nav links with icons (Dashboard, Users, Orders, Analytics, Settings)
2. Top bar — search input, notification bell with badge, user avatar dropdown
3. Stats cards — 4 metric cards (Revenue, Users, Orders, Growth) with icons and percentage change
4. Charts area — bar chart (monthly revenue) + line chart (user growth) using CSS
5. Recent orders table — sortable table with status badges (Pending, Completed, Cancelled)
6. Activity feed — timeline of recent actions

Requirements:
- Dark mode only
- Sidebar collapses on mobile (hamburger menu)
- Responsive layout
- Smooth hover effects on all interactive elements
- CSS-only charts (no Chart.js)
- SEO meta tags
- Pure HTML/CSS/JS
- Realistic sample data

What you'll get: A complete admin dashboard with sidebar navigation, stats cards, CSS charts, a data table, and dark mode — all responsive and functional.

6 Gym & Fitness Website

Act as a web developer specializing in fitness industry websites.

Create a gym/fitness website with:

Design Style:
- Bold, high-energy design
- Dark background with red (#e11d48) and orange accents
- Strong typography (large, impactful headings)
- Animated sections on scroll (slide-in from sides)
- Parallax effect on hero image

Sections:
1. Hero — full-screen background image, bold headline "TRANSFORM YOUR BODY", CTA button
2. About — gym story, mission statement, image gallery
3. Classes — 6 class cards (Yoga, CrossFit, Boxing, Strength, HIIT, Cardio) with schedule times
4. Trainers — 3 trainer profiles with photo, name, specialty, social links
5. Membership — 3 pricing plans (Basic, Premium, VIP) with features comparison
6. Gallery — image grid with lightbox effect
7. Contact — form, map embed, phone number, WhatsApp button
8. Footer — hours, address, social links

Requirements:
- Parallax scrolling on hero
- Animated counters (members count, years, trainers)
- Bold colors and strong visual impact
- Mobile responsive
- Floating WhatsApp button
- SEO meta tags
- Pure HTML/CSS/JS

What you'll get: A high-impact fitness website with parallax hero, animated counters, class schedules, trainer profiles, and membership pricing — bold and energetic.

7 Online Education Platform

Act as a UI developer for education technology platforms.

Create an online learning platform website with:

Design Style:
- Clean, modern, and trustworthy design
- Blue and white color scheme with green accent for CTA
- Course cards with progress indicators
- Category-based filtering

Sections:
1. Header — logo, search bar, category dropdown, Login/Signup buttons
2. Hero — headline "Learn Anything, Build Everything", search bar, popular categories
3. Featured courses — 6 course cards with thumbnail, title, instructor, rating stars, price, "Enroll" button
4. Categories — icon-based category grid (Web Dev, Mobile, Data Science, Design, AI/ML, Business)
5. How It Works — 3 steps (Browse, Enroll, Learn) with icons and descriptions
6. Instructor spotlight — 3 top instructors with stats (students, courses, rating)
7. Testimonials — student success stories with photos
8. Stats — animated counters (10K+ Students, 200+ Courses, 50+ Instructors)
9. Newsletter + CTA — email signup
10. Footer — links, social, support

Requirements:
- Course card hover effects (lift + shadow)
- Star rating component (CSS)
- Animated counters
- Mobile responsive
- SEO meta tags
- Pure HTML/CSS/JS
- Realistic course data

What you'll get: A complete education platform landing page with course cards, star ratings, category filtering, instructor profiles, and animated statistics.

8 Restaurant & Food Website

Act as a web developer specializing in restaurant websites.

Create a restaurant website with:

Design Style:
- Warm, inviting design with dark background (#1a1a1a)
- Gold (#d4a853) accent color for elegance
- Food images with hover overlay showing details
- Smooth scroll animations

Sections:
1. Hero — full-screen food background image, restaurant name, tagline, "Reserve a Table" CTA
2. About — restaurant story, chef's philosophy, ambiance images
3. Menu — tabbed categories (Starters, Main Course, Desserts, Drinks) with item name, description, price
4. Special offers — highlighted dish of the day with timer countdown
5. Gallery — food photography grid with lightbox
6. Chef section — head chef profile with photo and bio
7. Reservations — booking form (name, date, time, guests, phone)
8. Reviews — customer testimonials with star ratings
9. Contact — address, phone, map embed, opening hours
10. Footer — social links, newsletter

Requirements:
- Menu tabs with smooth transitions (no page reload)
- Food image hover overlay with name + price
- Reservation form with date picker
- Animated on-scroll effects
- Mobile responsive
- SEO meta tags
- Pure HTML/CSS/JS
- Realistic Indian restaurant data with prices in ₹

What you'll get: An elegant restaurant website with tabbed menu, reservation form, food gallery, chef profile, and warm color scheme.

9 SaaS Product Landing Page

Act as a conversion-focused landing page developer.

Create a SaaS product landing page with:

Design Style:
- Modern, clean design with lots of whitespace
- Purple to blue gradient accents
- Floating UI mockup in hero section
- Micro-animations on scroll

Sections:
1. Hero — headline, subtext, email CTA, product mockup image (floating effect)
2. Social proof — logo bar ("Trusted by 500+ companies")
3. Features — 6 feature blocks with icons, titles, descriptions (3x2 grid)
4. Product demo — embedded video or screenshot carousel
5. Pricing — 3 tiers (Starter, Growth, Enterprise) with toggle (Monthly/Annual)
6. Testimonials — 3 customer quotes with company logos and photos
7. FAQ — accordion with 6 common questions
8. Integration logos — "Works with" section showing tool logos
9. Final CTA — gradient background, bold headline, signup form
10. Footer — links, legal, social

Requirements:
- Monthly/Annual pricing toggle with JavaScript
- FAQ accordion (open/close)
- Floating animation on hero mockup
- Scroll-triggered fade-in animations
- Mobile responsive
- SEO meta tags
- Pure HTML/CSS/JS
- Realistic SaaS product data

What you'll get: A conversion-optimized SaaS landing page with pricing toggle, FAQ accordion, floating hero mockup, social proof, and smooth animations.

10 Mobile App Showcase UI

Act as a mobile app landing page designer and developer.

Create a mobile app showcase website with:

Design Style:
- Clean, modern design optimized for showcasing a mobile app
- Gradient background (dark blue to purple)
- Phone mockup frames showing app screenshots
- Smooth transitions and floating effects

Sections:
1. Hero — app name, tagline, phone mockup with screenshot, App Store + Play Store buttons
2. Features — 4 feature highlights with phone screenshot for each
3. How It Works — 3-step walkthrough with animated phone screens
4. Screenshots — carousel/slider showing 5 app screens in phone frames
5. Stats — animated counters (Downloads, Users, Rating, Countries)
6. Reviews — app store style reviews with star ratings
7. Download CTA — large section with phone mockup + store buttons + QR code
8. Footer — links, social, legal

Requirements:
- Phone mockup frames (CSS-only, no images)
- Screenshot carousel with smooth sliding
- Animated counters
- Floating phone effect in hero
- Mobile responsive
- SEO meta tags
- Pure HTML/CSS/JS
- Realistic app data

What you'll get: A polished app landing page with CSS phone mockups, screenshot carousel, download buttons, animated stats, and review section.

Bonus: Image Generation Prompt

Use this prompt in Midjourney or DALL·E to generate a visual mockup before coding. This helps you (and your client) visualize the end result.

Create a high-quality UI design showing a laptop and mobile
phone screen displaying a modern website. The website should
have smooth animations, gradients, and a premium design.
Include realistic lighting, professional layout, glassmorphism
elements, and a clean workspace background. 4K quality,
photorealistic, soft shadows, elegant typography.

Generate the mockup first, then use one of the 10 prompts above to build the actual code. This two-step workflow (design → code) gives you dramatically better results than jumping straight to code.

Tools to Use

• ChatGPT (GPT-4) — Best for generating the website code from these prompts
• Claude — Best for very long, multi-section websites
• Midjourney — Best for generating the visual mockup beforehand
• DALL·E — Quick graphics, hero images, product photos
• VS Code + Copilot — For refining the generated code

"A good prompt is worth more than a week of coding. These 10 prompts alone can generate websites worth ₹5,000–₹25,000 each. The skill is knowing how to prompt — not how to code."