nexu-io avatar

Deck Open Slide Canvas

This locks you into a 1920×1080 canvas and lets Claude compose slides like React components instead of filling preset slots. You pick one of four color palettes (Ash & Lime, Sea Indigo, Mate Mocha, Pearl Rose) and stick with it. Every slide must fit without scrolling, follows a strict type scale from 18px to 220px, and enforces one visual anchor per page. It's inspired by 1weiho/open-slide and works well for portfolios, art decks, or anything where standard templates feel too rigid. The tradeoff is clear: you get compositional freedom but lose the guardrails that keep amateur slides from looking chaotic.

skills.sh installs
2.8K
GitHub stars
106.9K
last updated
Aug 21, 2026

Install

$ npx -y skills add nexu-io/open-design --skill deck-open-slide-canvas --agent claude-code

Installs into .claude/skills of the current project.

Files

【模板: 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 列等权重网格。

Sponsors

Details

Repository
github.com/nexu-io/open-design
Categories
Frontend Development, Design & UI/UX
First seen
Jul 14, 2026

More from nexu-io/open-design

All 217
1mapbox avatarmapbox-web-integration-patternsmapbox/mapbox-agent-skillsOfficial integration patterns for Mapbox GL JS across popular web frameworks (React, Vue, Svelte, Angular). Covers setup, lifecycle management, token handling, 2.7Kskills.sh installs
2agricidaniel avatarblog-chartagricidaniel/claude-blogGenerate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar 2.7Kskills.sh installs
3vercel avatarflags-sdkvercel/flagsGuide for feature flags and A/B tests with the Flags SDK (`flags` npm package) and Vercel Flags. Use when: declaring flags with `flag()`, using `vercelAdapter` 2.7Kskills.sh installs
4tanstack-skills avatartanstack-virtualtanstack-skills/tanstack-skillsHeadless UI for virtualizing large element lists at 60FPS in TS/JS, React, Vue, Solid, Svelte, Lit & Angular.2.6Kskills.sh installs
5jezweb avatartanstack-queryjezweb/claude-skillsManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infin2.5Kskills.sh installs
6freshtechbro avataraframe-webxrfreshtechbro/claudedesignskillsDeclarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR2.5Kskills.sh installs