SJA PPT

Generate self-contained HTML slide decks for technical presentations. All styles, slide
types, and interactive features live in a single file — no build step, no dependencies
beyond CDN-loaded highlight.js.

Workflow

When asked to create a slide deck, follow this sequence:

1. Gather Content

Ask the user for the presentation topic and content. If they provide an outline, use it.
If not, ask clarifying questions:
- What's the topic?
- How many sections / slides roughly?
- Any specific data, code snippets, or diagrams to include?
- Any branding or color preferences?

2. Select a Style

Present the 8 available styles (see Style Selection below) and recommend one based on the
content context. Let the user confirm or choose another.

2.5 Content-Driven Design Selection (from Prompt Library)

Before locking in the final style, consult the 116-prompt design index to enrich
the visual decisions based on the PPT topic. This step bridges the gap between
general style selection and concrete design references.

Load references/prompt-index.md and follow the lookup workflow:

1. Theme matching — Look up the PPT topic in the topic-to-vibe table (§一).
   Get the matching vibe keywords (e.g., "dark + tech" for a tech architecture talk).

2. Filter the prompt pool — The matching vibe gives you a filtered set of prompts
   (e.g., 43 prompts matched for "dark + tech"). Scan the "typical prompts" column
   for well-known names.

3. Extract design assets from the matched prompts:
   - Fonts — Check §四 for the highest-scoring font pairings. Prefer fonts
   that appear in multiple matched prompts (stronger signal).
   - Colors — Load references/prompt-index-data.json and filter prompts
   by matching vibe, then scan their colors arrays for distinctive hex codes.
   - Components — Check the components field: if multiple prompts use badge
   or stat, consider adding those component types to the slide plan.
   - Techniques — Check §三: if the matched set leans heavily toward
   glassmorphism or stagger, incorporate those techniques.

4. Cross-reference with sja-ppt styles — §五 maps curated prompts to
   the 8 PPT styles. This confirms or adjusts the initial style recommendation.

5. Refine the style recommendation — Merge the prompt-derived insights with
   the initial sja-ppt style:
   - Font pairing from prompts may suggest a more specific font than the style default
   - Color accents can be tuned to match the prompt's distinctive palette
   - Extra CSS techniques (glass badge, stagger animation) can be pulled in

Example: "AI 架构分享" PPT
1. Topic -> dark + tech (43 matches)
2. Top matching prompts: Aethera Studio, Aetheris Voyage, Synapse Dark Hero
3. Font: Instrument Serif + Inter (3+ prompts use this)
4. Technique: glassmorphism (46 prompts), stagger (43 prompts) — both applicable
5. Style mapping -> Dark Tech or Glassmorphism
6. Final: recommend Glassmorphism with Instrument Serif headings

Only spend this step on presentations that need a polished, production-grade design.
For quick/simple decks, skip directly to step 3.

3. Plan Slide Layout

Map content to slide types (see Slide Types below). A typical tech talk structure:
Cover → Outline → Section Divider → Content slides (code/chart/diagram/etc.) → Ending

4. Generate the HTML

Use the workflow in the next section to produce the final HTML file.

Generating the HTML

Step A: Choose a style template

Load the corresponding template from assets/templates/. Each template is a
self-contained HTML file with the correct :root CSS variables, style-specific
enhancements, and a working PPT framework (navigation, fullscreen, presenter mode,
progressive reveal, and mouse wheel support).

Use the chosen template as the direct output skeleton — replace its demo slides
with the planned content. Do NOT use a separate base framework file.

Step B: Build slides

For each slide, use the corresponding slide type template from the Slide Types section
below. Replace placeholder content with actual user content. Wrap each slide in a
<section class="slide" data-slide-type="..."> tag.

Step C: Wire presenter notes

For slides that need presenter notes, add a <aside class="notes"> element inside the
slide. The presenter mode will display these when the user presses P.

Step D: Output

Write the complete HTML as a single file. The file should:
- Be self-contained (except for the highlight.js CDN and Google Fonts CDN)
- Include all CSS inline in <style> tags
- Include all JS inline in <script> tags
- Use only ASCII straight quotes in code, tags, and attributes
- Use valid UTF-8 throughout — no HTML entities for Chinese text, no broken byte sequences

