Beautiful HTML Templates
Use the bundled template library as a visual system, not as loose inspiration.
Library
- Template catalog:
assets/library/index.json
- Template files:
assets/library/templates/<slug>/
- Shared runtime:
assets/library/runtime/deck-stage.js
- Detailed upstream workflow:
references/upstream-agent-guide.md
Never edit the installed library in place. Copy the selected template and any
required sibling assets into the user's project workspace before adapting it.
Workflow
- Establish the deck's occasion, audience, topic, and desired mood. Ask a short
question only when those signals are missing or genuinely ambiguous.
- Read
assets/library/index.json. Match the brief against mood, tone,
best_for, formality, density, and scheme; treat occasion as a soft
signal. Shortlist three visually distinct candidates when the user has not
already chosen a template.
- Read only the shortlisted templates. Create one real-content cover preview
for each candidate, keeping its fonts, palette, decorations, and runtime.
Present the previews and let the user choose before building the full deck.
- Copy the chosen template folder into the working project and replace all
placeholder text, numbers, names, dates, and images with the user's content.
- Add or remove slides as needed. New layouts must use the chosen template's
existing fonts, colors, spacing rhythm, decorative vocabulary, components,
chrome, and navigation behavior. Do not mix visual systems from other
templates.
- Open previews and the final HTML in an available browser, verify navigation
and visual fit, then provide the absolute output path.
Read references/upstream-agent-guide.md before building a complete deck. It
contains the detailed matching fields, adaptation rules, and layout-extension
guidance. Adapt platform-specific commands to the current environment rather
than assuming macOS shell commands are available.
Source
Adapted for Codex from
zarazhangrui/beautiful-html-templates.
The bundled library is provided under its upstream MIT license.
1---2name: beautiful-html-templates3description: Build or restyle design-led HTML slide decks using a curated library of 34 complete templates. Use for web-based presentations and standalone HTML decks; do not use when the required deliverable is PPTX or Google Slides.4---56# Beautiful HTML Templates78Use the bundled template library as a visual system, not as loose inspiration.910## Library1112- Template catalog: `assets/library/index.json`13- Template files: `assets/library/templates/<slug>/`14- Shared runtime: `assets/library/runtime/deck-stage.js`15- Detailed upstream workflow: `references/upstream-agent-guide.md`1617Never edit the installed library in place. Copy the selected template and any18required sibling assets into the user's project workspace before adapting it.1920## Workflow21221. Establish the deck's occasion, audience, topic, and desired mood. Ask a short23 question only when those signals are missing or genuinely ambiguous.242. Read `assets/library/index.json`. Match the brief against `mood`, `tone`,25 `best_for`, `formality`, `density`, and `scheme`; treat `occasion` as a soft26 signal. Shortlist three visually distinct candidates when the user has not27 already chosen a template.283. Read only the shortlisted templates. Create one real-content cover preview29 for each candidate, keeping its fonts, palette, decorations, and runtime.30 Present the previews and let the user choose before building the full deck.314. Copy the chosen template folder into the working project and replace all32 placeholder text, numbers, names, dates, and images with the user's content.335. Add or remove slides as needed. New layouts must use the chosen template's34 existing fonts, colors, spacing rhythm, decorative vocabulary, components,35 chrome, and navigation behavior. Do not mix visual systems from other36 templates.376. Open previews and the final HTML in an available browser, verify navigation38 and visual fit, then provide the absolute output path.3940Read `references/upstream-agent-guide.md` before building a complete deck. It41contains the detailed matching fields, adaptation rules, and layout-extension42guidance. Adapt platform-specific commands to the current environment rather43than assuming macOS shell commands are available.4445## Source4647Adapted for Codex from48[`zarazhangrui/beautiful-html-templates`](https://github.com/zarazhangrui/beautiful-html-templates).49The bundled library is provided under its upstream MIT license.
qingmou314-design