Website OS
GitHub

The No-BS Build System.

Prompt Less. Build Better.

From Idea to Damn Good Website.

A proven prompt system for turning rough ideas into sharp, client-ready websites without the usual AI slop.

The landing-page system

Two prompts, run in order. The first sets the brief and the guardrails and asks for N versions; the second runs once per version to pin its direction. Download the worked example and attach it alongside — same inputs, same standard, every build.

Download the worked example (.zip)example-prompt-krestel.md · a full 5-direction brief
1Brief + guardrails

Landing page creative direction

Sets the product, the conversion goal, the always/never guardrails, and how many versions to build — each in its own folder, each fully committed to one direction.

# LANDING PAGE CREATIVE DIRECTION TEMPLATE Build a landing page for "[PRODUCT NAME]" — [ONE SENTENCE DESCRIBING THE PRODUCT]. Conversion Goal: [PRIMARY CONVERSION GOAL] Primary CTA: "[CTA TEXT]" The CTA must appear: - In the hero - Repeated at the end of the page Intent: [Describe how the page should make someone feel in one paragraph.] Example: "A small team's unfair advantage. Serious, crafted intelligence. Calm, confident, and premium—not loud SaaS hype. A founder should think, 'These people actually understand my problem,' within three seconds." --- ## Global Guardrails (Apply to Every Version) Always: - One monumental hero image anchors the page. - Imagery is processed, never raw (halftone, dither, grain, ASCII, linework, engraving, etc.). - Use technical marginalia (coordinates, IDs, ruler ticks, timestamps, labels, metadata). - Typography at extremes (giant display or tiny mono labels). - Minimal middle-sized typography. - Heavy use of negative space. - Restrained colour palette. - Consistent spacing system. - Editorial composition. Never: - Generic SaaS layouts - Purple gradients - Glossy 3D blobs - Rounded-everything friendliness - Icon-grid feature rows - Untreated stock photography - Evenly distributed colourful palettes - Generic startup illustrations - Inter/system-font-only typography --- Create [NUMBER] versions. Each version must live inside its own folder. v1/ v2/ v3/ ... Each version must fully commit to a unique visual direction. Do NOT blend aesthetics between versions. --- IMPORTANT Hero images come later. Do NOT generate, source or create imagery. Instead: Reserve the hero area exactly where described. Use: - an <img> placeholder or - a CSS background placeholder using the correct aspect ratio, dimensions and positioning. Fill the placeholder using a flat CSS colour matching the direction's palette. Design the typography, spacing and layout as though the real artwork already exists so the final image can be dropped in later with zero layout changes.
2Per direction

Creative direction detail

Run once per version. Names the aesthetic, points at a reference image, describes the hero that will land later, and pins exactly where it sits.

# CREATIVE DIRECTION TEMPLATE --- DIRECTION [#] (v[#]) — [DIRECTION NAME] --- Aesthetic: [Describe the visual language.] Cover: - overall mood - composition - typography - colour palette - textures - graphic language - contrast - editorial references Example: Print-tech × data. Pale sage paper. Topographic contour lines. Transaction-ID chips. Mono labels. Film-strip ruler ticks. Grotesk display typography. --- Reference: [ABSOLUTE PATH OR URL TO THE REFERENCE IMAGE] Example: C:\Users\Chase\projects\project-name\images\reference.png Read this before designing. Match: - feel - atmosphere - composition - colour language - typography Do NOT copy the content. --- Future Hero Describe the artwork that will eventually replace the placeholder. Focus on: - subject - colour - lighting - rendering style - mood Example: A monumental topographic contour illustration rendered using dark green ink on pale sage paper. --- Placement Describe exactly where the hero belongs. Include: - full-bleed or contained - left/right alignment - image size - whitespace - where the headline sits - relationship between image and typography - background colour - layering behaviour Example: Place the illustration isolated on the centre-right. The pale sage page background should match the artwork paper so the illustration appears to float naturally. Surround it with mono data-callout chips. The headline occupies the left third.

The 4-part brief

The taste-first framework every build starts from. Four things decide whether the output is yours or generic — aesthetic, reference, intent, guardrails. Each one below has a copyable snippet: assemble the parts you need, or fold them into the landing-page prompts above.

01

Aesthetic

The design family the site lives in — its feeling before any content.

How to write it

Name one overall family, then list 4–6 more to spread the concepts across for a wide net. Always add: match the feeling, not the content.

  • vast-quiet
  • print-tech / paper
  • dither-mono
  • classical-remix
  • editorial-brutalist
  • warm-minimal
  • dark-motion
02

Reference

The screenshots and real URLs from your taste library that anchor the feel.

