tightened-slide

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tightened Slide

Use this workflow when a user asks for a Tightened Slide deck, horizontal swipe presentation, HTML slide deck, launch deck, analysis deck, framework deck, product deck, or data-driven talk.

当用户需要Tightened Slide演示文稿、横向滑动演示文稿、HTML幻灯片演示文稿、发布演示文稿、分析演示文稿、框架演示文稿、产品演示文稿或数据驱动型演讲时，可使用此工作流。

Operating Assumptions

操作假设

This is a Tightened Slide only system.
The output is a static HTML deck, normally
```
index.html
```
, with an adjacent
```
images/
```
folder.
The template is
```
assets/template.html
```
.
Body slides must use registered
```
S01
```
to
```
S22
```
layouts.
The validator is required before delivery.
Supported language modes are English and Korean.

这是仅适用于Tightened Slide的系统。
输出为静态HTML演示文稿，通常为
```
index.html
```
，附带相邻的
```
images/
```
文件夹。
模板为
```
assets/template.html
```
。
正文幻灯片必须使用已注册的
```
S01
```
至
```
S22
```
布局。
交付前必须运行验证器。
支持的语言模式为英语和韩语。

Step 1: Clarify Only What Matters

步骤1：仅澄清关键信息

If the user provides a complete outline and assets, proceed. If key inputs are missing, ask at most three questions:

Audience and presentation setting.
Target duration or page count.
Source material, language mode, required images/data, and hard constraints.

If the theme is unspecified, default to International Klein Blue from

references/themes.md

. If the language mode is unspecified, default to English.

如果用户提供了完整的大纲和资源，即可继续。若缺少关键输入，最多提出三个问题：

受众及演示场景。
目标时长或页数。
源材料、语言模式、所需图片/数据及硬性约束。

若未指定主题，默认使用

references/themes.md

中的国际克莱因蓝。若未指定语言模式，默认使用英语。

Step 2: Prepare The Deck

步骤2：准备演示文稿

Create the target folder and image folder:

bash

mkdir -p path/to/deck/images
cp assets/template.html path/to/deck/index.html

Immediately replace the

<title>

placeholder in

index.html

Set the language mode on the root element:

html

<html lang="en" data-language="en">

or:

html

<html lang="ko" data-language="ko">

Korean mode uses the template font stack

SUIT

Pretendard

Noto Sans KR

, and

Noto Sans

before falling back to Inter and system sans fonts.

If the deck must work offline with local animation fallback, keep

assets/motion.min.js

reachable from the copied HTML path or accept the CDN fallback built into the template.

创建目标文件夹和图片文件夹：

bash

mkdir -p path/to/deck/images
cp assets/template.html path/to/deck/index.html

立即替换

index.html

中的

<title>

占位符。

在根元素上设置语言模式：

html

<html lang="en" data-language="en">

或：

html

<html lang="ko" data-language="ko">

韩语模式使用模板字体栈

SUIT

、

Pretendard

、

Noto Sans KR

和

Noto Sans

，降级方案为Inter及系统无衬线字体。

若演示文稿需离线运行并使用本地动画降级方案，需确保

assets/motion.min.js

可从复制后的HTML路径访问，或接受模板内置的CDN降级方案。

Step 3: Preflight

步骤3：预检查

Before writing slide markup:

Read the template
```
<style>
```
block.
Read
```
references/layout-lock.md
```
.
Read the relevant skeletons in
```
references/layouts.md
```
.
Confirm every class you plan to use exists in the template.
Do not invent global classes. Use inline styles only for page-specific tuning.

Create a planning table before coding:

text

page -> data-layout -> reason -> image slot

For 7-8 page decks, use at least six different

Sxx

layouts. For 10+ page decks, use at least eight.

编写幻灯片标记前：

阅读模板中的
```
<style>
```
块。
阅读
```
references/layout-lock.md
```
。
阅读
```
references/layouts.md
```
中的相关骨架内容。
确认计划使用的每个类都存在于模板中。
不得自定义全局类。仅可使用内联样式进行页面特定调整。

编码前创建规划表：

text

page -> data-layout -> reason -> image slot

对于7-8页的演示文稿，至少使用六种不同的

Sxx

布局。对于10页及以上的演示文稿，至少使用八种。

Step 4: Pick Layouts

步骤4：选择布局

Use the registered layout set:

```
S01
```
Index Cover
```
S02
```
Vertical Timeline + KPI
```
S03
```
Split Statement
```
S04
```
Six Cells
```
S05
```
Three Layers
```
S06
```
KPI Tower
```
S07
```
Horizontal Bar
```
S08
```
Duo Compare
```
S09
```
Dot Matrix Statement
```
S10
```
Split Closing
```
S11
```
Horizontal Timeline
```
S12
```
Manifesto + Ink Banner
```
S13
```
Three Forces
```
S14
```
Loop Form
```
S15
```
Matrix + Hero Stat
```
S16
```
Multi-card Brief
```
S17
```
System Diagram
```
S18
```
Why Now
```
S19
```
Four Cards
```
S20
```
Stacked KPI Ledger
```
S21
```
Tech Spec Sheet
```
S22
```
Image Hero

Use

S08 + Tightened Map Component

for maps, routes, city relationships, location networks, or historical movement pages.

