replit-deck

Replit Deck 技能

制作一个单文件、支持水平滑动的 HTML 幻灯片，使用八种 Replit-Slides 主题之一。每种主题都是一套完整的视觉系统——请勿混用不同主题的设计令牌。

资源索引

replit-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: 8 themes via [data-theme=*], proven iframe-nav script (READ FIRST)
├── references/
│   ├── themes.md           ← 8 themes: when-to-pick / do / don't / primary layouts
│   ├── layouts.md          ← 10 paste-ready slide layouts, cross-theme
│   ├── components.md       ← shared primitives (eyebrow, kpi-row, image-grid, meta-bar)
│   └── checklist.md        ← P0/P1/P2 self-review + theme lock-in gate
└── examples/               ← four reference decks across the most contrasting themes
    ├── example-helix.html       (SaaS board update · light minimal)
    ├── example-holm.html        (legal fintech memo · cream editorial serif)
    ├── example-atlas.html       (quarterly history chapter · black + vermilion)
    └── example-bluehouse.html   (real estate ROI · navy + gradient cards)

工作流

步骤 0 — 准备工作（必须阅读）

1. 从头到尾阅读 assets/template.html。[data-theme] 区块包含设计令牌；底部的 <script> 解决了五个 iframe 导航问题——请勿重写它。
2. 阅读 references/themes.md → 选择一个符合用户需求的主题。如果用户已经通过 od.inputs.theme 选择了主题，请使用该主题。
3. 阅读 references/layouts.md → 从中复制 <section> 区块。
4. 阅读 references/checklist.md → 输出前必须通过 P0 检查。

步骤 1 — 选定一个主题

在 TodoWrite 或计划部分明确写出所选主题及原因。一旦选定，每张幻灯片都只能使用该主题的设计令牌。制作过程中不得切换主题。<body data-theme="helix"> 属性是唯一的事实来源。

主题	适用场景
helix	SaaS 董事会更新、产品指标、中性现代风格
holm	法律备忘录、投资者预读材料、严肃／机构风格
vance	艺术作品集、设计目录、摄影师／雕塑家
bevel	时尚宣传活动、造型画册、Y2K／编辑风格
world-dark	政策报告、金融分析、高级暗色风格
world-mint	world-dark 的浅色搭配主题——ESG、健康金融、可持续发展
atlas	长篇叙事、章节式幻灯片、博物馆／档案美学
bluehouse	消费品、房地产、生活方式、彩色卡片

步骤 2 — 编写 HTML 前先规划幻灯片节奏

默认 6 张幻灯片。在编写任何 HTML 之前，先写出节奏规划，例如（helix，6 张幻灯片）：

01  cover           hero + title + subtitle
02  kpi-row-6       6 metrics with ▲/▼ deltas
03  split-insight   left stat + right paragraph
04  chapter-plate   section divider
05  three-up        three parallel columns
06  closing         one bold number or CTA

将规划展示给用户。此时调整成本很低。

步骤 3 — 复制种子文件并绑定主题

1. 将 assets/template.html 复制到项目根目录，命名为 index.html。
2. 设置 <body data-theme="<chosen>">。
3. 替换 <title>。
4. 删除正文中的占位幻灯片（种子文件包含 3 张演示幻灯片）。保留界面元素（计数器／进度条／提示）。

步骤 4 — 粘贴版式并填入实际文案

对于计划中的每张幻灯片，从 references/layouts.md 复制匹配的 <section>。将每个 [REPLACE] 替换为具体文案——绝不保留占位符，也绝不使用 lorem。如果幻灯片显得空洞，请换用其他版式。

按演示顺序为每张幻灯片添加 data-screen-label="01 Cover"、"02 Metrics" 等标签。

步骤 5 — 自检

输出前，默默运行 references/checklist.md 中的检查：P0 主题锁定关卡，以及五个维度的 1–5 分评审（理念／层级／执行／具体性／克制）。任何维度 ≤ 3 → 输出前返工。

P0 主题锁定 grep 检查不可妥协：

grep -E 'data-theme|style="--' index.html | head

如果任何单张幻灯片上出现 style="--accent:..." 或主题覆盖，请撤销。每套幻灯片只能使用一个主题。

步骤 6 — 输出成品

<artifact identifier="deck-<slug>" type="text/html" title="<Deck title>">
<!doctype html>
<html>...</html>
</artifact>

在成品前写一句话。在 </artifact> 后停止。

硬性规则

• 每套幻灯片只能使用一个主题。 在 <body> 上设置 data-theme——绝不按幻灯片覆盖。
• 数字必须真实，或不出现。 不得编造指标。使用 — 或灰色区块作为诚实的占位内容。
• 展示字体必须遵循主题。 helix/world-dark/world-mint/bluehouse 使用无衬线 Display；holm/vance/atlas 使用衬线 Display；bevel 使用 Y2K Display。不得更换。（权威来源：assets/template.html 中各主题的 --font-display 设计令牌——如果此列表与模板不一致，以模板为准。）
• 每张幻灯片最多使用 1–2 次强调色。 绝不滥用渐变。
• 绝不重写导航脚本。 它解决的五个 iframe 问题并不明显。
• 保持为单个 HTML 文件。 所有 CSS 均内联。不使用外部字体——每个主题中的系统字体栈都是经过精心设计的。
• 每张幻灯片都要有 data-screen-label。
• 不得使用 Replit 徽标／品牌标识组合。 这些是模板样式，不是 Replit 品牌幻灯片。

何时选择 replit-deck，何时选择同类技能

技能	适用场景
simple-deck	采用单一主题的简洁演示文稿，并遵循项目的 DESIGN.md 设计令牌。适用于演示文稿应当匹配宿主品牌，而非彰显自身风格的情况。（designSystemRequired: true。）
magazine-web-ppt	采用编辑部「杂志 × 电子墨水」美学（WebGL 流体背景、衬线标题、章节标题板）。适用于需求要求制作主题演讲、发布会或分享会风格的演示文稿，并明确提及 Monocle / WIRED / Kinfolk / Domus 的情况。
replit-deck	需求明确要求采用 Replit-Slides 画廊美学，或需要使用 8 种令牌固定的视觉风格之一（SaaS 董事会、编辑备忘录、画廊目录、Y2K 宣传活动、政策报告、博物馆章节、消费品卡片）。不依赖 DESIGN.md。

如果用户只说“帮我做一份演示文稿”，没有提供进一步说明，则默认选择 simple-deck——它会遵循用户的设计系统。只有在需求明确指定美学风格或主题时，才选择 replit-deck。

---

范围与来源

• 八种主题 = 截图时 replit.com/slides 落地页上的完整画廊。 并非精选子集——目前发布在 replit.com/slides 上的每张主题卡片都已收录于此（helix、holm、vance、bevel、world-dark、world-mint、atlas、bluehouse）。如果 Replit 发布第九个模板，该模板不会自动收录到此技能中。
• 截图日期：2026-04-29。 所有十六进制颜色值均于当日使用 ImageMagick 从 replit.com/slides 的实际 PNG 图片中采样得出——没有猜测颜色，也没有凭记忆替换。确切的采样流程请参阅 references/themes.md → Contributing a new theme。
• 维护：一次性截图，不持续跟踪。 Replit Slides 是一款持续更新的产品，可能会发生变化。此技能不会自动同步。如果发现 Replit 更新了颜色或添加了主题，并希望将其同步到此处，请在 nexu-io/open-design 提交 issue，标题为 replit-deck: re-sync to replit.com/slides (YYYY-MM-DD)，并附上更新后的截图。目前没有指定人员负责监控上游变更。
• 不使用 Replit 品牌元素。 这些是画廊风格的模板，不是 Replit 品牌演示文稿。检查清单（P0）禁止插入 Replit 徽标或字标。

---

浏览器 / 运行时支持

• 目标环境：现代常青版桌面浏览器（Chrome 110+ / Safari 16+ / Firefox 115+）以及现代移动版 Safari / Chrome。
• 使用的功能：CSS scroll-snap（水平）、color-mix()、CSS 自定义属性、text-wrap: balance。这些功能的 Baseline 覆盖率均 ≥ 93%。
• 不支持：IE 11、Safari < 15，以及任何不支持 color-mix() 的浏览器（如需支持较旧的 Safari，则需要为 --accent-soft 提供回退方案；这超出此技能的范围）。
• 移动端：水平 scroll-snap 在 iOS Safari 16+ 和 Android Chrome 上可正常工作。键盘导航按设计仅支持桌面端。
• 导航脚本行为：逐字复用自 skills/simple-deck——可在 iframe 嵌入（守护进程预览界面）、双重监听器竞争、焦点丢失以及重新加载后保留位置的情况下正常工作。请勿重写。

---

验证

此技能会在文件系统扫描时自动向守护进程注册（无需手动接线）。添加此技能后，已在 localhost:7456 上运行的守护进程中完成验证：

$ curl -s localhost:7456/api/skills \
    | node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \
               console.log(JSON.stringify(d.skills.find(s=>s.id==='replit-deck'), null, 2));"
{
  "id": "replit-deck",
  "name": "replit-deck",
  "description": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's\nlanding-page template gallery. Eight distinct themes …",
  "triggers": [
    "replit deck",
    "replit slides",
    "replit 风格 ppt",
    "replit style deck",
    "helix deck",
    "holm memo",
    "atlas chapter",
    "bluehouse",
    "bevel campaign"
  ],
  "mode": "deck",
  "platform": null,
  "scenario": "product",
  "previewType": "html",
  "designSystemRequired": false,
  "defaultFor": [],
  "upstream": null,
  "featured": null,
  "fidelity": null,
  "speakerNotes": null,
  "animations": null,
  "examplePrompt": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.",
  "hasBody": true
}

四个示例演示文稿（examples/example-{helix,holm,atlas,bluehouse}.html）均可直接在浏览器中打开。键盘导航（← / → / Space / Home / End）和水平 scroll-snap 均可在 Chrome 129 和 Safari 18 中正常工作。