技能概述
swiss-creative-mode-template 係一個高端瑞士/編輯風格嘅 HTML 模板，具有強烈嘅視覺節奏和有意義嘅交互。
核心視覺：大膽編輯排版字體 + 高對比幾何卡片 + 交互式幻燈片導航 + 主題切換（paper/dark）+ 熱點疊加 + 調色板切換。單一文件 HTML artifact。
當用戶請求高端演示風格 landing page、瑞士/粗獷風簡報，或帶有豐富交互嘅創意發布頁時使用。
觸發關鍵字
- swiss creative mode template、editorial presentation template
- brutalist deck style html、creative mode deck
- 瑞士風演示模板、高級設計語言模板
- 高端編輯風簡報、幾何卡片簡報
資源結構
swiss-creative-mode-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
視覺特徵
| 特徵 | 說明 |
|---|---|
| 字體 | 大膽編輯排版字體 |
| 卡片 | 高對比幾何卡片 |
| 佈局 | 強烈視覺節奏 |
| 主題 | 紙張 / 暗色雙主題切換 |
| 調色板 | 可循環切換強調色 |
| 交互 | 豐富且有意義 |
頁面結構
| 區塊 | 內容 |
|---|---|
| Hero 場景 | 大膽標題 + 幾何框架 |
| 流程卡片 | 四步流程卡片行 |
| 架構場景 | 堆疊/架構圖場景 |
交互功能
- 上一頁/下一頁導航 + 圓點導航
- 主題切換：paper / dark
- 調色板循環按鈕：改變全局強調色
- 熱點切換：顯示/隱藏註釋和細節
使用方法
自然語言觸發
用 swiss creative mode 模板做一份高端發布頁
瑞士風編輯簡報，大膽字體 + 幾何卡片 + 主題切換 + 熱點疊加
Swiss editorial presentation with theme toggle and hotspot overlays
工作流程
- 讀取
DESIGN.md，將調色板/字體/佈局決策映射到根 CSS 變量 - 複製
assets/template.html到index.html - 保持結構不變：Hero 場景、四步流程、架構場景
- 保持交互正常：導航、主題切換、調色板循環、熱點切換
- 輸出自包含 HTML（inline CSS/JS，無外部依賴）
- 用
references/checklist.md驗證後輸出
輸出格式
單文件 HTML artifact：
<artifact identifier="swiss-creative-mode" type="text/html" title="Swiss Creative Mode Template">
<!doctype html>
<html>...</html>
</artifact>