slide-authoring

编写 open-slide 页面

此技能是关于 slides/<id>/index.tsx 中所有操作的技术参考。它不负责工作流：

• create-slide 负责“起草新演示文稿”——它会向用户询问范围界定问题，然后将具体做法交由此技能处理。
• apply-comments 负责“处理审阅标记”——它会查找标记并应用编辑，但具体编辑本身遵循此处的规则。
• current-slide 会将指示性引用（“这一页”“我正在看的幻灯片”）解析为具体的 slideId + pageIndex。当用户未明确命名幻灯片、而是引用当前幻灯片时，请先查阅它，然后再回来了解如何编辑。
• 任何临时的幻灯片编辑（手动调整、一次性修复），在修改文件前也应查阅此技能。

当上述任一路径进入为页面编写 React 代码这一步时，此处就是权威规范。不要将以下内容复制到其他技能中——请链接到此处。

基元参考

每个框架基元在此技能的 references/ 目录下都有完整的参考文件，包含规范、示例和该基元专属的反模式。此文件仅保留始终适用的规则，以及各基元的简要说明。在页面中使用某个基元之前，请先阅读相关参考文件：

基元	使用前阅读	文件
design 常量 + var(--osd-X) 令牌	编写任何新幻灯片时（默认基线）	references/design-system.md
资源 + <ImagePlaceholder>	导入图片/视频或保留占位符时	references/assets.md
Web 字体	加载任何非系统字体时	references/webfonts.md
useSlidePageNumber()	渲染页码页脚时	references/page-numbers.md
<Steps> / <Step>	设置页面内容的逐步呈现时	references/steps.md
SlideTransition	声明任何进入/退出动画时	references/transitions.md
MorphElement + morph	在多个页面间变换共享元素时	references/morph.md

硬性规则

• 将幻灯片放在 slides/<kebab-case-id>/ 下。
• 入口文件是 slides/<id>/index.tsx。图片/视频/字体放在 slides/<id>/assets/ 下。
• 不要修改 package.json、open-slide.config.ts 或其他幻灯片。
• 不要添加依赖。只能使用 react、@open-slide/core 和标准 Web API。
• 一张幻灯片由一个 index.tsx 和一个 assets/ 目录组成——除此之外不得有其他内容。不要创建同级 .tsx/.ts 文件（如 Card.tsx、components/、helpers.ts 等）；辅助组件和常量应放在 index.tsx 中。也不要创建 README.md 或其他文本说明文件——演讲者备注/演讲稿应放在 notes 导出中（见下文演讲者备注），而不是 Markdown 文件中。

文件规范

// slides/<id>/index.tsx
import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => <div>…</div>;
const Body: Page = () => <div>…</div>;

export const meta: SlideMeta = {
  title: 'My slide',
  createdAt: '2026-05-16T12:00:00Z',
};
export default [Cover, Body] satisfies Page[];

• export default 是一个非空数组，包含按顺序排列、无属性的 React 组件，每个组件对应一页。
• meta.title（可选）会显示在幻灯片标题栏中。默认值为文件夹名称。
• 幻灯片 ID 即 kebab-case 格式的文件夹名称。请选择简短且有描述性的名称（q2-roadmap、team-offsite-2026）。
• meta.theme（可选）用于标记幻灯片是基于 themes/ 下的某个主题构建的。其 ID 必须与某个 <id>.md 的文件名（不含扩展名）一致。此项会在幻灯片卡片上显示返回链接标签，并在 /themes/<id> 页面列出该幻灯片。如果幻灯片并非基于已注册主题构建，则省略此项。
• meta.createdAt（可选）是一个 ISO 8601 字符串字面量（例如 '2026-05-16T12:00:00Z'），在创建幻灯片脚手架时设置一次。主页会用它按默认的“最新优先”顺序排序。新建幻灯片时务必包含此项——写入文件前立即通过 Bash 运行 node -e "console.log(new Date().toISOString())"，并将原样输出粘贴为值。不要凭记忆输入时间戳——日期或时间很容易写错。必须是普通字符串字面量（幻灯片本身不得使用 new Date(...) 或导入），因为框架会在构建时通过正则表达式读取它，而不是执行模块来获取。

演讲者备注（notes 导出）

框架内置演讲者备注：在 index.tsx 中可选导出 notes，与默认页面数组按索引对齐。查看器会在备注抽屉中显示备注，演示模式则会在计时器旁的演示者视图中显示备注。

