deck-open-slide-canvas

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

【模板: 1920 画布自由 Deck】【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。

【硬性技术规格】

画布: 每页严格

width: 1920px; height: 1080px;

用

transform: scale(...)

适配视窗 (默认

scale(0.7)

居中)。

绝对禁止 overflow: 每页内容必须 fit in 1920×1080, 不许滚动条出现。

字号 type scale (px):

2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220

。

边距 padding: 96 / 128 / 160 三档之一。

每页有

<section class="slide" data-slide-id="<n>">

。

【调色板 — 每个 deck 选 1 套, 全程不改】

🌫 Ash & Lime — bg
```
#f1efea
```
, ink
```
#161616
```
, accent
```
#c5e803
```
。
🌌 Sea Indigo — bg
```
#0a0e1a
```
, ink
```
#f5f5f7
```
, accent
```
#5ac8fa
```
。
🧉 Mate Mocha — bg
```
#1a1411
```
, ink
```
#f5e9d6
```
, accent
```
#d97757
```
。
🌸 Pearl Rose — bg
```
#fdf6f3
```
, ink
```
#1a1015
```
, accent
```
#ff5d8f
```
。

【布局自由度 — 这是核心】

不强制模板, 每页根据内容性质自选布局: cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图。
但每页必须遵守一条规则: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要"什么都强调"。
不许塞两段平等的文字; 真要并列就上 3 列等权重网格。

【字体】

西文:
```
Inter Tight
```
(display) +
```
Inter
```
(body); 或
```
Source Serif Pro
```
(editorial 风时)。
中文:
```
Noto Sans SC
```
(sans 风) 或
```
Noto Serif SC
```
(editorial 风); 不混 sans + serif。
mono:
```
JetBrains Mono
```
给数据 / 时间戳。

【设计细节】

严禁 emoji 装饰 (内容里的允许); 严禁多色彩虹; accent 只用一个色。
严禁 SVG icon 套用 lucide / feather 等通用库 (自己写 inline SVG)。
加键盘 ← / → 切换 + hash 同步; 角标固定: 右下
```
№N/M
```
, 左下 deck title。
必须用用户的真实内容; 严禁 lorem ipsum。
单文件 HTML; Tailwind CDN; 不要外链图片。

【Template: 1920 Canvas Free Deck】【Intention】Scenarios where you don't want to be restricted by templates (personal portfolios, unique speeches, art/design class decks). Provide a fixed 1920×1080 canvas + strict type/color constraints, allowing agents to freely arrange each page according to content just like writing React components. Inspired by 1weiho/open-slide.

【Hard Technical Specifications】

Canvas: Each page strictly follows
```
width: 1920px; height: 1080px;
```
, use
```
transform: scale(...)
```
to adapt to the viewport (default
```
scale(0.7)
```
centered).
Overflow is strictly prohibited: Content of each page must fit in 1920×1080, no scrollbars allowed.

Font size type scale (px):

2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220

Padding: Choose one of three levels: 96 / 128 / 160.

Each page has

<section class="slide" data-slide-id="<n>">

【Color Palette — Choose one set per deck, no changes throughout】

🌫 Ash & Lime — bg
```
#f1efea
```
, ink
```
#161616
```
, accent
```
#c5e803
```
.
🌌 Sea Indigo — bg
```
#0a0e1a
```
, ink
```
#f5f5f7
```
, accent
```
#5ac8fa
```
.
🧉 Mate Mocha — bg
```
#1a1411
```
, ink
```
#f5e9d6
```
, accent
```
#d97757
```
.
🌸 Pearl Rose — bg
```
#fdf6f3
```
, ink
```
#1a1015
```
, accent
```
#ff5d8f
```
.

【Layout Freedom — This is the Core】

No mandatory templates, choose layout for each page based on content nature: cover / question / quote / image-text / three-column / five-column / list / data card / full-image.
But each page must follow one rule: Only one visual hierarchy focus — a golden sentence, a number, an image; don't "emphasize everything".
Do not include two paragraphs of equal importance; if you really need parallel content, use a 3-column equal-weight grid.

【Fonts】

Western languages:
```
Inter Tight
```
(display) +
```
Inter
```
(body); or
```
Source Serif Pro
```
(for editorial style).
Chinese:
```
Noto Sans SC
```
(sans style) or
```
Noto Serif SC
```
(editorial style); do not mix sans + serif.
Mono:
```
JetBrains Mono
```
for data/timestamps.

【Design Details】

Emoji decorations are strictly prohibited (allowed in content); multicolor rainbows are strictly prohibited; only one accent color can be used.
SVG icons from general libraries like lucide/feather are strictly prohibited (write inline SVG yourself).
Add keyboard ← / → navigation + hash sync; fixed corner labels:
```
№N/M
```
at bottom right, deck title at bottom left.
Must use real user content; lorem ipsum is strictly prohibited.
Single-file HTML; Tailwind CDN; no external linked images.