The prompts behind the templates.

You are a senior brand and web designer. Before any code is written, create the design system for this client's website and save it as DESIGN.md in the project root. Every later page must follow it.

THE CLIENT
- Business: {{BUSINESS_NAME}}, {{WHAT_THEY_DO_IN_ONE_SENTENCE}}, in {{CITY_OR_REGION}}
- Who visits the site: {{WHO_THE_CUSTOMERS_ARE}}, usually on {{PHONE_OR_DESKTOP}}, at the moment they are {{WHAT_THEY_ARE_TRYING_TO_DECIDE}}
- The one action we want: {{PRIMARY_ACTION, e.g. book a call}}
- What makes them different (real facts only): {{2-4_DIFFERENTIATORS}}
- Personality in three words: {{THREE_WORDS}}
- Existing brand assets to respect, if any: {{LOGO_COLORS_FONTS_OR_NONE}}

STEP 1: GROUND IT IN THE SUBJECT
List 8-10 materials, objects, documents, places and words that belong to this business's real world (for a bakery: flour sacks, order slips, chalk, proofing baskets). Pick ONE of them as the organising idea of the site. The layout itself should express it, not just decorate it.

STEP 2: COMMIT TO ONE AESTHETIC
Choose exactly one direction (for example Swiss editorial, warm print catalogue, quiet luxury, technical documentation, magazine feature). One, not a blend. Write two sentences on why it fits these customers.

STEP 3: WRITE THE TOKENS
Output a single :root CSS block with: --bg, --surface, --ink, --muted, --accent, --accent-ink, --line, --font-head, --font-body, --radius, --max-width, and a 6-step type scale. Rules:
- One accent colour, used sparingly. Body text must pass WCAG AA on its background (state the contrast ratio).
- Two font families maximum from Google Fonts, clearly different from each other. Never Inter, Roboto, Arial, Open Sans, Montserrat or system-ui as the primary face. Body weight 400 or heavier, line length under 75 characters.
- No purple-to-blue gradients, no abstract blobs, no glassmorphism unless it is the chosen aesthetic.

STEP 4: MOTION BUDGET
Allow at most two motion moments (for example: hero load, primary button hover). Everything else is static. Always include a prefers-reduced-motion fallback that shows all content.

STEP 5: THE BAN LIST
Write 10 things this site must never do, specific to this client's industry: the stock photo every competitor uses, the headline everyone writes, the icon grid, the colour scheme the category defaults to. Then add these general bans: three identical icon cards under the hero, text placed across a photo edge or colour seam, hard offset shadows, giant faint background words, fake "trusted by" logo walls, lorem ipsum.

STEP 6: SELF-AUDIT
Reread your DESIGN.md and answer honestly: "If I removed the business name, could this be any company's site?" List anything still generic and replace it before you finish.

Output DESIGN.md only (no website code yet), then a 5-line summary I can show the client.

Replace every {{FIELD}} with your own details before you paste.

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

Build a complete homepage for this business as ONE self-contained HTML file (index.html, embedded CSS and JS, no frameworks, no build step). If a DESIGN.md exists in this project, follow it exactly.

THE BRIEF
{{ONE_PARAGRAPH: who they are, where, what they sell, who buys it, what makes them different, any real numbers (years, reviews, prices)}}
Primary action: {{BOOK / CALL / GET A QUOTE / BUY}}
Phone and email: {{PHONE}} · {{EMAIL}}
Address and hours: {{ADDRESS}} · {{HOURS}}

WHAT THE PAGE MUST CONTAIN (write real copy for all of it, no lorem ipsum, no [brackets]):
1. Header: text wordmark, 4-5 links, click-to-call phone, primary button. Mobile menu that works.
2. Hero: a headline specific to this business (under 12 words; nothing that could belong to a competitor), a subhead naming what they offer, primary + secondary button, a trust line (reviews, years, a guarantee).
3. Services or products with real descriptions and prices if given.
4. Why choose them: 3-4 points backed by the facts in the brief.
5. How it works: 3-4 steps.
6. Proof: 3 testimonials with first name + last initial (mark them clearly as sample testimonials in an HTML comment so the client replaces them).
7. FAQ: 5-6 real questions customers of this type of business ask, in an accessible accordion.
8. Contact: form (name, email, phone, message) with validation and a success message, plus address, hours and map link.
9. Final call-to-action band and a real footer.

