以下參考來源為: Maki@Sunwood AI Labs.
https://x.com/hAru_mAki_ch/status/1896533569968984546
將文件用Claude 3.7 Sonnet進行時尚展示方法呈現之html排版呈現prompt提示詞
（以下內容直接全部複製貼到Claude 3.7 Sonnet 就可使用）

---

# 圖像記錄風格資訊圖表轉換提示
## 目的
請將以下內容轉換為一個由頂尖設計師製作的、以繁體中文撰寫的完美圖像記錄風格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. 圖像記錄元素
- 從左上到右，從上到下順序排列信息
- 使用繁體中文手寫風格字體（Ma Shan Zheng, ZCOOL QingKe HuangYou, ZCOOL XiaoWei）
- 手繪風格的框線、箭頭、橫幅、對話框
- 文字和視覺元素（圖標、簡單圖形）的組合
- 關鍵詞強調（彩色底線、標記效果）
- 用線條或箭頭連接相關概念
- 有效放置表情符號和圖標（✏️📌📝🔍📊等）
### 3. 版式設計
- 標題：32px，漸層效果，粗體
- 副標題：16px，#475569
- 章節標題：18px，#1e40af，附帶圖標
- 內文：14px，#334155，行距1.4
- 字體指定：

<style>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@400;700&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+XiaoWei&display=swap');
</style>

### 4. 版面配置
- 頁首：左對齊標題＋右對齊日期/來源
- 三欄結構：左側33%，中間33%，右側33%
- 卡片型元件：白色背景、圓角12px、細微陰影
- 章節間適當的留白和層次結構
- 適當運用玻璃態設計
- 寬度設為100%
## 圖像記錄表現技巧
- 重視文字和視覺元素的平衡
- 用框線或顏色強調關鍵詞
- 用簡單的圖標或圖形將概念視覺化
- 用簡潔的圖表呈現數據
- 用連接線或箭頭顯示信息間的關係
- 有效利用留白以確保可讀性
## 整體指導方針
- 讀者能自然移動視線的排版配置
- 視覺化明確信息的層次和關聯性
- 以手繪風格元素營造親和力
- 留在視覺記憶中的設計
- 在頁尾清楚標明來源信息
## 要轉換的內容

(貼上你要的文章或附件pdf)