replit-deck

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Replit Deck Skill

Produce a single-file horizontal-swipe HTML deck in one of eight Replit-Slides themes. Every theme is a complete visual system — do not mix tokens across themes.

制作采用Replit Slides八大主题之一的单文件横向滑动HTML演示文稿。每个主题都是一套完整的视觉系统——请勿跨主题混用样式变量。

Resource map

资源地图

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)

replit-deck/
├── SKILL.md                ← 你正在阅读的文件
├── assets/
│   └── template.html       ← 基础模板：通过[data-theme=*]实现8种主题，内置经过验证的iframe导航脚本（请优先阅读）
├── references/
│   ├── themes.md           ← 8种主题：适用场景/注意事项/核心布局
│   ├── layouts.md          ← 10种可直接复用的幻灯片布局，支持全主题适配
│   ├── components.md       ← 通用基础组件（页眉、KPI行、图片网格、元信息栏）
│   └── checklist.md        ← P0/P1/P2自检清单 + 主题锁定校验项
└── examples/               ← 4个参考演示文稿，覆盖风格差异最大的主题
    ├── example-helix.html       (SaaS董事会更新 · 浅色极简风)
    ├── example-holm.html        (金融法律备忘录 · 奶油色衬线排版)
    ├── example-atlas.html       (季度历史叙事 · 黑+朱红配色)
    └── example-bluehouse.html   (房地产ROI演示 · 深蓝+渐变卡片)

Workflow

工作流程

Step 0 — Pre-flight (mandatory reads)

步骤0 — 前期准备（必读内容）

Read
```
assets/template.html
```
end-to-end. The
```
[data-theme]
```
blocks carry the tokens; the
```
<script>
```
at the bottom solves five iframe nav bugs — do not rewrite it.
Read
```
references/themes.md
```
→ pick one theme that matches the user's brief. If the user already picked a theme via
```
od.inputs.theme
```
, use that.
Read
```
references/layouts.md
```
→ you'll copy
```
<section>
```
blocks from here.
Read
```
references/checklist.md
```
→ P0 must pass before emit.

完整阅读
```
assets/template.html
```
。
```
[data-theme]
```
块包含样式变量；底部的
```
<script>
```
解决了5个iframe导航问题——请勿重写该脚本。
阅读
```
references/themes.md
```
→ 根据用户需求选择一种主题。若用户已通过
```
od.inputs.theme
```
指定主题，则直接使用该主题。
阅读
```
references/layouts.md
```
→ 你将从此处复制
```
<section>
```
块。
阅读
```
references/checklist.md
```
→ 输出前必须通过P0校验。

Step 1 — Commit to one theme

步骤1 — 确定唯一主题

Write out loud (in the TodoWrite or plan section) which theme and why. Once picked, every slide uses that theme's tokens only. No swapping mid-deck. The

<body data-theme="helix">

attribute is the single source of truth.

Theme	Pick when
`helix`	SaaS board update, product metrics, neutral modern
`holm`	Legal memo, investor pre-read, serious / institutional
`vance`	Art portfolio, design catalog, photographer / sculptor
`bevel`	Fashion campaign, lookbook, Y2K / editorial attitude
`world-dark`	Policy report, finance analysis, premium dark
`world-mint`	Lighter companion of world-dark — ESG, wellness finance, sustainability
`atlas`	Long-form narrative, chapter deck, museum / archive aesthetic
`bluehouse`	Consumer product, real estate, lifestyle, colorful cards

在TodoWrite或规划部分明确写出选择的主题及原因。一旦选定，所有幻灯片仅使用该主题的样式变量。演示文稿中途不得切换主题。

<body data-theme="helix">

属性是主题的唯一来源。

主题	适用场景
`helix`	SaaS董事会更新、产品指标报告、中性现代风格
`holm`	法律备忘录、投资者预读材料、正式/机构风格
`vance`	艺术作品集、设计目录、摄影师/雕塑家展示
`bevel`	时尚活动、Lookbook、Y2K/杂志排版风格
`world-dark`	政策报告、财务分析、高端深色风格
`world-mint`	world-dark的浅色适配版 — ESG、健康金融、可持续发展主题
`atlas`	长篇叙事、章节式演示文稿、博物馆/档案美学风格
`bluehouse`	消费产品、房地产、生活方式类演示、彩色卡片风格

