---
name: awesome-html
description: >-
Turn Markdown, research notes, reports, or any content into a polished, self-contained
single-file HTML document styled with the AwesomeDesignSystem. Use when the user asks to
"make this into an HTML page/report/handout", "create a beautiful HTML doc", "turn this
markdown into a webpage", build a single-file slide/one-pager, or wants a shareable,
no-build HTML artifact that looks designed rather than default. Produces one .html file
(inline tokens, distinctive type, tasteful CSS-only motion, dark mode, print-ready).
---
# AwesomeHTML — content → designed single-file HTML
Produce ONE self-contained `.html` file (all CSS, fonts, and JS inline or via CDN — no build
step, opens by double-click) that turns content into an editorial, designed document. It must
read as authored, never like a default Markdown export.
## 0. Load what you need
Read from the knowledge base (two levels up): `foundations/tokens.md` (inline these tokens),
`foundations/typography.md` (long-form type + 日本語 if present), `motion/recipes.md` (the
**CSS-only** recipes — no React here), and skim `00-philosophy/human-not-ai.md` for the standard.
## 1. Commit to a document direction
Editorial/magazine is the strong default for documents. Choose a distinctive display+body pair
(e.g. Fraunces/Newsreader + a clean grotesque; or a technical JetBrains Mono accent). Pick a
dominant color + one accent in OKLCH. `VISUAL_DENSITY` low: generous measure and whitespace make
long-form feel premium.
## 2. Non-negotiable structure & rules
- **Self-contained:** one file. Inline `
…title block……content sections…