digits-fintech-swiss-template — скилл-шаблон презентации
Шаблон финтех-презентации в швейцарской сетке: чёрный, тёплая бумага, неоново-лаймовые акценты. Три слайда с крупными числовыми карточками и навигацией с клавиатуры, всё в одном HTML-файле.
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-codeЧто делает digits-fintech-swiss-template
Скилл отдаёт готовую структуру из трёх слайдов: index.html как основной артефакт, плюс template.html и example.html. Дизайн строится на контрасте чёрного фона, тёплого бумажного оттенка и неоново-лаймовых элементов. Крупные числовые карточки держат иерархию, а движение сдержанное: лёгкий фейд при смене слайда и микро-подъём карточки при наведении.
Внутри всё самодостаточно. CSS и JS инлайн, внешних API нет, поэтому файл спокойно открывается в песочнице. Навигация тройная: кнопки Prev/Next, стрелки ArrowLeft и ArrowRight, точки-индикаторы внизу. Это не конструктор с опциями — это жёсткий каркас, где вы меняете текст и цифры, сохраняя порядок карточек и структуру слайдов.
Работает в Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для установки нужен npx, для GitHub Copilot — gh. Формат вывода фиксированный: сначала одно предложение-ориентация, потом HTML-артефакт с идентификатором digits-fintech-swiss.
Какие задачи решает
- собрать финтех-презентацию в одном HTML-файле без внешних зависимостей
- получить готовую швейцарскую сетку с числовыми карточками
- добавить навигацию стрелками и кликами без написания JS с нуля
- сохранить структуру из трёх слайдов при смене контента
Примеры запросов агенту
- Сделай финтех-стратегию на швейцарской сетке: модульные карточки данных, лаймовые акценты и навигация с клавиатуры
- Замени текст и метрики в шаблоне digits-fintech-swiss, сохрани иерархию карточек
- Собери презентацию из assets/template.html, оставь три слайда и точки-навигацию
Как установить digits-fintech-swiss-template
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code2Вручную: положить файлы
~/.claude/skills/digits-fintech-swiss-template/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/digits-fintech-swiss-template/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a codex2Вручную: положить файлы
.agents/skills/digits-fintech-swiss-template/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a cursor2Вручную: положить файлы
.cursor/skills/digits-fintech-swiss-template/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design digits-fintech-swiss-template2Вручную: положить файлы
.github/skills/digits-fintech-swiss-template/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/digits-fintech-swiss-templateВручную: положить файлы
.devin/skills/digits-fintech-swiss-template/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Похожие
Вопросы о digits-fintech-swiss-template
Как установить digits-fintech-swiss-template в Claude Code?
Выполните npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code. Скилл появится в ~/.claude/skills/digits-fintech-swiss-template/SKILL.md.
Что делает digits-fintech-swiss-template?
Это скилл-шаблон для генерации финтех-презентаций в формате живого HTML-артефакта. Он задаёт три слайда, швейцарскую сетку, числовые карточки, неоново-лаймовые акценты и навигацию Prev/Next, стрелками и точками.
Можно ли менять количество слайдов?
Нет, контракт скилла требует сохранять структуру из трёх слайдов. Меняются только копирайт и значения метрик, иерархия карточек остаётся.
Исходный текст
SKILL.md · Apache-2.0
---
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
```text
digits-fintech-swiss-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
```
## Workflow
1. Start from `assets/template.html` and keep the three-slide structure intact.
2. Replace copy and metric values while preserving card hierarchy and reading order.
3. Keep interactions:
- Prev / Next buttons
- keyboard navigation (`ArrowLeft` / `ArrowRight`)
- dot navigation
4. Keep motion subtle (slide fade + tiny hover lift only).
5. 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:
```xml
<artifact identifier="digits-fintech-swiss" type="text/html" title="Digits Fintech Swiss Deck">
<!doctype html>
<html>...</html>
</artifact>
```
© nexu-io · Apache-2.0 · nexu-io/open-design