Step 2 — Plan slide rhythm before writing HTML

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

Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):

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

Show this to the user. Redirecting at this stage is cheap.

默认6张幻灯片。编写HTML前先规划节奏，例如（helix主题，6张幻灯片）：

01  封面页           主视觉 + 标题 + 副标题
02  KPI六列布局      6项指标，含▲/▼变化标识
03  拆分洞察页       左侧数据 + 右侧段落
04  章节分隔页       板块分隔
05  三列并行布局      三个并列栏目
06  收尾页           醒目数字或行动号召（CTA）

将规划展示给用户。此阶段调整成本较低。

Step 3 — Copy seed, bind theme

步骤3 — 复制基础模板，绑定主题

Copy
```
assets/template.html
```
to project root as
```
index.html
```
.
Set
```
<body data-theme="<chosen>">
```
.
Replace
```
<title>
```
.
Delete the placeholder slides in the body (the seed ships with 3 demo slides). Keep the chrome (counter / progress / hint).

将
```
assets/template.html
```
复制到项目根目录，命名为
```
index.html
```
。
设置
```
<body data-theme="<选定主题>">
```
。
修改
```
<title>
```
内容。
删除body中的占位幻灯片（基础模板自带3张演示幻灯片）。保留导航元素（计数器/进度条/提示）。

Step 4 — Paste layouts, fill real copy

步骤4 — 粘贴布局，填充真实内容

For each planned slide, copy the matching

<section>

from

references/layouts.md

. Replace every

[REPLACE]

with specific copy — never leave placeholders, never use lorem. If a slide feels empty, pick a different layout.

Tag each slide with

data-screen-label="01 Cover"

"02 Metrics"

, etc., in presentation order.

针对每个规划好的幻灯片，从

references/layouts.md

复制对应的

<section>

块。将所有

[REPLACE]

替换为具体内容——请勿保留占位符，请勿使用Lorem Ipsum文本。若幻灯片显得空洞，请更换布局。

为每张幻灯片添加

data-screen-label="01 封面"

、

"02 指标"

等标签，与演示顺序一致。

Step 5 — Self-check

步骤5 — 自检

Run

references/checklist.md

silently before emit: the P0 theme-lock gate plus the five-dimension 1–5 critique (Philosophy / Hierarchy / Execution / Specificity / Restraint). Any dimension ≤ 3 → re-do before emit.

The P0 theme-lock grep is non-negotiable:

bash

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

If any

style="--accent:..."

or theme override appears on individual slides, revert. One theme per deck.

输出前对照

references/checklist.md

进行静默检查：必须通过P0主题锁定校验，同时在五个维度（理念/层级/执行/针对性/克制性）的评分需≥4。若任一维度评分≤3，则需重新修改后再输出。

P0主题锁定校验不可协商：

bash

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

若发现任何单张幻灯片存在

style="--accent:..."

或主题覆盖，需撤销修改。每个演示文稿只能使用一种主题。

Step 6 — Emit artifact

步骤6 — 输出成果

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

One sentence before the artifact. Stop after

</artifact>

<artifact identifier="deck-<slug>" type="text/html" title="<演示文稿标题>">
<!doctype html>
<html>...</html>
</artifact>

输出成果前添加一句话说明。

</artifact>

后停止输出。

Hard rules

硬性规则

