Turn a screenshot into a design brief

Suppose you have a screenshot of a local studio's site. The first screen is a left-aligned sentence, a short line under it, one button, and a large photograph of the studio's own room. You like the quiet. Harbor Ledger cannot use the photograph, the studio's name, the client logos, or the sentence. Preserve useful layout decisions such as section order, spacing, image balance, and emphasis. Replace the source company's words, facts, identity, and proof with material that belongs to Harbor Ledger. The brief records the layout observations you are allowed to carry and the Harbor Ledger facts that replace everything else.

First, name the reference and confirm you may study it. Second, describe the layout decisions you want to keep: section order, spacing, image balance, and emphasis. Third, list the questions the page answers, in the order the sections appear. Fourth, mark which of those questions Harbor Ledger also has to answer. Fifth, list components that depend on proof you do not have, such as a logo row or a quote carousel. Sixth, list assets you must supply, such as a photo of a contractor's desk or no photo at all. This order is the worksheet. Skipping to colors copies the surface and leaves the page job unexamined.

It keeps a single left-aligned opening and one button, because the contractor needs to see the offer and the call without a gallery. It keeps a large image only if the image is Harbor Ledger's own, and the image brief says what that picture must prove. It does not keep the studio's cream and black palette, because Harbor Ledger's CSS already has --background and --accent. It does not keep three equal cards under the hero, because the studio used them for three services Harbor Ledger does not sell. The brief should say 'do not add a three-card row to echo the reference.'

Layout to keep: left-aligned offer, one sentence that names who it is for, one button, then the price. Harbor Ledger copy, still fictional: 'Monthly books for independent contractors.' Button: 'Book a 20-minute call.' Price: $89 a month or $640 for the tax-ready year. The reference's testimonial strip becomes a gap, not a rewritten quote. The reference's client logos become nothing. An agent that receives the screenshot without this table will often preserve the strip and invent names to fill it. The table is the part that makes the screenshot safe to attach.

A picture does not show keyboard focus, a form error, the mobile menu, or whether the type is real text. It does not show permission to use the photo. It can mislead on spacing, because you cannot measure a flattened image against the reference's CSS. Note those limits on the brief so a later review does not treat the screenshot as the acceptance test. The acceptance test is the Harbor Ledger question order on the rendered page at a recorded desktop viewport and at 390 × 844 px.

Give the agent the worksheet first and the screenshot second. Say which source wins when they conflict. The worksheet wins on facts, components, and assets. The screenshot applies only to the section order, spacing, image balance, and emphasis you explicitly kept. Ask for a page, then compare it with the worksheet, not with a side-by-side that scores how closely the colors match. A close visual match to the studio would mean the brief failed.