// Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.
| name | deck-open-slide-canvas |
| zh_name | 1920 画布自由 Deck |
| en_name | Open-Slide 1920 Canvas Deck |
| emoji | 🎨 |
| description | Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template. |
| zh_description | 锁死 1920×1080 画布, React 组件级自由组合, 不绑模板 |
| en_description | Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template. |
| category | slides |
| scenario | design |
| aspect_hint | 1920×1080 (16:9) |
| featured | 35 |
| recommended | 9 |
| tags | ["canvas","open-slide","freeform","1920","react"] |
| example_id | sample-deck-open-slide-canvas |
| example_name | 1920 自由画布 · Sea Indigo |
| example_format | markdown |
| example_tagline | 锁死 1920×1080 + 自由组合 |
| example_desc | Sea Indigo 调色 + 一页大字 question + 角标 |
| example_source_url | https://github.com/1weiho/open-slide |
| example_source_label | 1weiho/open-slide |
| od | {"mode":"deck","surface":"web","scenario":"design","featured":0.17,"upstream":"https://github.com/nexu-io/html-anything","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":false},"example_prompt":"Use the Open-Slide 1920 Canvas Deck template to turn my content into a locked 1920x1080 free-composition deck with React component-level layout. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.","example_prompt_i18n":{"zh-CN":"用「1920 画布自由 Deck」模板把我的内容做成一套「锁死 1920×1080 画布, React 组件级自由组合, 不绑模板」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"}} |
【模板: 1920 画布自由 Deck】 【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。
【硬性技术规格】
width: 1920px; height: 1080px; 用 transform: scale(...) 适配视窗 (默认 scale(0.7) 居中)。2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220。<section class="slide" data-slide-id="<n>">。【调色板 — 每个 deck 选 1 套, 全程不改】
#f1efea, ink #161616, accent #c5e803。#0a0e1a, ink #f5f5f7, accent #5ac8fa。#1a1411, ink #f5e9d6, accent #d97757。#fdf6f3, ink #1a1015, accent #ff5d8f。【布局自由度 — 这是核心】
【字体】
Inter Tight (display) + Inter (body); 或 Source Serif Pro (editorial 风时)。Noto Sans SC (sans 风) 或 Noto Serif SC (editorial 风); 不混 sans + serif。JetBrains Mono 给数据 / 时间戳。【设计细节】
№N/M, 左下 deck title。Single-file horizontal-swipe HTML deck. Built by copying the seed `assets/template.html` (which carries the proven 5-rule iframe nav script) and pasting slide layouts from `references/layouts.md`. Pitch decks, product overviews, study material — when you don't need the magazine aesthetic of `magazine-web-ppt`.
Huashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
Twitter quote or data card designed to pair with a post.
Xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
Turns CSV, Excel, or JSON data into a polished visual report page.
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).