CDN Dependencies

Each template includes these CDN links (already in the template):
- Google Fonts CSS (varies by style)
- highlight.js CSS theme (varies by style)
- highlight.js JS bundle

No other external dependencies.

Style Selection

8 visual styles are available. Match the style to the content mood.

Before building slides, load references/design-library.md for the comprehensive design
asset library extracted from 116 MotionSites.ai Copy prompts. It contains:

• Color palette catalog (dark/light/gradient, organized by mood)
• Font pairing strategies (top 10 combinations by usage frequency)
• Animation recipes (6 battle-tested CSS patterns)
• Layout pattern library (asymmetric split, comparison grid, stat rows, timeline)
• Special components (glass badge, liquid glass card, gradient border card, big stat)
• Design decision tree (flowchart for choosing style/color/font/animation)

When in doubt about any design choice — color, font, animation, or layout — consult
references/design-library.md first. It is the single source of truth for all visual
decisions, distilled from production-grade MotionSites designs.

1. Dark Tech (极简黑科技)

• Vibe: Sleek, futuristic, developer-centric
• Best for: Architecture deep-dives, framework talks, tech strategy
• Palette: #0a0e17 bg / #00d4ff accent / #7c3aed secondary
• Font: JetBrains Mono for code, Inter for body
• highlight.js theme: atom-one-dark

2. Academic White (清新学术白)

• Vibe: Clean, rigorous, academic
• Best for: Research presentations, paper summaries, formal reviews
• Palette: #ffffff bg / #2563eb accent / #0891b2 secondary
• Font: Charter/Georgia for headings, system-ui for body
• highlight.js theme: github

3. Cyber Terminal (赛博终端)

• Vibe: Raw, hacker aesthetic, terminal-first
• Best for: CLI tools, DevOps talks, live demos
• Palette: #0c0c0c bg / #00ff41 accent / #ff6b35 secondary
• Font: Fira Code / monospace throughout
• highlight.js theme: monokai

4. Swiss International (瑞士国际主义)

• Vibe: Grid-based, typographic, modernist
• Best for: Design system talks, UI architecture, clean presentations
• Palette: #fafafa bg / #1e3a5f (IKB) accent / #f5d000 highlight
• Font: Helvetica Neue / system sans-serif
• highlight.js theme: github

5. Glassmorphism (毛玻璃科技)

• Vibe: Layered, depth-aware, modern UI
• Best for: Product demos, UI component deep-dives, design-engineering crossovers
• Palette: gradient bg from #667eea to #764ba2 / semi-transparent white panels
• Font: Inter / SF Pro
• highlight.js theme: atom-one-dark

6. Enterprise Blue (企业蓝调)

• Vibe: Professional, trustworthy, corporate
• Best for: Internal reviews, quarterly reports, stakeholder presentations
• Palette: #0f172a bg / #3b82f6 accent / #f59e0b data highlight
• Font: Noto Sans SC for Chinese, Inter for English
• highlight.js theme: atom-one-dark

7. Gradient Clash (渐变撞色)

• Vibe: Bold, energetic, attention-grabbing
• Best for: Lightning talks, hackathon demos, bold idea pitches
• Palette: dynamic gradient backgrounds / #ff006e #ffbe0b #00f5d4
• Font: Bebas Neue / heavy display fonts
• highlight.js theme: monokai

8. Line Illustration (线条插画)

• Vibe: Playful, hand-drawn warmth, approachable
• Best for: Beginner tutorials, team onboarding, tech科普
• Palette: #fffbf5 bg / #e07a5f accent / #3d405b text
• Font: Nunito / rounded sans-serif
• highlight.js theme: github

Layout Strategy

The base .slide container uses align-items: center; justify-content: center; — content
is centered by default. Certain slide types override to flex-start for reading flow.
Follow these rules when choosing alignment and typography scale:

Centered content (居中) — default, best for visual weight

Use centered layout with larger fonts when:
- Cover and ending slides
- Section dividers
- Big quote slides
- Content slides with 3 or fewer short bullet points
- Single-stat or single-concept impact slides
- Any slide where the primary goal is emotional impact, not information density

