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.
Describe a page in enough detail for a designer or an image generator to produce it. Page goal and audience: [PAGE_GOAL_AND_AUDIENCE]. Brand style (colors, type, tone): [BRAND_STYLE]. Content: headline, benefits, proof, call to action, form fields: [CONTENT]. Devices: [DEVICES]. Return: 1. Section table: Order | Section | Purpose | Content | Layout (columns, alignment, spacing) | Visual elements | Call to action | Mobile behavior. 2. Design tokens: colors with hex and use, type scale (sizes, weights, line heights), spacing scale, corner radius, shadow. 3. Components: button states (default, hover, focus, disabled), form fields with labels and error states, cards, and testimonial blocks. 4. Wireframe in text for desktop and mobile using boxes. 5. Accessibility requirements: contrast ratios to meet, focus order, heading structure, alt text for each image, form labels. 6. Image prompts (for an image generator) for the hero visual and two supporting visuals, including what to avoid (distorted text, extra fingers, fake logos). Treat generated images as concepts; real product images should be real. 7. Handoff notes: file names, export sizes, and open questions. Keep the page to one primary call to action. Don't invent proof such as testimonials or numbers.
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 ChatGPT, Gemini or another assistant.