html-deck-editorial

name: html-deck-editorial description: | Generate a single-file HTML presentation deck with magazine-grade editorial styling. Use whenever the user asks for an "html deck", "editorial slides", "magazine style presentation", "beautiful slides", "美观 PPT", or "网页版幻灯片" — i.e. a slide-style visual deliverable AND a beautiful, designer-looking result is expected. Output is one self-contained .html file (inline CSS + JS, no build, no npm), printable to PDF via the browser, with keyboard navigation. Prefer this over native .pptx when the user wants visual quality over Office compatibility. when_to_use: | When the user wants a slide-style HTML deliverable with editorial polish — pitch decks, talks, internal review decks — and visual quality matters more than Office compatibility. Prefer over pptx-editorial for HTML output. tags: - presentation - html - deck - editorial

HTML Editorial Deck

You will generate one self-contained .html file that presents the user's content as a magazine-style slide deck. Write the file to the workspace using the available file-writing tool (e.g. file_tool write_file or workspace_file_tool), then return its path.

⚠️ Hard rules — NO exceptions

0. MATCH THE USER'S LANGUAGE. If the prompt is Chinese (中文), ALL slide content (kickers, titles, body, captions) must be in Chinese. NEVER copy English template phrases like RESEARCH BRIEF / THE NEXT PARADIGM into a Chinese deck — translate them (研究简报 / 下一个范式). Same applies to other languages.

1. One file only. All custom CSS + JS inline. No external <script src=>, no images you don't generate inline (use CSS color blocks or SVG). One exception: a single Google Fonts <link rel="stylesheet" href="https://fonts.googleapis.com/..."> is allowed (and required) for the two typography families below — there is no other external resource permitted.

2. Pick exactly ONE palette from the 5 below. Never mix hex values across palettes. Never invent new hex values.

3. Use only the 2 font families per palette. No custom fonts.

4. Forbidden visual elements (output will look generic if you violate): drop-shadow, box-shadow, border-radius > 2px, gradient backgrounds, blur, emoji as decoration, clipart, stock-photo placeholders, bevel, glassmorphism.

5. Real content only. No lorem ipsum, no [Title] placeholders, no fabricated statistics. If the user didn't give data for a slot, leave that slot out — don't fill with junk.

6. Slide count is driven by content. Short content: 6–12 slides. Long content: 15–25. Do not pad. Do not omit user material.

🎨 Palettes — pick ONE, use only its 4 hex values

Each palette: ink (text + dark surfaces), paper (background), paper-tint (subtle alt background), ink-tint (subtle alt text / dividers).

• Monocle (default / business / tech) ink #0a0a0b · paper #f1efea · paper-tint #e8e5de · ink-tint #18181a
• Indigo Porcelain (data / research) ink #0a1f3d · paper #f1f3f5 · paper-tint #e4e8ec · ink-tint #152a4a
• Forest Ink (sustainability / culture) ink #1a2e1f · paper #f5f1e8 · paper-tint #ece7da · ink-tint #253d2c
• Kraft Paper (humanities / literature) ink #2a1e13 · paper #eedfc7 · paper-tint #e0d0b6 · ink-tint #3a2a1d
• Dune (art / design / fashion) ink #1f1a14 · paper #f0e6d2 · paper-tint #e3d7bf · ink-tint #2d2620

✒️ Typography

• Display (titles, big numbers): 'Playfair Display', 'Noto Serif SC', serif
• Body (paragraphs, captions, UI): 'Inter', 'Noto Sans SC', sans-serif
• Load via Google Fonts <link> is the only allowed external resource.
• kicker (small uppercase labels above titles): 11px, letter-spacing: 0.12em, text-transform: uppercase, color = ink-tint.
• Slide titles: 5–10vw display serif, line-height 1.05.
• Body: 16–18px, line-height 1.6.
• folio (page number bottom right): 01 / 12 style, Inter 11px.

📐 10 layouts — reuse freely, pick by content shape

🖼️ Visual blocks (in place of images)

Since you cannot fetch images, generate visual blocks using:

• CSS color blocks with paper-tint / ink-tint background
• Inline SVG: geometric shapes (circles, lines, rectangles) using palette colors
• For data: hand-drawn-feeling bar/line charts inline SVG with palette colors

Never use external image URLs, never use Unsplash placeholders.

⌨️ Interaction (must include)

• Keyboard: ← previous slide, → next slide, Home first, End last
• URL hash sync: #slide-3 jumps to slide 3
• Mouse: click on right half of viewport = next, left half = previous
• Top progress bar (1px tall, ink color, filled to current slide ratio)

📝 Output checklist

Before writing the file, mentally verify:

• Exactly one palette, all hex values match
• Exactly 2 fonts (display + body), both loaded via single Google Fonts link
• No forbidden visual elements (shadows, gradients, emoji decoration, …)
• Slide count appropriate to content density (6–25 typical)
• Cover (L01) on slide 1
• Folio + progress bar present
• Keyboard nav + hash sync wired
• All content from the user's input, no fabricated data

Then write the file to the workspace, name it deck.html (or <topic>-deck.html if the user gave a topic).

📎 Deliver as a clickable chip in chat

File-producing tools return the registered file reference directly. After writing the file, read the tool's response for the markdown_link field (or for file_refs[].markdown_link when there are multiple files) and use that string verbatim as the first line of your final answer.

✅ CORRECT (chat renders the returned markdown_link as a clickable chip):

[deck.html](file:3a22d32b-36c8-4aa6-8ea4-57a5f6e87181)

The exact UUID comes from the tool's response — do not fabricate one.

❌ WRONG: guessing a UUID, calling get_file_info to "fetch" the file_id (its FileInfo return shape does not include a file_id — workspace helpers return file metadata, not the registered chip reference), or wrapping the chip in a code fence (renders as inert text — user cannot click).

After the chip line, report: number of slides, palette chosen, and a 1-line summary of layout choices (e.g. L01 cover → L02 divider → 3× L03 stats → …).