当用户用任何语言要求撰写演讲稿、讲稿提纲或演示者备注时，都要将其写入此导出，绝不要写入 Markdown 或文本文件。 script.md 或 notes.md 对运行时不可见；notes 导出是演示者视图读取备注的唯一位置。

export const notes: (string | undefined)[] = [
  'Open with the analyst quote, then introduce yourself.',
  undefined,
  `Walk through the three pillars, one beat each.
Pause for questions before moving on.`,
];

• 每页对应一个条目，顺序与 export default 数组相同。notes[0] 对应第一页。
• 条目必须是纯文本——会保留换行，但不会渲染 Markdown。多行备注使用模板字符串，单行备注使用普通字符串。
• 没有备注的页面使用 undefined；末尾的 undefined 条目可以省略。
• 添加、删除或重新排序页面时，要在同一次编辑中重新对齐 notes——索引偏移会导致后续每一页都静默关联到错误的讲稿。
• 备注要写成可以直接说出来的话，而不是屏幕内容的摘要：开场白、过渡语、需要引用的数字、时间提示。

编辑现有幻灯片

完成后的幻灯片通常有 1000–1800 行。只需修改一页时，不要读取整个文件——先找到该页面，再只读取对应范围：

grep -n ": Page = " slides/<id>/index.tsx

这会列出每个 const Foo: Page = … 声明及其行号。使用 Read 并指定 offset 和 limit 读取目标页面（通常约 150 行就足以包含一页及其辅助组件）。只有在需要跨页面上下文时（检查调色板、重新排序、调整设计常量）才读取整个文件。

画布

每页都渲染到固定的 1920 × 1080 画布中。框架会缩放画布；设计时要将视口视为实际就是 1920×1080。

• font-size、内边距和定位均使用绝对像素值。不要使用 rem、vw/vh，也不要对文字使用 %。
• 每页的根元素应填满画布：width: '100%'; height: '100%'。
• 优先使用内联 style={{ … }}。加载的任何 CSS 都是全局的——请谨慎限定类名作用范围。

字号比例（从这里开始，再按需调整）

元素	大小
主视觉标题	140–200px
章节标题	80–120px
页面标题	56–80px
正文	32–44px
说明文字 / 标签	22–28px

间距

• 内容内边距：距画布边缘 100–160px。文字切勿贴近边缘。
• 行高：标题使用 1.2，正文使用 1.5–1.7。
• 元素间留白：32–64px。

垂直预算 — 内容必须适配 1080px

画布不会滚动。超出 1080px 底边的内容会被直接裁掉。编写 JSX 前，先在纸上计算并确认页面能容纳所有内容。这是幻灯片出问题的首要原因——除非检查过，否则应假设内容会溢出。

可用高度 = 1080 − top_padding − bottom_padding。两侧各留 120px 时，可用高度为 840px；各留 160px 时，则为 760px。先确定留白，再在预算范围内设计。

元素高度 = 字体大小 × 行高 × 行数。换行成 2 行的项目符号应按 2 行计算。累加下一个元素前，还要加上元素下方的间距（32–64px）。

示例 — 单页内容，留白 120px（预算 = 840px）：

元素	高度
标题：80px × 1.2 × 1 行	96px
间距	64px
正文段落：40px × 1.6 × 3 行	192px
间距	48px
5 个项目符号：40px × 1.6 × 各 1 行	320px（5 × 64px）
项目符号之间的 4 处间距：各 24px	96px
总计	816px ✅ 可容纳于 840px

将标题字号换成 120px，或再加第 6 个项目符号，内容就会超出。编写前都要这样检查每一页。

页面规则：

• 一页放一个标题 + 正文，或一个标题 + ≤5 条简短项目符号。不要同时放正文段落和很长的项目符号列表。
• 按选定的字号，每条项目符号都应能放在一行内。如果换行，就缩短文案或将其移至单独一页。
• 主视觉标题页（140–200px）只放标题 + 1 条副标题 + 可选的眉题，不放其他内容。
• 章节标题（80–120px）所在页面几乎不应放其他内容。
• 如果为了适配而需要增加留白、将字号缩小到比例尺下限以下，或把正文行高压到 1.4 以下，就拆成两页。预算紧张时，拆页永远是正确的选择。

切勿使用 overflow: auto/scroll、负边距或变换来隐藏溢出内容。画布大小固定，被裁掉的内容就消失了。

