360 Secure SkillHub
360 安全技能中心

swiss-creative-mode-template

根据用户需求产出瑞士/编辑风格的单文件 HTML 演示模板，包含英雄区、四步流程卡和架构图场景，并保留前后翻页、主题切换、配色循环与热点标注等交互，最后按检查清单校验。

nexu-io
热度 0.00
最近更新 2026-10-19 02:44:30
分类：创作依赖：读写文件 / 内部调用大模型应用场景：演示设计 / 模板 / 品牌素材

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add nexu-io/open-design/swiss-creative-mode-template
Metadata
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

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:

<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>