Focused landing page
A conversion-focused public page with one dominant promise and next action.
- Use when
- One audience needs one clear decision path.
- Avoid when
- Users must compare many peer options before acting.
What this pattern must solve
Give the route a clear job and information order before choosing surface treatment. For this pattern, the practical fit is: One audience needs one clear decision path.
Avoid forcing it into the product when users must compare many peer options before acting. A recognizable pattern is only useful when it reduces work or uncertainty for the person using it.
Information anatomy
Start with these relationships before choosing layout treatment. Their order may change with the task, but each one needs an explicit place.
- Orientation and page identity
- One dominant task or decision
- Supporting context grouped by meaning
- A clear onward path
States the screenshot will not show
A polished default view is incomplete. Design and verify these states so the implementation stays useful when data, permissions, timing, or connectivity change.
- Complete content
- Partial or missing content
- Unavailable action
- Long-content stress case
Responsive and accessible behavior
Keep identity and the primary action early. Reorder supporting regions by task priority rather than shrinking the desktop grid.
- Use one descriptive page heading
- Keep landmarks and reading order aligned
- Name actions by outcome
UI/UX and public-page checks
The pattern prompt carries these implementation checks into the task. Apply only the public-page checks that match the route and content.
- 01 Purpose
- 02 Hierarchy
- 03 Space
- 04 Contrast
- 05 Proximity
- 06 Consistency
- 07 Familiarity
- 08 Site architecture
- 09 Rendering
- 10 Titles/snippets
- 16 Content overlap
- 17 AI search
Full implementation prompt
This combines the shared inspection contract, the pattern-specific task, fit guidance, verification requirements, and a visible source link. Replace bracketed context with real product details before using it.
You are designing or repairing a real interface inside an existing product. Do not start by decorating it.
FIRST, establish the screen job in one sentence: “This screen helps [specific user] understand/do [specific thing] so they can [specific next action].” Inspect the current repository, `design.md`, existing components, tokens, routes, data flow, accessibility behavior, tests, and any supplied reference screenshot before editing. Preserve working product behavior and the project’s existing brand language unless the task explicitly replaces it.
Use the Morten A. Giraffe UI/UX field-guide principles as constraints: purpose before polish, visible hierarchy, relationship-driven spacing, meaningful contrast, clear proximity, behavioral consistency, familiar interaction patterns, reachable targets, structured choice, chunking, progressive disclosure, immediate feedback, recoverable errors, accessibility, responsive purpose, deliberate sequence, trust near doubt, and outcome-based measurement.
ANTI-AI-SLOPE RULES: do not default to generic SaaS composition, random gradients, glow effects, glassmorphism, oversized rounded cards, cards-inside-cards, decorative icon circles, fake stats, fake testimonials, meaningless bento grids, excessive pills, filler copy, giant empty spacing, or animation that does not explain state. Do not invent proof, customer names, metrics, security claims, reviews, or product capabilities.
SPECIFIC TASK — FOCUSED LANDING PAGE
Build a landing page around a single page job. Open with a specific H1, a short explanation, one primary CTA and at most one secondary action. Follow only with the proof, explanation, objections and next step needed for that decision; use spacing and section rhythm before cards, put trust beside the action it supports, and end with a clear resolution instead of a generic CTA banner.
Use when: One audience needs one clear decision path.
Avoid when: Users must compare many peer options before acting.
IMPLEMENTATION CONTRACT
- Use semantic HTML and the project’s existing accessible primitives before creating new ones.
- Keep one clear primary action; visually subordinate secondary and tertiary actions.
- Design the complete state model where relevant: idle, hover/focus, loading, success, empty, partial data, disabled, validation error, server error, offline/retry, and permission/locked.
- Preserve user input after recoverable errors. Explain what happened and the next useful action.
- Make keyboard operation, visible focus, logical tab order, screen-reader naming, contrast, reduced motion, zoom/reflow, and touch targets part of the implementation—not a later patch.
- Treat mobile as the same purpose under different constraints, not a squeezed desktop. Verify narrow phones, tablet, desktop, long content, and 200% zoom.
- Avoid new dependencies unless the existing stack cannot reasonably support the requirement.
- Keep copy specific, human, and useful. Button labels should describe the outcome.
- For public/indexable pages, keep important meaning, links, headings, and metadata available without requiring client JavaScript; preserve truthful canonicals, titles, structured data, and internal links.
- Protect performance: avoid layout shift, oversized media, unnecessary client JavaScript, and effects that hurt responsiveness.
- Do not silently remove routes, integrations, analytics, auth behavior, deep links, metadata, or existing functionality.
- Run the project’s relevant build, typecheck, lint, tests, and targeted browser checks after implementation. Fix issues caused by your changes.
BEFORE CALLING IT COMPLETE, report: (1) page/screen job, (2) files changed, (3) what was preserved, (4) UX rules applied, (5) responsive/accessibility states verified, (6) tests/checks run with results, (7) remaining unknowns or production-only checks. Never claim “bug free,” “fully accessible,” or “regression free” without evidence.
Source: Morten A. Giraffe UI Prompt Field Guide — https://www.mortenagiraffe.com/journal/ui-prompt-library-for-vibe-coders/01-01-focused-landing-pageVerify the result
Ask a new reader to identify the page job and next action in five seconds. For “Focused landing page,” success means the interface solves this fit: One audience needs one clear decision path.
Also confirm keyboard completion, visible focus, zoom and text reflow, reduced motion, touch targets, loading and error recovery, console output, existing behavior, and any route metadata affected by the change.