Deck Open Slide Canvas

Name: Deck Open Slide Canvas
Author: nexu-io

nexu-io/open-design

1.7k installs
82k repo stars
Updated July 28, 2026
nexu-io/open-design

deck-open-slide-canvas is an agent skill that locked 1920x1080 canvas deck with react component-level free composition, not bound to a fixed template.

About

deck-open-slide-canvas is an agent skill from nexu-io/open-design that locked 1920x1080 canvas deck with react component-level free composition, not bound to a fixed template. 【模板: 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: Developers invoke deck-open-slide-canvas during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.

【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by
画布: 每页严格 `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 三档之一。

Deck Open Slide Canvas by the numbers

1,674 all-time installs (skills.sh)
+120 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #207 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

deck-open-slide-canvas capabilities & compatibility

Capabilities: 【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 · 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `tra · 绝对禁止 overflow**: 每页内容必须 fit in 1920×1080, 不许滚动条出 · 字号 type scale (px): `2xs:18 · xs:22 · sm:28 · md · 边距 padding: 96 / 128 / 160 三档之一。
Use cases: orchestration

From the docs

What deck-open-slide-canvas says it does

【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。

SKILL.md

- 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。

SKILL.md

- **绝对禁止 overflow**: 每页内容必须 fit in 1920×1080, 不许滚动条出现。

SKILL.md

npx skills add https://github.com/nexu-io/open-design --skill deck-open-slide-canvas

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/deck-open-slide-canvas.svg)](https://skillselion.com/skills/nexu-io/open-design/deck-open-slide-canvas)

Installs	1.7k
repo stars	★ 82k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	nexu-io/open-design ↗

What it does

Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.

Who is it for?

Developers working on design & ui/ux during build tasks.

Skip if: Tasks outside Design & UI/UX scope described in SKILL.md.

When should I use this skill?

Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.

What you get

Completed design & ui/ux workflow aligned with SKILL.md steps.

1920x1080 slide deck
React slide components
Markdown deck source

By the numbers

Uses a locked 1920x1080 (16:9) presentation canvas
Catalog metadata lists featured rank 35 and recommended rank 9

Files

SKILL.mdMarkdownGitHub ↗

【模板: 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; 不要外链图片。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Open-Slide Canvas · 一句问题</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif; background:#020306; margin:0; min-height:100vh; }
  .slide-frame { width:1280px; height:720px; transform:scale(0.78); transform-origin: top left; }
  .canvas { background:#0a0e1a; color:#f5f5f7; }
  .accent { color:#5ac8fa; }
  .mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
  /* hairline diag bg */
  .grain {
    background-image:
      radial-gradient(circle at 20% 80%, rgba(90,200,250,0.10) 0%, transparent 50%),
      radial-gradient(circle at 80% 30%, rgba(124,92,255,0.08) 0%, transparent 55%);
  }
</style>
</head>
<body class="p-10 overflow-hidden">
<div class="slide-frame canvas grain relative">
  <div class="absolute inset-0 p-32 flex flex-col justify-between">
    <header class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em] opacity-60">
      <span>HTML-ANYTHING · DECK · OPEN-SLIDE CANVAS</span>
      <span>SEA INDIGO</span>
      <span>№05 / 12</span>
    </header>

    <div>
      <div class="mono text-[12px] uppercase tracking-[0.22em] accent">Question 03</div>
      <h1 class="mt-6 font-black leading-[0.95] tracking-[-0.025em]" style="font-size:120px">
        当生成内容的成本<br/>
        逼近 <span class="accent">零</span>, 留下的<br/>
        只有 <em class="not-italic" style="font-family:'Source Serif Pro',serif;font-style:italic;font-weight:500">品味</em>。
      </h1>
      <p class="mt-10 text-[28px] opacity-70 max-w-[820px] leading-snug">
        你打算在哪一帧上, 让读者停下来?
      </p>
    </div>

    <footer class="flex items-baseline justify-between mono text-[11px] uppercase tracking-[0.18em] opacity-50">
      <span>1920 × 1080 · CANVAS · KBD ← →</span>
      <span class="accent">github.com/1weiho/open-slide</span>
      <span>00 : 03 : 21</span>
    </footer>
  </div>
</div>
</body>
</html>