Retractable awning for a patio
/SKILLSets the canvas resolution to 1920×1080 and allows for flexible arrangement of React components without binding to a template
--- name: deck-open-slide-canvas zhname : "1920 Free-Form Canvas Deck" enname : "Open-Slide 1920 Canvas Deck" emoji: "🎨" description: "Fixed 1920×1080 canvas, React component-level free combination, no template binding" category: slides scenario: design aspecthint e: "1920×1080 (16:9)" featured: 35 recommended: 9 tags: ["canvas", "open-slide", "freeform", "1920", "react"] exampleid : sample-deck-open-slide-canvas examplename : "1920 Free Canvas · Sea Indigo" exampleformat : markdown exampletagline : "Locked at 1920×1080 + Free Combination" exampledesc : "Sea Indigo Color Scheme + Large Text on One Page + Superscript" examplesourceurl : "https://github.com/1weiho/open-slide" examplesourcelabel : "1weiho/open-slide" od: mode: deck surface: web scenario: design featured: 0.17 upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem s: requires: false exampleprompt : "Use the '1920 Canvas Freedom Deck' template to turn my content into a set that features a 'fixed 1920×1080 canvas, React component-level free combination, and no template binding.' Maintain the template’s visual signature, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: 1920 Canvas Freedom Deck】 【Intent】Scenarios where you don’t want to be constrained by a template (personal portfolios, unique presentations, art/design class decks). Provides a fixed 1920×1080 canvas + very strict typography and color scheme constraints, allowingagent to freely lay out each page according to its content, just like writing React components. Inspired by 1weiho/open-slide. 【Strict Technical Specifications】 - Canvas: Each page must strictly fit withinwidth: 1920px; height: 1080px; and usetransform: scale(...) to adapt to the viewport (default: centered atscale(0.7) ). - Overflow is strictly prohibited: Content on each page must fit within 1920×1080; scrollbars are not allowed. - Font size (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 values: 96, 128, or 160. - Each page has<section class="slide" data-slide-id="<n>"> . [Color Palette : Choose 1 set per deck; do not change 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 Flexibility : This Is Key】 - No mandatory templates; choose your own layout for each page based on the nature of the content: cover / question / quote / image-text / three-column / five-column / list / data card / full-page image. - However, each page must follow one rule: There is only one visual focal point (visual hierarchy):a quote, a number, or an image; do not “emphasize everything.” - Do not place two equal blocks of text side by side; if you really need to display them side by side, use a three-column grid with equal weight. 【Fonts】 - Western text:Inter Tight (display) +Inter (body); orSource Serif Pro (for an editorial style). - Chinese:Noto Sans SC (sans-serif style) orNoto Serif SC (editorial style); do not mix sans-serif and serif fonts. - Mono:JetBrains Mono for data / timestamps. 【Design Details】 - Decorative emojis are strictly prohibited (allowed within content); multicolored rainbows are strictly prohibited; use only one color for accents. - Do not use SVG icons from generic libraries such as Lucide or Feather (write your own inline SVG). - Add keyboard ← / → navigation + hash key synchronization; fixed superscripts: bottom right№N/M , bottom left deck title. - Must use the user’s actual content; lorem ipsum is strictly prohibited. - Single HTML file; Tailwind CDN; do not link to external images.