MotionSites Prompts Collection

MotionSites Prompts Collection is an open-source GitHub repository of 661 AI web design prompts that generate React and Tailwind CSS landing pages, hero sections, and UI components when pasted into AI coding tools like Bolt.new, v0.dev, or GPT-Engineer.

What is MotionSites Prompts Collection?

MotionSites Prompts Collection is a free, MIT-licensed collection of 661 production-ready AI prompts for web design, hosted on GitHub at nomaan5541/motionsites-prompt-collection. Each prompt file is a markdown document with YAML frontmatter (title, category, subcategory, premium flag, image URL) followed by a structured system instruction that defines an AI role, typography constraints, HSL color tokens, spacing rules, and animation physics. The repository stores the full raw prompt text, not just metadata, so users can copy a prompt and paste it directly into an AI tool to generate a pixel-perfect design.

The project also includes a live library interface at motionsitesai-main.vercel.app, a dark space-themed gallery with starfield backgrounds and 3D card tilt, plus six interactive React component demos at the /examples route that showcase animations like a 3D particle butterfly and a neon WebGL shader.

Key Features

• 661 prompts and growing — The collection spans categories including SaaS, Agency, Portfolio, Fintech, Web3, E-commerce, Automotive, Resort, Restaurant, Courses, Interiors, Corporate, Hero Sections, Pricing Tables, Features, Testimonials, Footers, and FAQ accordions.
• Strict prompt engineering schema — Every prompt enforces a role definition (e.g., "act as an award-winning UI/UX designer"), serif headlines such as Playfair Display, custom Tailwind HSL color tokens, and Framer Motion spring constants (stiffness 100, damping 20) or GSAP ScrollTrigger timelines.
• Raw prompts stored in full — The prompts/ folder holds 470 free prompt files, and the Pro prompts/ folder holds premium configurations; the README also documents 66 premium and 113 community-sourced prompts.
• Interactive gallery interface — The included index.html uses lazy-loaded webp screenshots from DigitalOcean Spaces CDN, autoplay mp4/webm preview loops on hover, and a physics-based 3D card tilt calculated from cursor coordinates.
• Six live component demos — Examples include MORPHO, a 3D particles simulator with cursor physics and particle count slider (60–300); Aurel Liquid Hero with water ripple blur and equalizer visualizer; and an AI Agent Pipeline terminal with a "Run AI Pipeline" button.
• Local CLI utility — After running npm link, developers can use npx templateprompts list to list all prompt names in both folders from the terminal.
• Extracted third-party libraries — The repository contains 93 prompts from HorizonX, 93 from the 21st.dev registry (with npx shadcn@latest add ... installation commands), and 5 from Superdesign Canvas.
• MIT license and contribution guides — The repo includes LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md, and DISCLAIMER.md.

Who is it for?

• Frontend developers — use the prompts to scaffold React and Tailwind components and full landing pages inside Bolt.new, v0.dev, or GPT-Engineer without writing boilerplate from scratch.
• AI-assisted designers — rely on the consistent role/typography/color/animation structure to get predictable output from different AI models.
• Agency teams — pull client-ready hero sections, pricing tables, testimonial sliders, and footers across 18+ design styles like Neo-brutalism, Glassmorphism, and Dark Editorial.
• Open-source contributors — submit new prompts through the contribution guidelines to expand the library.

What can you do with it?

• SaaS startups: generate conversion-focused homepages, feature cards, metrics charts, and pricing tables from the SaaS category prompts.
• Web3 projects: build cyber-themed NFT galleries, neon-bordered app states, and futuristic hero sections from the Web3 category.
• Creative agencies: produce portfolio grids, horizontal layouts, and floating image showcases with high-end typography prompts.
• Animation learners: study the embedded Framer Motion and GSAP patterns, including spring transitions and ScrollTrigger scroll pins, to reuse in their own projects.

How does it work?

The README outlines a five-step playbook: select a design from the web gallery, click the Code button to copy the prompt, open an AI development environment (Bolt.new, v0.dev, GPT-Engineer, or Lovable), paste the prompt and add optional branding instructions, then let the AI compile the design and iterate. The CLI command npx templateprompts list provides the same prompt names locally.

FAQ

Is MotionSites Prompts Collection free?

Yes, the entire repository is MIT-licensed, so all 661 prompts are free to use, modify, and redistribute, and contributions are welcome via pull requests.

What AI tools work with these prompts?

The prompts are written for text-to-code AI tools including Bolt.new, v0.dev, GPT-Engineer, and Lovable. Some extracted 21st.dev prompts also include npx shadcn CLI commands for adding components.

Do I need React or Tailwind experience?

The generated code targets React with Tailwind CSS, Framer Motion, GSAP, and Lucide React icons, so familiarity with those libraries helps when tweaking the output visually.

Are full prompt texts available in the repository?

Yes, every prompt's raw, un-truncated markdown is stored in the prompts/ and Pro prompts/ folders. The README catalog lists 470 files in prompts/ with clickable links.

How many prompts does the collection actually have?

The README header states 661 prompts and growing. The catalog lists 470 prompts in the free folder, with the remainder made up of premium and community-sourced prompts described throughout the documentation.