Landing Story

Build one clear, responsive introduction page from the user's product material. Deliver editable HTML and CSS with a working local preview. Respect an existing repository's components and rules; create a standalone page only when appropriate.

Establish the promise

Identify what is offered, who needs it, the most useful concrete example, and the next action. Reuse actual brand details and supplied proof. Never invent users, reviews, logos, prices or availability. If the brief is a fictional exercise, label it in the output and use honest demonstration controls rather than pretending to take orders.

Design around the content

Make the first screen answer what this is, what can be obtained and where to start. Give the actual product or work a strong visual role. Use a coherent type hierarchy, purposeful imagery and generous but proportionate spacing. Avoid filling an empty layout with generic benefit cards. Choose the section sequence from the material, not a fixed SaaS template.

Implement

Use semantic HTML and responsive CSS. Keep navigation as real anchors, actions meaningful, images dimensioned, and controls keyboard accessible. At 390px and 320px, recompose the layout instead of shrinking desktop text. No required remote fonts or tracking. Use authorized supplied assets or original code-native diagrams; describe a missing photo honestly.

Make a runnable local file or integrate with the existing dev server. A contact, booking or checkout integration must actually exist before a submit action is represented as functional. Do not add one without authorization. Keep private briefs and contact data out of public fixtures.

Inspect

Read references/quality.md. Open the page in a browser at desktop and phone sizes; test every primary link, keyboard focus and the longest content. Return the actual source and preview, and distinguish local completion from deployment. Do not deploy or change domains as part of page creation.