What is the Swiss Creative Mode Template?

It is a skill that generates a premium HTML presentation template inspired by Swiss design principles, featuring bold typography and geometric layouts.

How do I use this skill?

Simply follow the workflow outlined in the skill documentation, which includes mapping design decisions and copying the template structure.

Can I customize the template?

Yes, the template allows for customization of colors, typography, and layout through CSS variables defined in your `DESIGN.md` file.

What kind of output can I expect?

The output is a self-contained HTML file that includes all necessary styles and scripts, ensuring no external dependencies are required.

Is this skill suitable for all types of presentations?

This skill is best suited for presentations that prioritize visual design and interactivity, but may not support complex multimedia elements.

Swiss Creative Mode Template

Name: Swiss Creative Mode Template
Availability: InStock
Author: nexu-io

Free

Create premium Swiss-style HTML presentations effortlessly.

by nexu-io84.9k stars on nexu-io/open-design

8 views

Updated Aug 10, 2026

Get this skill

Free · Opens the source repo

What Swiss Creative Mode Template does

The Swiss Creative Mode Template skill enables users to generate a sophisticated HTML presentation that embodies the principles of Swiss design. This skill is particularly useful for designers and developers seeking to create visually striking landing pages or presentation decks that feature bold typography and geometric layouts. By leveraging a single-file HTML structure, users can easily manage their presentations without the need for external dependencies, making it ideal for quick deployment and sharing.

The workflow begins by reading the active DESIGN.md file to extract palette, typography, and layout decisions, which are then mapped into CSS variables for consistent styling. Users can expect a structured output that includes a hero scene with a prominent title, a card row showcasing a four-step process, and a stack/architecture diagram scene. These elements are designed to enhance the visual rhythm and engagement of the presentation.

Interactivity is a key feature of this template. It includes prev/next slide navigation, a theme toggle for light and dark modes, and a palette cycle button that allows users to change accent colors dynamically. Additionally, hotspot toggles provide annotations and details, enriching the user experience. The skill ensures that all output is self-contained, validating against a checklist to maintain quality and coherence.

This skill is perfect for those looking to create presentations that stand out in a crowded digital landscape, particularly for creative launches or editorial-style showcases. It combines aesthetic appeal with functional design to meet the needs of modern presentations.

When to use it

Use this skill when you need to produce a high-quality, Swiss-style presentation or landing page quickly and efficiently.

When not to use it

This skill may not be suitable for users who require complex animations or extensive multimedia integration beyond the provided template features.

What you can build with it

Creating a Marketing Launch Page

Use the template to design a visually appealing landing page for a product launch, incorporating interactive elements to engage users.

Developing a Design Portfolio Presentation

Generate a presentation showcasing your design work with a clean, Swiss-inspired aesthetic that highlights your projects effectively.

Building an Educational Slide Deck

Create an informative slide deck for a workshop or seminar, utilizing the template's structured layout and interactive features to enhance learning.

How to install Swiss Creative Mode Template

View source

1. Install with the skills CLI

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

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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>

Frequently asked questions about Swiss Creative Mode Template

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.