<section class="slide slide--content slide--centered" data-slide-type="centered-content">
  <h2 class="slide-heading slide-heading--center">核心理念</h2>
  <p class="hero-text">一句话讲清楚核心价值</p>
</section>

Left-aligned content (左对齐) — for reading-heavy slides

Use left alignment (the slide type default for code/compare/timeline/content) when:
- Code slides — code reads left-to-right
- Content slides with 4+ bullet points or long paragraphs
- Comparison grids — two columns need left-anchored reading
- Timelines — vertical axis benefits from left alignment
- Flowcharts — natural left-to-right progression

Adaptive font sizing (自适应字号)

Match font scale to content density. Sparse content should use larger type — don't pad with filler.

Rule of thumb: If the slide feels empty with default fonts, it IS empty — either add content or scale up the type.

Responsive Width Strategy (v1.6)

All container widths use percentage of viewport, not fixed pixels. This ensures
content fills the screen appropriately regardless of display size.

Key rules:
- All padding uses clamp() with vh/vw units — e.g., padding: clamp(20px,4vh,50px) clamp(16px,3vw,40px)
- Never use fixed max-width: 880px or similar pixel values on content containers
- Image-heavy slides (grid, split) should vertically center when content fits, or
use flex-start with overflow-y:auto when content is tall
- Photo grid items need max-height: clamp(200px,36vh,420px) alongside aspect-ratio to
prevent them from becoming too tall on large screens

Slide Types

Each slide type has a specific HTML structure. Use exactly these patterns.

Cover (封面)

<section class="slide slide--cover" data-slide-type="cover">
  <div class="cover-content">
    <h1 class="cover-title">Title Goes Here</h1>
    <p class="cover-subtitle">Subtitle or tagline</p>
    <div class="cover-meta">
      <span>Author Name</span>
      <span>·</span>
      <span>2026-07-13</span>
    </div>
  </div>
</section>

Section Divider (章节幕封)

<section class="slide slide--divider" data-slide-type="divider">
  <div class="divider-content">
    <span class="divider-number">01</span>
    <h2 class="divider-title">Section Title</h2>
    <p class="divider-subtitle">Brief section description</p>
  </div>
</section>

Code (代码展示)

<section class="slide slide--code" data-slide-type="code">
  <h2 class="slide-heading">Slide Title</h2>
  <div class="code-block" data-language="javascript">
    <pre><code class="language-javascript">
// Code goes here
const hello = "world";
</code></pre>
  </div>
  <p class="code-caption">Optional caption explaining the code</p>
</section>

Architecture Diagram (架构图)

<section class="slide slide--arch" data-slide-type="arch">
  <h2 class="slide-heading">Architecture</h2>
  <div class="arch-diagram">
    <!-- Use inline SVG for the diagram -->
    <svg viewBox="0 0 800 400" class="arch-svg">
      <!-- boxes, arrows, labels -->
    </svg>
  </div>
</section>

Chart (数据图表)

<section class="slide slide--chart" data-slide-type="chart">
  <h2 class="slide-heading">Chart Title</h2>
  <div class="chart-container">
    <!-- Use inline SVG for charts (bar, line, pie, radar) -->
    <svg viewBox="0 0 700 400" class="chart-svg">
      <!-- chart elements -->
    </svg>
  </div>
  <p class="chart-source">Data source: XXX</p>
</section>

Comparison (对比/双栏)

<section class="slide slide--compare" data-slide-type="compare">
  <h2 class="slide-heading">Comparison</h2>
  <div class="compare-grid">
    <div class="compare-col compare-col--left">
      <h3>Option A</h3>
      <ul>
        <li>Point 1</li>
        <li>Point 2</li>
      </ul>
    </div>
    <div class="compare-col compare-col--right">
      <h3>Option B</h3>
      <ul>
        <li>Point 1</li>
        <li>Point 2</li>
      </ul>
    </div>
  </div>
</section>

Timeline (时间线)

<section class="slide slide--timeline" data-slide-type="timeline">
  <h2 class="slide-heading">Timeline</h2>
  <div class="timeline">
    <div class="timeline-item">
      <span class="timeline-dot"></span>
      <time class="timeline-date">2024 Q1</time>
      <h4>Milestone Title</h4>
      <p>Description</p>
    </div>
    <!-- more items -->
  </div>
