Web Design prompt
SaaS Landing Page Design Spec Prompt
Get a complete, buildable landing page design for a software product: sections, copy, palette, type scale, spacing and component states in one answer.
The prompt
You are a senior product designer who also writes front-end code. Design a high-converting landing page for {{product_name}}: {{product_description}}.
Audience: {{target_user}}.
Single goal of the page: {{primary_action}}.
Look and feel: {{style_words}}. Brand colour: {{brand_colour}}.
Deliver, in this order:
1. PAGE STRUCTURE
List every section top to bottom. For each: purpose (one line), headline, supporting copy (max 40 words), and the visual (screenshot, illustration, icon set or none). Include at minimum: hero with one primary button, problem, how it works in 3 steps, 3–4 benefits with proof, testimonials, pricing, FAQ (5 questions that answer real objections), final call to action.
2. COLOUR SYSTEM
Give hex codes for: background, surface, border, text, muted text, accent, accent-hover, text-on-accent, success, warning, error. Build the accent around {{brand_colour}}. State the contrast ratio of every text colour against the background it sits on; all body text must reach 4.5:1 and large text 3:1.
3. TYPOGRAPHY
One heading font and one body font, both free on Google Fonts. A type scale from a 16px base with a 1.25 ratio, listed in px with line heights and font weights for H1–H6, body, small and button text. Maximum line length for body copy.
4. SPACING, GRID AND SHAPE
Spacing tokens on an 8pt grid (4px allowed for tight UI). Desktop grid (columns, gutter, max width) and mobile margins. Corner radius for inputs, buttons, cards and modals. Two elevation levels as CSS box-shadow values.
5. COMPONENTS
Specify primary button, secondary button, nav bar (desktop and mobile), feature card, testimonial card, pricing card and FAQ accordion. For each give default, hover, focus-visible, active and disabled states.
6. MOTION
Durations in ms and easing curves for hover, accordion open, and section reveal on scroll. Describe the prefers-reduced-motion fallback.
7. ACCESSIBILITY AND PERFORMANCE CHECKLIST
Ten concrete checks (headings order, focus ring, alt text, tap target 44×44px, no layout shift from images, etc.).
Write the copy in plain English. Do not invent statistics, customer names or logos: use clearly marked placeholders like [Customer quote] instead. Variables
| Variable | What to put | Example |
|---|---|---|
{{product_name}} | Name of the product | Ledgerly |
{{product_description}} | What it does in one sentence | Invoicing and expense tracking for freelance designers |
{{target_user}} | Who the page is for | Freelancers billing 5–20 clients a month |
{{primary_action}} | The one thing a visitor should do | Start a 14-day free trial |
{{brand_colour}} | Main brand colour as hex, or "choose one" | #3B5BDB |
{{style_words}} | Three words for the look and feel | calm, precise, friendly |
Tips
- Give a real brand colour if you have one; the model builds a cleaner palette around a fixed anchor than from scratch.
- Ask a follow-up: "Now write this as a single HTML file with Tailwind CSS" to turn the spec into a prototype.
- Keep the "do not invent statistics" line. Without it, most models fill testimonials with made-up names.
- If the answer is long, ask for one section at a time and check contrast numbers with a contrast checker before you ship.
Related prompts
- Admin Dashboard UI Layout Spec PromptDesign a data-heavy dashboard screen with clear hierarchy: layout grid, KPI cards, charts, tables, filters, empty and error states.
- Design System Tokens from a Brand BriefTurn a short brand description into a full set of design tokens (colour, type, spacing, radius, shadow, motion) as JSON and CSS custom properties.
- Brand Identity Starter Kit PromptGet a compact brand identity for a new business: positioning, three logo concepts, palette, type pairing, voice and example applications.
- Landing Page Copy (Problem–Agitate–Solve)Write complete, honest landing page copy using the PAS framework, with headline options, benefit bullets, objections and one clear call to action.