← LeaderboardThe Skill Leaderboard

swiss-creative-mode-template

Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.

Published by feimacode ↗feimacode/open-design-agent-kit

Try your first task

A source-grounded starter task has not been verified for this skill yet.

SKILL.md

name: swiss-creative-mode-templatedescription: |  Swiss-inspired creative-mode presentation template skill with bold editorial  typography, high-contrast geometric cards, interactive slide navigation,  theme switching, hotspot overlays, and palette choreography in a single-file  HTML artifact. Use when users ask for a premium presentation-style landing,  a Swiss/brutalist deck look, or a creative launch page with rich interactions.triggers:   - "swiss creative mode template"  - "editorial presentation template"  - "brutalist deck style html"  - "creative mode deck"  - "瑞士风演示模板"  - "高级设计语言模板"od:   mode: template  surface: video  type: hyperframes  platform: desktop  preview:     type: html    entry: index.html    reload: debounce-100  design_system:     requires: true    sections: [color, typography, layout, components]  outputs:     primary: index.html    secondary:       - template.html      - example.html  capabilities_required:     - file_write

Swiss Creative Mode Template

Produce a premium Swiss/editorial-style HTML template with strong visual rhythm and meaningful interactions, then emit it as a single-file artifact.

Resource map

swiss-creative-mode-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

  1. Read active DESIGN.md and map palette/type/layout decisions into root CSS variables.
  2. Copy assets/template.html to index.html.
  3. Keep this structure intact:
    • Hero scene with bold title and geometric frame.
    • Four-step process card row.
    • Stack/architecture diagram scene.
  4. Keep these interactions working:
    • Prev/next slide navigation + dot nav.
    • Theme toggle (paper/dark).
    • Palette cycle button (changes accent colors across the template).
    • Hotspot toggle for annotations/details.
  5. Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency).
  6. Validate against references/checklist.md before emitting.

Output contract

One short sentence before artifact, then:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>