</section>

Flowchart (流程图)

<section class="slide slide--flow" data-slide-type="flow">
  <h2 class="slide-heading">Process Flow</h2>
  <div class="flow-diagram">
    <div class="flow-row">
      <div class="flow-node">Step 1</div>
      <span class="flow-arrow">→</span>
      <div class="flow-node">Step 2</div>
      <span class="flow-arrow">→</span>
      <div class="flow-node">Result</div>
    </div>
    <!-- branches: use flow-split / flow-merge -->
  </div>
</section>

Big Quote (金句/大字报)

<section class="slide slide--quote" data-slide-type="quote">
  <blockquote class="big-quote">
    <p>The key insight in one sentence.</p>
    <cite>— Source Name</cite>
  </blockquote>
</section>

Image Grid (图片网格)

<section class="slide slide--images" data-slide-type="images">
  <h2 class="slide-heading">Gallery</h2>
  <div class="image-grid image-grid--cols-3">
    <figure>
      <div class="image-placeholder" style="background:#eee">Image 1</div>
      <figcaption>Caption 1</figcaption>
    </figure>
    <!-- more figures -->
  </div>
</section>

Content Centered (居中内容页)

For short, high-impact content that benefits from centered alignment and larger typography.
Use slide--centered modifier with slide--content, plus slide-heading--center for the
centered heading underline, and .hero-text or .sparse-list for larger fonts.

<section class="slide slide--content slide--centered" data-slide-type="centered-content">
  <h2 class="slide-heading slide-heading--center">核心结论</h2>
  <p class="hero-text">重构后构建时间从 12 分钟降至 45 秒，DX 提升 15 倍。</p>
</section>

Multi-point centered variant — use .sparse-list for 2-3 key points:

<section class="slide slide--content slide--centered" data-slide-type="centered-content">
  <h2 class="slide-heading slide-heading--center">三大原则</h2>
  <ul class="sparse-list">
    <li><strong>性能优先</strong> — FCP < 1.5s，LCP < 2.5s</li>
    <li><strong>类型安全</strong> — TypeScript strict mode，零 any</li>
    <li><strong>可观测性</strong> — 全链路 trace，错误率 < 0.1%</li>
  </ul>
</section>

Table (表格页)

For data tables. The table uses a placeholder style — inform the user they should replace
placeholder data with real content. The table adapts to the style's color scheme.

<section class="slide slide--table" data-slide-type="table">
  <h2 class="slide-heading">性能对比</h2>
  <div class="table-container">
    <table class="data-table">
      <thead>
        <tr><th>方案</th><th>构建时间</th><th>包大小</th><th>首屏</th></tr>
      </thead>
      <tbody>
        <tr><td>Webpack 5</td><td>12 min</td><td>2.8 MB</td><td>3.2s</td></tr>
        <tr><td>Vite 5</td><td>45 s</td><td>1.6 MB</td><td>0.8s</td></tr>
        <tr><td>Turbopack</td><td>28 s</td><td>1.4 MB</td><td>0.6s</td></tr>
      </tbody>
    </table>
  </div>
  <p class="table-caption">* 测试环境: M1 Max, 64GB RAM, Node 22</p>
</section>

Table Layout — Lessons Learned (v2.0)

After 7 iterations of debugging table overflow/centering/stretching, the stable approach:

1. Slide: overflow: hidden — no table-level scrolling. 5-8 rows with compact padding fit 1080p+.
2. Table container: Do NOT use flex:1 (stretches to fill) or height:100% (rows go obese). Natural height.
3. Alignment: justify-content: flex-start — heading pinned top-left, consistent with other slides.
4. Not justify-content: center — shifts heading, breaks visual consistency.

Anti-patterns discarded:
- height:100% on data-table → rows stretch comically tall
- flex:1 on table container → huge empty box below few rows
- justify-content:center → heading moves
- Excessive padding compression → cramped, still doesn't fit

.slide--table{padding:clamp(16px,3vh,30px) clamp(16px,3vw,40px) clamp(8px,2vh,16px);
  align-items:flex-start;justify-content:flex-start;overflow:hidden!important}
