FreePublished on GitHubEnglish overview

deck-open-slide-canvas

Create slides on a fixed 1920×1080 canvas with freely arranged React components. Keep colors and typography consistent while adapting each page to its content, and produce a single HTML file with keyboard navigation.

OriginalShow the original description

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

nexu-io/open-design

AI rating90/ 100 See how to install

Good for

Creating a personal portfolio deck
Preparing slides for art or design classes
Building a talk around bold questions or images
Presenting data with a consistent visual style

Overview

What it does

Create slides on a fixed 1920×1080 canvas, arranging each page around its content. Like composing React components, you can combine covers, questions, quotations, columns, data cards, and full-page images. Each slide has one main focus, while shared rules for colors, text sizes, and spacing keep the presentation consistent. The result is a single HTML file with left and right arrow navigation and a page-number display.

When it helps

Use it for personal portfolios, distinctive talks, or art and design lessons. It helps when individual pages need different forms of expression while the whole presentation retains a consistent appearance. Questions, images, or data can take the lead according to the content of each page.

Example requests

“Turn this introduction to my work into a portfolio centered on images and short text.”
“Create a presentation using the Sea Indigo palette, questions, and data cards.”

Notes

The specified output is HTML using Tailwind CDN. Every page must fit within 1920×1080 without scrollbars. Choose one of the four specified palettes. Use actual content; dummy text and externally linked images are not allowed.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?: AGoodThe source explicitly describes fixed 1920×1080 HTML slides for portfolios, talks, and art or design classes.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?: AGoodDimensions, text sizes, spacing, four palettes, page elements, keyboard controls, and single-file HTML output are specified.
SafetyAre sending data, deleting files, and running commands disclosed?: AGoodThe source explicitly specifies a single HTML file and Tailwind CDN, and prohibits externally linked images.
Easy setupDoes it need few tools or API keys, and are they documented?: BPartly lackingTailwind CDN and fonts are specified, but loading and configuration steps are not provided.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Files included (3)

SKILL.md3.9 KB
example.html2.3 KB
example.md192 B

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

Create a retro pixel presentation video
Customize a three-scene video template
Preview scene transitions and motion in HTML