A codex greenfield build produced an excellent approved comp and then an abysmal page, and the reviewer approved it. The failure chain: the implementation inventory downgraded a photographic hero to 'silhouette in SVG' and sculpted panels to 'material finish: CSS'; the builder read 'no photography on hand' as a license to avoid photographic rendering; QA looked at one full-page thumbnail; the reviewer was spawned with the builder's forked history and then scored fix claims instead of pixels; and the output contract had no way to say 'rejected'. The fixes, stage by stage: - The inventory's medium column gets a gate: a human figure, product object, machinery, or lit material is raster whatever the stack, and such regions are regenerated cleanly at asset resolution with the comp and its embedded prompt as reference. Never cropped from the comp, whose effective resolution is reference grade; the asset producer's direct bucket closes the same hole. Dropping an image-native region is a user decision at the approval point. - Generated imagery is a material, not a claim: evidence rules bind assertions, never render fidelity. - The build thread's inspection becomes a region-by-region side-by-side against the comp at legible scale, never one full-page thumbnail. - The reviewer spawns fresh, never with forked history (fork_turns: 0 in codex), and gains a rejection lane: when TYPE, MATERIAL, and the focal element are all contradicted, the first material fix is a rebuild directive the parent surfaces to the user instead of patching. Verdict passes score recaptures only; the parent's fix narration is not evidence. - The verdict-loop ceiling softens: two rounds ends an unattended run, but an attended session puts the open-items table in front of the user and lets them fund another round; any round that resolves nothing stops the loop. - Comp approval joins the roll as skip-proof: question-tool errors fall back to the decision page, delegation is recorded in the brief and the sidecar and disclosed up front, and the reviewer treats comps with no recorded pick as a material finding. - Craft floor: system display faces (Impact, Arial Black) as an own-world display voice and unicode glyphs standing in for icon systems are named failures. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
6.0 KiB
Craft floor
Load this after the direction is settled, and build without announcing the checklist. A pinned brief or the committed visual world overrides anything here; your own habit does not. When the design hook is active it already enforces the mechanical checks below as you edit: act on its findings instead of re-auditing each rule.
Verify
Each of these is a check on the built result, not an intention. Run them together in the batched inspection rounds, not as separate screenshot trips; the checks share one render.
- Contrast: body and placeholder text ≥4.5:1, large text ≥3:1. On colored surfaces tint secondary text from that hue or the foreground; never gray.
- Depth: shadows carry an offset and a soft blur. A zero-offset colored halo is decoration.
- Spacing: tight groups, generous separation, more space above a heading than below it. Read the computed values.
- Type: body measure 65–75ch, display max 6rem, tracking floor -0.04em, balanced headings, obvious scale and weight steps. Run the real copy at every breakpoint and fix what overflows.
- Motion: one authored moment, not scattered effects and not one identical entrance on every section. Exponential ease-out from an already-visible default. Reach past transform and opacity: blur, backdrop-filter, clip-path, mask, and shadow belong to the palette when they stay smooth.
- States: hover, disabled, loading, error, empty. Plus real content, working controls, responsive composition, keyboard focus.
- Copy: the product's own language. Controls name their action; errors name the problem and the recovery.
- Coverage: every brief requirement present and findable within seconds.
Refuse
These are the category's defaults, not bans: the brief's own words can earn any of them. Reaching for one when the axis is free means you were not deciding; recognizing that means rewriting the element, not softening it.
Page scaffolds:
- Same-size cards of icon plus heading plus text as the page structure. Cards are the lazy container; nested cards are always wrong.
- The hero-metric template: big number, small label, supporting stats, accent.
- A kicker or eyebrow above a heading. This one is a ban, not a default: no brief earns it back. The heading carries its own weight; delete the label and let the heading speak.
- Section numbers (01 / 02 / 03) unless the sequence itself carries information the reader needs.
- A modal for a task that needs neither interruption nor protected focus.
Surface habits:
- Gradient text. Emphasis comes from weight or size.
- Glass and blur as decoration rather than as a specific effect.
- A colored
border-leftorborder-rightabove 1px on cards, list items, callouts, or alerts. - Sparklines, progress rings, and soft-shadowed rounded rectangles standing in for content.
- Monospace as a costume for "technical" rather than for code, data, or measurement.
- A system display face (Impact, Arial Black, the platform sans) as the display voice of an own-world page. Source and self-host a face whose character matches the approved lettering; the closest installed font is a failure, not a fallback.
- Unicode glyphs or emoji standing in for an icon system. Icons are drawn, from a real library or authored SVG, in one consistent stroke and weight.
- Light or dark picked by category. Pick it from the use scene: who, where, under what ambient light.
The floor holds the mechanics; it never picks the direction. With every check green, spend the page on the committed world, and when torn between refined and committed, commit.