A curated, open-source collection of production-grade UI prompts for building landing pages, SaaS dashboards, and components — using React, Tailwind CSS, shadcn/ui, and Framer Motion.
Copy a prompt → paste into Claude or GPT → get a fully working page.
| Category | Prompts | Stack |
|---|---|---|
| SaaS Landing Pages | 3 prompts — hero sections, full pages | React + Vite + Tailwind + shadcn/ui |
| Components | 2 prompts — navbar, cards | Tailwind + Framer Motion |
| Templates | Blank prompt skeleton | Any stack |
- Open claude.ai
- Copy any
.mdprompt file from this repo - Paste it and say: "Build this exactly as specified"
- Claude generates the full code
- Copy the prompt
- Start with: "You are an expert React developer. Build the following UI exactly:"
- Paste the prompt
- Open your project
- Press
Ctrl+Kor open AI chat - Paste the prompt directly
The secret: every design decision becomes a prompt line.
Screenshot any landing page, SaaS app, or component.
Stack → Design Tokens → Assets → Sections → Animations
Copy templates/PROMPT_TEMPLATE.md and fill it in.
❌ "Make a big heading"
✅ text-[80px] font-medium tracking-[-0.04em]
❌ "Add a smooth animation"
✅ initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.6, delay: 0.1 }
Ask Claude:
"Convert this screenshot into a detailed React + Tailwind prompt spec. List every component, exact Tailwind classes, colors in HSL, and animation details."
Then clean it up and add your asset URLs. Done in ~10 minutes.
ui-prompt-library/
├── README.md ← You are here
├── CONTRIBUTING.md ← How to add your prompt
│
├── saas/
│ ├── README.md ← Index of all SaaS prompts
│ ├── hero-dark-video-mindloop.md ← Dark newsletter landing page
│ ├── hero-light-dashboard-nexora.md ← Light SaaS with dashboard preview
│ └── hero-dark-grow.md ← Minimal dark hero with marquee
│
├── components/
│ └── README.md
│
└── templates/
└── PROMPT_TEMPLATE.md ← Blank skeleton for new prompts
Want to add your own prompt? Read CONTRIBUTING.md.
Every merged prompt gets credited in the README.
MIT — free to use, modify, and share.
| Avatar | Name | Contribution |
|---|---|---|
| @P-r-e-m-i-u-m | Syed Abdul Aman | Creator, all initial prompts |
Want your name here? Read CONTRIBUTING.md and open a PR.
- 5 prompts and counting
- 3 SaaS full-page prompts
- 2 component prompts
- Tested with Claude and ChatGPT
See ROADMAP.md for what's coming next.