Turn AI Slides into Interactive Deep-Dive Decks: The 6-Structure Framework

1【Interactive Deck Prompt v2.1】
2Full text omitted due to length constraints; please copy-paste from note.
3
4## Addition: Make it Interactive
5Use this block appended to the deck creation prompt above. Paste materials below this block (keep the line "Paste materials below this" from the previous prompt intact).
6
7### Priority
8- Content (number handling, headlines, logic, templates, drawing standards, verification) follows the deck creation prompt above.
9- Output format prioritizes this block: Single-file interactive HTML, 3 pages (4 if materials are extensive), headlines max 36 chars per line (no wrapping). Do not output a separate design doc; replace with page list and number ledger (include required design items from the previous prompt in these two).
10- Ask questions only once before starting, and only if purpose or audience is unclear from materials/background. Otherwise, use judgment, note assumptions, and write through in one go.
11
12### Page Template (Match visuals to sample below)
13- Pages 2-3: Left side main chart (60% width), right side evidence panel (light background box). Panel structure: One large number (88-96px) → What it is (1 line) → Context (2-3 lines) → Comparison target & delta (with formula) → "View Breakdown ›"
14- Page 1: Top row of 3 large numbers, bottom shows overall flow/structure (what's happening where). Place cards linking to specific pages ("p.2 ›") within the flow.
15- Charts and numbers fill the frame. No empty bands below content.
16- Use all material numbers (charts, panels, callouts, evidence). Calculate deltas/ratios and show formulas. Do not invent numbers not in materials.
17- Main subject uses primary color, comparisons use light gradient shades, others gray. One large number per page.
18- Make clickable elements obvious: Use "›", "Click to...", hover borders, ring highlight once upon entering page. Bars/dots show tooltip with "Value, Name, Source" on hover.
19
20### One Interaction Per Page (Derived from Structure)
21Add exactly one operation per page that lets the reader verify the headline's judgment. Choose the operation based on the headline's structural type.
22- Pyramid (Conclusion/Evidence) → Click to drill down. Right-side evidence panel (with source; include on almost all pages).
23- Classification (Segmentation) → Switch criteria (aggregation view, metric, year) to reorder all bars.
24- Comparison (Difference) → Previous state morphs into current, leaving delta/difference as dotted line.
25- Causality (Cause/Effect) → Slider adjusts condition, recalculates result. Show formula on screen.
26- Problem Solving (Gap/Solution) → Toggle solutions on/off to fill/leave gaps.
27- Sequence (Flow/Process/Time) → Assemble sequentially, actor moves through process, "Now" marker on timeline.
28Do not add animations unrelated to the headline. Quantitative animations must calculate from values.
29
30### Evidence Panel (Slides in from right on click)
31- Width 720px. Slides in from right, dims background. Close via X, Esc, or clicking background.
32- Structure top-to-bottom: Location context ("Current Status > Item Name") → Judgment (1-2 lines) → Tabs (max 2, e.g., Breakdown / Sources & Assumptions) → Small chart/table → Source.
33- Place detailed numbers that don't fit on main page here. Include on almost all pages.
34
35### Overall Deck
36- Enable zoom-in navigation from Page 1 overview to specific pages. Allow jumping from solutions to evidence pages.
37- Keys: → and Space for next, ← for prev, Numbers for jump, Esc to close/back, O for all-page overview, D for auto-demo (arrow cursor follows script, ends with overview. Tag interactive elements with data-demo names).
38- Pages assemble in ~3 seconds: Headline → Main chart (bars grow from 0, staggered 60ms) → Numbers → Evidence panel. Use CSS transitions/delays; if using JS, pair requestAnimationFrame with 50ms timer.
39- Support #static URL param and "Reduce Motion" setting to show final assembled state (for interactive pages, show state where headline judgment is visible, e.g., all solutions ON). Must be readable as static deck too.
40- Scale 1920x1080 canvas to fit screen. External loads limited to Google Fonts Noto Sans JP.
41
42### Minimum Standards (Only if no deck creation prompt above)
431. Create number ledger from materials (Item, Value, Date, Source, Population). Mark missing numbers as "xx" with note. Rank items without values last.
442. One message per page. Headlines are complete sentences combining fact and judgment, max 36 chars/line. Avoid "A. B" two-part structure, "There are 3..." counting, or noun-ending fragments.
453. Write all headlines first, check vertical flow (Overview→Evidence→Solution) before creating charts.
464. Choose chart type based on headline's structural intent (see "One Interaction" above).
475. Chart titles: "What, When, Unit". No judgments in titles. Include source in both page footer and evidence panel.
486. Colors: 1 primary, 3 light gradients, gray. Default primary #1976D2. Accent (Amber #D97706) used only once in entire deck. Min font size 18px.
497. Don't claim causality from correlation. Label estimates as "Estimate" with formula and assumptions on screen.
50
51### Output
52- HTML: Claude as Artifact, ChatGPT as Canvas (or single code block if neither). Write through in one go. Limit pages and consolidate components into functions to shorten code. If cut off, continue same document on user's "continue" (don't ask manual pasting).
53- Line 1 states method: "Content = Deck Prompt / Interactivity = Interactive Block" or "Interactive Block alone (content simplified rules applied)".
54- Page list (Headline/Structure/Operation/Evidence Panel content), Number Ledger, Instructions go OUTSIDE HTML (in response body), briefly. Not inside HTML.
55- Target total HTML size ~40KB. Trim text if needed (do NOT trim charts, evidence panels, operations).
56- End with 2-3 suggestions for further improvement and ask user to choose.
57
58### Final Check
59Before outputting, review and fix: Every page has "operation to verify headline" and "evidence panel with source" / No invented numbers / No empty bands, overlaps, overflow, or <18px text / Headline endings consistent across pages (not all "should...") / Auto-demo script doesn't reference non-existent elements.
60
61(Code for one sample page follows here. Including samples significantly improves quality. Full version with code is on note.)