Skill

Pass

Audit score 90

digits-fintech-swiss-template

nexu-io/open-design

Swiss-grid fintech deck template with bold data cards, neon-lime accents, and keyboard navigation.

What is digits-fintech-swiss-template?

A premium three-slide HTML template for data-storytelling using Swiss grid design principles. Use when presenting financial strategy with strict modular layout, high contrast, and restrained motion in a self-contained file.

Generates three-slide fintech presentation decks with Swiss grid layout
Provides bold numeric data cards with neon-lime accent colors on black/warm paper
Supports keyboard navigation (arrow keys) and click-based slide controls
Maintains self-contained HTML with inline CSS and JavaScript, no external dependencies
Includes dot navigation and subtle fade/hover animations
Preserves modular card hierarchy and reading order across slides

How to install digits-fintech-swiss-template

npx skills add https://github.com/nexu-io/open-design --skill digits-fintech-swiss-template

Claude Code

Cursor

Windsurf

Cline

How to use digits-fintech-swiss-template

1.Start from the provided template.html in assets/
2.Replace copy text and metric values while keeping the three-slide structure intact
3.Maintain the card hierarchy and reading order as you edit content
4.Test keyboard navigation using arrow keys and dot navigation
5.Keep motion effects subtle (slide fade and hover lift only)
6.Emit the final HTML artifact with identifier 'digits-fintech-swiss'

Use cases

Good for

Creating premium financial strategy presentations with data-driven narratives
Building high-contrast investor pitch decks with strict layout discipline
Designing editorial finance reports with bold typography and numeric emphasis
Presenting quarterly performance reviews with modular metric cards
Developing brand-consistent fintech marketing decks with Swiss design language

Who it's for

Fintech product managers and strategists
Financial analysts and data storytellers
Design-conscious founders and executives
Marketing teams building premium brand presentations
Anyone needing structured, keyboard-navigable data decks

digits-fintech-swiss-template FAQ

Can I add more than three slides?

The template is designed for three slides to maintain Swiss grid discipline. You can modify the structure, but keep the modular card layout and navigation intact.

How do I customize colors beyond neon-lime?

Edit the inline CSS in the HTML file. The template uses CSS variables for the accent color (neon-lime), black background, and warm paper tones.

Does this work offline?

Yes. The template is fully self-contained with inline CSS and JavaScript—no external dependencies or APIs required.

Can I add animations beyond fade and hover?

The template intentionally keeps motion subtle. You can extend the CSS animations, but maintain the restrained aesthetic of Swiss design.

What file format does it output?

A single self-contained HTML file (index.html) that works in any modern desktop browser.

Full instructions (SKILL.md)

Source of truth, from nexu-io/open-design.

name: digits-fintech-swiss-template description: | Swiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file. triggers:

"swiss fintech template"
"data-driven finance deck"
"neon lime editorial grid"
"high contrast strategy slides"
"数字金融瑞士风模板" od: mode: template surface: video type: hyperframes platform: desktop preview: type: html entry: index.html reload: debounce-100 outputs: primary: index.html secondary:
- template.html
- example.html example_prompt: "Create a Swiss-grid fintech strategy deck with modular data cards, lime accents, and clean keyboard navigation." capabilities_required:
- file_write

Digits Fintech Swiss Template

A premium three-slide live-artifact template for data-storytelling in a Swiss grid language.

Resource map

digits-fintech-swiss-template/
├── SKILL.md
├── assets/
│   └── template.html
├── references/
│   └── checklist.md
└── example.html

Workflow

Start from assets/template.html and keep the three-slide structure intact.
Replace copy and metric values while preserving card hierarchy and reading order.
Keep interactions:
- Prev / Next buttons
- keyboard navigation (ArrowLeft / ArrowRight)
- dot navigation
Keep motion subtle (slide fade + tiny hover lift only).
Keep the file self-contained (inline CSS/JS) with no sandbox-hostile APIs.

Output contract

Emit one concise orientation sentence and then one HTML artifact:

<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>

Related skills

More from nexu-io/open-design and the wider catalog.

doc

nexu-io/open-design

Read, create, and edit .docx documents with formatting and layout fidelity.

1.3k installsAudited

doc-kami-parchment

nexu-io/open-design

Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.

1.2k installsAudited

docx

nexu-io/open-design

Create, edit, and analyze Word documents with tracked changes, comments, and formatting.

1.5k installsAudited

domain-name-brainstormer

nexu-io/open-design

Generate creative domain names and check availability across .com, .io, .dev, and .ai TLDs.

1.3k installs

editorial-burgundy-principles-template

nexu-io/open-design

Premium editorial deck template in burgundy/blush palette for culture narratives and strategy storytelling.

1.3k installsAudited

enhance-prompt

nexu-io/open-design

Improve prompts with design specs and UI/UX vocabulary for design-to-code workflows.

1.3k installsAudited