视觉方向

选择统一的视觉风格，并贯穿每一页：

• 配色 — 1 种背景色、1 种主文字色、1 种强调色、1 种弱化色。将背景色、文字色和强调色放入 design 常量中（见下文的设计系统）；其他颜色（如弱化色）则作为普通常量。
• 字体 — 1 种展示字体 + 1 种正文字体。除非用户另有指定，否则使用系统字体栈。标题使用粗体（800–900），正文使用常规字重（400–500）。
• 布局网格 — 选择统一的内容留白（例如 120px），并始终保持一致。左对齐更具编辑感；居中则更显庄重。
• 美学风格 — 选择一种并坚持：极简、繁复、编辑风、复古、粗野主义、柔和/粉彩、霓虹或纸张/印刷风。不要混搭。

如果有 frontend-design 技能，且用户想要大胆的设计风格，请参考它以获取更深入的美学指导。

Web 字体

默认使用系统字体栈，优先选择系统字体。只有当演示文稿确实需要 Web 字体（例如品牌字体，或系统字体对 CJK、泰语或阿拉伯语覆盖不足）时，才先阅读 references/webfonts.md——在页面组件中加载样式表后，整个 @font-face 集合会在每个已挂载页面上注册一次；CJK 字体系列还需要进行子集化。

主题

如果项目根目录下存在 themes/<id>.md，且幻灯片需要遵循该主题，主题文件将覆盖此技能中的默认设置——其调色板、字体排版、布局内边距以及 Title/Footer 组件均为权威规范。在应用本节中的任何其他内容之前，请先阅读主题文件。

主题由 create-theme 技能生成，属于纯文档：将调色板以及可直接粘贴的 Title / Footer / Eyebrow 组件原样复制到幻灯片中。如果主题的 frontmatter 包含 mode: dark 或 mode: light，请将其视为幻灯片的背景模式（例如，选择要导入的 logo 变体时）。

设计系统（按需启用，逐页设置）

幻灯片可以在 index.tsx 顶部声明类型化设计令牌——export const design: DesignSystem = { palette, fonts, typeScale, radius }——并通过内联样式中的 var(--osd-X) 使用它们。框架会在画布根节点注入 CSS 变量，开发 UI 的 Design 面板可以实时调整这些变量。

默认使用设计系统。 每张新幻灯片都应声明一个 design 常量，以便生成后仍可通过面板调整。只有当单页幻灯片的调色板有意锁定时，才改用纯调色板常量（references/design-system.md 介绍了这种替代方案）。

references/design-system.md 详细介绍了令牌的完整结构、两种使用方式（var(--osd-X) 与直接读取 design.X）、Design 面板的行为，以及面板 AST 写入器要求的格式约束。编写常量之前请先阅读。

起始模板

import type { DesignSystem, Page, SlideMeta } from '@open-slide/core';

export const design: DesignSystem = {
  palette: { bg: '#0f172a', text: '#f8fafc', accent: '#fbbf24' },
  fonts: {
    display: 'system-ui, -apple-system, sans-serif',
    body: 'system-ui, -apple-system, sans-serif',
  },
  typeScale: { hero: 180, body: 40 },
  radius: 12,
};

// Extra colors / sizes outside the DesignSystem shape stay as plain consts.
const muted = '#94a3b8';

const fill = {
  width: '100%',
  height: '100%',
  fontFamily: 'var(--osd-font-body)',
} as const;

const Cover: Page = () => (
  <div
    style={{
      ...fill,
      background: 'var(--osd-bg)',
      color: 'var(--osd-text)',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      padding: '0 160px',
    }}
  >
    <div style={{ fontSize: 28, color: 'var(--osd-accent)', letterSpacing: '0.2em' }}>
      CHAPTER 01
    </div>
    <h1
      style={{
        fontFamily: 'var(--osd-font-display)',
        fontSize: 'var(--osd-size-hero)',
        fontWeight: 900,
        margin: '32px 0',
        lineHeight: 1.05,
      }}
    >
      The Big Idea
    </h1>
    <p style={{ fontSize: 'var(--osd-size-body)', color: muted, maxWidth: 1200 }}>
      A short subtitle that explains what this slide is about.
    </p>
  </div>
);

