Ppt Keynote
- 1.8k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
A template system that renders markdown or HTML content as Apple Keynote-style presentation slides with keyboard navigation.
About
Ppt-keynote is a web-based presentation template that generates Apple Keynote-style slides with 1280x720 resolution, one card per screen, and keyboard left/right arrow navigation. Developers use it to convert markdown content into minimalist deck layouts with large titles, supporting text, data visualizations, and fade-in transitions between slides. The template maintains visual consistency through gradient backgrounds, restrained color palettes, grid-based data card alignment, and whitespace preservation. Key workflows include authoring slide content in markdown, leveraging keyboard controls and hash-based navigation, and customizing typography (text-7xl titles, text-2xl subtitles) and layout. First and last slides provide cover and closing screens respectively, with page indicators (current/total) in the top-right corner.
- One slide per section element, 1280x720 resolution, centered with gradient backgrounds
- Keyboard navigation: ArrowLeft, ArrowRight, spacebar with hash-based URL routing (#/3)
- Minimalist content: large semibold titles, supporting text lines, or single data visualization per slide
- Fade-in animations between slides and strict whitespace/grid alignment for data cards
- Cover slide (title + speaker/date) and closing slide (Thanks or call-to-action) included
Ppt Keynote by the numbers
- 1,805 all-time installs (skills.sh)
- +128 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #249 of 2,277 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
ppt-keynote capabilities & compatibility
- Capabilities
- render slides from markdown or html content · keyboard event handling for slide navigation · hash based url routing for direct slide linking · fade in animation between slides · gradient background styling and typography custo
- Use cases
- presentations · marketing · web design
- Platforms
- macOS · Windows · Linux
- Runs
- Hosted SaaS
What ppt-keynote says it does
Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation.
npx skills add https://github.com/nexu-io/open-design --skill ppt-keynoteAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
What it does
Create Apple Keynote-quality presentation slides with one card per screen and keyboard navigation.
Who is it for?
Product introductions, pitch decks, technical talks, and marketing presentations requiring professional appearance with simple content structure.
Skip if: Complex multi-layout decks, presenter notes, speaker view, or real-time collaboration features.
When should I use this skill?
Creating a presentation from markdown or structured data that needs Keynote-style visual formatting and keyboard control.
What you get
Developers produce presentation slides with Keynote-grade visual polish, keyboard control, and minimal authoring friction.
- Interactive HTML presentation file
- Keyboard and hash-based navigation
- Slide counter (current/total) display
By the numbers
- 16:9 aspect ratio (1280x720 resolution)
- Slide indicator positioned top-right corner
- Supports fade-in animations between each slide transition
Files
【模板: Keynote 风格 PPT】
- 每张幻灯片是一个
<section class="slide">, 整体宽 1280 高 720, 居中显示, 背景渐变。 - 单页内容极简: 大标题 + 1-3 行支持文字; 或一张数据图; 或一个金句。
- 字号: 标题
text-7xl font-semibold tracking-tight, 副标题text-2xl text-neutral-500。 - 第一页是封面 (主题 + 演讲者 / 日期), 最后一页是 "Thanks." 或行动号召。
- 顶部右上角小指示器: 当前页 / 总页数。
- 加一段 JavaScript 监听 ArrowLeft / ArrowRight / 空格键切换 slide; 同时维护 hash (#/3)。
- 每页之间用 fade-in 动画。
- 保持留白, 数据卡片用 grid 布局对齐, 颜色克制。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML Anything · 产品介绍</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { margin:0; background:#0a0a0a; font-family:'Inter Tight','Noto Sans SC',sans-serif; }
.deck { display:flex; flex-direction:column; align-items:center; gap:32px; padding:40px 0; }
.slide { position:relative; width:1280px; max-width:96vw; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:64px 80px; color:#0a0a0a; background:#fafaf7; }
.slide.dark { background:#15140f; color:#fafaf7; }
.slide.brand { background:linear-gradient(135deg,#c96442 0%,#e9b94a 100%); color:#fff; }
.slide .num { position:absolute; top:24px; right:32px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.18em; opacity:0.55; }
.slide .eyebrow { font-size:12px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; opacity:0.65; margin-bottom:20px; }
.slide h1 { font-size:84px; font-weight:800; line-height:1.05; letter-spacing:-0.025em; margin:0; }
.slide h2 { font-size:64px; font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin:0 0 24px; }
.slide p { font-size:24px; line-height:1.5; opacity:0.78; max-width:65ch; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:auto; }
.card { padding:28px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); }
.card .k { font-size:48px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; }
.card .l { font-size:14px; opacity:0.65; }
</style>
</head>
<body>
<div class="deck">
<section class="slide brand">
<span class="num">01 / 07</span>
<div class="eyebrow">Product · 2026</div>
<h1 style="margin-top:auto">HTML <em style="font-family:Georgia,serif;font-style:italic;font-weight:400">Anything</em></h1>
<p style="font-size:28px; opacity:0.95; margin-top:24px">把任何文档、数据, 用本地 AI agent, 一键转成世界级好看的 HTML。</p>
<div style="margin-top:auto; display:flex; align-items:center; gap:16px; font-size:14px; opacity:0.85">
<div style="width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,0.25);display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-weight:600">H</div>
<span>Tom Pan · 5 月 11 日</span>
</div>
</section>
<section class="slide">
<span class="num">02 / 07</span>
<div class="eyebrow" style="color:#c96442">问题</div>
<h2>Markdown 易写,<br/>但<span style="color:#c96442">发出去就丑</span>。</h2>
<ul style="font-size:24px; line-height:2; opacity:0.78; list-style:none; padding:0">
<li>· 截图发推, 默认是 14px 宋体压缩 jpg</li>
<li>· 复制到公众号, 排版被微信彻底重写</li>
<li>· 知乎、小红书、Notion 各家规则不一</li>
</ul>
</section>
<section class="slide dark">
<span class="num">03 / 07</span>
<div class="eyebrow" style="color:#e9b94a">方案</div>
<h2 style="font-size:96px; margin-top:auto; margin-bottom:auto">
任何输入 →<br/>
<span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#e9b94a">世界级 HTML</span>
</h2>
<p style="font-size:22px;opacity:0.6">用你本地已经登录的 Claude / Cursor / Codex, 0 API Key 边际成本。</p>
</section>
<section class="slide">
<span class="num">04 / 07</span>
<div class="eyebrow">三个核心</div>
<h2>三件让它好用的事</h2>
<div class="grid3" style="grid-template-columns:repeat(3,1fr); gap:20px">
<div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
<div style="font-size:36px; margin-bottom:14px">🔌</div>
<div style="font-weight:600; font-size:18px; margin-bottom:6px">本地 Agent</div>
<div style="font-size:14px; opacity:0.7; line-height:1.6">复用你已经登录的 CLI session, 不要求 API Key</div>
</div>
<div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
<div style="font-size:36px; margin-bottom:14px">🎨</div>
<div style="font-weight:600; font-size:18px; margin-bottom:6px">9 套模板</div>
<div style="font-size:14px; opacity:0.7; line-height:1.6">PPT · 简历 · 海报 · 小红书 · 数据报告 ...</div>
</div>
<div class="card" style="background:#f4f1ec; border-color:#e7e5e0; color:#15140f">
<div style="font-size:36px; margin-bottom:14px">📋</div>
<div style="font-weight:600; font-size:18px; margin-bottom:6px">一键发布</div>
<div style="font-size:14px; opacity:0.7; line-height:1.6">公众号 / 推特 / 知乎 / PNG, 直接粘贴</div>
</div>
</div>
</section>
<section class="slide dark">
<span class="num">05 / 07</span>
<div class="eyebrow" style="color:#e9b94a">数据</div>
<h2>已经在跑</h2>
<div class="grid3">
<div class="card"><div class="k" style="color:#e9b94a">80<span style="font-size:24px">s</span></div><div class="l">生成 31KB 可交付文章</div></div>
<div class="card"><div class="k" style="color:#e9b94a">9</div><div class="l">套世界级模板</div></div>
<div class="card"><div class="k" style="color:#e9b94a">8</div><div class="l">个本地 agent 适配</div></div>
</div>
</section>
<section class="slide">
<span class="num">06 / 07</span>
<div class="eyebrow" style="color:#c96442">为什么是现在</div>
<h2 style="font-size:56px; margin-top:auto; margin-bottom:auto">
Claude 团队不再用 markdown,<br/>
<span style="font-family:Georgia,serif;font-style:italic;font-weight:600;color:#c96442">全换成了 HTML。</span>
</h2>
<p>HTML 是面向读者的最终形态, AI 让"啰嗦"不再是问题。</p>
</section>
<section class="slide brand">
<span class="num">07 / 07</span>
<h1 style="margin:auto 0; font-size:120px">Thanks.</h1>
<div style="display:flex; align-items:flex-end; justify-content:space-between; font-size:18px">
<div>
<div style="font-family:'JetBrains Mono',monospace; font-size:16px; opacity:0.85">$ pnpm dev</div>
<div style="opacity:0.85; margin-top:6px">→ http://localhost:3000 → ⌘+Enter</div>
</div>
<div style="opacity:0.7">github.com/your-org/html-anything</div>
</div>
</section>
</div>
<script>
// ←/→ scroll between slides; current implementation just smooth-scrolls
const slides=document.querySelectorAll('.slide');
let i=0;
document.addEventListener('keydown', e=>{
if(e.key==='ArrowRight') i=Math.min(i+1, slides.length-1);
else if(e.key==='ArrowLeft') i=Math.max(i-1,0);
else return;
slides[i].scrollIntoView({behavior:'smooth', block:'center'});
});
</script>
</body>
</html>HTML Anything · 产品介绍
我们解决的问题
- Markdown 易写但发出去丑
- 截图发推丑得离谱
- 公众号 / 知乎 各家排版规则不一
我们的方案
任何输入 → 世界级 HTML, 用你本地的 AI agent
三个核心
1. 复用你已经登录的本地 agent (Claude / Cursor / Codex), 不要 API Key 2. 9 套世界级模板 (PPT / 简历 / 海报 / 小红书 / 数据报告 ...) 3. 一键复制到公众号 / 推特 / 知乎, 或导出 PNG
数据
- 80 秒生成 31KB 的可交付文章
- 9 套模板, 8 个本地 agent 适配
- 0 API Key, 100% 复用本地 session
为什么是现在
Claude 团队不再用 markdown, 全换成 HTML 了。HTML 是面向读者的最终形态, AI 让"啰嗦"不再是问题。
立即开始
pnpm dev → 打开浏览器 → ⌘+Enter
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kHow it compares
Pick ppt-keynote for fast HTML keynote decks from text; use doc or minimax-pdf skills when the deliverable must be Word or PDF.
FAQ
How do I navigate between slides?
Use ArrowLeft, ArrowRight, or spacebar. Navigation also updates the URL hash (e.g., #/3) for direct linking to specific slides.
What content structure works best?
One card per screen with a large title plus 1-3 supporting lines, a single data visualization, or a key quote. Avoid dense text.
Can I customize typography and colors?
Yes. Titles use text-7xl font-semibold tracking-tight, subtitles use text-2xl text-neutral-500. Adjust Tailwind classes and gradient background colors.
Is Ppt Keynote safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.