How to write it

Paste 2–4 references. Tell it to study layout rhythm, type, spacing, motion and restraint — and reproduce the feeling, never the content. Include body references you like the scroll of, not just heroes.

  • Dribbble / Pinterest / X saves
  • Live URLs you admire
  • Website OS library slugs
  • Body & scroll references
03

Intent

What you're building, who it's for, and the ONE action a visitor should take.

How to write it

One sentence of what it is plus the audience, then name the single primary action. Everything serves it, and there is one primary CTA per surface.

  • Book a demo
  • Start free trial
  • Buy now
  • Join the waitlist
  • Read & subscribe
  • Submit a form
04

Guardrails

Your always-do and never-do — where you kill AI slop and protect the brand.

How to write it

List a few ALWAYS moves (hero style, load feel, accent rule) and keep the NEVER list identical across every build so your output stays consistent.

  • ALWAYS monumental hero
  • ALWAYS weighted load
  • ALWAYS one accent / surface
  • NEVER the anti-slop list

After the wide net

Casting wide gets you five concepts and stops. These are the three prompts that finish the job — narrow five to one, earn the scroll with a real hero, then tune the tokens until it feels crafted. Same standard throughout: fill the {{variables}}, paste, run.

NNarrow

Narrow — five down to one

You have five concepts. This is the edit: keep one family, vary only the body, and judge structure instead of style.

How to run it

Name the winner and say what you liked and what you didn't — the specifics are what stop it re-styling everything. Keep the hero frozen here; you nail that in the next prompt.

  • Minimal-vertical
  • Ledger (sticky index)
  • Framed panels
  • Editorial split
  • Keep hero frozen
ROLE You are the same senior designer who produced the wide net — but now you are a ruthless editor, not a generator. Your job is to kill four concepts and make the fifth undeniable. INPUT The five concepts are live at /v1…/v{{5}} with the /compare grid. My pick: {{/vX}}. What works: {{the type scale, the density, the hero weight}}. What doesn't: {{the section rhythm below the fold}}. TASK Keep {{/vX}}'s aesthetic family AND its hero exactly as-is. Vary only the BODY into three readings, so the comparison is about structure, not style: A · minimal-vertical — one column, generous rhythm, the scroll does the work. B · ledger — a sticky left index against a scrolling right column. C · framed — bordered/panelled sections that hold content like plates. Add all three to /compare beside the original. METHOD Run the /taste skill over each: scale ratios, contrast, spacing rhythm, restraint. Pressure-test against the brief's INTENT — the ONE action is still {{book a demo}}, one primary CTA per surface. Re-check the NEVER list. OUTPUT Three body variations live and on /compare, and for each: one line on what it does to the scroll. Finish with your recommendation and the reason. Do not touch the hero — that's the next prompt. Stop after the recommendation; I choose.
HHero

Hero — the big move

One image earns the scroll. Brief it like an art director, generate at 2K, then wire the transition that carries it into the body.

How to run it

Describe the composition, not the subject alone — where the negative space sits is what makes the H1 land. Always generate four and iterate on one rather than accepting the first.

  • Full-bleed monumental
  • Off-centre subject
  • Negative space left
  • Duotone / dither
  • Grain + vignette
