К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

digits-fintech-swiss-template — скилл-шаблон презентации

Шаблон финтех-презентации в швейцарской сетке: чёрный, тёплая бумага, неоново-лаймовые акценты. Три слайда с крупными числовыми карточками и навигацией с клавиатуры, всё в одном HTML-файле.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill digits-fintech-swiss-template -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/digits-fintech-swiss-template/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/digits-fintech-swiss-template/

Из того же набора39

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Похожие

gsap-framer-scroll-animation официальный Utkarsh Patrikar Скилл помогает создавать анимации, связанные со скроллом, через GSAP ScrollTrigger и Framer Motion. Подойдёт для React, Next.js и vanilla JS. GitHub Copilot 3 900установок magic-ui magicuidesign Скилл magic-ui учит Claude Code работать с компонентами Magic UI в React и Next.js: выбирать анимации, ставить через shadcn-реестр и проверять доступность. Claude Code CX Codex Cursor +1 1 200установок draw-io-diagram-generator официальный github Создаёт и правит диаграммы draw.io в файлах .drawio, .drawio.svg и .drawio.png. Нужен, когда диаграмму требуется получить прямо из запроса к агенту. GitHub Copilot 2 800установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой