SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshtml-slide

html-slide

Office & productivity

View repository

Updated 10-15 21:02

About this skill

html-slide — single-file HTML slide deck generator

Purpose and scope

moai-content:html-slidecreates presentation slide decks as a single-file, self-contained HTML. It inherits the architecture of the neighboring skill html-report's "zero-dependency, inline SVG, design-system-library token contract" architecture, but instead of a continuous-scroll document, it provides a 16:9 slide sequence + its own vanilla JS deck runtime(keyboard navigation, fullscreen,?print-pdf print mode, speaker notes toggle).

Core principles:

  • Single .html file — opens instantly via file://without an external build step or runtime SPA dependency
  • Infographics are authored directly by the LLM as inline SVG — 100% accurate Korean numbers and labels, crisp when zoomed, reproducible
  • Photo-realistic and illustration images are generated with Higgsfield MCP or codex(gpt-image-2) — only allowed backends are used (references/image-backend-policy.md)
  • design-system-library 75 brand tokens applied — each token provides a link to its getdesign.md detail page
  • Editable PPTX output is delegated to pptx-designer(moai-office) chaining — it is not implemented in-house (to prevent duplication and blurred responsibility)

Manuscript SSOT: every deck uses a structured manuscript deck.json(title/bullets/chart-data/image-path/layout-key/notes) as its single source of truth. Both the HTML render and (when chaining) the pptx-designer PPTX render consume the same manuscript — generating objects directly from the manuscript rather than reverse-mapping pixels to OOXML is the guarantee mechanism for "editable PPTX."

Input

Argument Required Default Description
topic / natural language topic ✓ — Deck topic, target audience, presentation purpose
design_system — claude claude | clickhouse | clay or design-system-library's 75 systems. When specified, the corresponding brand tokens are applied via Tailwind Play CDN + shadcn vanilla components. The getdesign.md preview link for each token is references/design-system-links.md
slide_count / presentation duration — recommended from the topic 3분=5-7장 · 10분=10-15장 · 30분=20-30장
aspect_ratio — 16:9 16:9(projector standard) | 1:1(social/card news)
locale — ko ko | en — headline and copy language
image_backend — higgsfield higgsfield(Higgsfield MCP, default) | codex(gpt-image-2, ChatGPT subscription quota) | svg-only(SVG decoration only, no images)
export_pptx — false true When set, editable .pptx is also produced via pptx-designer chaining
output_path — <cwd>/reports/<slug>-slides-<YYYYMMDD>.html Output path

Output

  • Primary deliverable: a single .html file (<cwd>/reports/<slug>-slides-<YYYYMMDD>.html)
    • self-contained: opens directly in the browser, can be attached to email and used offline
    • External dependencies: font CDN + Tailwind Play CDN when design_system is specified; only 1 font CDN when not specified
  • Parallel deliverables (export_pptx: true ): editable .pptx (pptx-designer chaining)
  • manuscript: deck.json (common source for both HTML and PPTX, preserved in the output directory)

Core workflow (9 steps)

1. Context gathering

AskUserQuestionwith design_system (75 systems, default claude)·presentation duration (number of slides)·whether images are needed·whether PPTX output is needed. When selecting design_system, references/design-system-links.mdguide users to the detailed page for each token via the getdesign.md link so they can check it in a preview. Lecture/presentation context — In environments with many non-developer audience members, daytime, and projectors, light themes (claude·notion·apple·stripe·mintlify) are safe. Dark is recommended only when the presentation space can be darkened.

2. Build manuscript SSOT (core)

deck.json Write the manuscript first — title/bullets/chart-data/image-path/layout-key/notes. This manuscript is the common source for both HTML rendering and pptx-designer PPTX rendering. Schema: references/deck-manuscript-schema.md. layout-key is aligned with the pptx-designer 9 archetypes (Title/Agenda/Problem/Solution/Features/Stats/Team/CTA/Closing).

3. Infographic = generate inline SVG directly

Charts, diagrams, KPI cards, and timelines are written directly by the LLM as inline SVG. To ensure 100% accuracy for Korean numbers and labels, do not bypass with bitmap images. Pattern library: references/inline-svg-infographics.md.

4. Bitmap image generation (if needed) — image backend policy

Only slides that require bitmaps that cannot be expressed as SVG, such as photo heroes or illustration concepts, are generated with an image backend. Policy: references/image-backend-policy.md.

Backend Model Authentication Recommended use
higgsfield (default) GPT Image 2·Nano Banana Pro·Soul 등 11종 Higgsfield MCP(API 키) Production·idempotent·CI unattended
codex (officially added 2026-06-17) gpt-image-2 codex CLI + ChatGPT OAuth (subscription limit, no API key required) Local·developer·reuse subscription limit
antigravity Imagen·Nano Banana (agy -p) Google OAuth browser + subscription quota ⚠️ Not recommended — OAuth/quota/CI unattended not possible, local one-off prototype only
svg-only (no image) — Offline·cost-sensitive·fast fallback

Only the above 4 backends are allowed. Other external image backends (MCP·API·gateway) are not used — references/image-backend-policy.md.

If Korean text is included in the image, moai-media:gpt-image-2-promptuse (6-Block prompt builder) to give verbatim instructions, then generate with the selected backend.

5. Apply design-system-library tokens

When design_system is specified, systems/<name>.md render tokens → Tailwind Play CDN config + shadcn vanilla components. If unspecified, use the zero-dependency default template. Reuse the same contract as html-report. Users can check tokens in advance via the getdesign.md link before selecting.

