Try this if
- You've been handed page copy you didn't write, by a client or a marketer, and you're the one who has to lay it out.
- You want the page's structure argued about before anyone argues about fonts and colors.
- You'd rather show a client which pieces their copy is missing than quietly fill them in yourself.
- Skip it if you need a finished, styled page or a phone layout. The recipe draws a desktop wireframe and stops.
A client sends the copy for a new landing page, and it arrives as five paragraphs. Each one is well written. Each one was written to be read from top to bottom by someone sitting still.
Almost nobody reads a page online that way. Thirteen years of eyetracking studies came back with the same finding, summed up by Kate Moran at Nielsen Norman Group, the usability research firm: "People still primarily scan, rather than read." Pour the paragraphs into a landing page, the single page a visitor lands on from an ad or a link, and you get a page people skip. Style the page before its structure is settled and the review argues about fonts and colors, while the real question, what goes where and in what order, never gets asked.
The answer is to rewrite the copy into shapes a scanning eye can catch, keeping every claim, name and number the client wrote. Then draw it as a wireframe, the page as bare boxes and type in black and white with no styling, so the only thing left to argue about is structure. And before drawing anything, write a short brief that says what the copy is missing.
Shortening the copy looks like the fix and isn't. A shortened paragraph is still a paragraph, only with less of what the client meant in it. The recipe itself started out trimming long copy to fit, and had to be changed to rewrite it instead, with a one-line record for every block of prose saying what it became.
The brief comes before the drawing
The copy can arrive three ways, and the recipe says which one it's looking at. A pile of copy and notes gets grouped into the sections it implies. An existing page gets sorted into what works and stays, what's buried and should move up, what's missing and what's noise. A positioning brief gets turned from strategy language into decisions about actual copy.
The brief is short and it goes in the conversation first, because a picture drawn first makes its layout decisions where nobody can see them to argue with them. It starts with a content audit. Is there one clear promise in the headline? Is there proof, in testimonials, logos, numbers or case studies? Does the copy say how the thing works, or only what it is? Is the ask clear, and is there any reason to act now?
The most useful part is the list of what's missing. An absent testimonial is invisible in a pile of paragraphs and obvious on a page with an empty box where it should be. The audit also flags the usual problems by name, like a vague headline, a feature with no benefit attached or three calls to action, the buttons asking the reader to do something, fighting in the first screen.
Then the brief maps the copy to sections, and only to sections the copy can fill. The page answers three questions in order: what is this, why should I care and why now. One or two sentences say why the chosen order fits this reader and this offer, which is why the recipe asks who the page is for before it starts.
Last comes one line per paragraph, saying what it became. In a test run on made-up copy for a bookkeeping firm, a single sentence of about a hundred words describing the firm's monthly process turned out to hold five steps, and the brief recorded it becoming a numbered sequence with a one-line lead. That line is how you check the rewrite dropped nothing.
Every paragraph becomes a shape a scanner can use
The rewrite keeps the substance and changes the shape. A long paragraph describing a process becomes a step sequence. A list of facts becomes a stat band, a row of large numbers, or a set of cards. A quote gets pulled out and set large. Headlines and button text stay recognizably the client's own words, tightened where they were prose.
The recipe tells the AI never to invent a testimonial, number, customer or benefit to fill a shape. Where a section needs something the copy doesn't have, the wireframe draws a labeled empty box, and the brief lists the gap under what's missing. In testing it held on claims, numbers and quotes, and still slipped in small embellishments, like a length for a consultation the copy never gave. Read the rewrite against the original before it goes to the client.
Black and white keeps the argument on structure
The drawing is black, white and grays, with no accent color, in one sans typeface. The hierarchy comes from size and weight, so the headline is plainly the biggest thing on the page. Every section carries a small numbered label in its corner, like 01 HERO for the first screen, because the label says what the section is for. Images are hatched gray boxes and logos are a row of gray pills.
The result is one self-contained page in a single long scroll, handed back in the conversation for you to save and open in a browser. It's never uploaded anywhere, since the copy belongs to a client and hasn't been released.
What you get and what you don't
You get a brief and a desktop wireframe, and every gap in the copy drawn as a gap, which tells the client exactly what to send next.
You don't get finished copy for the rest of the site. Filling the holes is the client's job.
Take this spell for a spin
The block below is written for your AI rather than for you. Paste it with the copy underneath, exactly as the client sent it, and a line saying who the page is for. Leave that out and it asks. It runs in the conversation, writes the brief first and then hands back the page in one code block for you to save as a file. It uploads nothing, and at the end it offers to keep itself as a skill, a saved command you call by name, and saves nothing unless you say yes.
Try it on the longest paragraph a client has sent you this month.
Paste this into your AI agent or a new chat. The post above says what it does. Some prompts set something up in your project that keeps working after, and others run once, right where you paste them. None of them pushes anything to a remote.
You are turning a pile of copy into a landing page wireframe, here in this conversation. Do not set anything up and do not commit anything, and save no file unless I ask you to and tell you where. The copy is: $ARGUMENTS. If that slot is empty or still reads as a placeholder, the copy is whatever I pasted after these instructions, and if there is nothing there either, ask me for it and wait.
First decide what you were given, because each kind is handled differently. A dump of copy or notes: find the structure it implies, group the sentences that belong together and decide which section each group is for. An existing page to redesign: say what is working and stays, what is buried and should move up, what is missing and what is noise to cut, before proposing anything new. A brief or positioning document: turn its strategic language into decisions about actual copy, so a line like clarity for busy teams becomes a sharp statement of what the product does for whom, not more positioning. If you cannot tell which you have, ask.
You also need to know who the page is for, because every judgment in the brief is made for that reader. Unless I have told you in my own words who it is for, ask me in one question before you start, and wait. Do not work it out from the copy, which describes the client's customers the way the client sees them.
Do the work in two parts and in this order. The brief comes first, in the conversation, before anything is drawn.
Part one, the brief. Keep it short.
- The content audit. Is there one clear headline promise? What proof is there: testimonials, logos, numbers, case studies? Does the copy explain how the thing works, or only what it is? Is the ask clear and specific, and is there any reason to act now? Then name what is missing that the page needs. Call out any of these when you see them: a vague headline, no proof, a first call to action buried deep in the page, a list of features with no benefit attached, no explanation of how it works, a claim with no number or name behind it, and several calls to action competing in the first screen. Two of those flags are about position, so for a dump of copy that has no order yet, say they do not apply rather than guessing.
- The page architecture. Map the content to sections, using only the sections the content supports: a hero that makes the right reader keep going and carries one primary call to action, the problem and its stakes, the solution and how it works, social proof, features, each paired with what it does for the reader, who it is for, objections and questions, and a final call to action. Leave out any section the copy cannot fill.
- The layout rationale. One or two sentences on why this order works for this reader and this offer. The page has three questions to answer in order: what is this, why should I care, why now.
- The copy restructuring. One line for every prose block in the input, saying where it came from and what it became on the page, for example that a long paragraph about the approach became three steps with a one-line lead. This is the record that nothing was lost in the rewrite.
Part two, the wireframe. Rewrite the copy into the shapes a reader who scrolls and scans needs, and draw it.
- Client copy arrives as big blocks of prose written for someone who reads from top to bottom. Rewrite every block into short headlines, one-line leads, bullets, callouts, pull quotes, stat bands, columns, cards and step sequences. Keep the client's claims, specifics, names, numbers and vocabulary. Change the shape, never the substance. Do not truncate and do not use placeholder text. Headlines, section titles and button text stay recognizably the client's own words, tightened where they are prose.
- Never invent a claim, a number, a testimonial, a customer or a benefit the copy does not state to fill a shape. Where a shape needs something the copy does not have, draw the gap as a labeled empty box and list it under missing in the brief.
- Make it one self-contained page with its styles inside it, every section stacked in one long scroll with nothing hidden behind tabs or accordions, built for a desktop width. Give me the whole page in one code block so I can save it and open it in a browser. Never publish, upload or host it anywhere, because the copy is my client's and has not been released.
- It must look like a wireframe, which means black, white and grays only, with no accent color. Use one sans-serif typeface for everything, DM Sans from Google Fonts, and no serif anywhere. The hierarchy comes from size, weight and gray, so the headline is plainly dominant: hero headline 56 to 72 pixels at weight 500 with tight leading, section headings 36 to 44 pixels, small uppercase labels at 13 or 14 pixels with wide letter spacing, body text 16 to 18 pixels in a mid gray.
- Use only these colors, declared as CSS variables at the top of the page, and no other color anywhere. Each text color is paired with the backgrounds it may sit on, and every pair passes WCAG AA contrast, so small labels, captions and notes stay readable too.
- Backgrounds: --page #ffffff, --section #f5f5f5, --dark #0a0a0a. Lines and hatching: --line #e5e5e5.
- Text on --page or --section: --ink #0a0a0a, --ink-2 #525252, --ink-3 #6b6b6b.
- Text inside a hatched placeholder or on anything filled with --line: --ink or --ink-2 only.
- Text on --dark: --on-dark #fafafa, --on-dark-2 #a3a3a3.
- Parts: on a light background a button is --dark with --on-dark text, or outlined in --ink with --ink text. In the dark section a button is --on-dark with --ink text, or outlined in --on-dark with --on-dark text. A placeholder is --page with --line hatching. The testimonial card's shadow is --ink at low opacity.
- Content sits in a column about 1,100 pixels wide with generous space above and below each section. Alternate white and light gray section backgrounds, with a dark inverted section used sparingly.
- Every section carries a small uppercase label in its top-left corner, numbered and named, like 01 — HERO and 02 — SOCIAL PROOF. The labels are part of the wireframe, because they say what each section is for.
- Images are gray rectangles with fine diagonal hatching, logos are a row of gray pills, testimonials are white cards with a thin border and a subtle shadow, and buttons are solid black with white text or outlined in black, with square corners.
After the wireframe, stop. Do not write the final copy for the rest of the site or style the page further unless I ask.
At the end, tell me in one line that I can have this on a keystroke instead of a paste, and create no file unless I answer yes, in which case save these instructions as a skill wherever my tool keeps them, with one line at the top saying it only runs when I call it by name. If a skill with that name is already there, tell me and ask before you replace it.