DESIGN RULES
- All colours and fonts as CSS variables in one :root block. Two Google Fonts maximum; never Inter, Roboto, Arial, Open Sans or system-ui as the main face.
- One clear layout idea for the hero that fits this business. Not a centred headline over a stock photo, not three identical icon cards underneath.
- Every text block sits on one flat background with WCAG AA contrast; never across a photo edge or colour seam. Soft shadows only, no hard offset shadows.
- 6-10 real photos hotlinked from images.unsplash.com that match the business (check each URL works and shows what the alt text says). Every image has alt text and width/height.
- Fully responsive at 375px, 768px and 1440px. Tap targets at least 44px.
- Content visible with JavaScript off. Gentle reveal animations at most, with a prefers-reduced-motion block.

BEFORE YOU FINISH
Open the page at each width and fix anything that overlaps, overflows or looks cramped. Test the menu, the accordion and the form. Search the file for "lorem", "TODO" and "[" and remove them. Then tell me: the fonts and colours you chose, the hero idea, and anything I need to replace with the client's real assets.

Replace every {{FIELD}} with your own details before you paste.

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

Turn this pw/templates template into a real website for my client. Keep the layout and the design idea; change everything that belongs to the demo business.

TEMPLATE: {{PATH_TO_TEMPLATE.HTML (or the template's sites/ folder for the 4-page version)}}

MY CLIENT
- Business name: {{BUSINESS_NAME}}
- What they do (services or products with prices): {{SERVICES_AND_PRICES}}
- Location, phone, email, address, hours: {{CONTACT_DETAILS}}
- Founded / team / key numbers (only true ones): {{FACTS}}
- What makes them different: {{2-4_DIFFERENTIATORS}}
- Brand: logo file {{LOGO_PATH_OR_NONE}}, colours {{HEX_VALUES_OR "pick from the logo"}}, fonts {{FONTS_OR "keep the template's"}}
- Real reviews or testimonials: {{PASTE_OR_NONE}}
- Real photos: {{FOLDER_OR_NONE}}

STEP 1: MAP THE TEMPLATE
List every demo-business detail in the file: business name, people's names, phone numbers, emails, addresses, prices, years, statistics, testimonials, service names, image alt text, <title> and meta description. Note where the colours and fonts are defined (look for the :root block and the Google Fonts link).

STEP 2: REBRAND
- Colours and fonts: change them at the source (CSS variables and the font link), then check that nothing on the page still shows an old colour (hard-coded hex values, inline styles, SVG fills).
- Copy: rewrite every section for the client in the same length and rhythm as the original so the layout still fits. Keep the template's structure (if it is built around an idea, such as a menu card or a ledger, keep that idea and translate it to the client's world).
- Facts: use only the facts I gave. Where the template expects something I didn't give (a statistic, a fourth testimonial, a team member), remove that element cleanly or ask me, never invent it.
- Photos: use the client's photos where given; otherwise choose Unsplash photos that fit their business, check each URL loads and shows what the alt text says.
- Update <title>, meta description, alt text, form options and the footer.

STEP 3: LEFTOVER CHECK
Search the whole file for the demo business's name, its people, its phone number, its email domain, its city and its service words, plus "lorem", "TODO" and "[". List anything found and fix it. Every number on the page must come from my inputs.

STEP 4: CHECK IT
Open it at 375, 768 and 1440px. Make sure longer or shorter names and copy did not break the layout, contrast still passes AA with the new colours, and every link, button and form works.

Finish with: what you changed, anything you removed because I had no real data for it, and what I still need from the client.

Replace every {{FIELD}} with your own details before you paste.

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

Edit the website copy below so it reads like a real person at {{BUSINESS_NAME}} wrote it. This is a style edit only: every fact, number, name, price, promise and claim must stay exactly as it is. Do not add new claims.

WHO IS SPEAKING: {{OWNER_NAME_OR_"the team"}}, talking to {{CUSTOMER}}. Tone: {{THREE_WORDS}}.
COPY TO EDIT:
{{PASTE_COPY}}

STEP 1: FIND THE TELLS
List every instance of these AI-writing habits in the copy, quoting the phrase:
1. Puffed-up significance: "a testament to," "pivotal," "plays a vital role," "a rich tapestry," "stands as."
2. Brochure words: elevate, unlock, seamless, robust, leverage, delve, game-changer, cutting-edge, state-of-the-art, tailored, curated, journey, empower, holistic, bespoke (unless the business genuinely uses the word), "in today's fast-paced world."
3. Signposting and filler: "It's important to note," "It's worth mentioning," "When it comes to," "At the end of the day," "In conclusion."
4. Stacked transitions: Moreover, Furthermore, Additionally, That said, With that in mind, starting sentence after sentence.
5. "It's not just X, it's Y" and "not only X but also Y" constructions.
6. Sentences ending with a tacked-on "-ing" phrase that adds nothing ("…, ensuring peace of mind." "…, highlighting our commitment to quality.").
7. Everything in threes: three adjectives, three benefits, three-part lists, again and again.
8. Vague authority: "experts agree," "studies show," "many customers say," with no source.
9. Same-length sentences in a row; every paragraph the same shape.
10. Formatting tells: em dashes everywhere, bolded labels at the start of every bullet followed by a sentence repeating the label, emoji used as bullet points.

STEP 2: REWRITE
- Replace each tell with the plain thing the sentence was trying to say. If a sentence says nothing once the tell is removed, delete it.
- Vary rhythm: mix short sentences with longer ones. Let some paragraphs be one line.
- Prefer concrete details already present in the copy (times, names, places, numbers) over adjectives.
- Use contractions and everyday words where the tone allows. Read it aloud in your head; if a real person wouldn't say it, change it.
- Keep headings short and specific. Keep calls-to-action as clear verbs.

STEP 3: CHECK
Show the rewritten copy, then a table of every fact in the original (numbers, names, prices, promises) confirming each is unchanged in the new version. Note anything you removed entirely and why.

Replace every {{FIELD}} with your own details before you paste.

checking your plan…

Audit this prospect's live website to find real, confirmable problems I can mention when I reach out. I need evidence, not opinions.

PROSPECT: {{BUSINESS_NAME}} · {{URL}} · {{TYPE_OF_BUSINESS}} in {{CITY_OR_COUNTRY}}

STEP 1: CHECK (open the real pages; do not guess)
Visit the homepage and 3-5 key pages (services, contact, about, a product or listing page). Check desktop and mobile widths. Look for:
- Broken things: dead links, buttons that go nowhere (href="#"), broken or missing images, empty sections, forms that don't submit, embeds showing errors (Instagram, Facebook, maps, booking widgets).
- Leftover template content: lorem ipsum, "Your Title Here," placeholder images, another company's name, unedited theme demo text.
- Wrong or contradictory information: different phone numbers in header and footer, opening hours that don't add up, a "since 1998" next to "25 years" that is now wrong, copyright years years out of date, an address that doesn't match the map.
- Typos and grammar errors in headings, buttons or menus (copy the exact text).
- Mobile problems: text cut off, menu not opening, buttons too small, horizontal scrolling.
- Trust problems: no prices anywhere, no reviews, no real photos (only stock), no contact details above the fold, "Not secure" (no HTTPS).
- Speed and search: very slow first load, missing or duplicated page titles, the same meta description on every page, keyword-stuffed titles.
If the site blocks automated access, tell me and ask for screenshots.

STEP 2: CONFIRM
For each problem, give: the exact page URL, where on the page, what it shows (quote the text or describe exactly), and how to see it yourself. Re-check each one once. If you can't confirm it, drop it. Never invent or exaggerate a flaw.

STEP 3: RANK FOR OUTREACH
Score each confirmed flaw 1-5 on: how visible it is to their customers, how easy it is to understand in one sentence, how likely it costs them enquiries, and how un-embarrassing it is to mention politely. Pick the top 3 and, for each, write one neutral sentence I could use to open an email ("I noticed the 'Book a visit' button on your homepage doesn't go anywhere on mobile.").

STEP 4: NOTE WHAT'S GOOD
List 2-3 genuine strengths of the business (real reviews, years trading, a strong photo, a clear offer) that I can mention honestly.

Output: a table of confirmed flaws (page, location, evidence, severity), the top 3 openers, and the strengths. No redesign suggestions yet.

Replace every {{FIELD}} with your own details before you paste.

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…

checking your plan…