const Content: Page = () => (
  <div style={{ ...fill, background: 'var(--osd-bg)', color: 'var(--osd-text)', padding: 120 }}>
    <h2 style={{ fontFamily: 'var(--osd-font-display)', fontSize: 80, fontWeight: 800, margin: 0 }}>
      Section heading
    </h2>
    <ul style={{ fontSize: 'var(--osd-size-body)', lineHeight: 1.6, marginTop: 64, paddingLeft: 48 }}>
      <li>One clear point per line</li>
      <li>Keep to 3–5 bullets</li>
      <li>Let the space breathe</li>
    </ul>
  </div>
);

export const meta: SlideMeta = {
  title: 'The Big Idea',
  createdAt: '2026-05-16T12:00:00Z',
};
export default [Cover, Content] satisfies Page[];

资源

幻灯片专属资源位于 slides/<id>/assets/ 下，并作为 ES 模块导入（import hero from './assets/hero.jpg'）。在不同演示文稿之间共享的全局资源（logo、头像、重复使用的图标）位于项目根目录的 assets/ 中，并通过 @assets 别名导入。对于纯文本幻灯片，完全不要创建 slides/<id>/assets/。

references/assets.md 介绍了导入形式（模块导入与 new URL(...)）、@assets 别名，以及主题如何命名资源路径。

图片占位符

如果页面确实需要一张必须由用户提供的真实图片（产品截图、团队照片、来自用户数据的图表），请使用来自 @open-slide/core 的类型化 <ImagePlaceholder hint="…" />，不要自行编造替代图片——用户可以通过 Assets 面板和检查器替换它。不要将占位符用于装饰或通用图库图片填充；如果页面可以通过字体、布局和颜色来表达，就采用这种方式。

references/assets.md 介绍了完整的使用规则、尺寸指南，以及何时适合（或不适合）使用占位符的示例。

页码

如果页脚显示当前页码（03 / 12），请通过 useSlidePageNumber() 读取——绝不要硬编码 n / TOTAL。有关此 hook 的约定及其可调用位置，请参阅 references/page-numbers.md。

分步显示（<Steps> / <Step>）

一次显示页面的一个要点：将延后显示的部分放入 <Step>，将其整体放入 <Steps>；每按一次 → 就显示下一步。仅当观点的呈现顺序很重要时才使用，不要在每页上都条件反射般地使用。有两条关键规则：<Step> 必须是 <Steps> 的直接子元素（否则会静默地完全显示），并且页面通过总览网格跳转查看时仍须完整易读（跳转后会显示所有步骤）。

编写分步页面前，请阅读 references/steps.md——其中介绍了多个 <Steps> 块的组合顺序、“始终显示标题，正文依次呈现”的模式，以及进入方向行为。如果此项目中存在 slides/build-on-reveal/，它就是规范的完整示例。

页面过渡

框架可以在切换幻灯片时播放进入／退出动画，通过 SlideTransition 声明（模块级默认设置，可按页面覆盖；以进入页面的设置为准）。默认情况下没有过渡——页面会直接切换，直接切换本身就是一种得体的默认选择。如果选择启用过渡：整套演示文稿只用一种动效风格，时长为 200–280 ms，位移幅度小于 12 px／缩放幅度小于 3%，退出页面保持不动，进入页面在其上方淡入（除非设置 throughBackground: true，否则框架会忽略退出页面的不透明度）。

声明过渡前，请先阅读 references/transitions.md——其中包含完整的类型约定、设计原则、六种共享同一动效风格的即用型过渡组成的「得体系列」、感知方向的关键帧，以及反模式列表。

变形过渡

当相邻两个页面上存在同一个视觉对象时，请在两个页面中都用 MorphElement 包裹它，并使用相同的 id；同时在进入页面的过渡中启用 morph——位置、尺寸、圆角和颜色会在一次连续运动中插值变化（类似 Keynote 的「神奇移动」）。变形用于状态连续性（例如滑动的开关、展开的卡片、加入一行的方框）；不要用它来变形装饰元素。

编写变形前，请先阅读 references/morph.md——其中的七条规则（保持退出状态 + 仅淡入透明度、几何形状确定、变形节点上不使用 transform、使用 useIsActivePage() 控制等）都是在真实演示文稿中验证得出的，违反其中任何一条都会导致变形明显异常。

重复元素：用组件，而不是 map

当页面上有重复的视觉元素——卡片、Logo 行、画廊平铺项、列表行、步骤指示器——请定义一个小型组件，并为每个元素单独实例化一次。不要使用 array.map 遍历数据数组来渲染整个元素组。

