swiss-creative-mode-template — скилл для Claude Code: установка
Собирает интерактивную презентацию в швейцарском стиле в единый HTML-файл. Пригодится, когда нужен бруталистский лендинг с переключением тем и палитр.
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a claude-codeЧто делает swiss-creative-mode-template
Скилл собирает автономную веб-презентацию или промо-страницу в швейцарском стиле. Сначала агент читает файл DESIGN.md и переносит параметры шрифтов и цветовую гамму в переменные CSS. Затем заготовка assets/template.html копируется в index.html.
Итоговая страница сохраняет три обязательных блока: главный экран с геометрической рамкой, линейку из четырёх шагов и схему архитектуры. В разметку встроены переключатель бумажной и тёмной темы, смена акцентных палитр, навигация по слайдам и интерактивные хотспоты для аннотаций.
Весь код отдаётся строго в одном файле без внешних библиотек. Сборщики проекту не нужны. Для записи файлов агенту требуется разрешение file_write, а перед финализацией вёрстка проверяется по references/checklist.md.
Какие задачи решает
- сверстать бруталистский лендинг или презентацию в швейцарском стиле
- собрать автономный HTML-слайдер без внешних скриптов и фреймворков
- встроить интерактивное переключение тёмной темы и цветовых палитр
- добавить всплывающие хотспоты с аннотациями на схему или витрину
Примеры запросов агенту
- Сделай презентационный лендинг в швейцарском стиле по файлу DESIGN.md
- Собери одностраничную интерактивную презентацию в стиле brutalist deck
- Сгенерируй index.html с переключением тем и карточками процесса через swiss-creative-mode-template
Как установить swiss-creative-mode-template
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a claude-code2Вручную: положить файлы
~/.claude/skills/swiss-creative-mode-template/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/swiss-creative-mode-template/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a codex2Вручную: положить файлы
.agents/skills/swiss-creative-mode-template/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a cursor2Вручную: положить файлы
.cursor/skills/swiss-creative-mode-template/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design swiss-creative-mode-template2Вручную: положить файлы
.github/skills/swiss-creative-mode-template/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/swiss-creative-mode-templateВручную: положить файлы
.devin/skills/swiss-creative-mode-template/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Похожие
Вопросы о swiss-creative-mode-template
Как установить swiss-creative-mode-template в Claude Code?
Выполните в терминале команду npx skills add nexu-io/open-design --skill swiss-creative-mode-template -a claude-code. Файлы скилла сохранятся в директорию ~/.claude/skills/swiss-creative-mode-template/.
Что генерирует скилл swiss-creative-mode-template?
Скилл создаёт автономный файл index.html с интерактивной презентацией. В него входят слайдер с точечной навигацией, смена тёмной и светлой тем, перебор палитр и блок с хотспотами.
Какие внешние зависимости нужны для работы готового шаблона?
Никаких внешних библиотек или сборщиков не требуется. Весь JavaScript и стили встраиваются напрямую в <!doctype html>, а агенту для генерации нужен только доступ file_write.
Исходный текст
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
