Landing page is now a live demo of the macrostructure layer. The bottom-left
themer chip is replaced by a thin sticky-top banner: wordmark, active theme
name in display weight, 12 theme dots, random button. Pressing T cycles
themes; R picks a random one; ?theme= shareable links work.
Switching themes no longer just repaints — it rebuilds the page. The hero
and footer are now slots that swap component archetype per theme: Specimen
gets a Marquee hero + Mast-headed footer, Brutal gets Photographic + Inline,
Newsprint gets Split Diptych + Index columns, Atelier gets Quote-Led, etc.
Six hero archetypes and four footer archetypes are pre-templated in HTML
<template> elements; JS clones and interpolates per-theme copy fixtures
(distinct voice per theme, not just colour-swapped lorem). View Transitions
cross-fade the structure swap.
Skill side, Tier 1 of the diagnostic ships: structure.md vague-tone fallback
becomes a domain-aware lookup table (audio→Photographic+Quote-Led+Letter,
commerce→Catalogue+Photographic+Bento, docs→Workbench+Long Doc+Component
Playground, etc.) so Bento/Long Doc/Manifesto isn't the catch-all anymore.
component-cookbook.md gains a within-archetype variation matrix (2-3 knobs
per archetype — tile counts, ratios, attribution positions, etc. — picked
per output, stamped in the macrostructure comment) and a new F6 Product
card grid archetype distinct from Bento (sells things, not features).
SKILL.md slop test goes 23→29: the six rules that used to be advice
(zero-chroma greys, accent footprint, spacing scale, measure 45-75ch,
eight states, reduced-motion fallbacks) are now binary gates. The audit
verb gains a stamp-vs-page check that flags drift when the stamp says
one macrostructure but the page is actually the AI template.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 8 newer themes were too clustered around oklch(94-96%, low-chroma,
warm-hue) — visually all "warm cream + serif" variants. Users couldn't
tell them apart so it felt like the picker was broken for those entries.
Spread the 12 paper colours across the OKLCH space so each theme owns
a distinct point (dark / saturated / desaturated / warm / cool):
- Specimen warm oat oklch(96 .018 80)
- Newsprint salmon-pink oklch(92 .045 50) ← FT-pink
- Atelier cool cream oklch(94 .005 60) ← low chroma luxury
- Garden pale sage oklch(95 .030 130)
- Salon warm ivory oklch(94 .030 65)
- Linen desat. linen oklch(89 .022 95)
- Midnight cool charcoal oklch(15 .022 250) ← was warm; now cool
- Terminal green-black oklch(11 .018 145)
- Almanac cool pale oklch(94 .008 245) ← cool, was warm
- Brutal near-pure white oklch(98 .001 0)
- Manifesto near-pure black oklch(10 .005 60) ← inverse of Brutal
- Sport crisp white oklch(98 .003 250)
Display fonts now span category-level differences, not "different
serifs": Fraunces / The Future / Space Grotesk / Cormorant italic /
Playfair 900 / Crimson Pro / JetBrains Mono / Anton (added) /
IBM Plex Mono (Salon) / IBM Plex Sans Light / Bricolage Grotesque /
Bricolage Grotesque italic.
Signature structural moves added:
- Newsprint: drop cap on the lede in accent burgundy
- Linen: barely-visible woven-cloth checkerboard (3% opacity)
- Almanac: faint vertical grid lines across the page (graph paper)
Plus new fonts in @import (Playfair Display weights, Anton).
Plus swatch dots in the picker now mirror the new tokens.
Result: every theme is unmistakably distinct at first glance —
no more "did clicking that do anything?".
The 12-theme popover was congested when opened inline in the
navbar. Now it lives as a floating chip in the bottom-left corner:
always reachable on desktop and mobile, popover opens upward, and
the navbar is a clean two-column wordmark + meta layout.
- index.html: themer markup moved to end of <body>, navbar simplified
- components.css: .themer is position: fixed with bottom/left anchors,
popover opens upward (bottom: 100% + 0.5rem), responsive grid
collapses to 2 columns under 60rem
- sections.css: removed .nav__themer rules; .nav restored to flex
space-between
- README.md: rewritten concise + complete, mirrors the v0.2.0 surface
(10 reference files, 12 themes, 4 verbs, 20-question slop test)
Anti-AI-slop design skill for Claude Code, Cursor, and Codex,
plus a self-demonstrating landing page powered by Together AI.
- 4 verbs: default / audit / refine / redesign
- 10 reference files including microinteractions and structure
- 12 themes with structural fingerprints
- Two test specimens: bakery (editorial) and cmdk (technical)
- 20-question slop test covering visual, structural, and microinteraction tells