.table-container{max-width:80%;width:100%;margin-top:clamp(10px,1.5vh,14px)}
.data-table{width:100%;border-collapse:collapse;font-size:clamp(.8rem,1vw,.92rem)}

Overview Help Panel (v2.0)

ESC overview includes a keyboard shortcut bar at the bottom. Add inside #ov:

<div class="ov-help"><span><kbd>← →</kbd> 翻页</span>…</div>

CSS: .ov-help flexbox row, <kbd> styled as key badges with rgba background + border.

Media Placeholder (媒体占位)

Generic placeholder for images, screenshots, diagrams, or videos that the user will provide.
The dashed border and upload icon hint signal that this is a placeholder to be replaced.

<section class="slide slide--media" data-slide-type="media">
  <h2 class="slide-heading">系统截图</h2>
  <div class="media-placeholder">
    <div class="media-placeholder-icon">↑</div>
    <p>请在此处插入图片或截图</p>
    <p class="media-placeholder-hint">支持拖拽或粘贴，替换此占位区域</p>
  </div>
  <p class="media-caption">图：系统架构概览</p>
</section>

For image grids and media placeholders, always remind the user in the output:
> 提示： 图片/表格占位区域已预留，请将占位内容替换为你的实际素材。

Day Split (图文双栏)

Left text + right image layout. Ideal for travel itineraries, product showcases,
or any slide where a photo accompanies descriptive text. The image column can hold
a .day-photo placeholder or an actual <img> tag.

<section class="slide slide--split" data-slide-type="day-split">
  <h2 class="slide-heading">Day 1 详细行程</h2>
  <div class="day-split">
    <div class="day-split-left">
      <div class="warm-card"><strong>09:00</strong> First item description.</div>
      <div class="warm-card"><strong>12:00</strong> Second item description.</div>
      <div class="warm-card"><strong>15:00</strong> Third item description.</div>
    </div>
    <div class="day-split-right">
      <div class="day-photo">
        <div class="photo-icon">⛰</div>
        <div class="photo-label">Photo Title</div>
        <div class="photo-hint">Replace with image</div>
      </div>
      <div class="photo-caption">Caption text</div>
    </div>
  </div>
</section>

To embed an actual image, replace the .day-photo inner content with:

<img src="path/to/image.jpg" alt="Description"/>

Photo Grid (图片画廊)

Grid of image placeholders for galleries, food guides, or product showcases.
Supports 2, 3, or 4 columns via modifier classes.

<section class="slide slide--grid" data-slide-type="photo-grid">
  <h2 class="slide-heading">Gallery Title</h2>
  <div class="photo-grid photo-grid--2col">
    <div class="photo-grid-item">
      <div class="pg-icon">⛰</div>
      <div class="pg-label">Item Name</div>
      <div class="pg-hint">Replace with image</div>
    </div>
    <!-- repeat for each item -->
  </div>
</section>

Always remind the user: the dashed-border placeholders can be replaced with
actual <img> tags. Set border-style:solid and padding:0 on the container
when inserting a real image.

Ending (结束页)

<section class="slide slide--ending" data-slide-type="ending">
  <div class="ending-content">
    <h2>Thank You</h2>
    <p>Q&A</p>
    <div class="ending-links">
      <span>github.com/username</span>
      <span>@twitter_handle</span>
    </div>
  </div>
</section>

Progressive Reveal

For list-based slides, use data-reveal to make items appear one at a time:

<section class="slide" data-slide-type="content">
  <h2>Agenda</h2>
  <ul class="reveal-list">
    <li data-reveal>First point — appears on first keypress</li>
    <li data-reveal>Second point — appears on second keypress</li>
    <li data-reveal>Third point — appears on third keypress</li>
  </ul>
</section>

Interactive Features

The framework provides these user interactions out of the box:

