{"id":"deck-open-slide-canvas","name":"deck-open-slide-canvas","summary":"ロック1920×1080キャンバス、Reactコンポーネントレベルのフリーコンビネーション、テンプレートバインディングなし","body":"【模板: 1920 画布自由 Deck】\n【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。\n\n【硬性技术规格】\n- 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。\n- **绝对禁止 overflow**: 每页内容必须 fit in 1920×1080, 不许滚动条出现。\n- 字号 type scale (px): `2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220`。\n- 边距 padding: 96 / 128 / 160 三档之一。\n- 每页有 `<section class=\"slide\" data-slide-id=\"<n>\">`。\n\n【调色板 — 每个 deck 选 1 套, 全程不改】\n- 🌫 **Ash & Lime** — bg `#f1efea`, ink `#161616`, accent `#c5e803`。\n- 🌌 **Sea Indigo** — bg `#0a0e1a`, ink `#f5f5f7`, accent `#5ac8fa`。\n- 🧉 **Mate Mocha** — bg `#1a1411`, ink `#f5e9d6`, accent `#d97757`。\n- 🌸 **Pearl Rose** — bg `#fdf6f3`, ink `#1a1015`, accent `#ff5d8f`。\n\n【布局自由度 — 这是核心】\n- 不强制模板, 每页根据**内容性质**自选布局: cover / question / quote / image-text / 三列 / 五列 / 列表 / 数据卡 / 满版图。\n- 但每页**必须遵守一条规则**: 视觉重心 (visual hierarchy) 只有 1 个 — 一句金句、一个数字、一张图, 不要\"什么都强调\"。\n- 不许塞两段平等的文字; 真要并列就上 3 列等权重网格。\n\n【字体】\n- 西文: `Inter Tight` (display) + `Inter` (body); 或 `Source Serif Pro` (editorial 风时)。\n- 中文: `Noto Sans SC` (sans 风) 或 `Noto Serif SC` (editorial 风); 不混 sans + serif。\n- mono: `JetBrains Mono` 给数据 / 时间戳。\n\n【设计细节】\n- 严禁 emoji 装饰 (内容里的允许); 严禁多色彩虹; accent 只用一个色。\n- 严禁 SVG icon 套用 lucide / feather 等通用库 (自己写 inline SVG)。\n- 加键盘 ← / → 切换 + hash 同步; 角标固定: 右下 `№N/M`, 左下 deck title。\n- 必须用用户的真实内容; 严禁 lorem ipsum。\n- 单文件 HTML; Tailwind CDN; 不要外链图片。","author":"@nexu-io","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/nexu-io/html-anything/tree/main/next/src/lib/templates/skills/deck-open-slide-canvas","license":"Apache-2.0","category":"slides","lang":"multi","tokens":762,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"example.html","size":2317,"sha256":"fffbc7c4fed7a5f45a07f61d05e50dbba11740a69b2633d55763c67c0b3f018b"},{"path":"example.md","size":192,"sha256":"910e72ee20384b4fdce8156788bf5fb56e4ad7aba7105048fd0a96dfd62e529f"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":["cdn.tailwindcss.com"]}}