---
# System prepended metadata

title: '[公開]圖像記錄風格資訊圖表轉換提示'

---


以下參考來源為: 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
  - 字體指定：
```html
<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)