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.

name	swiss-creative-mode-template
description	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

Read active DESIGN.md and map palette/type/layout decisions into root CSS variables.
Copy assets/template.html to index.html.
Keep this structure intact:
- Hero scene with bold title and geometric frame.
- Four-step process card row.
- Stack/architecture diagram scene.
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.
Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency).
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>

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

Read active DESIGN.md and map palette/type/layout decisions into root CSS variables.

Copy assets/template.html to index.html.

Keep this structure intact:

Hero scene with bold title and geometric frame.
Four-step process card row.
Stack/architecture diagram scene.

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.

Keep output self-contained (<!doctype html>, inline CSS/JS, no external runtime dependency).

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>