--- name: page-skill-v3 description: "Write a real page for a real business: hit the industry's visual codes, write the design as a short spec and tokens before any CSS, decide the one claim only this business can make, keep the headline short and the deck specific, avoid repeating your own last three builds, earn belief with direct-response copy, headings as statements with questions kept to the FAQ, ship rich sections with verified photography and sample-tagged placeholders, make it findable and quotable (SEO + AEO), polish the interface details, then run a seasoning pass whose motion enacts what the business does." --- You are writing a real page for a real business. Two things decide whether it is good: whether a stranger stops, and whether they believe you. Design earns the stop. Words earn the belief. ## 0 — Before anything: three theses, commit, write the spec Never begin by writing code. Write three one-line art directions, each with a different centre of gravity — for example: (a) the material of the work itself, (b) the customer's state of mind, (c) the one fact or number the business owns. Show all three. Recommend one and say why in a sentence. If the user is there, let them pick. Then **commit fully** — a page that hedges between two directions is exactly what machine-made looks like. **Commit means write it down.** Before any HTML, write the design as a short spec for the thesis you chose — one document, fixed skeleton, in this order: **the object** (the one physical thing of this business the design is drawn from, and the one thing a visitor will remember) · **colours**, each with a role and a rule of use ("stamp red: decisions only"; "lamp: only inside the night band") · **type**, the faces and the named scale · **layout** grammar · **depth** (how hierarchy is shown without glow) · **shapes** (the radius language) · **component recipes** · **Do / Don't**, five lines. The tokens in §1 are derived from this spec, never the other way round. The spec is where decisions are made in words, while changing one costs a sentence; the page is where they get executed. A decision made mid-CSS is local and improvised; a decision made in the spec is coherent across the whole page and across every later session that reads it. It is also the user's steering wheel: thirty seconds to read, one line to veto, before sixty kilobytes of HTML exist. In Claude Code write it as `DESIGN.md` and lint it; in a chat, show it as a block before the page and stop for a beat if the user is there. Keep it short — a page's worth, not a manual. Ask at most three questions first, and only ones whose answer changes the page. Never interview someone who just wants to see something. **Then write the beats.** Before any section list, map 4-7 beats the visitor moves through, from recognition ("this is about me") to commitment ("I will do the thing"). Name the emotion at each beat. Sections exist to deliver beats; a section that serves no beat is padding, and a beat with no section is the hole your page will be judged on. ## 0.5 — Category first (do this before the theses, not after) A visitor decides what kind of place this is in about one second, before reading a word. That judgement runs on **category codes** — the colours, imagery, shapes and section order the industry has taught everyone to expect. Miss them and the page feels wrong even when it is beautiful, and "wrong" costs more than "ordinary". This is the failure mode of every page skill, including the last version of this one: it produced a design-magazine feature ABOUT a business instead of that business's own site. **Order of operations: belong, then differentiate.** 1. Name the category and write its three visual codes and its one cliché. `CATEGORY-CODES.md` has rows for the common ones; if the business is not there, write the row yourself first. 2. Ship the codes. They are not optional and they are not where you are creative. 3. Put every gram of ambition into the layer above: register, signature device, the grid break, the type moment, and the copy. **Two tests.** Before building: if you covered every word, would a stranger name the industry within a second? After building: does this look like a site of this category made by someone with taste — or like an editorial piece about the category? The second is failure. A page can be 90% category and 10% signature and still be the best in its industry, because everyone else is 100% category and 0% signature. ## 0.6 — Reproduction mode (the customer already has a design) When rebuilding an existing page, theme or reference rather than inventing one: **the design is theirs, the build is yours.** - **Copy, measured not guessed:** layout, section order, palette, type scale, spacing, radii, component recipes. Read the real values off the source. - **Author from scratch, never inherit:** heading hierarchy, landmarks, alt text, link text, page title and meta description, structured data, and the seasoning pass below. A reproduction that inherits the source's two `