Use

S22

for one large image. Use

S15

S16

adaptations for multiple images. Do not create unregistered image split or evidence wall layouts.

使用已注册的布局集：

```
S01
```
索引封面
```
S02
```
垂直时间轴 + KPI
```
S03
```
拆分式陈述
```
S04
```
六格布局
```
S05
```
三层布局
```
S06
```
KPI塔状布局
```
S07
```
横向条形图
```
S08
```
双项对比
```
S09
```
点阵式陈述
```
S10
```
拆分式结尾
```
S11
```
水平时间轴
```
S12
```
宣言 + 墨色横幅
```
S13
```
三力模型
```
S14
```
循环形式
```
S15
```
矩阵 + 核心数据
```
S16
```
多卡片摘要
```
S17
```
系统图
```
S18
```
为何是现在
```
S19
```
四卡片布局
```
S20
```
堆叠式KPI台账
```
S21
```
技术规格表
```
S22
```
图片主视觉

若涉及地图、路线、城市关系、位置网络或历史移动页面，使用

S08 + Tightened Map Component

。

单张大图使用

S22

。多张图片使用

S15

或

S16

的适配布局。不得创建未注册的图片拆分或证据墙布局。

Step 5: Apply The Visual System

步骤5：应用视觉系统

Hard rules:

One accent color per deck.
No gradients, shadows, rounded cards, glass, neon, 3D, or decorative borders.
Large type uses light weights:
```
200
```
or
```
300
```
.
Body text uses restrained weights and clear hierarchy.
Large sizes use
```
font-size:min(Xvw,Yvh)
```
with
```
Y >= X * 1.6
```
.
Headings sit on the left/top content axis unless using registered statement/split layouts.
Kicker text sits above the title, not beside it.
```
.canvas-card
```
already has horizontal padding; do not add another
```
5vw
```
padding layer inside it.
Keep all captions, labels, and footnotes above the bottom navigation safe area.
SVG may draw geometry only; visible labels must be HTML.

Language rules:

English mode uses concise sentence case titles and direct body copy.
Korean mode uses short Korean titles, compact body lines, and consistent product terms.
Diagram labels and generated-image text must match the chosen language mode.

硬性规则：

每个演示文稿仅使用一种强调色。
不得使用渐变、阴影、圆角卡片、毛玻璃、霓虹、3D效果或装饰性边框。
大字号文本使用轻量字重：
```
200
```
或
```
300
```
。
正文文本使用克制的字重并保持清晰的层级结构。
大尺寸文本使用
```
font-size:min(Xvw,Yvh)
```
，且
```
Y >= X * 1.6
```
。
标题位于左/上内容轴，除非使用已注册的陈述/拆分布局。
引导文本位于标题上方，而非侧边。
```
.canvas-card
```
已包含水平内边距；请勿在其内部再添加
```
5vw
```
的内边距层。
所有说明文字、标签及脚注需置于底部导航安全区域之上。
SVG仅可绘制几何图形；可见标签必须使用HTML。

语言规则：

英语模式使用简洁的句首大写标题和直接的正文内容。
韩语模式使用简短的韩语标题、紧凑的正文行及统一的产品术语。
图表标签及生成图片中的文本必须与所选语言模式匹配。

Step 6: Image Flow

步骤6：图片流程

If images are needed:

Ask before generating new images.
Choose the layout slot before writing the prompt.
Use
```
references/image-prompts.md
```
.
Save generated or provided images in
```
images/
```
.
Name images
```
{page}-{semantic-name}.{ext}
```
.
Add
```
data-image-slot
```
to every local image.

Slot defaults:

```
S22
```
:
```
s22-hero-21x9
```
```
S15
```
:
```
s15-grid-21x9
```
or
```
s15-grid-16x10
```
```
S16
```
:
```
s16-brief-21x9
```
or
```
s16-brief-16x10
```

若需要图片：

生成新图片前需先询问用户。
编写提示词前先选择布局插槽。
使用
```
references/image-prompts.md
```
。
将生成或提供的图片保存至
```
images/
```
。
图片命名格式为
```
{page}-{semantic-name}.{ext}
```
。
为每个本地图片添加
```
data-image-slot
```
属性。

插槽默认值：

```
S22
```
:
```
s22-hero-21x9
```
```
S15
```
:
```
s15-grid-21x9
```
或
```
s15-grid-16x10
```
```
S16
```
:
```
s16-brief-21x9
```
或
```
s16-brief-16x10
```

Step 7: Validate

步骤7：验证

Run:

bash

node scripts/validate-deck.mjs path/to/index.html

Fix every error. Warnings require visual review.

Then open the deck in a browser and inspect:

title alignment
type weight
spacing between title and body
image crop and image slot fit
captions and footnotes above navigation
ESC index visibility
```
B
```
static mode

Use

references/checklist.md

as the delivery checklist.

运行：

bash

node scripts/validate-deck.mjs path/to/index.html

修复所有错误。警告需进行视觉检查。

然后在浏览器中打开演示文稿并检查：

标题对齐方式
字重
标题与正文的间距
图片裁剪及插槽适配情况
说明文字及脚注是否位于导航区域之上
ESC索引可见性
```
B
```
静态模式

使用

references/checklist.md

作为交付检查清单。