6. Assemble single-file HTML deck

16:9 slide container + own vanilla JS deck runtime (keyboard navigation·fullscreen·?print-pdf print mode·speaker notes toggle·progress bar) into a single .htmlproduced by. Runtime implementation: references/html-runtime.md.

7. AI slop post-processing (mandatory)

Apply the ai-slop-reviewer → humanize-korean chain to all slide copy·speaker notes text. CLAUDE.local.md §3-2 HARD rule.

8. PPTX output (optional, when export_pptx: true)

deck.json hand off the manuscript to pptx-designer(moai-office) and chain. pptx-designer generates editable OOXML .pptx with pptxgenjs (manuscript→object direct generation). html-slide itself does not implement PPTX generation logic. Chaining protocol: references/pptx-chaining.md.

9. Self-inspection

Open single HTML·?print-pdf self-inspect print preview·speaker notes display·image broken link·Korean font rendering·image backend policy compliance (use allowed backends only), then report PASS/FAIL. When chaining PPTX, integrate and report pptx-designer QA results.

Apply design system (design_system parameter)

design_system As input, moai-design:design-system-libraryload brand tokens from Tailwind Play CDN + shadcn vanilla componentsto render. Provides the same two render engines as html-report.

design_system Engine External dependency Output characteristics
Unspecified 0 dependencies (default template) Only 1 font CDN Offline·print·email attachment possible
claude / clickhouse / clay / 75개 Tailwind Play CDN Tailwind CDN + font CDN Apply brand mood, internet connection required

Suitable slides per theme (auto-recommended)

Presentation nature Recommended design_system
Business plan·report·editorial (default) claude (warm editorial, cream+coral)
Tech·data·engineering·dark projector clickhouse (dark tech)
Product intro·SaaS·startup notion·apple·stripe·mintlify (light, clean)
Marketing·keynote·impact spotify·nike·airbnb (bold)
Non-developer audience·daytime·projector (light safe) claude(default) · notion · apple · stripe · mintlify
Dark (when the room can be dimmed) clickhouse · vercel · linear.app · supabase · binance

Lecture recommendation (based on getdesign.md collection of 74 showcases): for non-developer audiences (~75%)·daytime·projector environments, light is safe. Currently claudeis safe, and if you want variation, notion·apple·stripe·mintlify. Dark only when the presentation space can be dimmed — clickhouse·vercel·linear.app etc. Of the total 75, 19 (⚙️) are lightweight tokens, so fonts are based on system sans-serif.

getdesign.md preview link

For each design_system value, references/design-system-links.md의 https://getdesign.md/<slug> links to the detail page. Before choosing a theme, the user can open the link to check the palette·typography·mood directly. The full mapping table of all 75 systems (repository system name → getdesign.md slug) is managed in that file.

Chain integration

[원고/콘텐츠 스킬] → moai-core:ai-slop-reviewer → moai-content:humanize-korean → moai-content:html-slide
                                                                            ↓ (export_pptx: true)
                                                                moai-office:pptx-designer

Branch when images are needed:

html-slide → moai-media:higgsfield-image (Higgsfield MCP, 기본)
           → moai-media:gpt-image-2-prompt (한국어 verbatim 프롬프트 빌더) → higgsfield-image
           → codex exec "$imagegen ..." (image_backend: codex 시, 로컬)

design_system application is automatically loaded from design-system-library — no separate preceding skill invocation is needed.

Usage Examples

Example 1: Business plan slides (default claude theme)

AI 슬라이드 스킬 스타트업 사업계획서 10장 슬라이드로 만들어줘. claude 테마로.

Example 2: Data infographic slides + PPTX

3분기 매출 분석 슬라이드 HTML로 만들고, 편집 가능한 PPTX로도 저장해줘.

Example 3: Dark theme technical presentation

신규 API 아키텍처 기술 발표 15장, clickhouse 다크 테마로 슬라이드 HTML 만들어줘.

Example 4: codex backend images

제품 런칭 슬라이드 만들어줘. 히어로 이미지는 codex로 생성하고, notion 테마 적용.

Example 5: Preview themes and choose

슬라이드 만들 건데, 디자인 토큰 후보들 getdesign.md 링크로 보여주고 내가 고를게.

What it does not do

  • Continuous-scroll documents are handled by moai-content:html-report— this skill is dedicated to slide sequences (16:9 pages).
  • It does not directly generate editable .pptx — pptx-designer(moai-office) chaining delegates that.
  • Prompts for NotebookLM input are handled by moai-office:notebooklm-slide-prompt.
  • It does not introduce build steps or runtime SPA dependencies such as React/Vue/webpack/vite — file:// the principle is instant open.
  • references/image-backend-policy.md's allowed backends (Higgsfield MCP + codex) only are used. No other external image backends are used.
  • It does not split into multiple files — the HTML output is a single .html file.

Reference Documents

Design document

Sample

Neighboring skills (chaining)

Self-review

When slide generation is finished, open the produced single .html in a browser and check the number of slides, 16:9 ratio, navigation,?print-pdf print mode, speaker notes, Korean font rendering, and infographic SVG accuracy through self-review, and after confirming compliance with the image backend policy (using only allowed backends), report the PASS/FAIL result. When chaining PPTX, integrate and report the pptx-designer QA (empty placeholders, overflow, color contrast 4.5:1) results. If there are issues, automatically fix and regenerate.