One theme per deck.
```
data-theme
```
set on
```
<body>
```
— never override per-slide.
Numbers are real or absent. No invented metrics. Use
```
—
```
or a grey block as an honest placeholder.
Display face follows theme. helix/world-dark/world-mint/bluehouse use the sans Display; holm/vance/atlas use the serif Display; bevel uses the Y2K display. Do not swap. (Authoritative source: the
```
--font-display
```
token of each theme in
```
assets/template.html
```
— if this list ever disagrees with the template, the template wins.)
Accent appears 1–2× per slide max. Never a gradient-spam.
Never rewrite the nav script. Five iframe bugs it solves are not obvious.
Keep it one HTML file. Inline all CSS. No external fonts — the system stack in each theme is deliberate.
data-screen-label
on every slide.
No Replit logo / brand lockup. These are template styles, not a Replit-brand deck.

每个演示文稿仅使用一种主题。
```
data-theme
```
设置在
```
<body>
```
上——绝不在单张幻灯片上覆盖主题。
数据需真实或留空。不得虚构指标。用
```
—
```
或灰色块作为诚实的占位符。
标题字体遵循主题要求。helix/world-dark/world-mint/bluehouse使用无衬线标题字体；holm/vance/atlas使用衬线标题字体；bevel使用Y2K风格标题字体。请勿混用。（权威来源：
```
assets/template.html
```
中每个主题的
```
--font-display
```
变量——若本列表与模板冲突，以模板为准。）
每页幻灯片的强调元素最多出现1-2次。切勿滥用渐变效果。
绝不重写导航脚本。它解决的5个iframe问题并不直观。
保持单HTML文件格式。内联所有CSS。不使用外部字体——每个主题的系统字体栈是经过设计的。
每张幻灯片必须添加
data-screen-label
。
不得添加Replit标识/品牌元素。这些是模板样式，并非Replit品牌演示文稿。

When to pick

replit-deck

vs. peer skills

何时选择

replit-deck

vs. 同类技能

Skill	Pick when
`simple-deck`	Plain, single-theme deck bound to the project's `DESIGN.md` tokens. When the deck should match the host brand, not assert its own. ( `designSystemRequired: true` .)
`magazine-web-ppt`	Editorial "magazine × e-ink" aesthetic (WebGL fluid background, serif titles, chapter plates). When the brief asks for a keynote / launch / sharing-style deck and calls out Monocle / WIRED / Kinfolk / Domus.
`replit-deck`	The brief explicitly asks for Replit-Slides gallery aesthetic, or needs one of the 8 token-frozen visual identities (SaaS board, editorial memo, gallery catalog, Y2K campaign, policy report, museum chapter, consumer cards). No dependency on `DESIGN.md` .

If the user just says "make me a deck" without further guidance, default to

simple-deck

— it respects their design system. Pick

replit-deck

only when the brief is explicit about the aesthetic or names a theme.

