openpress-create-slide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

open-press Create Slide

OpenPress 创建幻灯片

Create a slide deck as a sequence of direct, editable slide sources. Each slide owns its composition; the Press owns only deck registration, theme, and genuinely shared UI.

创建幻灯片演示文稿，将其作为一系列直接可编辑的幻灯片源文件序列。每张幻灯片独立负责自身的内容布局；Press仅负责演示文稿的注册、主题设置以及真正共享的UI组件。

First principles

基本原则

Start with the audience, the single message of each slide, and the evidence that supports it.
Keep one visual idea per slide. Prefer a diagram, image, comparison, or large number over dense prose.
New slides begin as direct source files, never through a registry or preselected layout asset.
Reuse a local component only after a visual primitive is genuinely repeated. Keep it in
```
press/<slug>/ui/
```
or
```
press/<slug>/components/
```
.

从受众、每张幻灯片的核心信息以及支撑信息的证据出发。
每张幻灯片仅保留一个视觉主题。优先使用图表、图片、对比内容或大数字，而非密集的文字。
新幻灯片以直接源文件形式创建，绝不通过注册表或预选布局资产生成。
只有当某个视觉元素被真正重复使用时，才复用本地组件。将其存放在
```
press/<slug>/ui/
```
或
```
press/<slug>/components/
```
目录下。

Read before changing source

修改源文件前必读

Read the deck
```
press/<slug>/press.tsx
```
, the active
```
theme/default.css
```
, and nearby slides.
State the deck's visual direction in a short
```
STYLE
```
note: type scale, palette, spacing, and intended visual language.

For a new or restructured deck, write a compact delivery shape:

text

AUDIENCE: who must understand what
STORY:
- id | composition | one message | evidence or visual
PRODUCE: direct slide sources, active theme, only proven shared UI

Preserve the existing slide order and IDs unless the user asks to change them.

阅读演示文稿的
```
press/<slug>/press.tsx
```
文件、当前生效的
```
theme/default.css
```
以及相邻幻灯片的内容。
在简短的
```
STYLE
```
注释中说明演示文稿的视觉方向：字体层级、调色板、间距以及预期的视觉风格。

对于新建或重构的演示文稿，编写一份简洁的交付框架：

text

AUDIENCE: 需要理解内容的目标人群
STORY:
- id | 布局内容 | 核心信息 | 证据或视觉元素
PRODUCE: 直接幻灯片源文件、生效主题、仅经过验证的共享UI组件

除非用户要求更改，否则保留现有的幻灯片顺序和ID。

Source contract

源文件约定

```
press/<slug>/press.tsx
```
registers slide IDs with marker-only
```
<Slide id="…" />
```
entries.
Each
```
press/<slug>/slides/<id>/slide.tsx
```
explicitly imports and composes the objects it needs.
The deck canvas is fixed at 1920 × 1080. Keep a single
```
<Slide>
```
root, a predictable
```
<Frame>
```
boundary, and literal
```
meta
```
.
```
layout
```
in
```
meta
```
describes the composition for readers; it does not select source or generate a slide.
Put deck tokens in
```
press/<slug>/theme/default.css
```
. Keep slide-specific CSS beside that slide or in the active theme when it is shared across the deck.
Use
```
@open-press/core
```
objects where they clarify geometry, semantic structure, or responsive constraints. Use normal TSX and CSS for authored detail.

Read

references/layout-contract.md

before creating a slide. Read

references/css-colocate.md

when changing styles and

references/press-tree.md

when adding files.

```
press/<slug>/press.tsx
```
通过仅含标记的
```
<Slide id="…" />
```
条目注册幻灯片ID。
每个
```
press/<slug>/slides/<id>/slide.tsx
```
文件显式导入并组合所需的对象。
演示文稿画布固定为1920 × 1080分辨率。保留单一的
```
<Slide>
```
根元素、可预测的
```
<Frame>
```
边界以及字面量
```
meta
```
信息。
```
meta
```
中的
```
layout
```
字段用于向读者描述布局结构，而非选择源文件或生成幻灯片。
将演示文稿的通用样式变量放在
```
press/<slug>/theme/default.css
```
中。幻灯片专属的CSS要么放在对应幻灯片的目录旁，要么当它在整个演示文稿中共享时放在生效主题文件中。
使用
```
@open-press/core
```
对象来明确几何布局、语义结构或响应式约束。对于自定义细节，使用常规的TSX和CSS编写。

修改前请阅读

references/layout-contract.md

；修改样式时请阅读

references/css-colocate.md

；添加文件时请阅读

references/press-tree.md

。

Add and edit slides

添加与编辑幻灯片

Create a blank slide source with:

bash

open-press slide add <id> --press <slug>

Then edit

press/<slug>/slides/<id>/slide.tsx

directly. The generated placeholder is intentionally minimal: replace it with the slide's actual composition rather than preserving boilerplate.

For a new visual treatment:

Build the composition in the slide source.
Extract a local primitive only after the same structure has a second real use.
Name shared components for their role (
```
EvidenceGrid
```
,
```
SectionKicker
```
), not for a generic layout category.
Keep the content and metadata literal enough for source inspection and reader navigation.

使用以下命令创建空白幻灯片源文件：

bash

open-press slide add <id> --press <slug>

然后直接编辑

press/<slug>/slides/<id>/slide.tsx

文件。生成的占位内容故意极简：请用幻灯片的实际布局内容替换它，而非保留模板代码。

如需新的视觉样式：

在幻灯片源文件中构建布局。
只有当相同结构被第二次实际使用时，才提取为本地通用元素。
为共享组件命名时，依据其功能（如
```
EvidenceGrid
```
、
```
SectionKicker
```
），而非通用布局类别。
确保内容和元数据足够直观，以便于源文件检查和读者导航。

Reordering and removal

重新排序与删除

Use the CLI to preserve registration and folder consistency:

bash

open-press slide move <id> <position> --press <slug>
open-press slide remove <id> --press <slug>
open-press slide status --press <slug>

使用CLI命令来保证注册信息和文件夹结构的一致性：

bash

open-press slide move <id> <position> --press <slug>
open-press slide remove <id> --press <slug>
open-press slide status --press <slug>

Review checklist

审核检查清单

Does every slide communicate one claim at speaking pace?
Are images, charts, and diagrams legible at presentation distance?
Is the slide source self-contained and directly editable?
Are shared components justified by real reuse rather than anticipated reuse?
Does the active theme provide the spacing and contrast the deck needs?
Do navigation, slide order, notes, source view, and focus state still behave correctly?

Verify source changes with:

bash

npm run typecheck
npm test
npm run build

For visual work, also run

npm run dev:workspace

and inspect the affected Press in the Workbench before reporting completion.

每张幻灯片是否能在演讲节奏下传达一个核心观点？
图片、图表和示意图在演示距离下是否清晰可读？
幻灯片源文件是否独立且可直接编辑？
共享组件是否是基于实际复用需求，而非预期复用？
当前生效主题是否提供了演示文稿所需的间距和对比度？
导航、幻灯片顺序、备注、源文件视图以及焦点状态是否仍正常工作？

使用以下命令验证源文件修改：

bash

npm run typecheck
npm test
npm run build

对于视觉相关的工作，还需运行

npm run dev:workspace

，并在Workbench中检查受影响的Press，之后再报告完成。