Deck Open Slide Canvas
Turn real copy and data into a fixed 1920×1080 React slide deck without fighting a rigid PowerPoint-style template.
Overview
deck-open-slide-canvas is an agent skill most often used in Build (also Validate, Launch) that converts your content into a locked 1920×1080 React free-composition slide deck.
Install
npx skills add https://github.com/nexu-io/open-design --skill deck-open-slide-canvasWhat is this skill?
- Locks canvas to 1920×1080 (16:9) for consistent projector and export sizing
- React component-level free composition—not bound to a single slide template
- Web deck mode with HTML preview (debounced reload) for iterative agent edits
- Example flow: Sea Indigo palette, hero question slide, corner badges (sample-deck-open-slide-canvas)
- Upstream html-anything lineage from nexu-io for HTML-first deck surfaces
- 1920×1080 locked canvas (16:9)
Adoption & trust: 695 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have solid narrative and data but slide tools force you into rigid templates or broken aspect ratios when agents generate UI.
Who is it for?
Pitch decks, demo day slides, and product storytelling where you want agent-built React layouts on a fixed 16:9 canvas.
Skip if: Teams that only need Google Slides exports with no React/HTML workflow, or one-off social graphics outside presentation format.
When should I use this skill?
You need a locked 1920×1080 free-composition deck from real content using the Open-Slide canvas template and HTML preview.
What do I get? / Deliverables
You get a web-native 1920×1080 deck with a consistent visual signature and component-level slides ready to preview and refine in HTML.
- Multi-slide 1920×1080 web deck
- React-composed slide layouts matching template visual signature
- Previewable index.html entry
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill ships a React-based presentation surface and component-level layout work. Frontend fits locked-canvas deck composition, 16:9 layout, and React component assembly rather than backend or ops.
Where it fits
Wire a landing-page narrative into a first investor deck before committing to full product build.
Compose hero, question, and badge slides as React components on the locked canvas during product demo prep.
Finalize launch-week webinar slides with consistent Sea Indigo–style branding and no placeholder text.
How it compares
Use for designed agent-built decks on a fixed canvas—not for generic markdown-to-PDF note dumps or unrelated chart-only MCP tools.
Common Questions / FAQ
Who is deck-open-slide-canvas for?
Solo and indie builders shipping pitches, launches, or internal reviews who want agents to assemble real slide content on a 1920×1080 React canvas instead of placeholder layouts.
When should I use deck-open-slide-canvas?
During Validate when prototyping a pitch narrative, during Build when composing the deck UI, or during Launch when polishing distribution-ready presentation assets—especially when you already have copy and data to preserve.
Is deck-open-slide-canvas safe to install?
Review the Security Audits panel on this Prism page and inspect the skill package and any linked upstream repos before letting an agent run preview servers or write project files.
SKILL.md
READMESKILL.md - Deck Open Slide Canvas
【模板: 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; 不要外链图片。