Build Polished Websites

Three briefs, built twice.

A sourdough bakery, a shipyard music festival, and a family-law practice. Same agent, same prompts, same constraints. Once with the previous version of the skill, once with the current one.

The previous version already produced careful, accessible pages, but they converged: two of three on warm paper grounds, two of three with a rust-orange accent, tracked capital labels everywhere. The current version starts from each subject's own world, and the pages stop resembling each other.

Where the palettes went

Main colours of each page, taken from its own stylesheet.

Previous version
Bakery
Festival
Law
Current version
Bakery
Festival
Law
slop-scan score (lower is less templated)
BriefPreviousCurrent
Bakery70
Festival91
Family law40

Forno Alto, sourdough bakery in Porto

Restaurant and café archetype · primary action: reserve loaves for pickup

“A small sourdough bakery and café in Porto's Bonfim neighbourhood. Wood-fired oven every morning; closes when sold out. See today's bake and reserve loaves for pickup.”

Both versions built a working today's-bake board and a validated reservation form. The current one borrows the shopfront's azulejo tiles: one cobalt ink on glaze white.

Previous version: cream background, large brown serif name, dark oven-arch panel listing today's loaves.
Previous version slop-scan 7 “A baker's morning sheet on warm flour-paper, where the wood-fired oven frames today's bake.” Open the page
Current version: cobalt header with a tile border, white page, a tabbed board of today's loaves with prices and reserve links.
Current version slop-scan 0 “One cobalt ink on flour-white glaze, like a tiled shopfront panel; the week's bake becomes a tile panel.” Open the page

Low Tide, festival in a Gdańsk shipyard

Culture and event archetype · primary action: buy tickets

“A two-day electronic music festival in a decommissioned shipyard in Gdańsk, 14–15 August 2027, capacity 6,000. Day pass €69, weekend €119.”

The current version reads the festival off the side of a hull at night: draft marks become the timetable axis, red-oxide primer the colour field, signal yellow means buy or now.

Previous version: black page, stencil LOW TIDE wordmark half cream half blue, orange dates and orange ticket button.
Previous version slop-scan 9 “A shipyard work-order poster: stencil type on tar-black steel, a waterline cutting through the letters.” Open the page
Current version: night-navy page with draft-mark numerals down the left edge, LOW TIDE above a yellow waterline, a red-oxide hull, yellow buy-tickets button.
Current version slop-scan 1 “Draft marks become the time axis, red oxide the colour field, yellow means buy or now.” Open the page

Harlow & Reyes, family law in Portland

Professional practice archetype · primary action: book a free 30-minute consultation

“A two-partner family law practice: divorce, custody, mediation, prenuptial agreements. Book a free 30-minute consultation.”

The previous version set a stressed reader's first page as linen paper with an italic accent phrase. The current one is calm rain-grey and puts the free 30 minutes, drawn to scale, right after the opening.

Previous version: linen-cream page, margin labels in tracked capitals, a serif headline with two words in green italic, consultation details box.
Previous version slop-scan 4 “A calm, plain-spoken practice memo: linen paper, a sturdy book serif, section labels in a left margin.” Open the page
Current version: pale blue-grey page, plain serif headline, a fir-green booking button, and a 'Before you book' reassurance panel.
Current version slop-scan 0 “A calm, rain-grey page that removes uncertainty: the free 30 minutes shown to scale, each matter explained plainly.” Open the page

Lodestone, Minecraft server hosting

Product and plans archetype · Russian-language site · no skill versus the current version

“Хостинг серверов Minecraft для друзей, стримеров и небольших сообществ. Java и Bedrock, тарифы от 2 до 16 ГБ, модпаки в один клик, бэкапы, Москва и Франкфурт. Главное действие: создать сервер.”

Without the skill, a fresh agent produced the second-generation template on a gaming brief too: red mono eyebrow, a headline with one rust phrase, pill chips, a terminal with window dots, cream sections below. With the skill, the page is a server rack: units sized by RAM, rack rails, label-maker tape for plan names, and a console that boots the server you configure. It also ships canonical, share image, and JSON-LD; launch-check warnings went from 8 to 0.

Without the skill: dark hero with a red monospace eyebrow, a giant headline with one phrase in rust red, rounded pill buttons, and a terminal window with three dots.
No skill slop-scan 9 Open the page
With the skill: a graphite server rack with rails, a yellow label-tape logo, a bold headline, green status LEDs, and a console with edition, core, and memory selectors.
Current version slop-scan 0 “A 19-inch rack in a cold aisle: plans as units sized by memory, label-tape names, LEDs only for live status.” Open the page

Earlier benchmark: Relay, an incident-response SaaS

No skill versus the first version of the skill

The first version beat the classic purple template on every Lighthouse category. Scanned today, its output scores 14: cream paper, a vermilion and acid-lime accent, mono eyebrow labels, hard offset shadows. That result is how the second generation of defaults was found, and why the current version works from the subject's world instead of a list of bans.

Without the skill: centered hero with a purple gradient headline, two buttons, and a dashboard mockup.
No skill slop-scan 9 Open the page
First skill version: cream page, huge black headline with one orange word, dark incident timeline panel.
First skill version slop-scan 14 Open the page

What changed in the method

A ban list only moves an agent to the next default. The current version asks for decisions, then makes the agent look at what it built.

  1. Source worldList eight concrete things from the subject's world and borrow the visual language from one of them.
  2. Three candidatesDirections that differ on at least three axes, widened by a library of twenty direction families and six genre worlds.
  3. Direction cardTypefaces, colour values with roles, layout, shape, imagery plan, motion, and one signature moment, all concrete.
  4. CraftFluid type, OKLCH palettes, breakout grids, licensed stock and video, non-rectangular shapes, finishing details.
  5. Screenshot critiquesnap.mjs contact sheets at four widths, a ten-dimension rubric, at least two passes.
  6. Mechanical scanslop-scan.mjs flags first- and second-generation fingerprints, stock phrases, and unverified proof.

Install

Works with Claude Code, Codex, and OpenCode. Installers never overwrite an existing skill.

macOS, Linux, WSL, or Git Bash:

git clone https://github.com/denfry/build-polished-websites.git
cd build-polished-websites
bash ./install.sh --agent all --scope user

Windows PowerShell:

.\install.ps1 -Agent all -Scope user

How these examples were made