SuperAPI AI Directory

deck-open-slide-canvas

Design & creation

View repository

Updated 10-16 01:37

About this skill

[Template: 1920 Canvas Free Deck] [Intent] For scenarios where you don't want to be constrained by a template (personal portfolio, unusual talks, art / design class decks). Provides a fixed 1920×1080 canvas + very strong typography / color constraints, letting the agent freely lay out each page according to content like writing a React component. Inspired by 1weiho/open-slide.

[Hard Technical Specs]

  • Canvas: each page strictly width: 1920px; height: 1080px; use transform: scale(...) to fit the viewport (default scale(0.7) centered).
  • Overflow is strictly forbidden: each page's content must fit in 1920×1080, no scrollbars may appear.
  • Type scale (px): 2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220。
  • Padding: one of three tiers 96 / 128 / 160.
  • Each page has <section class="slide" data-slide-id="<n>">。

[Color Palette — choose 1 set per deck, never change it throughout]

  • 🌫 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。

[Layout Freedom — This Is the Core]

  • No mandatory template; each page chooses its layout based on thenature of the content: cover / question / quote / image-text / three-column / five-column / list / data card / full-bleed image.
  • But each pagemust follow one rule: there is only 1 visual focal point (visual hierarchy) — one golden quote, one number, one image; don't "emphasize everything".
  • Don't cram in two paragraphs of equal text; if you really need parallel content, use a 3-column equal-weight grid.

[Fonts]

  • Western: Inter Tight (display) + Inter (body); or Source Serif Pro (for editorial style).
  • Chinese: Noto Sans SC (sans style) or Noto Serif SC (editorial style); don't mix sans + serif.
  • mono: JetBrains Mono for data / timestamps.

[Design Details]

  • Emoji decoration is strictly forbidden (allowed within content); no multicolor rainbows; use only one accent color.
  • Strictly forbidden to use generic libraries like lucide / feather for SVG icons (write your own inline SVG).
  • Add keyboard ← / → switching + hash sync; fixed corner marks: bottom-right №N/M, bottom-left deck title.
  • Must use the user's real content; lorem ipsum is strictly forbidden.
  • Single-file HTML; Tailwind CDN; no external image links.