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
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.