vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
open-design/plugins/_official/examples/html-ppt-presenter-mode-reveal/SKILL.md
pftom c12c816a44 feat(design-systems): add new design systems for Agentic, Airtable, Ant, Apple, Application, Arc, and Artistic 
- Introduced comprehensive design documentation and JSON configurations for multiple design systems, including Agentic, Airtable, Ant, Apple, Application, Arc, and Artistic.
- Each design system includes detailed guidelines on visual themes, color palettes, typography, spacing, layout, components, and interaction principles.
- Enhanced the overall design framework to support diverse user interfaces and improve consistency across applications.

This update significantly enriches the design resources available for developers, enabling them to create visually cohesive and user-friendly applications.
2026-05-12 15:18:16 +08:00

4.3 KiB
Raw Blame History

name description triggers od
html-ppt-presenter-mode 演讲者模式专用 deck — tokyo-night 默认主题，5 套主题 T 键切换，每页带 150-300 字逐字稿示例（<aside class="notes">），按 S 打开 popup（CURRENT / NEXT / SCRIPT / TIMER 四张磁吸卡片）。用于技术分享、公开演讲、课程讲解，怕忘词或要提词器的场景。
presenter mode
演讲者模式
逐字稿
speaker notes
提词器
presenter view
演讲
mode scenario featured upstream preview design_system speaker_notes animations example_prompt
deck engineering 26 https://github.com/lewislulu/html-ppt-skill
type entry
html index.html
requires
false
true true 用 html-ppt-presenter-mode 模板做一份带逐字稿的演讲 PPT。先确认：演讲主题、时长（每页 2-3 分钟）、目标听众。然后帮我每页写 150-300 字的口语化逐字稿（不是讲稿，是提示信号），按 S 能打开 presenter 弹窗。

HTML PPT · Presenter Mode (演讲者模式)

A focused entry point into the html-ppt master skill that lands the user directly on the presenter-mode-reveal full-deck template.

When this card is picked

The Examples gallery wires "Use this prompt" to the example_prompt above. When you accept that prompt, this card is the right pick if the user wants exactly the visual identity of presenter-mode-reveal (see the upstream full-decks catalog for screenshots and rationale).

How to author the deck

  1. Read the master skill first. All authoring rules live in skills/html-ppt/SKILL.md — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.
  2. Start from the matching template folder: skills/html-ppt/templates/full-decks/presenter-mode-reveal/ — copy index.html and style.css into the project, keep the .tpl-presenter-mode-reveal body class.
  3. Bring the shared runtime with the template. The upstream index.html links the shared CSS/JS via ../../../assets/... because it sits three folders deep inside skills/html-ppt/templates/full-decks/. Once you copy index.html into the project, those parent-relative URLs no longer resolve and base.css, animations.css, and runtime.js will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:
    • Recipe A — copy + rewrite (preferred): copy skills/html-ppt/assets/fonts.css, skills/html-ppt/assets/base.css, skills/html-ppt/assets/animations/animations.css, and skills/html-ppt/assets/runtime.js into a project-local assets/ (with assets/animations/animations.css), then rewrite the four <link>/<script> tags in index.html from ../../../assets/... to the matching project-local paths (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
    • Recipe B — inline: read the same four files and replace each <link rel="stylesheet" href="../../../assets/..."> with a <style>...</style> containing the file's contents, and the <script src="../../../assets/runtime.js"> with a <script>...</script> containing runtime.js. Yields a single self-contained index.html. Either way, do not ship the upstream ../../../assets/... URLs verbatim into a project artifact — they only work in-tree.
  4. Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from skills/html-ppt/assets/themes/*.css via <link id="theme-link"> and let T cycle.
  5. Replace demo content, not classes. The .tpl-presenter-mode-reveal scoped CSS only recognises the structural classes shipped in the template — keep them.
  6. Speaker notes go inside <aside class="notes"> or <div class="notes"> — never as visible text on the slide.

Attribution

Visual system, layouts, themes and the runtime keyboard model come from the upstream MIT-licensed lewislulu/html-ppt-skill. The LICENSE file ships at skills/html-ppt/LICENSE; please keep it in place when redistributing.