SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsdeck-open-slide-canvas

deck-open-slide-canvas

Frontend & websites

View repository

Updated 10-16 01:36

About this skill

[Template: 1920 canvas free Deck] [Intent] For scenarios where you don't want to be bound by templates (personal portfolios, unconventional talks, art / design class decks). Provides a fixed 1920×1080 canvas + very strong type / color constraints, letting the agent freely arrange each page according to content like writing React components. 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).
  • Absolutely no overflow: each page's content must fit in 1920×1080, no scrollbars allowed.
  • Type scale (px): 2xs:18 · xs:22 · sm:28 · md:36 · lg:48 · xl:64 · 2xl:88 · 3xl:120 · 4xl:160 · 5xl:220。
  • Margin padding: one of 96 / 128 / 160.
  • Each page has <section class="slide" data-slide-id="<n>">。

[Color palette — choose 1 set per deck, don't 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 is based oncontent naturechoosing its own layout: 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 hierarchy — one punchline, one number, one image; don't "emphasize everything".
  • Don't stuff in two equal blocks of text; if you really need juxtaposition, use a 3-column equal-weight grid.

[Fonts]

  • Latin: Inter Tight (display) + Inter (body); or Source Serif Pro (for editorial style).
  • Chinese: Noto Sans SC (sans style) or Noto Serif SC (editorial style); do not mix sans + serif.
  • mono: JetBrains Mono For data / timestamps.

[Design details]

  • Emoji decoration is strictly prohibited (those in the content are allowed); no multicolor rainbow; accent uses only one color.
  • Strictly prohibited to apply generic libraries like lucide / feather to 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 prohibited.
  • Single-file HTML; Tailwind CDN; no external images.