技能概述
Swiss User Research Video Template 係一個瑞士風格的用戶研究敘事模板，採用溫暖紙張編輯美學（warm-paper editorial aesthetic）。生成單文件 HTML artifact，包含極簡排版、嚴格間距節奏、細緻分割線、克制微交互。三張幻燈片結構：標題 / 框架頁 → 受訪者分佈環形圖 → 行為模式 + 證據面板。
視覺語言核心係「讓故事成為焦點」— 微交互克制而不喧賓奪主，所有注意力都放在研究內容上。
觸發關鍵字
- swiss user research template、editorial research deck template
- minimal user research slides、warm paper swiss style
- research synthesis template
- 瑞士風用戶研究模板、高級調性研究匯報
什麼時候用
- 需要高級調性的用戶研究匯報
- 極簡風格的研究演示文稿
- 需要溫暖紙張質感 + 瑞士國際主義排版
- 用戶研究綜合（research synthesis）報告
- 敘事性強的研究展示（story-first live artifact）
使用方法
自然語言觸發
做個瑞士風格嘅用戶研究報告
Create a Swiss-style user research synthesis deck
幫我整一個 warm paper tone 嘅研究匯報
指定技能
用 swiss user research template 技能
工作流程
- 讀取 DESIGN.md — 將 token 映射到模板 CSS 變量（
--paper、--ink、--muted、分割線顏色、分段顏色），不改變佈局語義。 - 從模板開始 — 基於
assets/template.html起步，保持三張幻燈片結構。 - 保留交互 — 參見下方「交互清單」。
- 數據一致性 — 所有數據真實且文案、環形圖標籤、百分比之間內部一致。
- 單文件 HTML — 內聯 CSS + JS，無外部框架依賴。
- 校驗 — 按
references/checklist.md檢查後再輸出。
三張幻燈片結構
| 幻燈片 | 內容 |
|---|---|
| Slide 1 | 標題 / 研究框架 — 研究主題、日期、一句核心發現 |
| Slide 2 | 受訪者分佈環形圖 — 各人群類別的百分比分解 + 可懸停圖例高亮 |
| Slide 3 | 行為模式 + 證據面板 — 研究發現的行為模式，附帶受訪者引言作為證據 |
交互清單
| 交互 | 說明 |
|---|---|
| 點擊導航 | 點擊左右箭頭切換幻燈片 |
| 鍵盤導航 | ArrowLeft / ArrowRight 鍵切換 |
| 底部分頁點 | 帶當前狀態高亮的分页指示器 |
| 環形圖圖例懸停 | hover 時高亮對應分段 |
| 線條繪製動畫 | subtle line-draw 過渡效果 |
| 面板提升動畫 | subtle panel-lift 過渡效果 |
輸出格式
單文件 HTML artifact，以 <artifact> 包裹：
<artifact identifier="swiss-user-research-deck" type="text/html" title="Swiss User Research Synthesis">
<!doctype html>
<html>...</html>
</artifact>
artifact 前一句簡短導向說明。
實際例子
例子 1：用戶研究綜合報告
用戶：「Create a Swiss-style user research synthesis deck with participant breakdown and behavioral patterns。」
生成：
- Slide 1：研究框架，標題 + 一句核心發現
- Slide 2：受訪者分佈環形圖（donut chart）+ 可交互圖例
- Slide 3：行為模式面板 + 受訪者引言證據
- 鍵盤/點擊導航 + 底部分頁點 + 微妙動畫
例子 2：高級調性研究匯報
用戶：「做個高級調性嘅用戶研究匯報，要瑞士風格，warm paper tone。」
生成同樣結構的溫暖紙張風格研究報告，排版極簡、間距嚴格、交互克制。
資源結構
swiss-user-research-video-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html