Skill

Pass

Audit score 90

swiss-creative-mode-template

nexu-io/open-design

Premium Swiss/editorial HTML template with bold typography, interactive navigation, and theme switching.

What is swiss-creative-mode-template?

A single-file HTML presentation template inspired by Swiss design principles, featuring high-contrast geometric cards, interactive slide navigation, theme toggling, and hotspot overlays. Use it when you need a creative launch page, editorial deck, or brutalist-style presentation with rich interactions.

Renders bold editorial typography with geometric card layouts
Supports prev/next slide navigation and dot-based navigation controls
Toggles between paper and dark themes
Cycles through accent color palettes across the template
Displays hotspot overlays for annotations and interactive details
Maintains self-contained single-file HTML output with inline CSS and JavaScript

How to install swiss-creative-mode-template

npx skills add https://github.com/nexu-io/open-design --skill swiss-creative-mode-template

Prerequisites

Access to active DESIGN.md file with palette, typography, and layout decisions
File write capability to generate index.html output

Claude Code

Cursor

Windsurf

Cline

How to use swiss-creative-mode-template

1.Read your active DESIGN.md and identify palette, typography, and layout decisions
2.The skill copies the template.html asset and maps your design system variables into root CSS variables
3.Review the generated index.html to verify the hero scene, four-step process cards, and stack/architecture diagram are intact
4.Test slide navigation (prev/next buttons and dot navigation), theme toggle (paper/dark), palette cycle button, and hotspot toggle
5.Validate the output against the checklist.md reference before deploying

Use cases

Good for

Creating a premium product launch or creative portfolio landing page
Building an editorial-style presentation deck with Swiss design aesthetics
Designing a brutalist-inspired showcase with interactive navigation
Presenting a multi-step process or architecture diagram with visual rhythm
Developing a theme-switchable creative mode interface for design systems

Who it's for

Product designers and creative directors
Marketing and brand teams building launch pages
Design system maintainers creating template libraries
Frontend developers implementing Swiss/editorial design patterns
Agencies producing high-end creative presentations

swiss-creative-mode-template FAQ

Is this template self-contained?

Yes, the output is a single HTML file with inline CSS and JavaScript—no external runtime dependencies or separate asset files needed.

Can I customize the color palette?

Yes, the palette cycle button changes accent colors across the template, and the skill maps your DESIGN.md color system into root CSS variables.

What interactions are included?

Slide navigation (prev/next and dots), theme toggle (paper/dark), palette cycling, and hotspot overlays for annotations.

Do I need to set up a design system first?

The skill reads your active DESIGN.md file to extract palette, typography, and layout decisions, so having a design system documented helps but is not strictly required.

What file formats does it output?

Primary output is index.html; secondary outputs include template.html and example.html for reference.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

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>

Related skills

More from nexu-io/open-design and the wider catalog.

swiss-user-research-video-template

nexu-io/open-design

Premium Swiss-editorial user research template with warm paper aesthetics and keyboard-navigable slides.

1.3k installsAudited

taste-skill

nexu-io/open-design

811 installs

theme-factory

nexu-io/open-design

Apply professional font and color themes to slides, docs, reports, and HTML landing pages with 10 pre-set designs.

1.4k installsAudited

threejs

nexu-io/open-design

Create 3D scenes, materials, and interactive experiences with Three.js in the browser.

1.5k installs

ui-skills

nexu-io/open-design

Opinionated UI constraints to keep agent-generated interfaces coherent across components.

1.4k installsAudited

ui-ux-pro-max

nexu-io/open-design

Catalog entry for UI/UX Pro Max design patterns—full workflow requires upstream installation.

3.8k installs