• ← → or Scroll Wheel or Click — navigate between slides (wheel has 600ms throttle; wheel respects slide overflow — only navigates at scroll boundary)
• ↓ — progressive reveal (if data-reveal items present), then next slide
• F — toggle fullscreen
• P — presenter mode (shows current slide + notes + timer + next slide preview)
• Home / End — jump to first / last slide
• Click right half — next slide; Click left half — previous slide
• Touch swipe — mobile swipe navigation
• Slide dots — clickable numbered dots at the bottom center for direct page jumping
• ESC — toggle slide overview (card-style grid, click to jump)
• A — toggle auto-play mode (5s per slide, progress bar shows countdown)

Auto-Play (v2.0)

Press A to toggle automatic slide advancement at 5-second intervals. The progress
bar acts as a countdown — fills from left to right over the duration. Manual navigation
(keyboard, wheel, click) still works and resets the timer. A "▶ 自动播放中" indicator
appears in the top-right corner. Plays through progressive reveal items, then advances.
Stops automatically after the last slide.

Slide Overview (v2.0)

Press ESC to toggle a card-style grid of all slides. Each card shows page number,
type, and heading. Click to jump. A keyboard shortcut reference bar at the bottom
lists all available keys (←→/ESC/A/F/Home/End). Cards use extracted text, not DOM cloning.

PDF Export (v1.9) — Removed in v2.0

window.print() is unreliable with absolute-positioned single-page HTML slides.
Removed in v2.0. The @media print stylesheet remains for manual browser print if needed.

Animation Library (v2.0)

Five built-in animation classes:

• Single element: <li class="anim-fadeRise"> — animates when parent slide activates.
• Staggered list: add .anim-stagger to <ul> or <ol>, children auto-get staggered delays:
  html <ul class="anim-stagger"> <li>First — appears immediately</li> <li>Second — appears 0.1s later</li> <li>Third — appears 0.2s later</li> </ul>
  Stagger delays are applied via JS (initStagger()) when the slide activates.

Print Support (v1.9)

Ctrl+P automatically uses a clean white print layout via @media print:
- Dark backgrounds → white, all text → black
- Navigation UI (progress bar, dots, overlay) hidden
- Each slide gets page-break-after: always
- Glass effects, shadows, and blur removed for crisp output

Slide Dots (v1.7)

A row of clickable page indicators at the bottom of the screen. Each dot represents
a slide; clicking jumps directly to that slide. The active slide's dot is highlighted.

