§ How it works The rules, section by section
No house look. A house way of thinking.
The kit is one main file, SKILL.md, plus deeper guides it reads when needed. The section numbers below match the file.
§ 0 · 0.5 The request comes first, then the brand
Anything you say beats every default.
Order of authority: your explicit request → the business's existing brand → your personal.md → the kind of business → the kit's defaults. With no brand, it asks up to five questions and offers two or three style directions. Rebuilds keep the brand and the page structure.
§ 1 Check what it can actually do
It plans only what the app can really do.
Before planning, it checks each action on its own: reading files, writing them, running code, installing packages, rendering and looking at the result, and using helpers. Then it reads one mode file, chat, sandbox, agent or open-webui. A missing ability removes that one step, not the task, and it says so.
§ 2 Decide what to make
The job picks the category.
| The visitor should… | Make a | Structure |
|---|---|---|
| judge a body of work, then reach out | Portfolio | impression → work → approach → contact |
| understand an offer, then book or visit | Company site | what & where → offer → proof → practical info → one action |
| understand software, then try it | Product page | promise → how it works → features → proof → try |
| choose a product and buy it | Store | hero product → collection → detail → cart |
| admire or explore one subject | Showcase | the subject → chapters → details → close |
| do something: calculate, build, track | Tool / app | a working layout; the result is the focal point |
| read, print or share it | Document | a reading layout |
| follow a talk or read a deck | Deck | title → sections → one clear ask |
Style words like "Apple-like" describe presentation, not the job. Portfolio and Company are two ends of one spectrum.
§ 3 Taste core
Ten of the seventeen principles.
- 01One strong focal idea leads.
- 02Big against small: strong scale contrast, precise supporting text.
- 03One visual world: type, colour, imagery and controls belong together.
- 04Depth and staging: pages feel spatial, not flat.
- 05Space does work. No card grids by reflex.
- 06Websites move in chapters: impression → explanation → evidence → action.
- 07"Clean" still needs character: restraint in amount, not in personality.
- 08Colour carries character. Don't polish it out.
- 09The opening and the body get equal polish.
- 10The name or title is never hidden.
§ 4 Motion comes from the wording
Your words set the level.
| You say | Level | Means |
|---|---|---|
| "showy", "wow", "immersive" | Full journey | Several staged scenes, a transforming subject |
| nothing about motion | One big moment | One standout scene; calm around it |
| "clean", "minimal", "professional" | Subtle | Gentle fades at most |
| tools and documents | Subtle | Motion only where it explains a change |
always Animations off (a common Windows and Mac setting) must still leave every click, drag, toggle and menu working.
§ 5 Imagery comes from the wording
Your photos, code-built visuals, or none.
- Your own photos → marked slots, sized and labelled for the real thing.
- "No visuals" → no images at all; colour fields and type still welcome.
- Otherwise → visuals built in code: gradients, SVG, canvas, 3D shapes, type as image.
- Real products without photos → stylised 3D stand-ins in a slot that says "replace with a photo".
§ 6 Tone, type and colour
Seven tones. One per project.
Calm & premium · Practical
Facts, trust and an easy next step. Local businesses, services, most tools.
Calm & premium · Gallery
Patient pacing and generous space for work that rewards attention.
Cinematic
Light and material do the work: glow, particles, chrome, big thin type.
Loud poster
Heavy type, one hot colour field, the subject crossing the letters. Raw flavour for "edgy".
Swiss / typographic
Monochrome, a huge tight grotesk, a visible grid. Type is the identity.
Technical
Mono labels, grids, index numbers, readouts that mean what they say.
Playful
Toy-like objects, swapping colour worlds, props as UI. Scrapbook flavour for artsy asks.
Type
Chosen from the subject and brand, never a default. One display face for headlines, a clean text face for body. Free, embeddable fonts on the web. Paid favourites are only ever named in the finishing note. Office files use fonts every computer already has.
Colour
The brand's colours always win. Without them, the kit picks from 84 contrast-checked palette sets across 15 fields. It shortlists three, picks one, and names the two it didn't use, so the next build doesn't repeat the last.
§ 7 Copy
Short, scannable, true.
Headlines of a few words and one or two short sentences under each. It never invents prices, hours, reviews, results or client names. Drafts mark the gaps with one quiet bar. Final versions have none. Local businesses always get their practical info.
§ 8 · 8.5 Tools, documents and decks
The result is the focal point.
- Tools open in a working state with example values marked as examples.
- Money tools show a live total, a breakdown and every fee in plain words, plus a total pinned on phones.
- Client tools never expose owner settings like rates.
- "Copied" only after the copy worked. "Download started", never "downloaded".
- Decks start with the deck type: professional (none or one fade), pitch (one or two big moments) or creative (livelier). A PowerPoint master plus a PDF.
§ 9 Deliverable and build
The format you asked for, built to last.
Your stated format comes first. "One HTML file" means everything inline. "Build it properly" means a real project: plain HTML for small sites, Astro for content sites, React and Vite for stateful tools. GSAP and Three.js only when they earn it.
§ 11 Check before handing over
Checked, or it says it wasn't.
- The main action works; totals and exports are correct.
- The job is clear in five seconds.
- No sideways scrolling at phone width (390px).
- With animations off, everything is still clickable.
- Visible keyboard focus, labels of 12px or more, readable contrast.
- No invented facts; drafts marked, finals with zero placeholders.
- A screenshot only counts if it was actually looked at.
Where the taste comes from
Every reference was analysed on its own first, then grouped by evidence. The references teach structure, pacing and composition. Their colours, images, fonts and copy are never reused.