AI Design Prompts for Websites & UI with Live Previews
Design Prompt Kit helps you browse copy-ready design prompts, preview real HTML results, and copy prompts for your next website, UI section, dashboard, or app screen.
3 design prompts
Modern SaaS Landing Page
Create a clean SaaS homepage with hero, features, pricing, testimonials, and CTA.
A dark, high contrast SaaS homepage with a glowing hero, a product mockup, a stats band, an asymmetric feature grid, simple pricing, a customer quote, and a closing call to action.
Landing Pages
designpromptkit.com/prompts/modern-saas-landing-page
Live HTML Preview
Copy-ready prompt2365 chars
Build a complete, modern SaaS marketing landing page as a single responsive page using semantic HTML and Tailwind CSS. Dark, premium, high-contrast aesthetic in the spirit of Linear, Vercel and Raycast: near-black canvas (#0A0B0D), white and muted-zinc text, thin translucent borders, and one bold lime accent (#C2F04A) used sparingly for primary actions, highlights and stats (dark text on lime fills). Use a clean sans, big tracked-in display headings, soft accent glows and a subtle noise texture. Use Lucide icons throughout. Sections, in order: 1. Sticky glassy header - Lime logo mark + wordmark "Northwind" - Nav: Product (with chevron), Solutions, Pricing, Docs - "Sign in" link and a lime "Get started →" button 2. Hero (centered, with a soft lime glow behind it) - A pill announcement badge with a sparkle icon - A very large headline with one phrase highlighted in lime - A one-paragraph subhead - Two CTAs: a lime "Start for free →" and an outline "Watch demo" with a play icon - A small social-proof row: overlapping avatars + a star rating - A large product UI mockup card below (a dark app dashboard with a sidebar, stat tiles where one is lime, and a bar chart) sitting on an accent glow 3. Logo cloud: a muted row of five company wordmarks with a caption 4. Stats band: a 4-cell bordered strip with large lime figures (uptime, teams, faster launches, integrations) 5. Feature bento grid - Eyebrow + heading - An asymmetric bento of 5 cells (mixed column spans): Automated workflows (with a small trigger → AI → notify flow built from chips), Live analytics (mini bar chart), Enterprise-ready (compliance badges), and Connects to your stack (a row of integration icon tiles with a "+146"). Each cell has an icon tile, title and short copy. 6. Pricing: three plans (Starter, Pro, Team); highlight Pro with a lime border, glow and "Most popular" badge; feature rows use lime check icons 7. Testimonial: a quote icon, a large single quote, and an author with avatar, name and role 8. Final CTA band: an accent-tinted panel with a glow, a headline and a lime primary button 9. Footer: logo + tagline + social icons on the left, three grouped link columns, and a bottom copyright row Make it fully responsive and accessible: semantic landmarks, correct heading order, strong contrast, and visible focus states.
About this design prompt
This prompt builds the kind of homepage you see on Linear, Vercel, and Raycast. It stays dark, keeps the type tight, and uses a single bright accent so the call to action never gets lost. Everything lives on one scrolling page, so you can ship it as a marketing site without wiring up extra routes. If you are launching a product and need something that looks finished on day one, start here.
What this prompt builds
- A hero with a headline, short subcopy, and two calls to action
- A product mockup framed like a real app window
- A stats band with three or four numbers that matter
- An asymmetric feature grid instead of the usual three equal columns
- A two tier pricing section that stays readable
- A customer quote with an avatar and company name
- A closing call to action and a compact footer
Best used for
- Launching a new SaaS product or a beta signup page
- Replacing a template homepage that looks like everyone else's
- Handing a developer a clear structure to build against
Tips for better results
- Swap the accent color first. It carries most of the personality, and the rest of the page is neutral on purpose.
- If you do not have a product screenshot yet, ask for a simple UI mockup in the hero instead of an image placeholder.
- Cut the pricing section if you are pre launch. The page still reads well without it.
Prompt details
- Design type
- Landing Pages
- Works with
- Claude, v0, ChatGPT, Tailwind
- Style
- Modern, Clean, SaaS