技能	适用场景
`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

。

Scope & provenance

范围与来源

Eight themes = the full replit.com/slides landing-page gallery at the time of snapshot. Not a curated subset — every theme card currently published on replit.com/slides is represented here (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse). If Replit ships a ninth template, it is not automatically reflected in this skill.
Snapshot date: 2026-04-29. All hex values were sampled from the actual replit.com/slides PNGs on that date with ImageMagick — no guessed colors, no memory substitutions. See
```
references/themes.md
```
→ Contributing a new theme for the exact sampling procedure.
Maintenance: one-time snapshot, not tracked. Replit Slides is a live product and may drift. This skill does not auto-sync. If you notice Replit has updated colors or added a theme and want it reflected here, open an issue on
```
nexu-io/open-design
```
titled
```
replit-deck: re-sync to replit.com/slides (YYYY-MM-DD)
```
and attach the updated screenshots. There is no designated owner monitoring the upstream.
No Replit branding. These are gallery-style templates, not a Replit-brand deck. The checklist (P0) forbids inserting a Replit logo or wordmark.

八大主题 = 快照时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标识或文字商标。

Browser / runtime support

浏览器/运行时支持

Target: modern evergreen desktop browsers (Chrome 110+ / Safari 16+ / Firefox 115+) and modern mobile Safari / Chrome.
Features used: CSS scroll-snap (horizontal),
```
color-mix()
```
, CSS custom properties,
```
text-wrap: balance
```
. All ≥ 93% Baseline.
Not supported: IE 11, Safari < 15, any browser without
```
color-mix()
```
(would need a fallback
```
--accent-soft
```
if you want to support older Safari; out of scope for this skill).
Mobile: horizontal scroll-snap works on iOS Safari 16+ and Android Chrome. Keyboard nav is desktop-only by design.
Nav script behavior: reused verbatim from
```
skills/simple-deck
```
— survives iframe embedding (the daemon preview surface), dual listener races, focus loss, and position persistence across reloads. Do not rewrite it.

目标环境：现代常青桌面浏览器（Chrome 110+ / Safari 16+ / Firefox 115+）及现代移动端Safari/Chrome。
使用特性：CSS滚动吸附（横向）、
```
color-mix()
```
、CSS自定义属性、
```
text-wrap: balance
```
。所有特性的基线支持率≥93%。
不支持环境：IE 11、Safari < 15、任何不支持
```
color-mix()
```
的浏览器（若需支持旧版Safari，需添加
```
--accent-soft
```
降级方案；本技能不包含此范围）。
移动端支持：横向滚动吸附在iOS Safari 16+和Android Chrome上可正常工作。键盘导航仅支持桌面端。
导航脚本行为：直接复用
```
skills/simple-deck
```
中的脚本——可在iframe嵌入环境（守护进程预览界面）中正常运行，解决了双监听器竞争、焦点丢失、重载后位置保持等问题。请勿重写该脚本。

Verification

验证

The skill auto-registers with the daemon on filesystem scan (no manual wiring). Confirmed against a running daemon on

localhost:7456

after adding this skill:

bash

$ 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
}

All four example decks (

examples/example-{helix,holm,atlas,bluehouse}.html

) open directly in a browser. Keyboard nav (← / → / Space / Home / End) and horizontal scroll-snap work in Chrome 129 and Safari 18.

本技能会在文件系统扫描时自动注册到守护进程（无需手动配置）。添加本技能后，已在

localhost:7456

上运行的守护进程中验证通过：

bash

$ 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

）均可直接在浏览器中打开。键盘导航（← / → / 空格 / Home / End）和横向滚动吸附在Chrome 129和Safari 18中均可正常工作。

replit-deck

Original

Translation

Replit Deck Skill

Replit Deck Skill

Resource map

资源地图

Workflow

工作流程

Step 0 — Pre-flight (mandatory reads)

步骤0 — 前期准备（必读内容）

Step 1 — Commit to one theme

步骤1 — 确定唯一主题

Step 2 — Plan slide rhythm before writing HTML

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

Step 3 — Copy seed, bind theme

步骤3 — 复制基础模板，绑定主题

Step 4 — Paste layouts, fill real copy

步骤4 — 粘贴布局，填充真实内容

Step 5 — Self-check

步骤5 — 自检

Step 6 — Emit artifact

步骤6 — 输出成果

Hard rules

硬性规则

When to pick
`replit-deck`
vs. peer skills

何时选择
`replit-deck`
vs. 同类技能

Scope & provenance

范围与来源

Browser / runtime support

浏览器/运行时支持

Verification

验证

replit-deck

Original

Translation

Replit Deck Skill

Replit Deck Skill

Resource map

资源地图

Workflow

工作流程

Step 0 — Pre-flight (mandatory reads)

步骤0 — 前期准备（必读内容）

Step 1 — Commit to one theme

步骤1 — 确定唯一主题

Step 2 — Plan slide rhythm before writing HTML

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

Step 3 — Copy seed, bind theme

步骤3 — 复制基础模板，绑定主题

Step 4 — Paste layouts, fill real copy

步骤4 — 粘贴布局，填充真实内容

Step 5 — Self-check

步骤5 — 自检

Step 6 — Emit artifact

步骤6 — 输出成果

Hard rules

硬性规则

When to pick replit-deck vs. peer skills

何时选择replit-deck vs. 同类技能

Scope & provenance

范围与来源

Browser / runtime support

浏览器/运行时支持

Verification

验证

When to pick
`replit-deck`
vs. peer skills

何时选择
`replit-deck`
vs. 同类技能