技能概述
Trading Analysis Dashboard Template 係一個華爾街級（Wall-Street grade）交易分析儀表板技能，生成單文件 HTML artifact。特點係高數據密度、專業金融終端風格。包含左側導航欄、風險儀表板（Risk Cockpit）、市場圖表面板、Live/Demo 模式切換、圖表懸停交叉光標與工具提示、點擊聚焦圖表（浮動 modal）、鍵盤命令面板（按 / 觸發）。
設計適合金融分析、交易監控、市場數據可視化場景，數據佈局緊湊專業。
觸發關鍵字
- trading analysis dashboard template、wall street dashboard template
- financial terminal template、trading cockpit template
- 交易分析面板模板、華爾街風格看板、高科技金融 dashboard 模板
什麼時候用
- 需要華爾街風格的交易分析終端
- 需要密集市場數據展示的交易 cockpit
- 需要帶圖表交互（交叉光標、工具提示、點擊聚焦）的金融儀表板
- 需要 Live/Demo 模式切換進行演示
- 需要命令面板（command palette）交互
使用方法
自然語言觸發
做個華爾街風格嘅交易分析面板
Create a Wall-Street-grade trading dashboard template
幫我整一個交易 cockpit，要帶風險儀表板同市場圖表
指定技能
用 trading analysis dashboard template 技能
工作流程
- 讀取 DESIGN.md — 將字體排版 / 色彩 / 佈局映射到 CSS 變量。
- 複製模板 — 將
assets/template.html複製為index.html。 - 個性化 — 按用戶需求替換標題、標的名稱、數字標籤。
- 保留交互保真度 — 參見下方「交互清單」。
- 單文件 HTML — 內聯 CSS + JS，無框架依賴。
- 誠實佔位 — 未知真實數值時使用
—或中性標籤，不編造虛假精確數字。 - 校驗 — 按
references/checklist.md檢查後再輸出。
交互清單
| 交互 | 說明 |
|---|---|
| 明暗主題切換 | 全頁面主題即時切換 |
| Live/Demo 模式 | 切換演示模式，數據可動態播放 |
| 懸停交叉光標 | 圖表 hover 時顯示十字光標 + 工具提示 |
| 點擊聚焦 | 點擊圖表以浮動 modal 方式放大聚焦 |
| 命令面板 | 按 / 鍵觸發命令面板（command palette） |
輸出格式
單文件 HTML artifact，以 <artifact> 包裹：
<artifact identifier="trading-analysis-dashboard" type="text/html" title="Trading Analysis Dashboard">
<!doctype html>
<html>...</html>
</artifact>
artifact 前一句簡短導向說明。
實際例子
例子 1：華爾街交易終端
用戶：「Create a Wall-Street-grade trading analysis dashboard with risk cockpit, market charts, and command palette。」
生成：
- 左側導航欄（快速切換不同市場/組合）
- Risk Cockpit：風險指標儀表板（VaR、Beta、Sharpe Ratio 等）
- 市場圖表：帶交叉光標和工具提示的價格走勢圖
- Live/Demo 模式切換按鈕
- 點擊圖表可浮動放大
- 按
/觸發命令面板
例子 2：高科技金融看板
用戶：「做個高科技金融 dashboard 模板，要密數據，華爾街風格。」
生成同樣結構的高密度金融數據面板，數據佈局緊湊專業，交互完整。
資源結構
trading-analysis-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html