`s, its `h1 → h6` jump and its nine "read more" links has copied the bugs along with the design. Everything in sections 2 and 3 still applies in full. - **Never hotlink someone else's assets.** If the reference's photographs belong to a theme vendor or another business, do not point at their server: leave the slots designed and empty, name the shot, and say plainly in one line whose images they were and why they are not included. ## 0.7 — Do not repeat yourself across builds The failure nobody notices from inside a single project: every page you make starts to look like every other page you make. Same warm-paper ground, same ink text, same single accent, same section rhythm — different businesses, one house style. It reads as taste to you and as a template to everyone else. **Before building, write one fingerprint line** for this page: structure/grammar · palette family · type pairing · signature device · motion idea · section rhythm. **Compare it against the last two or three pages you built.** If it matches on most of those six, change something structural — not the colour of a button. Keep the lines in a running list if the user has one; if you have no history to compare against, say so and pick the less obvious option of the two you were weighing. **Palette traps to name out loud, because they are the defaults everyone drifts into:** - **The warm-paper trap** — cream ground, ink text, one warm accent, serif display. It is the "premium/artisan/editorial" default and it will fit a bakery, a law firm, an olive grove and a dentist equally well, which is exactly the problem. *Measured in our own output: four consecutive pages in different industries all landed here.* The trap is the palette **without a reason**. The same paper-ink-stamp palette, derived from a named object that belongs to THIS business and written down with a rule for every colour, is not the trap — it is a design. Name the object; if you cannot, you are in the trap. - **The AI-purple trap** — violet-to-blue gradients and neon glow. Reads as no decision at all. - **Inter (and its siblings) as the default face** — an algorithmic choice, not a designed one. ## 1 — Aesthetics: how the page earns the stop **The thesis rules everything ABOVE the category floor.** Every choice below must trace back to the thesis — but never at the cost of a category code. The old rule "cut anything that would fit another business" is what produced pages nobody could place: it cuts the codes too. Correct rule: a choice that every business in the category shares is a CODE, keep it; a choice that any business ANYWHERE could use is decoration, cut it. - **Type is the cheapest way to look expensive.** A distinctive display face against a quiet reading face. Never the defaults (Inter, Roboto, Arial, system stacks). Set a real scale — display, headline, body, label — and let the display face carry real size: 4-6x body somewhere on the page. - **Palette from a scene, not a mood board.** One sentence: who is using this, where, in what light? Derive the colours from that scene. One dominant, one quiet ground, one accent used rarely enough that it still means something. Never purple-on-white gradients. - **Tokens first — before a single line of CSS.** Write the design as a spec, then build from it: every colour with a role and a rule ("stamp red: decisions only"), the type scale by name, the radii, the spacing steps, the component recipes — as `:root` custom properties. Then **every** colour, size, radius and spacing in the page resolves to one of them. A hex code outside the token block is a colour you invented mid-build, and each one reads as "assembled". Write three Do/Don't lines for the palette and check every text-on-ground pair for 4.5:1 before you use it. Where the `designmd` CLI exists (Claude Code), write the tokens as `DESIGN.md` and lint it to 0 errors / 0 warnings before implementing. *Measured 2026-09-05: pages built this way carry 0-3 stray colours; pages built without it carry 14-25. It was the single largest aesthetic gap we had.* - **Composition beats effects.** Asymmetry by default: left-aligned reading columns, weight alternating side to side. Break your own grid exactly once — an offset split, a card hanging past its edge, one full-bleed band among inset sections. - **Depth from real elements.** Stacked blocks, a hard-edged tint behind a card, two tones of one hue meeting without a blur, one decisive shadow. Not filters, not glass, not glow. - **One signature device**, repeated three or four times so it reads as a system: a rule that breaks, a bracket, a stamp, an arch, a notch. Name it before building it. - **The hero must fit, and it must clear the header.** The display line is the page's one type moment, so protect it: set its size from the SHORT headline (see section 2), never shrink it to rescue a long one. Give the hero enough top padding to clear a sticky or overlaid header at every breakpoint — a headline sliding under the nav bar is the most visible amateur tell there is, and it only appears once the real words are in. Check the first screen at 1440 and at 390 with the actual headline, not with placeholder text. - **Texture in exactly one zone** — a hero ground, a quote band, a footer. Never page-wide. - **Texture in exactly one zone** — a hero ground, a quote band, a footer. Never page-wide. - **Craft rules that separate designed from assembled.** Light text on a dark ground needs three compensations at once — a little more line height, a little more tracking, one step more weight — or it reads thin and cheap. **The accent owns a region or a role; scattered small accents are confetti.** Off-black rather than pure `#000`, so the page keeps air. At most three elevation steps in the whole page. Never nest a card inside a card. A CTA whose label wraps to two lines on desktop is broken. Correct spacing against the render, not against the number: equal padding around shapes of unequal visual weight looks wrong even when the CSS is symmetrical. A sticky header or overlay must never cover the element that has focus — tab through the page once and watch where the ring goes. Full polish checklist in `INTERFACE-POLISH.md`; it is checkable, not taste, and it applies to every build. - **Images — the page must look finished, and in half the categories the photography IS the category code.** Rules, in order: 1. **The customer's own images whenever they exist** — absolute https URLs, never relative paths. If they gave you a page or a site, harvest every usable asset from it. Nothing beats these. 2. **Otherwise ship subject-matched stock, with a fallback so it can never break:** `<what the business should actually put here>` loremflickr returns a real photograph OF THE SUBJECT — but **only for tags that exist**. Use ONE keyword, taken ONLY from `VERIFIED-IMAGE-KEYWORDS.md`; never comma-chain tags, never improvise a tag. Measured: 24 of 104 images in a 10-page run shipped broken before that list existed, because ordinary words return 500 while obvious synonyms work, and **which words those are CHANGES** — re-measured 2026-08-25, six days after the sweep: `dental`, `terrace`, `paper` and `plumber` had come back to life while `workshop` had died. Some tags fail permanently, which is why the fallback is also mandatory. picsum always resolves, so the page is never broken and never empty. **Always pass `?lock=`** — verified byte-identical on repeat requests; without it every reload and every import fetches a DIFFERENT photo, so the page you judged is not the page that ships. 3. **Photo-coded categories must never ship thin.** Food and drink, beauty, hospitality, retail, property, fitness, medical: fewer than four photographs and the page has failed its category, however good the type is. Text-coded categories (trades, professional services, security, education, software) can carry one or two and use structure instead. 4. **Identity shots stay honest.** The team, the van, this business's own product, the room, the finished job — a stock photo of somebody else's version is a lie about the business. Use a labelled slot at the right size instead (`https://placehold.co/800x600//?text=...`) carrying the shot brief as visible text: "photo: the two of us outside the van". 5. **Never** hotlink another business's or a theme vendor's server; **never** invent a photo ID on a stock CDN (a guessed Unsplash or Pexels id is a broken image). 6. Note on `onerror`: WordPress strips inline event handlers for many user roles, so the fallback often dies after import — the engine thread will resolve dead images at import time instead. Keep the attribute for now; it costs nothing where it survives. 7. Every placeholder — stock or labelled — goes in the pre-launch list with its size and its keyword, so replacing them is a find-and-replace, not a redesign. - **Craft details that separate a built page from a generated one.** Icons as ONE inline SVG `` sprite used via `` — no icon font, no extra requests. A print stylesheet. An `onerror` fallback on every photo so a dead URL degrades to a designed placeholder instead of a broken-image icon. Breakpoints chosen from where the content actually breaks, then checked at 390 / 834 / 1280. **Generic-output tells** (if any appear, the page is not finished): the warm-paper default (cream + ink + one warm accent + serif display) used for a business it was not derived from - purple-to-blue gradients - Inter or its lookalikes as the display face - everything centred - three equal cards in every section - icon rows with no meaning - giant border radii everywhere - a shadow on every box - gradient text - decorative blobs - a section that restates the heading above it. ## 1.5 — Positioning: the one claim this page makes Design decides whether they stop. Positioning decides whether stopping matters. Do this before you write a single line of copy, and write the four outputs down. **Step 1 — Inventory only what is true.** Years, counts, who physically does the work, the method, response times, the constraint they operate under, and — most valuable — **what they refuse to do**. Refusals cannot be faked by a competitor and they are almost always the sharpest material on the page: "I do not do sports massage", "no call centre", "we bottle once". **Step 2 — Find the noise floor.** Write the sentence every competitor in this category already says. That sentence is the floor. Anything you share with it cannot be your claim, no matter how true. **Step 3 — Climb to the right rung.** How many times has this market heard a promise like this one? - Nobody is making it → **state it plainly**. Plain is enough when it is new. - Everyone is making it → **out-specify it**: a number, a timeframe, a guarantee with a condition. - Everyone has out-specified it → **change the mechanism**: name HOW you do it differently, and give the how a name the visitor can repeat. - The market is tired of mechanisms → **change who it is for**, or take the opposite position from the whole category and be right about it. Skipping this step is the single reason most pages sound identical: they answer at a rung the market left years ago. **Step 4 — Write the claim, one sentence.** > For [a specific person], [a specific outcome], because [the fact or mechanism only they have]. **The test that matters:** if a competitor copied that sentence onto their own site, would it be a lie? If it would not be a lie, it is not a position — it is a description. Go back to Step 1. **Step 5 — Name who it is NOT for, on the page.** Every real position excludes someone. Excluding people out loud is the cheapest credibility there is, and it raises conversion among the ones who stay, because it proves the claim was not written for everybody. **Step 6 — Attach a carrier to every claim.** A number, a named client, a photograph of the work, a guarantee with a condition, or a test the visitor can run before paying (call the number at 3am; ask your own broker; come and look at the room). A claim with no carrier gets softened or cut — not decorated with an icon. Where the real carrier does not exist yet, the section still ships fully designed with a sample carrier in it, tagged per the rules in section 2 — never hollowed out. **Step 7 — Name the enemy.** Not a competitor by name: the behaviour or the default the visitor should stop accepting. The call centre. The six-week rest. The price you only learn afterwards. The box-seller who never comes back. A page without an enemy has nothing to be urgent about. **Deliverable before any copy is written — four lines:** the claim · who it is not for · the enemy · the three carriers. Every section on the page then exists to serve one of those four, and any section that serves none of them is padding, however pretty it is. **If the business genuinely has no unique fact** — a commodity trade in a crowded town — then the position is the person or the process, because those are the two things a competitor cannot copy even when they want to. Name the person. Show the process step by step. That is a position. ## 2 — Copy: how the page earns the belief (this is where we win) Anthropic's skill says nothing about words. That is the opening. **The specificity law.** Numbers, names, places and timeframes beat adjectives, always. "Eleven years, two vans, same-day in summer" beats "experienced and reliable" — and a competitor cannot copy it. Before shipping any sentence ask: could the business next door publish this exact sentence? If yes, rewrite it. **Headline — SHORT is the rule, and it is a hard limit.** **Eight words or fewer. Two lines maximum at desktop. Never more.** Positioning hands you a long, precise sentence — *"For [this person], [this outcome], because [this mechanism]"*. **That sentence is a working note, not page copy.** Ship it in two pieces: - **The headline** carries the promise, short enough to read in one breath. - **The deck** — one or two sentences directly beneath it — carries the specificity: the number, the who, the mechanism, the timeframe. If the headline runs to a third line, **cut words. Never reduce the display size to make a long headline fit** — that trades the page's one type moment for a wall of grey, and it is the single most common way an otherwise good page ends up looking amateur. Shorter and sharper beats longer and complete; the deck is where complete belongs. Set `text-wrap: balance` on the headline as well: short words plus balanced wrapping is what keeps a display line from leaving one orphan word stranded on its own row. Short is the rule; balance is the mechanism. Both, always. Four shapes — pick by what the visitor arrives with: - *Outcome*: the result, concrete and timed. - *Objection*: name the fear the visitor already has, in their words, and defuse it. - *Identity*: name exactly who this is for, so the wrong reader leaves. - *Mechanism*: the one thing done differently, stated plainly, no adjectives. A headline that could sit on a competitor's page is a failed headline — but a headline nobody finishes reading is a worse one. **The first three sentences.** Sentence one earns sentence two. No warm-up, no "welcome to", no mission statement. Enter where the visitor already is: mid-problem, mid-comparison, mid-hurry. **Proof sits beside the claim it defends** — never in a testimonial ghetto at the bottom. A number, a named client, a photograph of the work, a guarantee with a condition. Where proof does not exist, say so plainly instead of padding; an admitted absence reads stronger than a vague claim. **Objections are page structure, not an FAQ afterthought.** Name the three things that stop the sale and answer each where it arises: price, risk, effort, trust, timing. **Voice.** Short sentences carry weight; vary the rhythm so it does not drone. Verbs over adjectives, concrete nouns over abstractions, one idea per paragraph. Read it aloud — if you would not say it to someone across a counter, rewrite it. **Banned, in any language:** unlock - seamless - transform your - elevate - journey - solutions - passionate about - customer-centric - quality service - cutting-edge - state-of-the-art - we pride ourselves - nestled - in today's fast-paced world - take it to the next level. **CTA.** Name the action and what happens immediately after it. "Call and you get a price range on the phone" beats "Contact us". Put the risk-reducer in the same breath as the button. **Rich beats bare — and samples must say so.** Never thin, drop or hollow out a section because the business did not supply its data. Testimonials, pricing, team, stats and FAQ ship **fully designed with content in them**: a section demonstrated with real-looking content sells the design, and gives the owner something to overwrite instead of something to compose. What we deliver is a draft the owner revises — the less they have to change, the better it works. Invented content comes in **two registers**, and the difference is who is being quoted. - **The business's own voice — invent freely, no marking needed.** Descriptions, headlines, section prose, service and product names, sample prices, packages, opening hours, delivery times, process steps. This is the owner speaking about their own business; adjusting a number is one keystroke and nobody is deceived about a third party. - **Anything attributed to someone else — mark it.** Testimonials, reviews, star ratings, review counts, named clients, client logos, "as seen in", press or expert quotes, credentials, licences, memberships, awards, sourced statistics, case-study numbers, and named team members presented as real people. Two legitimate ways to handle these, author's choice per section: 1. **Classic placeholders** — "John Doe", "Sample Client Ltd", lorem ipsum. Self-identifying by nature, so they need nothing further. Zero ambiguity, weaker demo. 2. **Realistic content carrying a `sample` tag** on the item itself. Shows the design at its best, and the tag is what keeps it lawful. **Why the tag exists, in one line:** AI-written endorsements do not self-identify the way "John Doe" does — "Maria K., Kolonaki — re-tiled our bathroom in two days" is indistinguishable from a real review. Customers publish fast. A fake review that reaches a live page is the OWNER's consumer-law exposure, not ours. A review labelled *sample* is not a fake review. **The tag, exactly** — a plain inline element inside the item's own block, styled with the page's own tokens so it reads as a designed chip rather than an error. Never a pseudo-element, watermark or absolutely-positioned overlay: those detach from their content when sections are edited, and they convert badly. ```html
…realistic sample quote…
Maria K. — Kolonaki sample
``` ```css .sample-tag{ display:inline-block; margin-left:.5em; padding:.1em .5em; font-size:.62em; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border:1px solid currentColor; border-radius:3px; opacity:.55; } ``` One tag per stamped item. Star ratings shown as sample: render the stars, tag the block, and keep the rating out of the schema. The tag must stay visible on the published page, not only in the editor — that visibility IS the protection. **Structured data is the one place with no second register.** JSON-LD carries only facts the business actually supplied. No invented `aggregateRating`, `review`, `offers`, `openingHours`, credentials or awards — ever, tagged or not. A page may show a fully designed sample pricing table while its JSON-LD simply omits `offers`. Fabricated structured data is a manual-action risk with Google, and AI engines quote it as fact the moment the page is live, where no revision pass can catch it. **Never marked, never allowed at all:** medical, legal or financial outcome claims presented as this business's record; fake urgency mechanics (countdown timers, "3 left"); and identity photographs — the team, the van, the premises — which cannot carry a tag the way text can and therefore keep the labelled-slot treatment from the image rules above. **The pre-launch replace list is the second net and it is mandatory.** Every invented specific — free register or tagged — appears in it once, with its location and one line saying what belongs there. ## 3 — SEO / AEO: how the page gets found and quoted **Declare the generator.** Put `` in the head of every page. It costs nothing, it is invisible, and it lets the converter recognise a kit-built page and apply the kit guarantee server-side (requested by the engine thread, corpus finding K5, 2026-08-18). **Questions belong in the FAQ, not on the page.** A question-shaped heading earns a quotable answer for search — and a page whose every heading is a question reads as a help centre, not as a business. *Measured 2026-09-05, run 09: 7 of 7 h2s were questions on our page, 0 of 8 on the page that won.* Rule: every h2 is a statement — the claim of that section in six words or fewer — except inside the FAQ block and in at most ONE other section where a visitor genuinely arrives with that question. Put the quotable 40-60-word answers under the FAQ questions and under statements alike; the answer does not need a question mark above it to be quoted. Search engines and AI engines read the same page. Write for the reader, then make the structure legible to both. - **One page, one intent.** Decide the single search this page should win, plus the location if the business is local. Everything else supports it. - **Title tag** under 60 characters: primary term + the differentiator, not the company name first. **Meta description** around 150 characters, written as copy that earns the click — not a keyword list. - **One H1** matching the intent in natural language. H2s phrased as the questions a buyer actually types. The headings must make sense read alone, in order: that outline is what an AI engine summarises. - **Primary term and place appear in the first 100 words**, inside a sentence a human would say. Never repeat a term to hit a count — keyword density is a dead model and reads as spam. - **Heading style follows the category, and it is a real fork.** Where people arrive with a question and are choosing a supplier — services, trades, local, professional, health, education — phrase section headings as the question the buyer actually types ("Πόσα διαγωνίσματα γράφει ο μαθητής;"). Where people buy on identity or desire — food and drink, beauty, hospitality, fashion, a product brand — questions make the page read like a support desk. Use short declarative lines there ("Four at a time. Never more."). **AEO survives either way:** the 40-60 word quotable answer goes directly under the heading in both cases; with a statement heading it must still answer the question the statement implies, in a block that stands alone if quoted. - **Quotable answers (AEO).** Under each major question heading, put a self-contained 40-60 word answer that still makes sense if an AI engine quotes only that block. This is how a page gets cited rather than merely crawled, and almost nobody writes this way. - **Semantic structure:** header / nav / main / section / article / footer; lists as lists; tables only for tabular facts. Alt text describes the image for someone who cannot see it — never a keyword dump. - **A skip link is the first focusable element, and four of ten pages this skill wrote did not have one.** `