请将组件定义在同一个 index.tsx 文件中，与 Page 组件放在一起。不要将它拆分到 Card.tsx 之类的同级文件中——一张幻灯片始终由一个 index.tsx 和它的 assets/ 组成。

// ✅ Each card is its own JSX node — inspector edits one at a time.
const Card = ({ src, label }: { src: string; label: string }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    <img src={src} style={{ width: 320, height: 320, objectFit: 'cover', borderRadius: 12 }} />
    <p style={{ fontSize: 32 }}>{label}</p>
  </div>
);

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 64 }}>
  <Card src={alpha} label="Alpha" />
  <Card src={beta}  label="Beta"  />
  <Card src={gamma} label="Gamma" />
</div>

// ❌ One shared template — replacing the image or text in the inspector
//    changes every rendered card at once.
const items = [
  { src: alpha, label: 'Alpha' },
  { src: beta,  label: 'Beta'  },
  { src: gamma, label: 'Gamma' },
];
items.map((item) => (
  <div>
    <img src={item.src} />
    <p>{item.label}</p>
  </div>
));

检查器会原位编辑源 JSX。map 函数体是所有已渲染实例共用的一个源码位置，因此用户在其中替换图片或调整标签时，所有卡片都会一起改变。显式实例会为每张卡片提供独立的 JSX 节点和属性——这是检查器可以定位的单元。

组件定义仍是布局／样式的唯一事实来源（修改一次 → 所有卡片都会更新）。只有每个实例的数据——src、label、强调色——放在调用处。

此规则适用于重复的视觉元素，而非重复的数据。纯文本列表（<ul><li> 项）没有问题：每个 <li> 本身就是独立的 JSX 节点，因此直接编写字面标记才是正确做法——无需将它们封装成组件。

开箱即用的运行时行为

• 主页会列出 slides/ 下的所有文件夹。
• 点击幻灯片后，会显示左侧缩略图栏、主页面、上一页／下一页控件和页码。
• 使用方向键／PageUp／PageDown 导航。按 F 进入全屏播放模式。
• 播放模式下：按 Space／→ 切换到下一页，按 ← 切换到上一页，按 Esc 退出。
• 热重载：编辑 index.tsx 后，浏览器会实时更新。
• 仅开发环境提供预览路由 /s/<id>/preview?p=N，可在没有编辑器界面的情况下渲染单个页面——请参阅以视觉方式预览页面。

直观预览页面

编写或编辑页面后，查看页面效果——垂直空间预算的计算能发现溢出，但无法发现颜色冲突、换行不自然或图片损坏。开发服务器运行时，每个页面都有一个不带浏览器界面的预览 URL；无需打开完整的编辑器 UI（主页 → 幻灯片组 → 缩略图）即可访问。

1. 找到开发服务器。 读取 node_modules/.open-slide/server.json（启动时写入，关闭时删除）：

   { "url": "http://localhost:5173/", "port": 5173, "pid": 41234, "startedAt": "…" }
   

   文件不存在 = 开发服务器未运行。除非用户要求，否则不要自行启动；跳过视觉检查，并在交接说明中提及。

2. 打开 <url>s/<slideId>/preview?p=<pageNumber>——p 从 1 开始计数。添加 &step=<n>，只显示分步页面中前 n 个 <Step>（默认显示全部内容）。

3. 等待 [data-osd-preview="ready"]——字体、data-waitfor 目标、图片和入场动画全部就绪后，此标记会被设置。如果幻灯片 ID 未知、页面超出范围、页面渲染时抛出异常，或有内容在 10 秒内未就绪（字体或图片未加载、data-waitfor 目标未出现、动画仍在运行），标记会变为 [data-osd-preview="error"]；[data-osd-preview-error] 中会显示错误信息。请修复原因，不要直接截图。

4. 使用 1920×1080 的视口截图，使页面以原始尺寸渲染（较小的视口会缩小页面以适应）。使用任意可用的浏览器工具（Playwright / Chrome MCP、浏览器自动化工具）。如果项目已安装 Playwright，也可以使用 CLI——--no 会阻止 npx 下载 Playwright：

   npx --no playwright screenshot --viewport-size "1920,1080" \
     --wait-for-selector '[data-osd-preview="ready"]' \
     "http://localhost:5173/s/<slideId>/preview?p=3" /tmp/<slideId>-p3.png
   

   如果没有可用的浏览器工具，未经询问不要安装；跳过视觉检查。

然后查看图片并修复发现的问题。预览会像编辑器一样热重载，并且不会移动用户在 current.json 中的光标。

完成前自查

• slides/<id>/index.tsx 默认导出一个非空的 Page[]。
• 每个页面的根元素都填满 100% × 100%。
• 内容位于内边距范围内（不要让文字贴着边缘）。
• 对于每个页面，字体大小 × 行高 × 行数 + 间距 + 2×内边距 ≤ 1080px。 如果接近上限，就拆分页面。不要用 overflow: auto 来规避问题。
• 按所选字号，每条项目符号都不会换到第二行。
• 所有页面的视觉方向保持一致（配色 + 字体比例）。
• 幻灯片声明顶层 export const design: DesignSystem = { … }，并通过 var(--osd-X) 引用其中的值（只有在需要用 JS 数值进行运算时才使用 design.X）。只有配色有意固定的一次性幻灯片才可以省略 design 常量。
• 每页只表达一个想法。
• 视觉上重复的元素（卡片、磁贴、Logo 行）都作为显式的 <Component /> 实例渲染，而不是通过 array.map 遍历数据列表渲染。
• 所有导入的资源都存在于磁盘上——位于幻灯片目录下的 slides/<id>/assets/，或全局 assets/ 目录中（通过 @assets/... 导入）。
• 每个 <ImagePlaceholder> 都对应用户必须提供的真实图片，而非装饰性填充。如果可以用排版或布局替代，就应该替代。
• 如果页面使用 <Steps>/<Step>，每个 <Step> 都必须是 <Steps> 的直接子元素；并且即使通过总览网格直接跳转到该页面，页面也应呈现完整内容（向前进入时逐步呈现；跳转进入时则完全呈现）。
• 如果声明了 SlideTransition，所有页面都必须属于同一套规范——时长范围相同（200–280 ms）、缓动组合相同、保持后淡入的形态相同（不设进入延迟，除有意设置章节分隔外，不使用 throughBackground），幅度低于 12 px / 3%。不要使用六种截然不同的表达方式。如果拿不准，就完全省略转场。（选择 morph 的页面可以超出此范围，以匹配变形效果——参见 references/morph.md。）
• 如果转场选择了 morph：每页中的 morph id 都必须唯一，并在成对页面间保持稳定；morph 几何尺寸必须固定为像素值（不能在挂载后测量）；morph 节点上不能有 transform；进入动画必须由 useIsActivePage() 控制。
• 如果用户要求演讲稿 / 演讲者备注，内容必须放在 export const notes 中（与页面数组索引对齐），而不是 Markdown 或文本文件中。
• 如果开发服务器正在运行，你已预览所有修改过的页面（参见 以视觉方式预览页面）并修复了看起来不对的地方。
• 未编辑 slides/<id>/ 以外的任何内容。

反面模式

• ❌ 大段文字。如果页面超过约 40 个词，就拆分页面。
• ❌ 使用整个画布放置正文。遵守 100–160px 的内边距要求。
• ❌ 纵向内容超过 1080px。被裁切的内容不可见——拆分页面。
• ❌ 用 overflow: auto / overflow: scroll / overflow: hidden 来“隐藏”过多内容。画布不会滚动；你只是把问题藏起来了。
• ❌ 为了塞入更多内容而把字号缩小到比例尺下限以下，或把内边距缩小到 100px 以下。应拆分页面。
• ❌ 项目符号换到第二行——要么缩短内容，要么单独放到一页。
• ❌ 正文字号小于 28px——在投影仪上无法清晰阅读。
• ❌ 页面间配色不一致。
• ❌ 安装软件包。仅可使用 react、@open-slide/core 和标准 Web API。
• ❌ 将 CSS 写入共享文件。只能使用内联样式或作用域类名。
• ❌ 在幻灯片目录中创建 README.md 或其他说明性文件。
• ❌ 将演讲稿作为 Markdown 或文本文件交付。运行时只会显示 notes 导出内容——其他内容都不会显示在演示者视图中。
• ❌ 编辑 package.json、open-slide.config.ts 或其他幻灯片。
• ❌ 未阅读参考文件就使用基础组件——每个 references/*.md 文件都包含该基础组件自己的反面模式清单（占位内容误用、转场表达方式、<Step> 嵌套、morph 几何尺寸）。