Add to the HTML body (after #pb progress bar, before #slideCounter):

<div class="slide-dots" id="sd"></div>

CSS:

.slide-dots{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:101;padding:4px 12px;border-radius:9999px;background:rgba(0,0,0,.3);backdrop-filter:blur(8px)}
.sd{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:background .25s,transform .25s;font-size:0;display:inline-block}
.sd:hover{background:rgba(255,255,255,.45);transform:scale(1.3)}
.sd.on{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}

JS initialization (in n() after slide array is populated):

function bu(){var c=document.getElementById('sd');if(!c)return;c.innerHTML='';dots=[];s.forEach(function(_,d){var dt=document.createElement('span');dt.className='sd';dt.textContent=d+1;dt.title='Jump to page '+(d+1);dt.addEventListener('click',function(e){e.stopPropagation();a(d,!0)});c.appendChild(dt);dots.push(dt)});ud()}
function ud(){dots.forEach(function(dt,d){dt.classList.toggle('on',d===i)})}

Call bu() in n() after slides.forEach(...), and ud() at the end of goToSlide().

Presenter Notes

Add speaker notes that appear in presenter mode (P key):

<section class="slide">
  <h2>Main Point</h2>
  <p>Content visible to audience</p>
  <aside class="notes">
    - Mention the Q3 numbers here
    - Pause for questions after this slide
  </aside>
</section>

Resources

assets/templates/ — Style-Specific Base Templates

Each template is a self-contained, ready-to-run HTML file demonstrating a single style.
These are the direct output skeleton — no separate base framework needed.

How to use templates: When generating a presentation in a specific style, use the
corresponding template as the starting HTML skeleton. Each template already has the
correct :root CSS variables, style-specific enhancements, and a working PPT framework
(4 demo slides with navigation). Simply replace the demo slides with the planned content.

references/design-library.md

Comprehensive design asset library. Extracted from 116 MotionSites.ai Copy prompts.
Contains: color palettes (grouped by mood), font pairing strategies, animation recipes,
layout patterns, special component CSS, style-to-PPT-type matching table, and a design
decision tree. This is the primary reference for all design decisions when generating slides.

references/prompt-index.md

Searchable prompt index. Structured catalog of all 116 prompts organized by:
- PPT topic mapping (§一) — which prompts match which presentation themes
- Component type (§二) — hero, features, stats, footer, etc.
- Visual technique (§三) — glassmorphism, animation, gradient, video-bg, etc.
- Font pairing (§四) — most common font combinations and their prompt counts
- Curated picks (§五) — best prompts mapped to each sja-ppt style
- Usage workflow (§六) — step-by-step lookup process

Load this file as the first reference when designing a new PPT. Use the topic-to-vibe
table to quickly narrow 116 prompts down to a relevant handful, then extract fonts,
colors, and techniques from the matched set.

references/prompt-index-data.json

Machine-readable prompt metadata. JSON array of all 116 prompts with structured fields:
id, title, category, type, fonts[], colors[], techniques[], vibes[],
components[]. Used for programmatic filtering — e.g., filter by vibes: ["dark", "tech"]
and type: "hero" to find hero-section prompts for a dark tech presentation.

references/style-guide.md

Detailed design tokens for all 8 styles: exact CSS variable values, font stacks, highlight.js
theme names, gradient definitions. Load this file when you need the raw variable values.

references/media-assets.json & media-assets.md

Media asset library. Extracted from the same 116 MotionSites prompts:
- 123 CloudFront mp4 videos — categorized by use case (hero backgrounds, tech/dark,
creative, app/product, special scenes). Ready for <video> background embeds.
- 51 Figma PNG images — 3D character renders, cards, icons. Ready for image
placeholders or product demo slides.

media-assets.json is machine-readable with fields: id, title, category, url.
media-assets.md is the human-readable index with use-case categorization.

Usage: When a PPT needs a video background or placeholder image, load
media-assets.md to find matching media by category/scene. All URLs are CDN-hosted
and directly embeddable — no download needed.

Color Contrast Guidelines (v1.8)

Text readability is the #1 priority. On dark backgrounds with glassmorphism effects:

1. Primary text (--t1): Must be pure white #fff or very close.
2. Secondary text (--t2): Minimum rgba(255,255,255,0.88) — never below 0.80.
3. Muted text (--t3): Minimum rgba(255,255,255,0.55) — never below 0.40.
4. Glass panel backgrounds: Use rgba(255,255,255,0.04) or higher, with
   backdrop-filter: blur(6px) or stronger. Thin glass at 0.01 with blur(4px)
   creates poor text contrast against gradient backgrounds.
5. Borders: Use rgba(255,255,255,0.16) or higher — faint borders disappear
   on busy backgrounds.
6. Code blocks: Background must be at least rgba(0,0,0,0.40) to provide
   sufficient contrast for code text.

Rule of thumb: If you squint and can't distinguish between text and background,
the contrast is too low. Test at 50% browser zoom to verify readability.

Quality Checklist

Before delivering the final HTML, verify:

• [ ] Correct style CSS variables are applied
• [ ] For polished presentations, prompt-index.md was consulted for topic-matched design assets
• [ ] Slide count matches the outline plan
• [ ] Each slide has the correct data-slide-type attribute
• [ ] All max-widths use % (not fixed px); padding uses clamp() with vh/vw
• [ ] Content slides with 3 or fewer items use slide--centered + .hero-text/.sparse-list
• [ ] Image-heavy slides use .day-split (single photo) or .photo-grid (gallery)
• [ ] All .day-photo and .photo-grid-item placeholders include a reminder to replace
• [ ] Mouse wheel, keyboard, click, touch, and slide dots navigation all work
• [ ] JS variable check: no local var shadows a function name (e.g., var a = s[i] must NOT shadow function a())
• [ ] Slide dots (#sd) are excluded from wheel handler's e.target.closest(...) check to allow clicking without triggering navigation
• [ ] Interactive features work: arrow keys, F for fullscreen, P for presenter mode
• [ ] Code blocks have correct language-* class for highlight.js (if used)
• [ ] The file is fully self-contained (no local file references)
• [ ] Presenter notes use <aside class="notes"> if provided