ppt-keynote
nexu-io/open-design
Apple Keynote-quality slides with one card per screen and keyboard navigation.
What is ppt-keynote?
A presentation template that creates minimalist, professional slides in the style of Apple Keynote. Use it when you need to deliver polished, visually clean presentations with simple keyboard controls for navigation.
- One slide per full-screen card with 16:9 aspect ratio (1280×720)
- Keyboard navigation: left/right arrows and spacebar to advance slides
- Fade-in animations between slides with minimal visual distraction
- Page counter in top-right corner showing current slide / total slides
- Minimalist layout with large titles, supporting text, data visualizations, or key quotes
- Hash-based navigation (#/3) for direct slide access
How to install ppt-keynote
npx skills add https://github.com/nexu-io/open-design --skill ppt-keynote- Node.js and npm installed
- npx available in your environment
How to use ppt-keynote
- 1.Run: npx skills add https://github.com/nexu-io/open-design --skill ppt-keynote
- 2.Create your content using HTML sections with class="slide"
- 3.Structure each slide with a title (text-7xl font-semibold) and supporting content (text-2xl text-neutral-500)
- 4.Use the first slide as a cover with title and speaker/date information
- 5.Add your final slide with "Thanks" or a call-to-action
- 6.Open the generated index.html in a browser and navigate using arrow keys or spacebar
Use cases
- Product introductions and feature walkthroughs
- Marketing presentations and pitch decks
- Conference talks and keynote speeches
- Data-driven presentations with charts and metrics
- Company announcements or quarterly reviews
- Product managers and marketers
- Sales and business development teams
- Presenters and public speakers
- Teams creating internal or external presentations
ppt-keynote FAQ
The template is optimized for 16:9 (1280×720). This is the standard widescreen format for modern presentations.
Use the left/right arrow keys or spacebar to move between slides. The URL hash (#/3) updates automatically, allowing direct navigation to specific slides.
Yes. The template uses Tailwind CSS classes (text-7xl, text-neutral-500, etc.) which you can modify. Maintain the minimalist aesthetic and avoid cluttering slides.
Keep each slide focused: a large title with 1-3 lines of supporting text, a single data visualization, or a key quote. Preserve whitespace and avoid overcrowding.
Include images or charts directly in the slide HTML. Use grid layouts for data cards to maintain alignment and visual consistency.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: ppt-keynote zh_name: "Keynote 风格 PPT" en_name: "Keynote-style Slides" emoji: "🎬" description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation." zh_description: "苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换" en_description: "Apple Keynote-quality slides, one card per screen, with keyboard left/right navigation." category: slides scenario: marketing aspect_hint: "16:9 (1280×720)" featured: 19 tags: ["slides", "deck", "presentation", "幻灯片", "演讲"] example_id: sample-ppt-html-anything example_name: "Keynote PPT · 产品介绍" example_format: markdown example_tagline: "7 张幻灯片讲清产品" example_desc: "苹果 Keynote 风格的产品介绍, ←/→ 切换" od: mode: deck surface: web scenario: marketing upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Keynote-style Slides template to turn my content into Apple Keynote-quality slides with one card per screen and keyboard left/right navigation. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「Keynote 风格 PPT」模板把我的内容做成一套「苹果 Keynote 级别幻灯片, 一屏一卡, 键盘左右切换」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 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 布局对齐, 颜色克制。
Related skills
More from nexu-io/open-design and the wider catalog.
pptx
Read, generate, and adjust PowerPoint slides, layouts, and templates.
pptx-generator
Create and edit PowerPoint presentations from scratch using PptxGenJS.
pptx-html-fidelity-audit
Audit python-pptx exports against source HTML decks and fix layout drift with footer-rail discipline.
release-notes-one-pager
Generate a single-page HTML release notes document with highlights, changes, and upgrade guidance.
remotion
Programmatic video creation with React for branded explainers, social cuts, and motion graphics.
replicate
Discover, compare, and run AI models via Replicate's API for image, audio, and video generation.