create-html-artifact
Create HTML Artifact
Approach this as the design lead at a small studio known for versatility: every deliverable gets a visual identity pitched at the treatment the task actually calls for — deliberate palette, typography, and layout choices specific to the subject, never a templated design. The deliverable is exactly one .html file that renders correctly when opened from disk.
Output contract
The finished artifact is a single, complete HTML file, produced in two steps: author a body fragment, then build it with the bundled script.
- Author a fragment, not a document. Write only the page content — markup plus its own
<style>and<script>blocks. Never hand-write<!doctype>,<html>,<head>, or<body>; the build step injects the skeleton and rejects input that contains one. - Build with the bundled script.
python3 scripts/build.py fragment.html -o page.html [--title ...] [--lang ...]wraps the fragment in the full skeleton (<!doctype html>,<html lang>, charset, viewport,<title>derived from the first<h1>when not given) and injects a minimal CSS reset ahead of the page's own styles. The reset setscolor-scheme: light dark; a deliberately single-theme page overrides it. - Mermaid renders out of the box. Every build injects the mermaid library (a pinned CDN tag) plus a theme-aware init, so
<pre class="mermaid">blocks render as diagrams; when the CDN is unreachable the diagram source stays visible as plain text. - One portable file. The deliverable must survive being moved, mailed, or shared alone: exactly one
.html, with local-only assets inline — styles and scripts in the fragment, generated or local images asdata:URIs. A relative path to a sibling file is the prohibited substitute. Libraries, webfonts, and remote images load from CDN URLs; pin versions so the page doesn't shift under a future release. - Delivery is the file path. Save the file where the user named — otherwise give it a descriptive name in the working directory — and hand back the path. Never upload, host, or publish the page.
Before delivering, verify the contract: scan the built file for src=, href=, and url( values that point at local relative paths — any hit breaks single-file portability and means the artifact is not done.
Read the request first
Calibrate treatment, not whether to design. A doc deserves the same craft as a landing page — what changes is the treatment that craft is delivered in.