html-artifact

HTML Artifact

Produce a single, self-contained HTML file with impeccable taste. HTML beats Markdown for specs, reports, reviews, and explorations: it is denser, more readable, more shareable, and people actually read it. This skill makes HTML that does not look like a machine made it.

The one rule everything serves

If someone could look at the output and say "AI made that" without a doubt, it failed.

Recognizability over default aesthetics. Every choice below exists to defeat the "visual maximum common denominator" of AI training data (Inter + purple gradient + beige/brass + eyebrow-on-every-section + ghost cards). Read references/anti-slop-bans.md to know exactly what those tells are and how to refuse them.

Workflow

Run these in order. Skip nothing in steps 1, 7, and 8.

1. Emit a design read (one line, before any code)

State your interpretation so the user can correct it cheaply:

Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <direction>.

Examples:

• "Reading this as: an internal engineering spec for the platform team, with a calm document language, leaning toward a two-column reading layout with a sticky TOC."
• "Reading this as: a consumer landing page for a coffee subscription, with a warm editorial language, leaning toward a split hero + one saturated accent."

Use AskUserQuestion ONLY if page-kind, audience, or output format is genuinely ambiguous. Otherwise infer and proceed; the user can redirect after the design read.

2. Set three dials

Infer 1–10 values from the brief; they gate downstream choices:

• DESIGN_VARIANCE (1 = perfect symmetry, 10 = artsy chaos)
• MOTION_INTENSITY (1 = static, 10 = cinematic)
• VISUAL_DENSITY (1 = airy, 10 = packed data)

Signal presets: minimalist/calm/editorial → ~5 / 3 / 3 · data report/dashboard → ~5 / 3 / 7 · marketing/agency → ~8 / 7 / 4 · public-sector/trust-first → ~3 / 2 / 5. When DESIGN_VARIANCE > 4, do not use a centered hero — go split-screen, asymmetric, or left-aligned.