Swiss Creative Mode Template
Generate a single-file Swiss/editorial HTML deck or launch page with theme switching, slide navigation, and hotspots from an active DESIGN.md system.
Overview
swiss-creative-mode-template is an agent skill for the Build phase that emits a Swiss/editorial single-file HTML presentation or launch page with interactions from DESIGN.md tokens.
Install
npx skills add https://github.com/nexu-io/open-design --skill swiss-creative-mode-templateWhat is this skill?
- Swiss/brutalist editorial typography with high-contrast geometric cards in one index.html artifact
- Interactive slide navigation, theme switching, hotspot overlays, and palette choreography
- Requires active DESIGN.md mapped into root CSS variables (color, typography, layout, components)
- Workflow copies assets/template.html to index.html with debounced HTML preview reload
- Open-design mode template with desktop hyperframes surface and file_write capability
- Design system sections: color, typography, layout, components
- 4-item resource map: SKILL.md, assets/template.html, references/checklist.md, example.html
Adoption & trust: 820 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have design decisions in DESIGN.md but need a polished brutalist deck-style HTML page with navigation and themes, not another generic landing boilerplate.
Who is it for?
Indie founders shipping a premium launch or pitch page who already use open-design DESIGN.md and want one self-contained HTML deliverable.
Skip if: Teams needing a multi-page React app, CMS-driven marketing site, or video-only surface without HTML artifact output.
When should I use this skill?
User asks for Swiss creative mode template, editorial presentation template, brutalist deck HTML, creative mode deck, or premium presentation-style landing with interactions.
What do I get? / Deliverables
You get index.html (plus template/example references) with Swiss typography, interactive slides, and design-system variables applied.
- index.html single-file presentation or launch artifact
- template.html and example.html references as secondary outputs
Recommended Skills
Journey fit
Presentation and landing artifacts are built in the Build phase when the product story and UI need a shippable front-end surface. Template output is HTML/CSS frontend work with design-system variables, not backend or ops.
How it compares
Design-system-driven HTML template skill, not a Figma export plugin or slide-deck SaaS.
Common Questions / FAQ
Who is swiss-creative-mode-template for?
Solo builders and designers using nexu open-design who want Swiss/editorial presentation landings as a single HTML file with real interactions.
When should I use swiss-creative-mode-template?
Use during Build frontend work when creating a launch page, creative-mode deck, or brutalist presentation template tied to DESIGN.md.
Is swiss-creative-mode-template safe to install?
Review Security Audits on this Prism page; the skill requires file_write to emit HTML—inspect template assets before running in production repos.
SKILL.md
READMESKILL.md - Swiss Creative Mode Template
# 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 ```text swiss-creative-mode-template/ ├── SKILL.md ├── assets/ │ └── template.html ├── references/ │ └── checklist.md └── example.html ``` ## Workflow 1. Read active `DESIGN.md` and map palette/type/layout decisions into root CSS variables. 2. Copy `assets/template.html` to `index.html`. 3. Keep this structure intact: - Hero scene with bold title and geometric frame. - Four-step process card row. - Stack/architecture diagram scene. 4. 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. 5. Keep output self-contained (`<!doctype html>`, inline CSS/JS, no external runtime dependency). 6. Validate against `references/checklist.md` before emitting. ## Output contract One short sentence before artifact, then: ```xml <artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template"> <!doctype html> <html>...</html> </artifact> ```