Web Prototype

Web Prototype Skill

Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.

Resource map

web-prototype/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + class system + chrome (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready section skeletons
    └── checklist.md        ← P0/P1/P2 self-review

Workflow

Step 0 — Pre-flight (do this once before writing anything)

1. Read assets/template.html end-to-end — at minimum through the <style> block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to <style> rather than re-defining it inline on every section.
2. Read references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.
3. Read the active DESIGN.md (already injected into your system prompt). Map its colors to the six :root variables in the seed; don't introduce new tokens.

Step 1 — Prepare the artifact from the seed

Choose one kebab-case artifact slug before composing the page. Use assets/template.html as the seed for the final artifact HTML.

Do not write a project-root HTML draft with file-write before emitting the final <artifact>. The live-artifact output is the canonical HTML file for this generation turn; an extra index.html, cast.html, or brief-derived draft can be stranded beside it as an orphan.

Replace the six :root variables with the active design system's tokens. Replace the page <title> and the topnav brand.

Step 2 — Plan the section list

Pick layouts before writing copy. Default rhythms (from layouts.md):

State the chosen list in one sentence to the user before writing — they can redirect cheaply now and not after 200 lines of HTML.

Step 3 — Paste and fill

For each chosen layout, copy the <section> block from layouts.md into <main id="content"> of the artifact HTML. Replace bracketed [REPLACE] strings with real, specific copy from the user's brief. No filler — if a slot is empty, the section is the wrong choice; pick a different layout. Treat every .ph-img block as layout scaffolding and replace it when the section requires imagery, following the real-first rule below before self-checking.

Step 4 — Self-check

Run through references/checklist.md top to bottom. Every P0 item must pass before you move on. P1 items should pass; P2 are bonus.

Step 5 — Emit the artifact

Wrap the completed HTML in <artifact> tags using the artifact slug as the identifier. One sentence before describing what's there. Stop after </artifact>.

Hard rules (the seed protects most of these — don't fight it)

• Single accent, used at most twice per screen. Eyebrow + primary CTA is the default budget.
• Display font is serif (Iowan Old Style / Charter / Georgia in the seed). Sans for body. Mono for numerics, captions, eyebrows.
• Real imagery, never remote hotlinks. .ph-img is temporary layout scaffolding, not the default final treatment. For a named real-world referent, search/fetch the correct real image and embed it as a data URI in the artifact HTML; never generate, draw, or invent a substitute. For illustrative or atmospheric subjects, prefer suitable fetched real photography and use image generation only as a fallback. If no compliant asset can be acquired or embedded, keep an intentional labeled .ph-img and disclose the limitation in the sentence before the artifact.
• Preserve real-image geometry. Inspect each acquired image's intrinsic width and height, replace the entire .ph-img scaffold with an <img class="content-img">, and set matching width and height attributes. Never copy .ph-img, .wide, .portrait, or .square onto a real image. Content images must show the full frame; object-fit: cover is only for intentionally croppable decorative fills. The seed's .content-img rule bounds unusually tall or wide images to the viewport while keeping the other axis automatic.
• Mobile reflow already works via the seed's media query at 920px. Don't break it by adding fixed widths.
• data-od-id on every <section> so comment mode can target it.

Output contract

<artifact identifier="kebab-case-slug" type="text/html" title="Human Title">
<!doctype html>
<html>...</html>
</artifact>

OpenDesign derives the canonical HTML artifact from this identifier. Do not also write another root HTML file for the same generation turn.

One sentence before the artifact. Nothing after.