{"id":"f58889c7-8f48-4c06-96d4-26851499feae","shortId":"RkAUAv","kind":"skill","title":"deck-open-slide-canvas","tagline":"锁死 1920×1080 画布, React 组件级自由组合, 不绑模板","description":"【模板: 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; 不要外链图片。","tags":["deck","open","slide","canvas","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design"],"capabilities":["skill","source-nexu-io","skill-deck-open-slide-canvas","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/deck-open-slide-canvas","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 44905 github stars · SKILL.md body (1,484 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:11.070Z","embedding":null,"createdAt":"2026-05-15T12:50:26.496Z","updatedAt":"2026-05-18T18:50:11.070Z","lastSeenAt":"2026-05-18T18:50:11.070Z","tsv":"'0.7':51 '0a0e1a':110 '1':96,154 '1080':8,26,59 '1080px':44 '120':80 '128':88 '160':82,89 '161616':104 '18':66 '1920':7,14,25,58 '1920px':42 '1a1015':128 '1a1411':118 '1weiho/open-slide':37 '22':68 '220':84 '28':70 '2xl':77 '2xs':65 '3':163 '36':72 '3xl':79 '48':74 '4xl':81 '5ac8fa':114 '5xl':83 '64':76 '88':78 '96':87 'accent':105,113,121,129,204 'agent':31 'ash':99 'bg':101,109,117,125 'bodi':171 'c5e803':106 'canva':5 'cdn':233 'cover':137 'd97757':122 'deck':2,16,23,94,224 'deck-open-slide-canva':1 'display':169 'editori':176,188 'emoji':200 'f1efea':102 'f5e9d6':120 'f5f5f7':112 'fdf6f3':126 'feather':211 'ff5d8f':130 'fit':56 'hash':218 'height':43 'hierarchi':152 'html':231 'icon':208 'imag':141 'image-text':140 'indigo':108 'ink':103,111,119,127 'inlin':214 'inspir':35 'inter':167,170 'ipsum':229 'jetbrain':194 'lg':73 'lime':100 'lorem':228 'lucid':210 'mate':115 'md':71 'mocha':116 'mono':193,195 'n/m':222 'noto':179,185 'open':3 'overflow':54 'pad':86 'pearl':123 'pro':175 'px':64 'question':138 'quot':139 'react':10,33 'rose':124 'san':180,182,191 'sc':181,187 'scale':47,50,63 'sea':107 'serif':174,186,192 'skill' 'skill-deck-open-slide-canvas' 'slide':4 'sm':69 'sourc':173 'source-nexu-io' 'svg':207,215 'tailwind':232 'text':142 'tight':168 'titl':225 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'transform':46 'type':62 'visual':151 'width':41 'xl':75 'xs':67 '一个数字':157 '一句金句':156 '一张图':158 '三列':143 '三档之一':90 '不强制模板':133 '不想被模板束缚的场景':18 '不混':190 '不绑模板':12 '不要':159 '不要外链图片':234 '不许塞两段平等的文字':161 '不许滚动条出现':60 '严禁':199,206,227 '严禁多色彩虹':203 '个':155 '个人作品集':19 '中文':178 '五列':144 '什么都强调':160 '但每页':148 '像写':32 '全程不改':98 '内容性质':135 '内容里的允许':202 '切换':217 '列等权重网格':164 '列表':145 '加键盘':216 '单文件':230 '只有':153 '只用一个色':205 '右下':221 '同步':219 '奇特演讲':20 '套':97 '套用':209 '字体':165 '字号':61 '居中':52 '左下':223 '布局自由度':131 '必须用用户的真实内容':226 '必须遵守一条规则':149 '意图':17 '或':172,184 '数据卡':146 '时间戳':197 '极强的类型':28 '模板':13 '每个':93 '每页严格':40 '每页内容必须':55 '每页有':91 '每页根据':134 '满版图':147 '用':45 '画布':9,27,39 '画布自由':15 '真要并列就上':162 '硬性技术规格':38 '等通用库':212 '组件一样按内容自由排布每一页':34 '组件级自由组合':11 '给一个固定':24 '给数据':196 '绝对禁止':53 '自己写':213 '自选布局':136 '艺术':21 '装饰':201 '西文':166 '视觉重心':150 '角标固定':220 '让':30 '设计细节':198 '设计课':22 '调色板':92 '调色约束':29 '边距':85 '这是核心':132 '适配视窗':48 '选':95 '锁死':6 '风':183,189 '风时':177 '默认':49","prices":[{"id":"3b76a313-a42e-458f-87cf-7538ac82bfa4","listingId":"f58889c7-8f48-4c06-96d4-26851499feae","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-15T12:50:26.496Z"}],"sources":[{"listingId":"f58889c7-8f48-4c06-96d4-26851499feae","source":"github","sourceId":"nexu-io/open-design/deck-open-slide-canvas","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/deck-open-slide-canvas","isPrimary":false,"firstSeenAt":"2026-05-15T12:50:26.496Z","lastSeenAt":"2026-05-18T18:50:11.070Z"}],"details":{"listingId":"f58889c7-8f48-4c06-96d4-26851499feae","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"deck-open-slide-canvas","github":{"repo":"nexu-io/open-design","stars":44905,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-18T18:43:11Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"a3b8a0b7d974d471e817f9ee66b55301f4fa7e98","skill_md_path":"skills/deck-open-slide-canvas/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/deck-open-slide-canvas"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"deck-open-slide-canvas","description":"锁死 1920×1080 画布, React 组件级自由组合, 不绑模板"},"skills_sh_url":"https://skills.sh/nexu-io/open-design/deck-open-slide-canvas"},"updatedAt":"2026-05-18T18:50:11.070Z"}}