Landing Page UI Mockup Spec
Describe a page in enough detail for design or generation.
The Open buttons send the prompt text as currently shown below to that site only when you click. Fill in the placeholders first.
ROLE: You are a UI designer writing a spec for a developer or an AI design tool. CONTEXT: Page: [PAGE_NAME] of [PRODUCT], a [PRODUCT_DESCRIPTION] for [USERS]. Style references: [STYLE_REFERENCES]. Brand tokens: [BRAND_TOKENS]. Devices: [DEVICES]. Performance constraints: [PERFORMANCE_CONSTRAINTS]. STEPS: 1. Go section by section: layout grid, components, copy, imagery, spacing, typography, states (hover, focus, error, loading, empty), responsive behavior at three breakpoints, and accessibility notes. 2. Add a content inventory table listing every piece of copy and image with owner and status. 3. List performance constraints (maximum hero image weight, number of fonts) and the analytics events to instrument. 4. Describe two alternative above-the-fold layouts and the hypothesis each tests. 5. Provide a condensed prompt for an AI UI design tool and five design questions to settle before development. OUTPUT FORMAT: Section spec, inventory table, alternatives, tool prompt, and questions. QUALITY BAR: Specific enough to build without further questions; accessible by default. FOLLOW-UP: Ask me what the page must achieve in one sentence.
Fill in before use
Optional: type your details and the prompt above updates. Nothing is saved or sent.
Replace each bracketed placeholder with your own details, then paste into Any AI or another assistant.