swiss-creative-mode-template
Helps your agent create presentations with a Swiss style. It's good for launch pages or presentations needing a modern, interactive look.
What it does
This template creates an interactive webpage with a modern, stylish look inspired by Swiss design. It includes features like bold typography, geometric shapes, and the ability to switch themes and colors.
When to use it
- ✓When you want to create a creative launch page.
- ✓For a sleek and modern presentation look.
- ✓When you need a landing page with rich interactions.
Example of what to ask your AI
“Create a Swiss-style, interactive landing page.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It takes an existing HTML template and customizes it based on your color and font choices. Then, it ensures all interactions, like slide navigation and theme switching, work correctly, delivering a single HTML file.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill swiss-creative-mode-templateOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/skills/swiss-creative-mode-template/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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.mdand map palette/type/layout decisions into root CSS variables. - Copy
assets/template.htmltoindex.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.mdbefore 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>
FAQ
What does 'Swiss design' mean?
It's a design style known for its clarity, readability, objectivity, and use of grids and typography.
What are 'CSS variables'?
They are like containers for storing style information (like colors or sizes) that can be used in multiple places in a webpage's code.
What is a 'single-file artifact'?
It means the entire webpage, including its code and styles, is contained within one file, making it easy to share and use.
Details
Original description by the author
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.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #775
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
intent-driven-development
Helps your agent turn ideas into clear, testable plans. Defines criteria to ensure changes are made correctly and safely.
affaan-m/ECC
product-capability
Guides your agent in turning product ideas into clear plans. It defines what needs to be done, the limits, and decisions before development.
affaan-m/ECC
article-writing
Writes long-form content like articles, guides, and blog posts with a unique style. It's useful when you need well-written texts with a consistent voice and credibility.
affaan-m/ECC