Swiss Creative Mode Template

A single-file HTML template that gives you the Swiss poster aesthetic: bold typography, high-contrast geometric cards, and a slide-based layout you can navigate with prev/next buttons or dot nav. It pulls palette and type settings from your design system, then builds out a hero, a four-step process row, and a stack diagram scene. The interactions are simple but polished: theme toggle between paper and dark modes, a palette cycle button that swaps accent colors live, and hotspot overlays for annotations. Good for presentation-style landing pages or brutalist product launches where you want editorial weight without reaching for a framework. Stays completely self-contained, no external dependencies.

skills.sh installs: 2.9K
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill swiss-creative-mode-template --agent claude-code

Installs into .claude/skills of the current project.

Files

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.