Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

swiss-creative-mode-template — Claude Code skill: how to install

Builds an editorial, Swiss-style presentation page inside a self-contained HTML file. Useful for brutalist product launches and interactive decks.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a claude-code
Open on GitHub

What swiss-creative-mode-template does

This skill produces a Swiss-style presentation page in a single HTML document. The agent reads color and typography tokens from DESIGN.md and maps them into root CSS variables. Next, it copies assets/template.html into index.html.

The template maintains two core views: a hero scene with a four-step process card row, plus an architecture diagram scene. Built-in scripts handle slide navigation and theme toggling between paper and dark modes. Hotspot overlays and accent palette cycling are wired in by default.

Everything ships in one file with inline styles and scripts. No external runtimes are required. Before emitting the final markup, the agent validates the code against references/checklist.md. The workflow relies on the file_write capability to write the files.

What it helps with

  • create an editorial brutalist presentation page as a single HTML file
  • build an interactive deck without external JavaScript or CSS libraries
  • integrate slide navigation with dark mode and palette cycling
  • add clickable annotation hotspots to diagrams or cards

Example prompts for the agent

  • Generate a Swiss-style presentation landing page based on DESIGN.md
  • Build a brutalist interactive deck using swiss-creative-mode-template
  • Create an editorial index.html with slide navigation and theme toggles

How to install swiss-creative-mode-template

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/swiss-creative-mode-template/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/swiss-creative-mode-template/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

answer-me-with-html QingYunA This skill turns selected answers into one-page HTML explainers. Use it to show a flow, compare options, or lay out findings from an investigation. Claude Code CX Codex Cursor +1 5,200installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs gsap-framer-scroll-animation official Utkarsh Patrikar This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work. GitHub Copilot 3,900installs design-motion-principles kylezantos Builds or audits UI motion with rules based on project context and interaction frequency. Use it for transitions, hover states, and micro-interactions. Claude Code CX Codex Cursor +1 12,600installs argent-lens software-mansion Visual variant staging for UI elements in a native preview window. Stages design options on a simulator so you can pick the winner. Claude Code CX Codex Cursor +1 22,400installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about swiss-creative-mode-template

How do I install swiss-creative-mode-template in Claude Code?

Run npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a claude-code. The command places the skill into ~/.claude/skills/swiss-creative-mode-template/.

What does swiss-creative-mode-template produce?

It generates a self-contained index.html file containing an interactive Swiss-style deck. The output includes slide navigation, theme switching, palette cycling, and annotation overlays.

What external dependencies are needed for the template?

The resulting HTML file has no external runtime dependencies. All CSS and JavaScript are inlined, and the agent only requires the file_write capability to produce the file.

Source text

SKILL.md · Apache-2.0 
---
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

```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>
```

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor