promptslide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PromptSlide

Create slide decks with AI coding agents. Each slide is a React component styled with Tailwind CSS, with built-in animations and PDF export.

借助AI编码Agent创建演示文稿幻灯片。每张幻灯片都是一个采用Tailwind CSS样式的React组件，内置动画效果并支持PDF导出。

Detect Mode

检测模式

Check if a PromptSlide project already exists in the current directory:

bash

grep -q '"promptslide"' package.json 2>/dev/null

Match found → This is an existing PromptSlide project. Go to Authoring Slides.
No match → No project yet. Go to Creating a New Deck.

检查当前目录中是否已存在PromptSlide项目：

bash

grep -q '"promptslide"' package.json 2>/dev/null

找到匹配项 → 这是一个已有的PromptSlide项目。跳转到【编写幻灯片](#编写幻灯片)部分。
未找到匹配项 → 尚未创建项目。跳转到【新建演示文稿](#新建演示文稿)部分。

Creating a New Deck

新建演示文稿

Step 1: Content Discovery

步骤1：内容调研

Before writing any code, ask the user:

What is this presentation about? (topic, key message)
Who is the audience? (investors, team, customers, conference)
How many slides? (suggest 5–10 for a focused deck, 10–15 for a detailed one)
Do you have content ready? (outline, bullet points, or should the agent draft it)

Use the answers to plan slide structure before scaffolding.

在编写代码前，询问用户以下问题：

本次演示的主题是什么？（核心话题、关键信息）
受众群体是谁？（投资者、团队成员、客户、会议参会者）
需要多少张幻灯片？（建议聚焦型演示用5-10张，详细型演示用10-15张）
是否已有准备好的内容？（大纲、要点，或是需要Agent来草拟内容）

根据用户的回答规划幻灯片结构，再进行项目搭建。

Step 2: Style Direction

步骤2：风格定位

Determine the visual direction before writing any code:

Ask if they have brand guidelines — logo, colors, fonts. If yes, use those directly.
If no brand guidelines, suggest 2–3 presets from references/style-presets.md. Briefly describe each (one sentence + mood), let the user pick or mix.
If the user wants something custom, ask: dark or light? What mood? (professional, playful, dramatic, techy). Then build a custom direction from the building blocks in the presets.

The chosen direction determines what you configure in Steps 3–4:

Colors →
```
src/globals.css
```
(
```
--primary
```
and other CSS variables)
Fonts →
```
<link>
```
in
```
index.html
```
+
```
fonts
```
in
```
src/theme.ts
```
Layouts → Custom React components in
```
src/layouts/
```
(see Layouts below)
Card styles & animations → Applied per-slide based on the direction

Presets are starting points, not rigid templates. The user can change everything — it's all just React components and CSS variables.

在编写代码前确定视觉风格方向：

询问用户是否有品牌规范 —— 如logo、配色、字体。如果有，直接使用这些规范。
若无品牌规范，从references/style-presets.md中推荐2-3个预设风格。每个预设用一句话描述风格氛围，让用户选择或混搭。
若用户想要自定义风格，询问：深色还是浅色？想要什么氛围？（专业、活泼、戏剧化、科技感）。然后基于预设中的基础组件构建自定义风格。

选定的风格方向将决定步骤3-4中的配置内容：

配色 →
```
src/globals.css
```
（
```
--primary
```
及其他CSS变量）
字体 →
```
index.html
```
中的
```
<link>
```
标签 +
```
src/theme.ts
```
中的
```
fonts
```
配置
布局 →
```
src/layouts/
```
中的自定义React组件（见下方【布局（母版主题）】）
卡片样式与动画 → 根据风格方向应用到每张幻灯片

预设只是起点，而非刚性模板。用户可以修改所有内容——一切都只是React组件和CSS变量。

Step 3: Scaffold and start

步骤3：搭建并启动项目

bash

bun create slides my-deck -- --yes
cd my-deck
bun install
bun run dev

The

--yes

flag skips interactive prompts and uses sensible defaults. Replace

my-deck

with the user's desired name. The dev server starts at http://localhost:5173 with hot module replacement.

bash

bun create slides my-deck -- --yes
cd my-deck
bun install
bun run dev

--yes

参数会跳过交互式提示，使用合理的默认配置。将

my-deck

替换为用户想要的项目名称。开发服务器将启动在http://localhost:5173，支持热模块替换。

Step 4: Configure branding

步骤4：配置品牌信息

Edit

src/theme.ts

for brand name and logo, and

src/globals.css

for theme colors. See references/theming-and-branding.md for details.

编辑

src/theme.ts

设置品牌名称和logo，编辑

src/globals.css

设置主题配色。详情请参考references/theming-and-branding.md。

Step 5: Design Thinking

步骤5：设计思路

Before writing any slide code, pause and think about design for the deck as a whole and for each slide individually. Consider:

What does this content want to be? A single powerful stat deserves to be big and alone on the slide. A comparison wants two sides. A list of features might work as clean typography with whitespace — not everything needs cards. Let the content shape the layout, not the other way around.
What's the rhythm of the deck? Alternate between dense and spacious, structured and freeform. A tight data slide followed by a big bold quote creates contrast and keeps attention.
Where are the hero moments? Every deck should have 1–2 slides that break the pattern — an oversized number, a full-bleed color block, a single sentence with generous whitespace. These give the deck personality.

Don't default to the first layout that comes to mind. Consider 2–3 options for each slide and pick the one that best serves the message.

Share your design plan with the user before coding. Briefly describe the style direction and your layout approach for each slide. Let them approve or adjust — don't just decide and start building.

在编写幻灯片代码前，先整体思考演示文稿的设计，以及每张幻灯片的单独设计。考虑以下几点：

这些内容适合什么样的呈现方式？ 一个有力的数据应该大字号单独展示。对比内容适合分两侧呈现。功能列表可能只需要简洁的排版——并非所有内容都需要卡片样式。让内容决定布局，而非反过来。
演示文稿的节奏如何？ 交替使用密集和宽松的布局，结构化和自由式的排版。一张紧凑的数据幻灯片之后紧跟一张大字号引用幻灯片，形成对比，保持观众注意力。
哪些是亮点幻灯片？ 每个演示文稿都应该有1-2张打破常规的幻灯片——超大数字、全屏色块、带充足留白的单句文案。这些能赋予演示文稿独特性。

不要默认使用第一个想到的布局。为每张幻灯片考虑2-3种方案，选择最能传达信息的一种。

在编码前与用户分享你的设计方案。 简要描述风格方向和每张幻灯片的布局思路。让用户批准或调整——不要自行决定后就开始构建。

Step 6: Create your slides

步骤6：创建幻灯片

Remove the demo slides from

src/slides/

and clear

src/deck-config.ts

, then follow the authoring instructions below.

删除

src/slides/

中的示例幻灯片，清空

src/deck-config.ts

，然后按照下方的编写说明操作。

Authoring Slides

编写幻灯片

Before Writing Slides

编写前准备

Whether this is a new deck or an existing one, confirm the visual direction with the user before creating slide files. The user's primary color may already be configured from scaffolding — don't overwrite it without asking.

Present your design plan to the user before writing any slide code. Briefly describe the style direction you're considering, the font pairing, and your layout idea for each slide (e.g., "slide 3: side-by-side comparison", "slide 5: hero stat with oversized number"). Let the user approve or adjust before you start building. Don't just decide internally and start coding.

For each slide, think about what the content wants to be — a stat might want to be huge and alone, a comparison wants two sides, a list might just need clean typography. Let the content shape the layout. See references/slide-design-guide.md for design principles.

无论是新建还是已有项目，在创建幻灯片文件前都要与用户确认视觉风格方向。用户的主色调可能已经在项目搭建时配置完成——未经询问不要覆盖。

在编写任何幻灯片代码前，向用户展示你的设计方案。 简要描述你考虑的风格方向、字体搭配，以及每张幻灯片的布局思路（例如：“第3张：左右对比布局”，“第5张：超大数字的亮点数据幻灯片”）。在开始构建前让用户批准或调整。不要自行决定后就开始编码。

对于每张幻灯片，思考内容适合的呈现方式——数据可能需要超大字号单独展示，对比内容适合分两侧，列表可能只需要简洁排版。让内容决定布局。设计原则请参考references/slide-design-guide.md。

Architecture

架构

src/
├── layouts/           # Slide layouts — your "master themes", create freely
├── slides/            # Your slides go here
├── theme.ts           # Brand name, logo, fonts
├── deck-config.ts     # Slide order + step counts
├── App.tsx            # Theme provider
└── globals.css        # Theme colors (CSS custom properties)

src/
├── layouts/           # 幻灯片布局——你的“母版主题”，可自由创建
├── slides/            # 幻灯片文件存放目录
├── theme.ts           # 品牌名称、logo、字体配置
├── deck-config.ts     # 幻灯片顺序 + 步骤计数
├── App.tsx            # 主题提供者
└── globals.css        # 主题配色（CSS自定义属性）

Key Constraints

关键约束

Slide dimensions: 1280×720 (16:9). Content scales automatically in presentation mode.

Semantic colors: Use

text-foreground

text-muted-foreground

text-primary

bg-background

bg-card

border-border

— these map to the theme's CSS custom properties.

Icons: Import from

lucide-react

(e.g.,

import { ArrowRight } from "lucide-react"

幻灯片尺寸：1280×720（16:9）。在演示模式下内容会自动缩放。
语义化配色：使用
```
text-foreground
```
、
```
text-muted-foreground
```
、
```
text-primary
```
、
```
bg-background
```
、
```
bg-card
```
、
```
border-border
```
——这些会映射到主题的CSS自定义属性。

图标：从

lucide-react

导入（例如：

import { ArrowRight } from "lucide-react"

）。

Creating a Slide

创建幻灯片

Every slide is a React component that receives

SlideProps

tsx

// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";

export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
  return (
    <div className="bg-background text-foreground flex h-full w-full flex-col p-12">
      <h2 className="text-4xl font-bold">Your Title</h2>
      <div className="flex flex-1 items-center">
        <p className="text-muted-foreground text-lg">Your content</p>
      </div>
    </div>
  );
}

src/deck-config.ts

import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";

export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];

每张幻灯片都是一个接收

SlideProps

的React组件：

tsx

// src/slides/slide-example.tsx
import type { SlideProps } from "promptslide";

export function SlideExample({ slideNumber, totalSlides }: SlideProps) {
  return (
    <div className="bg-background text-foreground flex h-full w-full flex-col p-12">
      <h2 className="text-4xl font-bold">你的标题</h2>
      <div className="flex flex-1 items-center">
        <p className="text-muted-foreground text-lg">你的内容</p>
      </div>
    </div>
  );
}

在

src/deck-config.ts

中注册该组件：

import type { SlideConfig } from "promptslide";
import { SlideExample } from "@/slides/slide-example";

export const slides: SlideConfig[] = [{ component: SlideExample, steps: 0 }];

Layouts (Master Themes)

布局（母版主题）

Layouts are React components in

src/layouts/

that wrap slide content. They control structure (headers, footers, backgrounds, padding) and are the closest thing to "master slides" in traditional tools. Change a layout once, every slide using it updates.

Create 2–4 layouts per deck for visual variety.

The scaffolded project includes

SlideLayoutCentered

as a starter. Create new ones freely — they're just React components. Users can customize padding, backgrounds, header styles, or add entirely new structural patterns.

布局是

src/layouts/

中的React组件，用于包裹幻灯片内容。它们控制结构（页眉、页脚、背景、内边距），是最接近传统工具中“母版幻灯片”的功能。修改一次布局，所有使用该布局的幻灯片都会更新。

每个演示文稿创建2-4种布局以增加视觉多样性。

搭建好的项目包含

SlideLayoutCentered

作为起始模板。可自由创建新的布局——它们只是React组件。用户可以自定义内边距、背景、页眉样式，或添加全新的结构模式。

Animations

动画

Use

<Animated>

for click-to-reveal steps and

<AnimatedGroup>

for staggered reveals. Available animations:

fade

slide-up

slide-down

slide-left

slide-right

scale

Critical rule: The

steps

value in

deck-config.ts

MUST equal the highest

step

number used in that slide.

steps: 0

means no animations.

For the full animation API, see references/animation-api.md.

使用

<Animated>

组件实现点击分步显示效果，使用

<AnimatedGroup>

组件实现 staggered 显示效果。支持的动画类型：

fade

、

slide-up

、

slide-down

、

slide-left

、

slide-right

、

scale

。

重要规则：

deck-config.ts

中的

steps

值必须等于该幻灯片中使用的最高

step

编号。

steps: 0

表示无动画。

完整的动画API请参考references/animation-api.md。

Styling Constraints (PDF Compatibility)

样式约束（PDF兼容性）

These rules ensure slides look identical on screen and in PDF export:

No blur:
```
filter: blur()
```
and
```
backdrop-filter: blur()
```
are silently dropped by Chromium's PDF pipeline
No gradients:
```
bg-gradient-to-*
```
and radial gradients render inconsistently — use solid colors with opacity instead (e.g.,
```
bg-primary/5
```
,
```
bg-muted/20
```
)
No shadows:
```
box-shadow
```
(including
```
shadow-sm
```
,
```
shadow-lg
```
,
```
shadow-2xl
```
) does not export correctly to PDF — use borders or background tints instead (e.g.,
```
border border-border
```
,
```
bg-white/5
```
)

For content density rules, design principles, and visual anti-patterns, see references/slide-design-guide.md.

以下规则确保幻灯片在屏幕和PDF导出中显示一致：

禁止模糊效果：
```
filter: blur()
```
和
```
backdrop-filter: blur()
```
会被Chromium的PDF处理流程自动忽略
禁止渐变：
```
bg-gradient-to-*
```
和径向渐变渲染不一致——改用带透明度的纯色（例如：
```
bg-primary/5
```
、
```
bg-muted/20
```
）
禁止阴影：
```
box-shadow
```
（包括
```
shadow-sm
```
、
```
shadow-lg
```
、
```
shadow-2xl
```
）无法正确导出到PDF——改用边框或背景色调（例如：
```
border border-border
```
、
```
bg-white/5
```
）

关于内容密度规则、设计原则和视觉反模式，请参考references/slide-design-guide.md。

Visual Verification

可视化验证

After creating or modifying a slide, you can capture a screenshot to visually verify it renders correctly. See references/visual-verification.md for the

promptslide to-image

command and workflow.

创建或修改幻灯片后，你可以截取屏幕截图来可视化验证渲染效果。

promptslide to-image

命令和工作流请参考references/visual-verification.md。