Prompt patterns
Reusable phrases you can drop into a longer prompt.
Patterns, by the part they fill
13 of 13Empty compartments are shown on purpose. They are the work list, not a gap to hide.
- Goal13
- Audience10
- Layout12
- Style10
- Tone16
- Background11
- Navigation7
- Feature4
- Component17
- Copy10
- Motion7
- Constraint12
- Deliverable4
13 of 13 pattern slots filled
Goal
13 phrasesMake supporting the cause the main visitor goal. Explain the problem, show what the organisation does about it, and connect each donation option to a concrete result.
NonprofitPaymentsMake the main goal of the site to encourage visitors to get in touch. Give them a clear contact option and explain what will happen after they send a message.
Local businessProfessional servicesMake subscribing for updates the main visitor goal. State what will be sent, how often it will arrive, and why it is worth making room for in the reader's inbox.
Personal blogNewsletter signupMake booking an appointment the main visitor goal. Show the available service choices, explain what the appointment includes, and keep the route to choosing a time easy to find.
Local businessProfessional servicesMake requesting a quote the main visitor goal. Explain what information is needed, keep the request manageable, and say when the visitor can expect a response.
Local businessProfessional servicesMake the main goal to help visitors find the right product and buy it with confidence. Show the information they need to decide, then provide a clear route to purchase.
Online storePaymentsMake the main goal to help visitors plan an in-person visit. Put the address, opening times, directions, and any arrival instructions where they are easy to find.
Local businessEventMake the main goal of the page to help visitors quickly understand what is being offered, who it is for, and why it is useful.
Saas productLanding pageMake the main goal to help interested visitors become active members of the community. Explain who can join, what taking part involves, and the first step to get involved.
NonprofitMake downloading the resource the main visitor goal. Explain what the resource contains, who it will help, and what the visitor needs to provide before receiving it.
Landing pageMake this the main visitor outcome: provide customer support.
PatternMake this the main visitor outcome: publish content.
Personal blogBlogMake this the main visitor outcome: showcase work.
Portfolio
Audience
10 phrasesThe main audience is online shoppers who compare products carefully before buying. They need clear differences, honest product details, delivery information, and reassurance about returns.
Online storePaymentsThe main audience is potential clients looking for someone to create work for them. They want to judge the quality and range of past projects, understand the creator's role, and know how to start a conversation.
PortfolioGalleryThe main audience is people considering this event for the first time. They need to know what will happen, who it is suitable for, where to go, what to bring, and how to attend.
EventMap directionsThe main audience is people who live nearby and are deciding whether to visit today. They need the offer, location, opening times, and next step to be clear without searching.
Local businessRestaurantThe main audience is people looking for specialist help but unsure which provider to trust. They need plain evidence of experience, a clear process, and an easy way to discuss their situation.
Professional servicesContact formThe main audience includes people visiting on a phone with limited time and attention. They are likely trying to find one fact or complete one task while away from a desk.
Local businessEventThe main audience is readers who return regularly for useful ideas and new articles. They want to see what is new, understand the subjects covered, and choose whether to subscribe.
Personal blogBlogThe main audience is people who already care about the cause and are looking for a useful way to help. They need to see the current need, the available forms of support, and the result their action can have.
NonprofitThe main audience is a team comparing software tools for a shared problem. They need to understand the practical benefit, who on the team will use it, how it fits their work, and what it costs.
Saas productPricing tableThe main audience is people arriving from a specific advert, email, or shared link. They have limited context and need the page to answer one immediate question before offering one clear next step.
Landing page
Layout
12 phrasesShow repeated items in 3 columns on wide screens, with the same image area, heading position, and action on every card. Limit each description to two lines before the link so the row stays tidy. Stack the cards into one column on phones and do not use unequal card heights to create decoration.
PatternMake the main content column about twice as wide as its supporting column, then offset one image or callout to create tension. Keep the heading, body, and primary action in one clear left-to-right reading order. On phones, stack everything into a single column and do not use empty space as the only way to show importance.
PatternCreate a separate page for each major task, such as services, pricing, work, and contact, with no more than 6 links in the main navigation. Give every page one clear heading and a link back to its parent section where needed. Do not repeat the full homepage on every page or create pages with only one short paragraph.
PatternSet the main reading column between 65 and 75 characters wide, with a large headline, byline, and estimated reading time above it. Break the article with a subheading every 3 to 5 paragraphs and use full-width images only when they add evidence or atmosphere. Do not stretch paragraphs across the full browser width or interrupt the reading flow with unrelated panels.
PatternArrange 5 to 8 related pieces of content in tiles, giving the most important one twice the area of a standard tile. Use one heading or image per tile and keep the gaps the same throughout the group. Do not make every tile clickable unless each leads somewhere useful.
PatternCentre the main content in a column between 680 and 760 pixels wide, with one heading and one primary action per section. Use generous space between 4 to 6 short sections so each idea can be read before the next begins. Do not add sidebars, floating promotions, or competing columns around a task that needs full attention.
PatternPut the main navigation on the left, a row of 3 to 5 summary figures at the top, and the working detail below. Keep filters and date controls next to the data they change, with the primary action in the upper right. On small screens, move navigation behind a menu and avoid squeezing tables into unreadable columns.
PatternReserve a 220 to 280 pixel side area for section links, filters, or account details, and keep the main content at least twice as wide. Highlight the current section and keep the side area visible while related content scrolls. On phones, move those choices above the content or behind a clearly labelled button, never leave them off-screen.
PatternArrange image-led items in 2 columns on tablets and 3 or 4 columns on wide screens, allowing taller images to take more vertical space. Keep captions attached to their own image and preserve a sensible top-to-bottom order for keyboard users. Do not use this arrangement for price comparisons, forms, or text that must be read in sequence.
PatternDivide the first screen into two equal panels, giving each a short heading, one supporting sentence, and one action. Use a clear difference in image, colour, or label so visitors can tell the choices apart immediately. Stack the panels vertically on phones and do not place more than two competing routes in the split.
PatternArrange the page as a sequence of opening promise, proof, benefits, detail, and final action, with anchor links for sections longer than six screens. Repeat the main action near the beginning and end so it is available after the visitor has read the evidence. Do not duplicate the same content into separate pages or rely on endless scrolling without section headings.
PatternSplit the page into 3 to 5 full-width bands, each with a contained content area and one clear purpose such as proof, benefits, or contact. Change the background colour or image only when the next section needs a distinct mood. Do not switch backgrounds on every short paragraph or let text run wider than the main reading column.
Pattern
Style
10 phrasesUse a near-black base with two slightly lighter surface levels for cards and controls, then set primary text in off-white. Reserve one bright accent for links, key numbers, and the main action, with body text meeting at least 4.5 to 1 contrast. Do not place grey text on grey panels or fill every area with glowing effects.
PatternUse a calm navy, charcoal, or deep green base with one restrained action colour, and keep headings consistently aligned to the grid. Set body text at 16 to 18 pixels with clear labels, figures, and section headings that make scanning easy. Do not use gimmicky illustrations, crowded colour palettes, or vague claims without supporting evidence.
PatternUse rounded corners, 2 or 3 cheerful colours, and simple illustrations or photos with visible personality. Keep headings short, buttons obvious, and spacing consistent so the energy does not become clutter. Do not use novelty type for body copy or make every element bounce, spin, or compete for attention.
PatternPair one expressive display typeface for headlines with a highly readable text face, keeping the article column between 65 and 75 characters wide. Use a large lead image, clear bylines, pull quotes, and subheadings every few paragraphs to guide the eye. Do not turn every block into a card or interrupt the reading rhythm with unnecessary controls.
PatternUse a warm off-white base, one earthy accent colour, and photographs that show people or places in natural light. Keep headings direct and body copy in short paragraphs, with rounded details used only on buttons and small panels. Do not use childish illustrations, excessive exclamation marks, or so many colours that the page loses calm.
PatternUse a minimalist visual style. Plenty of white space, a single accent colour, no decorative graphics, and no more than two typefaces.
PatternChoose one reference period, then use 2 or 3 matching cues such as a muted palette, period-style type, or grainy photography. Keep modern navigation, readable text, and current accessibility expectations beneath the visual treatment. Do not combine unrelated decades or make the interface harder to use for the sake of nostalgia.
PatternUse real photographs of materials, hands, tools, or the making process alongside a warm base palette and slightly irregular illustration details. Keep labels and buttons clean enough to read at a glance, with 2 or 3 tactile details per page rather than decoration everywhere. Do not fake handmade character with unreadable script type or stock workshop scenes.
PatternUse no more than two typefaces, a quiet neutral palette, and large areas of breathing room around products or images. Let one refined detail, such as a thin rule, embossed texture, or close-up photograph, carry the character of each section. Do not use flashy discounts, multiple bright accents, or oversized badges that make the page feel cheap.
PatternSet one oversized headline style at 48 to 72 pixels for key messages, then pair it with short body copy and generous empty space. Use one saturated accent against a restrained base, with simple rectangular panels and crisp images. Do not add several typefaces, gradients, and decorative effects all at once.
Pattern
Tone
16 phrasesWrite as if explaining the offer to a helpful neighbour. Use contractions, keep most sentences under 20 words, and address the reader as "you". Never use "utilise", "leverage", or "seamless", and say what the thing does before saying why it is good.
PatternLead each section with one confident claim, then support it with no more than three short points. Use active verbs and concrete outcomes, keeping headings under 8 words so the page has a strong rhythm. Do not stack several exclamation marks, promises, or calls to action in the same paragraph.
PatternUse short, steady sentences and verbs that describe the next step without urgency. Explain one idea at a time, leave out exclamation marks, and give the reader enough information to choose without being pushed. Do not use countdowns, alarm words, or claims that imply a decision must happen immediately.
PatternChoose precise nouns, complete sentences, and one carefully chosen detail instead of a pile of adjectives. Keep headings below 7 words and let each paragraph make one point before moving on. Do not use slang, hype, or ornate phrases that hide a simple meaning.
PatternState the benefit first, then support it with a specific result, example, or limitation. Prefer "we do" and "you can" over "we hope" and "you might", while keeping claims tied to facts the team can verify. Do not use absolute words such as "always", "never", or "best" without evidence.
PatternUse one original image or comparison where it makes an idea easier to remember, then explain the literal meaning in the next sentence. Vary sentence openings and choose specific sensory details instead of generic praise. Do not use a metaphor for every feature or let playful wording hide what the visitor can actually do.
PatternStart sentences with active verbs and alternate short lines with longer explanations so the copy feels in motion. Keep headings under 6 words and use one exclamation mark at most on the whole page. Do not confuse energy with urgency, repeated superlatives, or a pile of short fragments that makes the page tiring to read.
PatternRemove filler and keep each paragraph to 2 or 3 sentences, but add one useful human detail such as who is behind the work or what happens next. Use contractions and direct verbs, with no more than one adjective before a noun. Do not reduce every message to a slogan or remove the context someone needs to feel welcome.
PatternLead with the useful answer, then add the detail a reader needs to act, using headings under 8 words and paragraphs under 3 lines where possible. Prefer plain verbs such as "start", "choose", and "see" over trend words such as "unlock" or "supercharge". Do not use startup jargon, fake informality, or references that will date the page quickly.
PatternRead every sentence aloud and choose the version you would actually say, keeping contractions and a mix of sentence lengths. Use ordinary words, name the subject early, and allow one small human aside where it helps the reader. Do not force jokes, perfect symmetry, or the same sentence pattern through every section.
PatternUse one or two concrete sensory details, familiar objects, or time markers to place the reader in a remembered moment. Keep the main message and actions in present-day language so the page remains easy to use. Do not invent a history, overuse old-fashioned phrases, or make every sentence sound like a story from the past.
PatternChoose the most precise word, remove repeated qualifiers, and keep each sentence focused on one idea. Describe quality through a material, action, or result instead of a string of superlatives. Do not use "luxurious", "elevated", or "world-class" unless the sentence proves what those words mean.
PatternName the system, input, output, and relevant limit for each technical claim, using units and version numbers when they matter. Put the plain result first, then give the implementation detail in a short list of no more than 5 points. Do not use unexplained acronyms, hide uncertainty, or call a component secure, fast, or compatible without defining the condition.
PatternWrite the plain-language result first, then introduce one technical term and define it the first time it appears. Keep each sentence to one concept, use a short example after an unfamiliar idea, and expand every acronym on first use. Do not remove useful detail or assume the reader already knows the team's internal vocabulary.
PatternSupport important claims with a source, date, named customer, or clear explanation of how the result was measured. Say what is known, what is estimated, and what the visitor should expect next, using the same terms throughout the page. Do not invent testimonials, hide caveats, or create urgency from information the reader cannot verify.
PatternAddress the reader as "you", use contractions, and acknowledge the practical concern behind the request before explaining the solution. Keep headings direct, paragraphs under 3 sentences, and promises tied to a concrete next step. Do not use emojis, overfamiliar jokes, or corporate phrases such as "moving forward" and "best in class".
Pattern
Background
11 phrasesPlace one or two soft colour glows near the edge of the opening section, keeping each behind the content and away from body text. Let the brightest area sit near the main action, with the rest of the page returning to a plain dark surface. Do not animate the glow or use more than two competing colours.
PatternBlend 3 related colour areas across the opening section, keeping the centre behind the heading calm enough for readable text. Let one colour be noticeably quieter than the others so the page still has a visual resting place. Do not use a rainbow, sharp colour boundaries, or more than three dominant hues.
PatternPlace 2 or 3 large abstract forms at the outer edges of a section, with no more than 10 percent opacity where text sits above them. Use one shape family and two related colours so they feel intentional. Do not place shapes behind small text, buttons, or form fields, and do not let them drift around the page.
PatternApply a fine paper or grain texture at no more than 5 percent opacity over a plain base colour. Keep the texture uniform behind the whole section and use flat panels where forms or dense text need extra clarity. Do not use a photographed texture with visible stains, folds, or words.
PatternBlend two neighbouring colours across one opening or callout section, with the lightest area positioned behind the main text. Keep the change gradual over the whole section and use a solid colour behind any small text or form control. Do not use high-saturation colour pairings that make the words vibrate.
PatternRepeat one geometric motif, such as a circle, triangle, or square, at a spacing of 48 to 80 pixels across one section. Use only two low-contrast colours and leave clear space behind headings and buttons. Do not mix several unrelated shapes or make the pattern so dense that it reads as noise.
PatternUse a cream, sand, or warm grey base across the page, then pair it with dark charcoal text and one earthy action colour. Separate major content areas with a slightly lighter or darker version of the same family rather than stark white. Do not combine it with cold blue-grey panels that make the palette feel accidental.
PatternDraw thin grid lines about 32 pixels apart behind a product, data, or technical section, with one stronger line every fourth interval. Keep labels and actions on solid surfaces above the grid so they remain readable. Do not use the grid behind every section or make it look like a chart that carries real data.
PatternSet a fine dot or line grid at roughly 24 pixel intervals behind an opening or data-focused section. Keep the marks at under 8 percent contrast from the base surface so headings and controls remain dominant. Do not run the grid behind long body copy or combine it with another strong pattern.
PatternSet the page on one near-black or deep navy surface, then use off-white text and one bright action colour. Keep body text at least 4.5 to 1 against the background and reserve lighter panels for content that needs separation. Do not mix several dark shades just to make the page look busy.
PatternSet the whole page on one soft grey, stone, or cream surface, then use white panels only for content that needs to be separated. Keep the background consistent across at least 3 adjacent sections so the reading flow feels settled. Do not add gradients, textures, or shadows merely to fill empty space.
Pattern
Feature
4 phrasesPlace a search input near the content, start suggesting matches after 2 characters, and submit the full query on Enter. Show the result count, highlight the matching words, and offer two broader ideas when there are no results. Do not make visitors choose a category before they can search or show an empty page without guidance.
SearchLet visitors add items from a clear list, review quantity and total in a persistent basket, then choose delivery or collection before payment. Show fees, estimated timing, and any unavailable item before the final confirmation. Do not hide charges until the last step or lose the basket when the visitor changes one option.
Online orderingOffer sign in and account creation with email, password, and a clearly labelled reset option. After sign in, show the visitor their name, the 3 to 5 most useful account actions, and a visible sign-out control. Do not require an account before a visitor can browse, and explain why any personal detail is needed.
User accountsAsk for date, time, party size or service type, and contact details in that order, showing only times that are available. Confirm the booking immediately with the key details and send the same summary by email or message. Do not make visitors submit a form before showing whether a time can be booked.
Booking
Component
17 phrasesList 6 to 10 common questions using the words a customer would use, with each answer hidden until its question is opened. Keep answers to one short paragraph and allow only one or several items to stay open without moving the visitor back to the top. Do not bury essential pricing or contact details inside the answers.
PatternPresent 3 to 6 key benefits as equal cards, each with a short heading, one sentence, and an optional simple icon. Keep the same content order and card height across the row, then stack them in one column on narrow screens. Do not hide important details behind hover effects.
PatternAfter a visitor submits or changes something, show a message beside that control explaining whether it is working, complete, or needs attention. Pair a short label with an icon and plain text, and move keyboard focus to serious errors. Do not rely on red or green alone, and keep successful confirmations visible for at least 5 seconds.
PatternChoose one main action for the page and label its button with the result, such as "Book a table" or "Start a free trial". Give that button the strongest colour contrast and repeat it near the top and after the main supporting content. Do not give secondary actions the same visual weight.
PatternPlace a wide search input at the top of the content area with an example query in its placeholder. Start showing suggestions after 2 characters, submit on Enter, and display the result count above the matches. When nothing matches, keep the query visible and offer two broader searches instead of an empty page.
PatternPlace the full street address and opening hours beside an interactive map, followed by a button that opens directions in the visitor's map app. Keep the address visible as text so it can be copied and read if the map fails. On phones, show the directions button before the map.
PatternOpen the overlay only after a visitor chooses an action, and give it one heading, one task, and a visible close button. Let Escape and a click outside close it, then return keyboard focus to the control that opened it. Do not show it automatically on page load or place a second overlay on top.
PatternShow images in a tidy grid of thumbnails, then open the selected image at a larger size over the same page. Include previous, next, and close controls, a short caption, and the current position such as "3 of 12". Do not load every full-size image before the visitor asks to see it.
PatternPlace a short enquiry form beside the contact details with fields for name, email, and message. Mark required fields clearly, validate mistakes beside the relevant field, and show a confirmation after submission. Do not clear what the visitor typed when an error occurs.
PatternShow 3 or 4 verified figures in a single row, with a large number and a plain label explaining what it measures. Add a timeframe or source wherever the number could be misunderstood, such as "92% in 2025". Do not use counters that animate from zero or numbers without context.
PatternCompare no more than four plans using the same feature order in every column. Show the currency, billing period, included limits, and full button label for each plan, then mark one recommendation only when there is a clear reason. Do not hide setup fees, exclusions, or the monthly equivalent of annual billing.
PatternUse one heading of no more than 12 words, a supporting line of up to two sentences, and one primary button in the first screen. Pair them with a relevant image or product view that does not compete with the text. Do not rotate through multiple messages or place more than two actions beside each other.
PatternUse 2 to 5 short labels in one row, mark the first choice as active, and replace the panel beneath it when another is selected. Let keyboard users move between choices with the arrow keys, and stack the content instead when labels no longer fit on one line. Do not place essential information in a panel most visitors will never open.
PatternArrange 4 to 8 milestones in chronological order, each with a date, short heading, and one-sentence explanation. Mark the current step clearly and connect the items with one continuous line, switching to a vertical list on phones. Do not alternate items across two columns when that makes the reading order unclear.
PatternPlace up to six verified customer or partner logos in one evenly spaced row beneath the opening section. Give every mark the same visual height and include its organisation name as alternative text. Do not stretch logos or imply a relationship that has not been confirmed.
PatternList 4 to 8 services, each with a short heading, one sentence describing the customer outcome, and a link to details. Group closely related services under plain headings when the list is longer than six items. Do not use the same generic description or "Learn more" label for every item.
PatternShow 3 customer quotes of no more than 40 words, each naming the person, their role, and their organisation when permission allows. Choose quotes that describe a specific result or experience, and link to a fuller case study where one exists. Do not invent quotes, use stock portraits, or publish private details without consent.
Pattern
Copy
10 phrasesStart headings with a clear outcome or action, then use active verbs such as "book", "compare", or "send" in the supporting copy. Give each section one primary call to action and label buttons with the result the reader will get. Do not use vague links such as "click here" or give two actions equal weight.
PatternLead each feature with the result for the visitor, using a sentence such as "Spend less time..." or "Know exactly..." before naming how it works. Support each benefit with one concrete detail, example, or limit so it does not read like a promise. Do not list features without saying what they help someone achieve.
PatternKeep headings under 8 words, paragraphs to 2 sentences, and most sentences below 18 words. Remove filler openings such as "in order to", repeated benefits, and adjectives that do not change the meaning. Do not cut the detail needed to understand the price, process, limit, or next step.
PatternAddress the reader as "you", use contractions, and open complicated sections with the question a visitor is likely to ask. Keep the reply in ordinary language and vary sentence length so it sounds spoken rather than scripted. Do not add fake banter, forced jokes, or slang that would feel unnatural for the audience.
PatternChoose the familiar word over the specialist one, keep sentences under 20 words, and explain any unavoidable term the first time it appears. Put the subject and action near the start of each sentence, then use a short example for anything abstract. Do not use "utilise", "facilitate", "seamless", or unexplained acronyms.
PatternUse complete sentences, specific nouns, and a clear order of information: what it is, who it helps, how it works, and what to do next. Support claims with a named result, timeframe, or source where one exists. Do not use emojis, casual slang, inflated promises, or a stiff stream of corporate nouns.
PatternAnswer the reader's likely worry directly, then explain the next step, expected timing, and who can help if something goes wrong. Use evidence and transparent limits, including what the visitor needs to provide before an outcome is possible. Do not promise "no risk", hide a condition, or use urgency to cover missing information.
PatternUse the phrase a visitor would search for in the page heading, opening paragraph, and one relevant subheading, then write naturally around it. Give each section a descriptive heading and answer the underlying question with specific detail. Do not repeat the phrase in every sentence, hide keywords, or write a paragraph that sounds unlike a human explanation.
PatternStructure the page as situation, tension, useful change, and next step, giving each stage a short heading. Use one real detail, quote, or measured result to make the change believable, and keep the visitor as the person moving through the story. Do not invent a customer story, bury the offer in background, or end without a clear action.
PatternState the plain result first, then name the input, output, unit, version, or condition that makes the claim precise. Define every acronym on first use and use a short list of no more than 5 points for implementation details. Do not call something compatible, secure, or fast without saying how that was assessed.
Pattern
Motion
7 phrasesEvery click or tap must produce a visible change within 100ms, even when the real work takes longer. Press the button in slightly, then show a spinner or a disabled state while it waits. Never leave a control looking untouched after the visitor has used it.
PatternWhen a chart first scrolls into view, animate the bars or the line to their final values over about 600ms, staggering series by 80ms. Show the axis labels and the final numbers immediately so the data is readable before the animation ends. Run it once per visit.
PatternWhen the visitor moves between pages, crossfade the content over about 200ms rather than cutting to the new page. Keep the header and navigation fixed so only the body changes. Never delay the first paint waiting for the animation, and skip it entirely under reduced motion.
PatternDo not animate anything on load or on scroll. The only movement allowed is immediate feedback to a visitor action, such as a button pressing in or a menu opening. No carousels that advance on their own, no counters that tick up, no floating shapes.
PatternMove the background image at roughly 70 percent of the scroll speed of the text above it, so the page feels layered. Keep the offset under 100px across the whole section, never move text this way, and switch it off under reduced motion or on touch devices.
PatternAs the visitor scrolls, fade each section in and lift it about 15px into place. Around 250ms per element, with a 60ms stagger between items in the same group. Play it once, do not replay when scrolling back up, and disable it completely for anyone who prefers reduced motion.
PatternWhen the cursor is over a button, link, or card, change it visibly within 150ms. Darken the background or shift the border, and change the cursor to a pointer. Keep the element the same size so the layout does not move. Give keyboard focus the same visible treatment.
Pattern
Constraint
12 phrasesTreat this as a firm implementation constraint: ask before adding paid services.
PatternTreat this as a firm implementation constraint: do not add a backend.
PatternTreat this as a firm implementation constraint: do not add authentication.
PatternTreat this as a firm implementation constraint: fast on slow connections.
PatternTreat this as a firm implementation constraint: keyboard accessible.
PatternTreat this as a firm implementation constraint: mobile-first.
PatternTreat this as a firm implementation constraint: preserve existing content.
PatternTreat this as a firm implementation constraint: preserve existing functionality.
PatternTreat this as a firm implementation constraint: respect reduced motion.
PatternTreat this as a firm implementation constraint: screen-reader friendly.
PatternTreat this as a firm implementation constraint: use existing brand colours.
PatternTreat this as a firm implementation constraint: use placeholder content only where information is missing.
Pattern
Deliverable
4 phrasesDeliver a responsive site with working navigation, the primary action, and every stated interaction usable on desktop and phone. Use realistic draft copy where facts are missing and mark any claim that still needs confirmation. Do not leave broken links, dead buttons, or placeholder behaviour that looks finished.
PatternLay out the page in simple blocks for the header, opening message, proof, main content, and final action, naming what goes in each area. Use grey-scale boxes and short labels rather than finished imagery or decorative type. Include desktop and phone arrangements, and do not treat the outline as approval of the final visual style.
PatternReturn a numbered plan with 4 to 8 steps covering page structure, needed content, key interactions, and the order to build them. Call out assumptions, missing information, and the one or two decisions the visitor needs to make before work starts. Do not fill the plan with generic advice or start writing the finished page before the plan is agreed.
PatternProvide one complete visual direction for the main page, including the colour palette, type scale, image treatment, and key components. Show the opening section, one content section, and the final action so the system can be judged as a whole. Label any invented logo, image, or claim as a placeholder, and do not return code as the main output.
Pattern