ppt-keynote

nexu-io/open-design

Apple Keynote-quality slides with keyboard navigation and one card per screen.

What is ppt-keynote?

A presentation template that creates professional slides in the style of Apple Keynote, with one main idea per screen and left/right arrow key navigation. Use this when you need to build polished, minimalist decks with clean typography and smooth transitions.

Renders slides as full-screen cards (1280×720) with centered, gradient backgrounds
Supports keyboard navigation using arrow keys and spacebar to move between slides
Displays slide counter (current/total) in the top-right corner
Applies fade-in animations between slide transitions
Enforces minimal, data-driven layouts with large titles and supporting text or visuals
Maintains URL hash navigation (#/3) for direct slide linking

How to install ppt-keynote

npx skills add https://github.com/nexu-io/open-design --skill ppt-keynote

Claude Code

Cursor

Windsurf

Cline

How to use ppt-keynote

1.Install the skill using the provided npm command
2.Create or provide your presentation content in markdown or HTML format
3.Structure your content with one main idea per slide (title + 1-3 supporting lines, or a visual, or a key quote)
4.Use the template's semantic HTML structure with `<section class="slide">` for each slide
5.Navigate slides using left/right arrow keys or spacebar during presentation
6.Share slides via direct URLs using the hash navigation (e.g., #/3 for slide 3)

Use cases

Good for

Creating product launch presentations with one key message per slide
Building investor pitch decks with data visualizations and minimal text
Designing conference talks where each slide focuses on a single concept
Producing marketing presentations that emphasize visual hierarchy and whitespace
Generating keynote-style talks with title slides, content slides, and closing slides

Who it's for

Product managers and marketers presenting to stakeholders
Executives and founders giving investor pitches
Conference speakers and educators
Anyone building professional presentations with a modern, minimalist aesthetic

ppt-keynote FAQ

What aspect ratio and dimensions does this template use?

The template uses 16:9 aspect ratio with 1280×720 pixel dimensions, displayed centered on screen.

Can I customize the colors and fonts?

Yes, the template uses Tailwind CSS classes for styling. You can modify the gradient backgrounds, text sizes (text-7xl, text-2xl), and color values to match your brand.

How do I add images or data visualizations to slides?

Include images or charts directly in the slide content. The template supports grid layouts for data cards and maintains alignment through CSS classes.

Does this work on mobile or tablets?

The template is optimized for 16:9 desktop displays. Mobile viewing may require responsive adjustments to the fixed 1280×720 dimensions.

Can I export slides as PDF or images?

The template renders as HTML/web content. Use your browser's print-to-PDF feature or screenshot tools to export individual slides.

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 布局对齐, 颜色克制。