ROLE You are an art director briefing a single image that has to carry the entire top of the page. INPUT Chosen direction: {{/vX + body variation}}. Aesthetic family: {{family}}. The promise the hero must carry: {{the one promise}}. The H1 that sits over it: {{headline}}. TASK Using the Higgsfield MCP, generate {{4}} hero candidates at 2K that fit the family and this composition: - Subject: {{what's in frame}}. - Composition: negative space at {{left / lower-third}} so the H1 and CTA sit in clean air — brief the space, not just the subject. - Light + palette: {{cold northern light, one warm accent}} — pull the accent from the BRAND DNA and use it once. - Texture: {{fine grain / dither / none}}. No stock-photo gloss. GUARDRAILS NEVER: 3D SaaS blobs, gradient orbs, tilted dashboard mockups, glassmorphism panels, stocky smiling-team shots, or an image so busy the headline needs a scrim to survive. THEN Pick the strongest, iterate it {{2}} rounds, and wire it in: a premium hero→body transition and a weighted, staggered page load. Add one restrained splash of the accent colour where the eye lands second. OUTPUT The {{4}} candidates side by side with a one-line read on each, the chosen asset wired into {{/vX}}, and the transition + load timing (ms + easing) written down so it can be reused.
TTweaks

Tweaks bar — tune it live

A dev-only island that live-edits the tokens. Go aggressive on the body until it feels crafted, then bake and delete the bar.

How to run it

Give it explicit ranges or it'll nudge everything by 1px and nothing will change. Tune the body hardest — heroes usually already work, bodies are where generated pages fall apart.

  • Type scale ratio
  • Accent + surface
  • Spacing rhythm
  • Radius set
  • Motion ms + easing
  • localStorage persist
ROLE You are building a throwaway tuning instrument, not a feature. It must be trivial to delete. TASK Add a dev-only TWEAKS BAR (like Claude Design / Open Design) that live-edits the theme through CSS variables on :root — no rebuild, no refresh. CONTROLS + RANGES (give each a real range, not a nudge) - Type scale ratio {{1.125 → 1.5}} and base size {{14 → 18px}}. - Accent hue + surface/background pair, light and dark. - Spacing rhythm — the base unit {{4 → 12px}} and section padding {{48 → 160px}}. - Radius set {{0 → 24px}}, with the option to break uniformity (cards ≠ buttons ≠ inputs). - Motion: duration {{120 → 600ms}} and easing {{linear · ease-out · spring}}. RULES - One self-contained island: a single file, mounted only when NODE_ENV !== "production", zero imports into app code. - Copy tokens + Reset buttons, and localStorage persistence so a reload keeps the tune. - Go aggressive, especially on the BODY — that's where generated pages read as generic. The hero is usually already fine. OUTPUT The tweaks bar, plus the tuned token set as a copyable block ready to bake into the theme as three layers (primitive → semantic → component). Tell me which values actually changed from the defaults and what each one did to the feel.

The build pipeline

Eight copy-ready, tool-driven prompts for the repetitive real work — brief, sitemap, Relume, copy, design, hero, tuning, ship. Fill the {{variables}}, paste, run. Each one loads the right skills and references your library instead of guessing.

P1Brief

Brief & Brand DNA

Lock the brief before a pixel exists. Extract real references with tools, interview out the gaps, and write the Brand DNA block you paste at the top of every downstream prompt.

View the prompt
Project: {{CLIENT}} — {{WHAT IT IS}} for {{AUDIENCE}}. The ONE action: {{book a call}}. Don't work from memory — USE tools: 1. Run /design-extract on {{REFERENCE URLS}} + Firecrawl (scrape --format markdown,branding --full-page-screenshot) to pull REAL CSS tokens (colour, type, spacing, radius, motion) + full-page screenshots. 2. Pull 2–3 reference feels from the Website OS Websites library that match the target aesthetic. 3. Interview me with /process-interviewer on the open questions until the brief is unambiguous. Then write a one-page BRAND DNA block I can paste into every page/design prompt: - Brand + voice (3 adjectives), audience, and the ONE action. - Aesthetic family + reference feel. - 5 anchor colours + 1 action accent (used exactly once per surface). - 2 typefaces (display + UI). Motion range (ms + easing). - The NEVER list. Output: the signed Brand DNA block + a findings doc (what the evidence shows vs what I asked for + the decisions still needing a human call).
P2Structure

Sitemap & Blueprint

Structure before styling. Turn the brief into a Relume site-level prompt and a page-by-page blueprint, mapping each page to its goal, its ONE action, and the copy doc that feeds it.

View the prompt
Using the signed BRAND DNA, write the Relume SITE-LEVEL prompt and generate the sitemap. Build Home first, sanity-check, then continue the rest. Keep every page to 4–8 sections (Home is the deliberate exception — the long-form portal). For each page give me: - Intent (what it's for) + the ONE action + its CTA. - The section list (title + one-line purpose), in build order. - Which copywriting doc / brand-voice source feeds it ({{COPY DOCS}}). Skip generic legal pages from the design pass. Output: the sitemap + a page → goal → CTA table + a per-page section blueprint ready to script into page prompts.
P3Relume

Per-page Relume prompts

One copy-paste Relume prompt per page, written as a section script — title + purpose + component hint + real copy — so the AI builds the right structure before it styles.

View the prompt
For each page in the sitemap, write a PAGE-LEVEL Relume prompt as a SECTION SCRIPT. Relume reads section title + description to choose the component + copy, so script every section: title, purpose, component hint, and the real copy. Rules: - Paste the BRAND DNA block at the top of any page where tone drifts. - Pull copy from {{COPY DOCS}} / brand-voice doc; where it's missing, draft it in the brand voice (one promise per section). - 4–8 sections per page; the primary CTA on every page. - Tokens are applied at the styling stage (Relume builds greyscale structure first) — don't style here. Output: N ready-to-paste page prompts, one fenced block per page.
P4Copy

Copy & conversion pass

Make every word earn its place. Run the copy across all sections from your brand-voice docs — one promise per section, one action per surface — then strip the AI tells.

View the prompt
Run the copy pass across all sections using {{BRAND VOICE DOC}} + {{COPY DOCS}} and the copywriting skills. - One promise per section; PAS / AIDA where it converts. - The ONE action per surface — never competing CTAs. - Write the microcopy too: buttons, form labels, empty states, error/success, and meta/OG. - Match the BRAND DNA voice exactly. - Then run /humanizer to strip AI tells (no "unlock / elevate / seamless", no em-dash overuse, no rule-of-three, no vague attributions). Output: final, on-voice copy wired into every section, with the microcopy filled in.
P5Wide net

Wide net — 5 concepts

Cast wide across 5 distinct aesthetic families, load your design skills to raise each above generic, and judge them side-by-side on a /compare grid.

View the prompt
Build 5 versions at /v1–/v5 + a /compare grid, each a DISTINCT aesthetic family with a reference feel from the Website OS library. - Load the skills from {{SKILLS / GitHub}}: apply /impeccable to v1–v3 and /taste + /ui-ux-pro-max to v4–v5. - Wire the BRAND DNA tokens: one accent, real type hierarchy, weighted reveals. - Honour the NEVER list — no purple/blue gradients, no Inter-as-design, no glassmorphism, no emoji icons, no tilted dashboard mockups. Output: 5 live routes + the /compare grid + a one-line rationale per version (what family, what reference, why it fits the brief).
P6Narrow + hero

Narrow → the big move

Commit to the winning family, vary the body three ways, then earn the scroll with a real Higgsfield hero and a premium hero→body transition.

View the prompt
Go with {{CHOSEN /vX}}. Keep the family + hero; vary the BODY into 3 — one minimal-vertical, one ledger (sticky left index), one framed. Add them to /compare and pressure-test with /taste (scale ratios, contrast, spacing rhythm, restraint). Then the big move: using the Higgsfield MCP, generate 4 hero images at 2K that fit the flavour + this composition. Pick one, iterate, add a restrained splash of colour, and wire a premium hero→body transition + a weighted page load. Output: the chosen body variation + the hero asset + the transition.
P7Tune

Tweaks bar — live tokens

A dev-only tweaks bar to tune type, colour, spacing, radius and motion live via CSS variables — go aggressive on the body until it feels crafted, then bake.

View the prompt
Add a dev-only TWEAKS BAR (like Claude Design / Open Design). Live-edit type scale, colour, spacing, radius and motion via CSS variables — go aggressive, especially the body. - Include Copy tokens + Reset + localStorage persistence. - Keep it a single self-contained island that's trivial to delete before production. - Tune until the page feels crafted, not generated. Output: the tuned token set, ready to bake into the theme.
P8Ship

Finalise — bake, slop-pass, ship

Bake the tokens into a 3-layer theme, run the full Impeccable slop pass, clear a11y + compliance, ship clean, then harvest the winner back into the library.

View the prompt
Bake the chosen tokens into the real theme as 3 layers (primitive → semantic → component) and remove the tweaks bar. - Run a full /impeccable slop pass across typography / colour / spatial / interaction / motion / UX-writing, then re-check the NEVER list. - Responsive at every breakpoint. a11y to WCAG AA (contrast + focus + keyboard). Compliance. meta/OG. A performance pass. - Ship: clean build, commit with the correct author identity, push to {{GITHUB}} main (I import to Vercel). - Harvest: fold the winning DESIGN.md + tokens back into the Website OS library so the next build starts ahead. Output: a clean, deployed build + a reusable system.

Anti-slop — NEVER

  • ✕Purple/blue gradients
  • ✕Inter as the design choice
  • ✕3D SaaS blobs / gradient orbs
  • ✕Blanket glassmorphism
  • ✕Emoji as feature icons
  • ✕Tilted dashboard mockups
  • ✕Buzzword pill rows
  • ✕Identical radius on everything

The 12-step process (Asana)

  1. 1Strategy & Goals — Intent + guardrails
  2. 2AI Research — taste + references
  3. 3Sitemap & Blueprint — structure + copy
  4. 4Design Concepts — the wide net (5→3→1)
  5. 5The Big Move — hero assets + transitions
  6. 6Structural Build & CMS — bake tokens
  7. 7Advanced Features & Motion — tweaks bar
  8. 8Small Details & Compliance — Impeccable pass
  9. 9Logic & Mobile — responsive + a11y
  10. 10QA & Client Review — compare + sign-off
  11. 11Go-Live & Handover — ship
  12. 12Library & Monitoring — harvest the winner