Image To Editable Ppt
ningzimu/image-to-editable-ppt-skill
Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.
将逐字稿生成简洁演讲 HTML，或将导演稿逐镜生成导演 HTML；沿用用户模板，单文件输出. An agent skill from juanjuanjie/html-presentation.
Install HTML Presentation Video
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install juanjuanjie/html-presentation html-presentation-video --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .claude/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install juanjuanjie/html-presentation html-presentation-video --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .agents/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install juanjuanjie/html-presentation html-presentation-video --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .cursor/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install juanjuanjie/html-presentation html-presentation-video --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .gemini/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install juanjuanjie/html-presentation html-presentation-videoInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .github/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install juanjuanjie/html-presentation html-presentation-video --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "html-presentation-video" agent skill from https://github.com/juanjuanjie/html-presentation/tree/main into .opencode/skills/html-presentation-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "html-presentation-video", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
html-presentation-video- GitHub stars
- 116
- Token cost
- ~971 tokens
- SKILL.md length
- 223 words
- Files
- 83 (incl. scripts, assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
将逐字稿生成简洁演讲 HTML，或将导演稿逐镜生成导演 HTML；沿用用户模板，单文件输出. An agent skill from juanjuanjie/html-presentation.
- Works in 6 steps: 单页单点 → 字号更大 → 左右大留白 → …
- Tasks that involve Slides and decks
- SKILL.md covers 首先选择模式, 默认视觉风格, 核心原则：视频友好 and 标题规则, plus 6 more sections
- Runs JavaScript scripts from its folder; calls python
What it does
HTML Presentation Video is an agent skill from juanjuanjie/html-presentation. 将逐字稿生成简洁演讲 HTML，或将导演稿逐镜生成导演 HTML；沿用用户模板，单文件输出。
Its SKILL.md is about 970 tokens, which your agent loads only when the skill is triggered. The skill folder holds 86 other files, including scripts and assets (for example `.github/workflows/pages.yml`, `.github/workflows/static.yml` and `NOTICE.md`).
It sits in Documents & Office, covering Slides and decks. The licence is MIT.
When your agent uses it
- Tasks that involve Slides and decks
Example prompts
- “/html-presentation-video”
Requirements
- Python 3
- Node.js
Workflow steps
6 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 21fc070. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (JavaScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
python
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
HTML Presentation Video loads about 971 tokens when it runs. Until then it costs about 18 tokens; SKILL.md has 223 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from juanjuanjie/html-presentation at commit 21fc070, republished under its MIT licence (© juanjuanjie). 223 words, ~971 tokens.
Download SKILL.mdSave it as
.claude/skills/html-presentation-video/SKILL.md (or your agent's skills folder). This skill also uses 82 other files; get the full folder from GitHub.- name
- html-presentation-video
- description
- 将逐字稿生成简洁演讲 HTML，或将导演稿逐镜生成导演 HTML；沿用用户模板，单文件输出。
HTML Presentation · 视频友好规范
本规范基于 Zara Zhang 的 frontend-slides 与 beautiful-html-templates 改编，针对视频演示场景做了调整。详见项目根目录
NOTICE.md。
本规范用于指导生成适合 B 站讲解、知识分享、教程分镜的 HTML 幻灯片。
首先选择模式
- 演讲 HTML：输入逐字稿，提炼观点，可合并段落并自由分页，以轻量动画、手动讲解为主。输出
【演讲HTML】原稿标题.html。 - 导演 HTML：输入导演稿，严格一镜一页，不增加封面、不合并或遗漏镜头；逐镜保留口播原文及标点，实现指定动效。输出
【导演HTML】原稿标题.html。 - 用户要求导演 HTML 却只给逐字稿时，先请求导演稿，不默默替用户编排镜头。
生成前完整阅读 两种生成模式，遵循其模式约束与验收要求。每次另存新 HTML，不修改输入。用户指定模板和配色优先；下文紫金配色、字号、缩放、组件只是默认模板示例，不可强行覆盖其他主题。导演模式的逐镜约束优先于下文的内容精简与轻量动画建议。
默认视觉风格
- 背景：深黑
#08090d，封面页可单独使用#070609。 - 主色（标题/结构）：紫色
#c8a8ff。 - 强调色（关键词/结论）：黄色
#ffc402。 - 正文：暖白
#f6f2e8、灰白#c4c0b6、中性灰#8a8580。 - 禁用：青色、粉色、绿色、红色、多彩霓虹、彩虹渐变、渐变文字、大面积发光。
- 卡片圆角：
14px（大）、10px（中）。
核心原则：视频友好
1. 单页单点
每页 slide 只传达一个核心信息。标题就是结论，正文只留必要支撑。
❌ 错误：一页放 5 个要点 + 2 张图 + 1 个表格。
✅ 正确：一页 1 个标题 + 1 段说明 + 1 组视觉支撑。
2. 字号更大
| 元素 | 尺寸 | 说明 |
|---|---|---|
| 封面 h1 | clamp(42px, 5.5vw, 78px) | 占画面主导地位 |
| 内容 h2 | clamp(34px, 4vw, 56px) | 每页结论 |
| 卡片 h3 | clamp(20px, 2.2vw, 28px) | 次级标题 |
| 正文 | clamp(17px, 1.7vw, 23px) | 最小不小于 17px |
| 小字 | clamp(14px, 1.3vw, 17px) | 仅用于辅助说明 |
3. 左右大留白
.slide {
padding: 6vh 10vw; /* 左右约 190px @1920px */
}留出安全边距，避免被 B 站字幕、进度条、UP 主头像、点赞按钮遮挡。
4. 主体放大
.content-wrapper {
max-width: 1000px;
transform: scale(1.45);
transform-origin: center center;
}核心内容在 1920×1080 画布上占据主要视觉区域，但不要超出安全边距。
5. 高对比
- 背景保持极暗，文字保持极亮。
- 紫色用于结构和标题，黄色用于强调和结论。
- 避免半透明文字与背景对比不足。
6. 少装饰
- 不添加噪点纹理（视频压缩后易产生脏点）。
- 不使用大面积发光、玻璃拟态、复杂渐变。
- 不使用 emoji 作为主要内容图标（可接受少量装饰）。
标题规则
- 封面页：主标题可用紫色 + 黄色 + 灰白灵活搭配，可带删除线表示旧概念。
- 普通内容页：
h2必须保持纯紫色，标题下方保留短紫色 divider。 - 正文关键词/数据：使用黄色
.accent或.accent-text强调。
删除线规则
.strikethrough 用于表示被否定的旧概念。通过伪元素 ::after 实现，颜色与文字一致，线条微微倾斜。
流程步骤规则
- 步骤编号使用
01、02、03两位数字。 - 编号放在圆形边框内，文字为白色。
- 流程箭头用淡紫色，不抢标题。
- 每个步骤包含：编号、短标题、一句话说明。
布局组件
内容居中
.slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}封面左对齐
.cover-layout {
align-items: flex-start;
justify-content: center;
padding-left: 14vw;
text-align: left;
}卡片网格
<div class="card-grid cols-2">
<div class="card">...</div>
<div class="card">...</div>
</div>- 视频场景推荐
cols-2或cols-3，避免超过 3 列。 - 每卡片只放 1 个标题 + 1 段文字。
双栏对比
<div class="vs-row">
<div class="vs-col left-col">...</div>
<div class="vs-col right-col">...</div>
</div>左侧为旧方式/弱方案，右侧为新方式/强方案，使用紫色边框突出右侧。
列表
<ul class="bullet-list">
<li>要点一</li>
<li>要点二</li>
</ul>列表整体居中，文字左对齐。每行只写一句话，行高 1.85。
Slide Engine 技术规范
HTML 结构
<section class="slide">
<div class="content-wrapper">
<div class="anim slide-label">标签</div>
<h2 class="anim">标题</h2>
<div class="anim divider"></div>
<p class="anim body-text">正文</p>
</div>
</section>动画
- 每页元素添加
.animclass，激活时自动触发fadeUp动画。 - 最多 7 级延迟，避免过多元素同时出现。
翻页
- 键盘：← → / Home / End / 空格。
- 点击：底部控制栏。
- 触摸：左右滑动。
- 翻页复用所选模板的激活状态和交互；导演模式还必须执行每页的动效初始化与清理，不能只切换 class。
截图隐藏
截图脚本会自动隐藏以下元素，保证导出画面干净：
.controls.dots.hint.progress
输出工作流
- 读取用户指定的完整模板；未指定时使用
templates/presentation.html。 - 按所选生成模式编写内容，另存为新文件。
- 浏览器打开预览翻页节奏。
- 如需静态图片，运行
python scripts/screenshot_html_slides.py xxx.html -o slides_out；PNG 不包含动态过程。 - 将 PNG 序列导入剪辑软件。
禁止项
- 一页多个核心观点。
- 字号低于推荐最小值。
- 使用外部 CSS/JS/图片资源（Google Fonts 等模板主题可例外，但基础模板应保持内联）。
- 演讲模式避免复杂动画；导演模式允许稿件要求的动效，但必须可重播、可确定性定位。两种模式都避免无意义装饰。
- 低对比度文字。
© juanjuanjie, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 82 other files (scripts, assets) in the repository root of juanjuanjie/html-presentation.
- SKILL.md
- .github/workflows/pages.yml
- .github/workflows/static.yml
- .gitignore
- LICENSE
- NOTICE.md
- README.md
- assets/avatar.png
- assets/generator.css
- assets/generator.js
- assets/navigation.js
- assets/previews/apple-bento-grid-dark-green.png
- assets/previews/apple-bento-grid.png
- assets/previews/blockframe-dark.png
- assets/previews/blockframe-mono-pop.png
- assets/previews/blockframe-retro-paper.png
- assets/previews/blockframe.png
- … and 66 more
Open the folder on GitHubat commit 21fc070
Compare with similar skills
HTML Presentation Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| HTML Presentation Video this skilljuanjuanjie/html-presentation | 116 | — | ~971 | Automated safety check: Pass | MIT | |
| Image To Editable Pptningzimu/image-to-editable-ppt-skill | 2.9k | — | ~4.3k | Automated safety check: Pass | MIT | |
| Slidesfcakyon/claude-codex-settings | 1.2k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Ppt Image FirstNyxTides/ppt-image-first | 1.2k | — | ~1.6k | Automated safety check: Pass | Apache-2.0 | |
| Vibe to Agentic Engineering Frameworkshanraisshan/claude-code-best-practice | 67k | — | ~3.3k | Automated safety check: Pass | MIT | |
| Gpt Image2 PptJuneYaooo/gpt-image2-ppt-skills | 1.3k | — | ~8.9k | Automated safety check: Notes | Apache-2.0 |
Similar skills
Slides
fcakyon/claude-codex-settings
Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.
Ppt Image First
NyxTides/ppt-image-first
Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.
Vibe to Agentic Engineering Framework
shanraisshan/claude-code-best-practice
Explains the conceptual model behind a presentation on moving from unstructured vibe coding to fully configured agentic engineering, including its 4-level scoring system and slide conventions.
Gpt Image2 Ppt
JuneYaooo/gpt-image2-ppt-skills
Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.
Compiledeck
scunning1975/MixtapeTools
Create and compile beautiful Beamer presentations following the Rhetoric of Decks philosophy.
Related
Categories
Questions about HTML Presentation Video
What does HTML Presentation Video do?
将逐字稿生成简洁演讲 HTML，或将导演稿逐镜生成导演 HTML；沿用用户模板，单文件输出. An agent skill from juanjuanjie/html-presentation. HTML Presentation Video is an agent skill from juanjuanjie/html-presentation.
When should I use HTML Presentation Video?
HTML Presentation Video fits situations like: tasks that involve Slides and decks.
How do I install HTML Presentation Video in Claude Code?
Run `npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a claude-code`. Or copy the skill folder (the juanjuanjie/html-presentation repository) into .claude/skills/html-presentation-video in your project. Claude Code loads it when a task matches its description.
How do I install HTML Presentation Video in Codex?
Run `npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a codex`. Or copy the skill folder (the juanjuanjie/html-presentation repository) into .agents/skills/html-presentation-video in your project. Codex loads it when a task matches its description.
Can I use HTML Presentation Video in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add juanjuanjie/html-presentation --skill html-presentation-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/html-presentation-video, .gemini/skills/html-presentation-video, .github/skills/html-presentation-video and .opencode/skills/html-presentation-video in your project.
What does HTML Presentation Video need to run?
Going by SKILL.md and its folder, HTML Presentation Video needs JavaScript for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python 3; Node.js.
Does HTML Presentation Video access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is HTML Presentation Video safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does HTML Presentation Video use?
HTML Presentation Video is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does HTML Presentation Video use?
About 971 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to HTML Presentation Video?
Skills that share tags, products or a category with HTML Presentation Video: Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.9k stars), Slides (fcakyon/claude-codex-settings, 1.2k stars), Ppt Image First (NyxTides/ppt-image-first, 1.2k stars) and Vibe to Agentic Engineering Framework (shanraisshan/claude-code-best-practice, 67k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains HTML Presentation Video?
juanjuanjie (a GitHub user) maintains it in juanjuanjie/html-presentation, which has 116 GitHub stars. The repository was last updated on October 9, 2026.
Source: juanjuanjie/html-presentation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.