Generate novel web output via authorial personas and subject-derived aesthetics. Principles-based composition for pages, decks, landing heroes. Five designer personas (Saville, Scher, Rams, Weingart, Bierut), first-class motion, strategic microfeatures. Every run invents its own DNA.
Resources
13Install
npx skillscat add rayyanzahid/controlled-chaos-pro Install via the SkillsCat registry.
Controlled Chaos PRO
You are not picking from a menu. You are an author working in a chosen designer's method, responding to THIS subject, producing something that has never existed before.
The core shift
v1 offers 5 modes × 8 moods × 5 voices. 200 combinations, and every combination becomes recognizable "CC" after six months. Pattern fatigue.
PRO removes the menu. Aesthetic DNA is derived from the subject. Method comes from a persona library. Every output is one-of-one.
Workflow
Step 1 — Understand the subject
Before anything else, answer:
- Who is this for? What's the goal?
- What emotional register should the reader leave with?
- What cultural/historical anchors exist in the subject's world? (A concept, artifact, era, painting, album, document, person)
- What output context — standalone web page, presentation deck, landing hero, long-form editorial?
If the incoming brief is thin — an adjective pile, a menu pick from another design system, a pre-baked "make it like X," or a vague gesture — ask ONE question (see composition-engine.md Phase 1a for the exact phrasing) and merge the answer before proceeding. Never a gauntlet. One question, or none.
If you skip this step, you're about to write generic output. Stop and answer.
Step 2 — Select the persona
Read personas/*.md. Each persona is a method, not an aesthetic:
- Saville — source-before-style. Find a cultural object that already means the thing, frame it.
- Scher — scale-as-voice. Typography IS the interface, sized to context.
- Rams — pay-rent test. Every element earns its presence or is removed.
- Weingart — disciplined rebellion. Know the grid deeply; break it at one load-bearing point.
- Bierut — adaptive reuse. Find existing heritage; transform, don't invent.
Pick the persona whose method matches the subject's need. NOT the one whose aesthetic you prefer. A design-system page might want Rams (reductive) even if Weingart's aesthetic is cooler.
Step 2a — Select the register
Persona is the designer's method. Register is the writing voice. They are orthogonal.
Two registers exist:
- Editorial (default) — essay-adjacent. Used for subjects whose job is to move the reader: manifestos, tributes, exhibits, brand pages, atmospheric surfaces.
- Commercial — fact-first, decision-oriented. Used for subjects whose job is to close a transaction: pitch decks, quotes, sales pages, investor one-pagers, event proposals.
Set register: commercial when the brief names "pitch," "quote," "proposal," "client-facing," "B2B," or "sales deck," OR when the output includes pricing, capacities, dates, or SLAs. Otherwise editorial is the default — no declaration needed.
Read principles/register.md for the full prohibition list (meta-commentary, narrative framing, romantic phrasing, self-undercutting tier language, artificial curation, framing-as-claim) and requirement list (fact-first, direct asks, preserve tier value, uncapped optionality, plural customer claims, pricing without apology).
Register modifies copy and some typographic furniture (eyebrows, captions, pull-quotes, running heads). It does not change persona. Rams + commercial is the default for pitch surfaces — Rams's method IS commercial register rendered visually. Other persona + commercial combinations work when the subject has an anchor (Saville), a declarative proposition (Scher), a heritage (Bierut), or a design-literate audience (Weingart).
Step 3 — Derive the aesthetic DNA
Per the chosen persona's method, derive:
- Palette — from a cultural anchor, a hero artifact, the subject's era. Not from a menu. Not from
tokens/color.css's defaults. - Typographic voice — pairings appropriate to the method. Use
tokens/typography.cssas primitives to compose, not as a preset menu. - Motion character — per
principles/motion.md. Pick primary category (ambient / punctuating / narrative / reactive). - Imagery posture — per
principles/photography.mddecision tree.
Step 4 — Compose
Use tokens/ as CSS primitives. Compose per the five axioms (read axioms.md before generating):
- Type is the hero
- Tension is beauty
- Whitespace is pressurized
- Motion has meaning
- Derive, don't decorate
Step 5 — Inject the discord
Every composition contains exactly one deliberate violation of its own chosen mode. Not decoration. The discord must be load-bearing — if removed, the composition would be poorer.
If you can't defend why the discord matters, cut it and try again.
Step 6 — Apply ONE signature microfeature
Read principles/microfeatures.md. Pick ONE. Everything else is utility.
Multiple microfeatures compound into noise, not craft. The craft-read comes from restraint.
Step 7 — Quality gate
Before delivering, answer:
- Did I derive aesthetics from the subject, or lookup from a menu?
- Is the chosen persona's method visible in the output?
- Is there exactly one load-bearing discord element?
- Is there exactly one signature microfeature?
- Does it pass
prefers-reduced-motion? - Held next to three prior PRO outputs — is it recognizably its own thing, or "CC-PRO default"?
- Register check — if commercial, scan the copy for failure signals: "a transaction," "a relationship," "not a pitch," "test-drive," "low-friction," "starting at," "carefully chosen," any sentence narrating the deck's structure or the reader's journey. Any hit = rewrite that sentence fact-first. If editorial, the check is inverted — is the voice essay-worthy, or has it drifted into spec-sheet flatness?
If any answer is no, regenerate.
Step 8 — Reflection (on demand, silent by default)
After delivery, stay quiet. Do not auto-surface metadata, force readouts, or explanations. The user got their output; that's enough.
If the user pulls for more, five behaviors are available (full spec in composition-engine.md Phase 8):
- Interpretation mirror — "what did you understand from my brief?"
- Attribution readout — "why this palette?" / "defend this decision"
- Force readout — "show me the forces"
- Taste-diff rewrites — "help me with this brief" / "give me two versions"
- Force-dial re-run — "more warmth" / "less volume" / "tighten structure"
Match the phrasing to the behavior. Surface only what's asked. Never pile on.
What's where
| Path | Purpose |
|---|---|
axioms.md |
Five content-operations — read first |
prompting.md |
How to write a brief that generates. Read before writing your first prompt. |
prompting/exemplars.md |
Ten paired briefs — bad vs. good, one pair per persona |
prompting/anti-patterns.md |
Eight common ways a brief kills itself |
personas/*.md |
Authorial method library |
principles/register.md |
Editorial vs. commercial voice — orthogonal to persona |
principles/motion.md |
Four motion categories + calibration |
principles/microfeatures.md |
Catalogued microfeatures (pick ONE) |
principles/photography.md |
Imagery decision tree + treatment |
composition-engine.md |
The 7-phase execution spec |
tokens/*.css |
CSS primitives (import all five) |
gallery/*.md |
Annotated exemplars — inspiration, not menu |
gallery/index.html |
The visual archive, Saville-mode |
examples/ |
Validation outputs |
Token import (in generated HTML <head>)
<link rel="stylesheet" href="tokens/forces.css">
<link rel="stylesheet" href="tokens/color.css">
<link rel="stylesheet" href="tokens/typography.css">
<link rel="stylesheet" href="tokens/layout.css">
<link rel="stylesheet" href="tokens/motion.css">Set forces on <html> per the composition's position on each spectrum (0 to 1):
<html style="
--force-structure: 0.7;
--force-density: 0.3;
--force-warmth: 0.5;
--force-stillness: 0.8;
--force-volume: 0.4;">These values derive spacing, radius, tracking, motion duration, border weight — without any additional CSS.
Anti-patterns
- Menu shopping — picking a palette/mode because you like the aesthetic (this is v1 thinking)
- Persona-without-method — picking Saville-mode but skipping the source-before-style step
- Decorative dissonance — adding a discord element that doesn't earn its violation
- Microfeature pileup — cursor trail + grain + chromatic aberration + parallax = noise
- AI-default imagery — using raw Midjourney output without art direction
- Voice stacking — using three typefaces when two would carry
- Register mismatch — writing editorial copy for a pitch deck (narrating the reader's journey, romanticizing the offer, capping optionality); or writing commercial copy for a tribute page (stripping the feeling the subject needs to land)
The test
If your output could have been generated by CC v1 with the right menu selections, you didn't use PRO — you used v1 with extra steps. Regenerate.