mcpField
S
swiss-creative-mode-template

swiss-creative-mode-template

github.com/nexu-ioDesign & UI104.6k2.8k installsUpdated today
Repository

About swiss-creative-mode-template

A skill for producing a self-contained, single-file HTML template in a Swiss editorial style. It guides design decisions, preserves a defined visual structure and interactions, and checks the result before output.

Key features

  1. 01Swiss editorial HTML layout
  2. 02Hero, process, and architecture scenes
  3. 03Slide and dot navigation
  4. 04Theme toggle and palette cycling
  5. 05Hotspot annotations
  6. 06Self-contained HTML output

Use cases

  1. 01Create a Swiss-style editorial presentation
  2. 02Build an interactive single-file HTML artifact

Install

Copy the command and run it in a terminal.

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

After installing, type/swiss-creative-mode-templatein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

example.html
assets/
template.html
references/
checklist.md

Details

From the project README

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

  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:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>

Comments

Markdown supported