Magic Slide

A skill for polished HTML presentations built around Magic Move transitions, presenter notes with live mirroring, generated assets, research search, QA revision notes, and browser editing. 一个 skill，用于制作高质感 HTML 演示：支持 Magic Move、带实时镜像的演讲备注、生成资产、搜索研究、QA 修订标记和浏览器编辑。

Magic Move Presenter HTML Image Search Preview QA Keys Edit

Install 安装 npx skills add daniel-style/magic-slide

skill / official01

magic-slide studio live preview

outline

01Cover

03Notes

same element同一元素 Magic Move

QARevise slide

Brief Lite

sources

runtime

01020304

sourcesruntimepreview

Magic Move

Continuity for the story, not decoration. 服务叙事连续性，而不是装饰动效。

Shared labels, cards, metrics, and images travel between adjacent slides with FLIP motion, so the audience keeps their place. 相邻页面中的标签、卡片、数字和图片通过 FLIP 运动衔接，观众不需要重新找上下文。

magic-move.timeline FLIP

01Overview

Story Card 叙事卡片

02Detail

same element同一元素 Magic Move

same identity · new layout 同一身份 · 新布局

slide-XX.html data-magic-id

01 02 03 04

Presenter

Speaker notes with a live mirror. 演讲备注，也有实时镜像。

Run two synced windows: the audience sees the mirrored slide with a cinematic cursor trail, while the speaker sees the same slide, a normal pointer, and private notes. 同时运行两扇同步窗口：观众看到带炫酷拖影光标的镜像画面，演讲者看到同一页、正常光标和私有注释。

01Audience mirror观众镜像窗口 02FX cursor trail特效拖影光标 03Private notes view私有注释视图

same slide feed

Audience window public view

03

Speaker notes 演讲备注

Speaker window private view

mirrored slide 1:1

03

Speaker notes 演讲备注

normal cursor

slide-03.html data-speaker-notes

Speaker notes editable

Call out the mirror first, then use the private notes to pace the story while the audience sees only the polished slide and cursor trail.

Private Resize Save

sources/outline.md speaker prompt

Audience sees glow trail Speaker sees normal cursor Notes stay private

HTML

Modular sources. One portable file. 模块化源文件，单文件交付。

The skill keeps outline, CSS, and slide fragments editable, then merges and injects the runtime into a self-contained presentation. 大纲、CSS 和页面片段保留为可编辑源文件，再合并注入 runtime，输出可携带的 HTML 演示。

outline.md style.css slide-XX.htmldata-magic-id

merge inject

index.html One HTML单文件 HTML

sources/outline.mdStory

sources/style.cssSystem

slide-XX.htmlScenes

index.htmlRuntime

Search

Research support without slide clutter. 用搜索支撑论证，而不是堆满页面。

Use current facts, market context, and product details to sharpen the outline before the slide is written. 把最新事实、市场背景和产品细节先用于打磨大纲，再写进页面。

PROVIDER: PipeLLM

sources/outline.md Story

websearch.py "current presentation workflow examples"

Thesis first

Search results become evidence choices, not raw slide filler.搜索结果进入证据选择，而不是原样填满页面。

freshcontextdeck-ready

Slide-ready claims

The outline keeps only the facts that sharpen the next visual brief.大纲只保留能打磨下一步视觉 brief 的事实。

sourceclaimbrief

visual brief视觉 brief editorial product visual · deck-ready编辑型产品视觉 · 可直接入页

Prompt to imagedeck-ready

visual brief视觉 brief editorial product visual · deck-ready编辑型产品视觉 · 可直接入页

generate-image.py "editorial product visual · deck-ready" --aspect 16:9

Image

Generate assets when the story needs them. 当叙事需要画面时，直接生成资产。

Search-sharpened briefs become cover atmospheres, editorial illustrations, and product-style visuals stored as local assets. 搜索打磨后的 brief 会变成封面氛围、编辑插图和产品质感图，并作为本地资产进入演示。

PROVIDER: PipeLLM

Preview

A dock for moving through the story. 用 dock 快速穿梭整份演示。

Hover the bottom edge to reveal slide dots, live thumbnails, and overview access. The preview server turns the HTML into a reviewable workspace. 移到页面底部即可唤出页面圆点、实时缩略预览和概览入口。预览服务器把 HTML 变成可检查的工作台。

magic-slide/index.html

Live workspace Preview server

One browser surface for playback, edit mode, thumbnails, and review controls.

Hover dock Thumbnails

Overview and QA stay close to the deck.

Review request Ready for QA wall

Captured from preview dock.

Overview QA

QA

A revision wall before delivery. 交付前的修订标记墙。

QA Mode shows every slide as a review card, then lets reviewers mark Revise slide notes directly on the cards. QA Mode 会把每一页显示为审阅卡片，并让审阅者直接在卡片上标记 Revise slide 笔记。

QA Overview visual pass · 2 revision requests

Q

All Revision requests

Review request Ready for QA wall

Captured from preview dock.

Visual pass Readable

Thumbnail checked

Layout note Needs repair

tighten mobile spacing

Handoff Notes saved

revision notes · saved JSON · agent repair

Keys

Keyboard rhythm for review and live edits. 用键盘节奏完成预览与现场修改。

Magic Slide keeps the common actions close: move through slides, open the overview, run QA overview, enter edit mode, hide the cursor, and save without leaving the story. Magic Slide 把高频动作放在手边：翻页、打开概览、运行 QA 总览、进入编辑、隐藏光标和保存，都不打断叙事。

Space→↓

Next slide下一页

←↑

Previous上一页

O

Overview概览

Q

QA overviewQA 总览

E

Edit mode编辑模式

C

Cursor glow光标高亮

⌘S/CtrlS

Save HTML保存 HTML

Esc

Close panels关闭面板

Edit

A highlighted cursor keeps editing visible. 高亮光标让编辑动作始终可见。

Once Edit Mode is active, the runtime adds click feedback, focus outlines, and a small rich-text toolbar so live edits feel guided instead of hidden. 进入编辑模式后，runtime 会加入点击反馈、焦点轮廓和轻量富文本工具栏，让现场修改更有指引感。

E

Edit mode编辑模式

Click any text and revise in place. 点击任意文字，直接现场修改。

Focus rings show what is live. Save writes the updated HTML back through the preview server. 焦点轮廓会标出当前编辑对象，保存会通过预览服务器写回 HTML。

cursor glow

index.html Saved HTML已保存 HTML

Editing Unsaved Save HTML

Ship

Build the story. Present the artifact. 写出故事，交付作品。

release-console ready

index.html Saved HTML已保存 HTML

index.html11 slides

HTML

outline confirmed sources merged runtime injected Revise slide resolved

final QA Ship

start

$magic-slide "deck request"
$magic-slide preview deck

shape

requirements · optional search
outline.md + speaker prompts

build

slide-XX.html + style.css
mirror + notes runtime

check

serve.py + QA capture
Revise slide → final QA

Design guidance source: Anthropic official frontend-design skill 设计规范来源：Anthropic 官方 frontend-design skill