Use a screenshot to guide an original landing page

Use the screenshot to explain a design idea

A screenshot can communicate the kind of layout you want: a clear split hero, compact navigation, generous spacing, or a form beside an explanation. It cannot show all responsive states, interaction behavior, accessibility details, or the system that receives a submission. Treat it as one reference for an original page, then specify your own offer and workflow.

Use a screenshot you own or are permitted to use for the task. If the reference belongs to another business, describe the general layout qualities you want rather than reproducing its logo, photographs, distinctive illustrations, or copy. The goal is a page for your business with its own evidence and visual identity.

Separate the visible facts from the unknowns

A screenshot can suggest	It cannot establish
Section order and rough proportions	How the layout changes on smaller screens
Visual hierarchy	Semantic heading structure or keyboard access
A visible form	Submission endpoint, validation, or delivery
A button label	Whether it books, pays, downloads, or only opens a link
A photograph’s composition	Your permission to reuse that photograph
Text at one viewport	How real text behaves at zoom or with longer content

Ask the assistant to report uncertainty explicitly. If it cannot read small text, supply your own copy. If only the top of the page is visible, do not ask it to invent the rest and pretend it faithfully reproduces an unseen design.

An original adaptation example

Imagine an authorized reference with a product screenshot on the right, a short headline on the left, and three benefits underneath. A consultant could reuse that broad information pattern while changing the content and visual treatment:

• Replace the software screenshot with an authorized diagram of the consultation process.
• Replace the product headline with the specific client problem discussed in the session.
• Use three agenda items instead of feature claims.
• Use the consultant’s own colors, typography, and background information.
• Link the action to an enquiry form that explains the manual follow-up.

This is an illustrative adaptation, not a claim that a screenshot was converted and tested for a client. It demonstrates how the page’s purpose should determine the result, even when a visual reference starts the discussion.

Copy this screenshot-reference prompt

Use the attached authorized screenshot as a layout reference for
an original page for [my business].
What I like: [specific spacing, hierarchy, or composition].
Do not reuse: the other business's logo, copy, photos, customer
claims, or distinctive illustrations.
My audience and offer: [verified facts].
My brand assets: [authorized logo, colors, fonts, and images].
Primary action: [actual enquiry or external destination].

First describe the reusable layout ideas and the things the image
cannot establish. Propose an original adaptation using my content.
Make mobile layout and interaction decisions explicitly rather
than treating the screenshot as a complete specification.
Use real text, labelled controls, useful image alternatives,
and a functional Pageree form where required. Do not invent a
submission endpoint, booking system, or success claim.

After the plan is reviewed, save a private Pageree draft and show
the preview. Wait for approval before publishing and give me
checks for live form delivery and external links.

Keep the result readable and functional

Do not flatten the page into one large image just to match the reference. Visitors need selectable text, working links, labelled form fields, and a layout that can respond to their screen. For meaningful diagrams and photographs, provide text alternatives that communicate their purpose; W3C’s informative-image tutorial explains that the right alternative depends on the context.

Check the original content at narrow widths and with enlarged text. A split layout may need to stack. A decorative overlapping card may need to move so it does not cover the form. Those are deliberate design changes, not evidence that the reference was interpreted incorrectly.

Finally, inspect the form endpoint and delivery settings separately. A visual match cannot show that an enquiry reaches an inbox. The contact-form diagnostic explains those checks. Use the brand guide for consistent assets and the Claude Design handoff when the reference becomes a design-tool export before publication.