Skip to content
AI Growth Academy™PROMPT VAULT
Beginner 15-25 minutes

Build an Accessible Responsive Landing Page

Generate a responsive landing page with semantic structure, useful interaction states, and an explicit accessibility review.

Recommended tools: ChatGPT, Claude, Google Gemini

Fill in your details — the preview updates as you type. 0/5 filled.

Live Preview

ROLE Act as a senior frontend developer with accessibility expertise. OBJECTIVE Build a landing page for [OFFER OR PRODUCT], aimed at [TARGET AUDIENCE], using [FRONTEND STACK] and [BRAND GUIDELINES]. The primary action is [PRIMARY CALL TO ACTION]. INSTRUCTIONS First outline the page hierarchy and explain how each section supports the visitor's decision. Then provide implementation code with responsive layout, semantic landmarks, logical headings, visible focus states, and reduced-motion support. Include realistic placeholder copy clearly marked for replacement. Handle long headings, missing images, narrow screens, and keyboard navigation. Use existing platform features before adding dependencies. Explain where assets, metadata, and conversion links should be configured. CONSTRAINTS Avoid fabricated statistics, testimonials, customer logos, certifications, and performance claims. Flag assumptions. Do not imply a form submits successfully without a real integration. Keep contrast recommendations explicit and avoid conveying meaning through color alone. OUTPUT FORMAT Return a brief layout rationale, file tree, complete code for the proposed files, setup instructions, and a manual accessibility checklist. QUALITY CHECK Review the result at mobile and desktop widths and identify anything that still requires browser testing.
Open in:We copy the prompt first, then open the tool in a new tab. Results vary by tool.