The absolute largest open-source collection of production-ready, hyper-fidelity AI web design prompts — 661 prompts and growing.
661 free, production-ready AI prompts that generate stunning landing pages, hero sections, and web components. Copy a prompt → Paste into your AI tool → Get a pixel-perfect design in seconds.
🌐 Browse the Live Library · ⭐ Star this repo · 🤝 Contribute · 📄 License
Latest Release Summary: Massive library expansion (+191 Prompts), 6 live interactive component demos, 3 new dedicated site sections, and user notice systems.
- 🟢 HorizonX Library (93 Prompts): Extracted senior-grade React, WebGL particle, & liquid hero prompts (Morpho 3D Particle Butterfly, Aurel Liquid Hero, Hand Prosthesis Simulator, Digital Wave Field Hero, EIDOLON Monolith Hero, Gallery Ring 3D, etc.). Saved in
extractions/horizonx. - 🟢 21st.dev Registry (93 Prompts): Extracted community component & template prompts across 75 categories (Animated Heroes, Shaders, Backgrounds, Gradients, Buttons, Footers, AI Chats) with
npx shadcn@latest add ...CLI installation commands. Saved inextractions/21st_dev. - 🟢 Superdesign Canvas (5 Prompts): Extracted AI product design agent prompts (Infinite Canvas Motion, Glassmorphism UI Component Suite, AI Prompt-to-Mockup Engine, SaaS Hero Showcase, Theme Switcher Engine). Saved in
extractions/superdesign.
Created 6 full, interactive, high-end React component demos accessible at /examples:
- MORPHO — 3D Particles Simulator: HTML5 Canvas particle butterfly with real-time cursor physics, wing-flap animation, particle count slider (60–300), speed multiplier, and color scheme picker (Blue, Purple, Gold).
- Aurel Liquid Hero: Dark glass hero section with water ripple gradient blur, editorial serif typography, ambient equalizer frequency visualizer, and sound toggle.
- Superdesign Infinite Canvas Motion: Interactive canvas with draggable node cards, animated SVG flow lines, zoom/pan controls (
+/-), and AI Node creation. - Superdesign Glassmorphism UI Suite: Backdrop-blur card container with 1px neon borders, prompt input bar, live UI mockup vs. TSX code tab switcher, and Dark / Light theme switcher.
- 21st.dev Red In Black Neon Shader: High-intensity dark mode hero section with crimson pulsing neon WebGL shader glow, author metadata (
ashish.indora), and copyablenpx shadcnCLI command bar. - 21st.dev AI Agent Pipeline & Terminal: Autonomous AI code build pipeline card (
Input Spec➔Code Generator➔AST Linter➔Deploy Sandbox) with an interactive "Run AI Pipeline" button and live terminal stream.
- 339 Curated Designs: The library contains templates and component sections covering all major web design trends (Neo-brutalism, Glassmorphism, Space minimalism, Dark Editorial, etc.).
- Vivid Screenshot Previews: The live gallery cards dynamically fetch web screenshots via DigitalOcean Spaces CDN, giving you an immediate visual representation of what the prompt produces.
- Autoplay Hover Previews: Card visual containers are hooked into a custom mouseover playback manager that starts video loops on hover and immediately pauses them on mouseleave to avoid rendering threads blocking.
- Physics-Based Card Tilt: Interactive grid cards feature a responsive 3D card tilt effect calculated dynamically using cursor page coordinates and spring-back transitions.
- Full Text Prompts in the Repository: Unlike libraries that only host metadata, every prompt's raw, un-truncated markdown code is stored in the repository.
- Bonus Premium Prompts Extracted: Includes 66 premium template configurations extracted and fully mapped to markdown files.
- Community-Sourced Collection: Incorporates 113 additional prompts sourced from the open-source community, expanding the library to 339 total prompts.
Here is the folder structure of the MotionSites Prompts Collection workspace:
motionsites-prompt-collection/
├── .github/ # GitHub issues templates & workflows
├── assets/ # Static preview assets (images and videos)
├── bin/ # Local CLI executable scripts
├── demos/ # Local interactive preview stubs
├── Pro prompts/ # Premium system prompts
├── prompts/ # Free system prompts
├── scripts/ # Utility scripts for downloading and mapping assets
├── index.html # Main library interactive interface
├── vercel.json # Vercel configuration & redirect headers
├── package.json # Node dependency mappings and CLI bindings
├── README.md # Comprehensive documentation
├── CODE_OF_CONDUCT.md # Community guidelines
├── CONTRIBUTING.md # Guidelines for contributing to the repository
├── LICENSE # MIT license agreement
├── DISCLAIMER.md # Fictional assets notice
├── DMCA.md # DMCA policy and procedures
└── SECURITY.md # Responsible vulnerability disclosure
Every prompt file inside prompts/ and Pro prompts/ is formatted with metadata parameters followed by a heavily structured system instruction sheet.
---
title: "Luxury Real Estate"
category: Templates
subCategory: Real-estate
premium: false
imageUrl: https://strvid.nyc3.cdn.digitaloceanspaces.com/motionitems/1780826949672-Luxonn.webp
---
# Luxury Real EstateOur prompts are built around a strict engineering structure to guarantee consistency across different AI models:
- Role Definition: Establishing the persona (e.g. "Act as an award-winning UI/UX designer and elite React Frontend Developer...").
- Typography Constraints: Forcing serif headlines (e.g.,
Playfair Display,Cormorant Garamond) combined with clean sans-serif bodies (e.g.,Plus Jakarta Sans,Inter). - HSL Color Tokens: Forcing consistent custom colors using Tailwind variables (e.g., primary
bg-[#030305], glowing gold accenttext-[#d4af37]). - Spacing & Layouts: Enforcing wide padding, clean flex/grid headers, overlapping visual sections, and custom borders.
- Animation Physics (Framer Motion):
- Defining spring constants:
transition: { type: "spring", stiffness: 100, damping: 20 } - Defining orchestrators:
staggerChildren: 0.1
- Defining spring constants:
- GSAP Timelines: Custom setup guides for ScrollTrigger to pin hero elements and trigger horizontal page translations.
The library's web interface index.html is built as a dark space-themed gallery using a custom design system:
An interactive starfield background renders animated, floating star grids combined with glowing blur orbs. The radial gradients rotate slowly across the screen, simulating a nebula.
Cards react to mouse movements using local coordinates:
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = -(y - centerY) / 15;
const rotateY = (x - centerX) / 15;
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px)`;This produces a smooth tilt rotation that tracks the user's cursor.
Card previews use a combination of lazy-loaded .webp screenshot images and dynamic .mp4/.webm preview loops:
- The preview image covers the card initially.
- On hover, the
preview-videoplays and rises above the screenshot layer. - On mouseleave, the video immediately pauses to release processor cycles.
Prompts instruct the generator to output code strictly targeting the following frontend libraries:
graph TD
A[AI Code Generator] --> B[React Components]
A --> C[Tailwind CSS Grid & Flex]
A --> D[Framer Motion Physics]
A --> E[GSAP ScrollTrigger]
A --> F[Lucide React Icons]
- Framer Motion Constants:
- Fade-up:
{ opacity: 0, y: 30 }to{ opacity: 1, y: 0 } - Scale spring:
{ scale: 0.95 }to{ scale: 1 }
- Fade-up:
- GSAP Scroll Pins:
- For sections requiring deep scroll interactions, animations are bound directly to
scrollYcoordinates.
- For sections requiring deep scroll interactions, animations are bound directly to
Follow these steps to generate high-fidelity interfaces using the library:
- Select a Design: Go to the web app gallery and select a template or section that matches your project requirements.
- Copy the Prompt: Click the
Codebutton to open the preview modal and copy the text. - Open AI Developer Environment:
- Bolt.new: Excellent for complete, operational React/Vite development.
- v0.dev: Ideal for visual React component blocks.
- GPT-Engineer / Lovable: Great for database-backed web applications.
- Input the Prompt: Paste the prompt. Add your custom branding instructions if needed (e.g. "Modify this layout to use blue branding colors instead of gold").
- Generate & Iterate: Let the AI compile the design framework, then perform visual modifications as needed.
The CLI utility allows developers to inspect all available prompt names locally from their terminal:
# Link the CLI locally
npm link# List all prompts in both 'prompts/' and 'Pro prompts/'
npx templateprompts list
# Display helper documentation
npx templateprompts helpWe partition our designs into 19 categories representing specific web page layout needs:
- 💻 SaaS: High-converting homepages, app dashboards, feature cards, metrics charts, and table views.
- 🎨 Agency: High-end typography, horizontal layouts, floating image grids, and creative project cases.
- 👤 Portfolio: Designer grids, neon resumes, interactive project timelines, and contact pages.
- 💳 Fintech: Sleek tables, dark glass transaction panels, and crypto exchange grids.
- 🌐 Web3: Futuristic cyber-themes, NFT galleries, neon borders, and decentralized app states.
- 🛍️ E-commerce: Clean digital storefront grids, product detail previews, and minimal carts.
- 🚙 Automotive: Dynamic vehicle galleries, full-screen slider folds, and specifications tables.
- 🏔️ Resort: Eco-lodge showcases, serene earthy HSL colors, room slider templates, and booking cards.
- 🍽️ Restaurant: Premium food menus, dark reservation overlays, and glowing culinary showcases.
- 🎒 Courses: Online learning homepages, chapter accordions, and interactive syllabus grids.
- 🛋️ Interiors: Interior design slideshows, large architectural grids, and project portfolios.
- 🏛️ Corporate: Classic, clean corporate layouts with strict structural headers and grid metrics.
- 🎯 Hero Sections: High-fidelity landing folds featuring complex scroll-tied animations.
- 💸 Pricing Tables: Grid card systems with neon headers and active option indicators.
- ⚙️ Features Sections: Dynamic hover tabs, hover details, and interactive grids.
- 💬 Testimonial Slider: Auto-marquee columns and card carousels.
- 📑 Footers: Creative custom footer menus and social grids.
- ❓ FAQ Accordions: Expandable card components utilizing clean spring motion.
Below is the full list of every prompt in the library.
We love prompt contributions! If you have optimized a system prompt for v0 or Bolt.new, help expand this collection:
Ensure new prompts have correct frontmatter configurations:
---
title: "My Design Name"
category: "Templates or Sections"
subCategory: "SaaS, Hero, Pricing, etc."
premium: false
imageUrl: "DigitalOcean Spaces screenshot URL"
---- Enclose the prompt body inside a
```textmarkdown block. - Keep instructions highly detailed. Avoid generic terms; specify layout alignments, color palettes, and motion attributes.
- Trademark & Brands: All company names, logos, brand specifications, and UI layouts featured in these prompts are entirely fictional. Any resemblance to real brands is coincidental.
- Licensing: All code and prompts are distributed under the MIT License. You are free to modify, integrate, sell, or distribute the generated designs for personal or commercial projects.
- Live Website: motionsitesai-main.vercel.app
- GitHub profile: @nomaan5541
- Instagram Direct: @Virus_boss
Designed and Built by Nomaan Khan
If you find this repository useful, please consider giving it a ⭐ star!