# 模板(直接複製使用)
## 參考範例展示圖:在最下面

將前面的內容，使用下面的風格製作簡報:
# 圖像紀錄風格投影片頁面提示詞
## 目的
  請將以下內容轉換成由頂尖設計師製作的、完美的圖像紀錄風格HTML資訊圖表（繁體中文）。我們致力於在資訊設計和視覺設計兩方面達到最高水準。
  請運用手繪風格的圖形和圖示來視覺化呈現內容。
## 設計規格
### 1. 色彩配置
"
<palette>
<color name='時尚1' rgb='593C47' r='89' g='59' b='70' />
<color name='時尚2' rgb='F2E63D' r='242' g='230' b='60' />
<color name='時尚3' rgb='F2C53D' r='242' g='196' b='60' />
<color name='時尚4' rgb='F25C05' r='242' g='91' b='4' />
<color name='時尚5' rgb='F24405' r='242' g='68' b='4' />
</palette>

### 2. 版面結構
- 左側：側邊欄（20%）- 目錄和導覽
- 右側：主要內容（80%）- 投影片顯示區域
- 側邊欄為固定顯示（內部不會出現滾動條）
- 主要內容以投影片形式每次顯示一頁
### 3. 側邊欄設計
- 背景色：--color-1（#593C47）
- 標題置中於上方
- 導覽選單：連結至各部分
- 視覺化突顯當前活動的部分
- 在每個選單項目前方放置📌圖示
### 4. 投影片設計元素
- 使用中文手寫風格字體（思源宋體、思源黑體等相關替代）
- 手繪風格的邊框、箭頭、橫幅、對話框
- 文字與視覺元素（圖示、簡單圖形）的組合
- 關鍵字強調（彩色底線、標記效果）
- 在部分標題前方放置圖示
- 區域背景使用玻璃擬態效果
### 5. 組件構成
- 內容框：白色背景、圓角、微妙陰影、漸層效果
- 手繪風格框：雙線或虛線邊框、些微傾斜的設計
- 帶圖示的標題：在各標題前方放置FontAwesome圖示
- 對話框：白色背景、帶箭頭、用於顯示引用內容
- 圖示容器：以圓形圖示群組視覺化表達概念
- 備註：左側彩色邊框、帶圖釘（📌）圖示
- 流程：橫向排列的步驟，以虛線連接
### 6. 文字排版
- 部分標題：1.5rem、#1e40af（藍色）、帶圖示
- 概念標題：粗體、--color-5（橙色系）
- 正文：#334155（深灰色）、行距1.4
- 引用文字：斜體、左側帶邊框
- 字體指定：
"
@import
 url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
"
### 7. 分頁功能
- 頁面右下角固定的「上一頁」「下一頁」導覽按鈕
- 在第一頁/最後一頁時禁用相關按鈕
- 使用淡入淡出效果進行投影片切換動畫
- 支援使用鍵盤左右方向鍵導覽
## 內容表達重點
- 將專業知識視覺化呈現，使其易於理解
- 在各部分有效運用圖示和插畫
- 使用手繪風格元素營造親切感
- 用箭頭或線條表達概念之間的關聯性
- 以對話框或方框歸納具體例子
- 標記關鍵字使其易於記憶
- 手繪風格框架用於框住重要概念
- 以簡潔的表達方式傳達數據資料

![範例圖](https://i.imgur.com/iXTsHRu.jpeg "範例圖" =1200x1000)