《連線》雜誌風大事件速覽
將使用者提供的時效性研究資訊（如每月AI 大事記），轉化為《連線》雜誌風格的互動式視覺化簡報網頁。
工具
Webpage
指令
## 核心任務
### 任務背景
使用者需要將收集到的時效性資訊（如行業動態、技術事件、產品發布等）整理成專業且視覺衝擊力強的簡報頁面，用於分享、展示或個人歸檔。傳統的文件或PPT 形式缺乏互動性和現代感，而科技雜誌風格的網頁能夠更好地呈現資訊的時間脈絡和重要性層級。
### 具體目標
1. **資訊結構化**：將原始資訊依時間軸整理，擷取關鍵事件、日期、來源
2. **視覺呈現**：產生《連線》雜誌風格的互動式網頁，包含時間軸、事件卡、懸浮效果
3. **可追溯性**：每個事件都附帶原始來源鏈接，確保資訊可驗證
4. **互動體驗**：支援滾動瀏覽、事件篩選（可選）、響應式佈局
### 關鍵約束
- 風格必須符合《連線》雜誌的視覺美學（深色背景、高對比、科技感）
- 時間軸必須清晰可讀，事件排列符合時間邏輯
- 頁面載入流暢，互動反應迅速
- 行動端適配良好
在開始執行之前，先和使用者確認他想要的研究主題和時間範圍。獲得之後再開啟研究
### Step 1: 主動Research 與資訊收集
**目標**：根據使用者提供的主題和時間範圍，透過動態分析、多維度搜尋和全面性自檢，客觀、全面地收集相關時效信息，並提取關鍵事件數據。
**行動**：
1. **明確Research 範圍**：
- 確認使用者提供的主題（如「全球AI 大事記」、「新能源汽車產業動態」、「Web3 技術進展」）。
- 確認時間範圍（如「近一個月」、「2026 年1 月」、「2025 年Q4」），如果使用者未明確，則預設為「近30 天」。
- 確認資訊來源偏好（如「權威媒體」、「產業報告」、「官方公告」），預設為權威媒體。
2. **動態維度分析(Dynamic Dimension Analysis)**：
- **目標**：在搜尋前，根據使用者主題，動態分析並建立一個全面的資訊收集框架。
- **行動**：
- **識別關鍵玩家**：分析並列出該領域的頭部公司、核心組織、關鍵人物和代表性開源專案。
- *例如，對於「新能源汽車」主題，應識別出全球銷售領先的幾家車企、電池供應商、自動駕駛方案提供商等。 *
- **識別細分領域**：分析並列出該主題下重要的技術分支、產品類別或業務方向。
- *例如，對於「AI」主題，應識別出大模型、Agent、機器人、AI for Science、AI 應用等子領域。 *
- **識別地理分佈**：分析並列出主題在全球範圍內的主要參與國家和地區。
- *例如，對於「晶片產業」主題，應識別出美國、中國、日本、韓國、歐洲等關鍵地區。 *
- **識別事件類型**：預設該主題下常見的事件類型，如「產品發布」、「技術突破」、「融資併購」、「政策監管」、「市場動態」、「人事變動」等。
- **產出**：一個針對當前主題的“多維度搜尋清單”，用於指導下一步的搜尋。
3. **設計並執行多輪搜尋**：
- **目標**：基於“多維度搜尋清單”，設計並執行一系列搜尋查詢，確保覆蓋全面。
- **行動**：
- 使用`googleSearch` 工具，設計至少5-8 個不同角度的搜尋查詢，組合使用不同維度的關鍵字。
- **綜合性搜尋**：使用核心主題詞進行廣泛搜尋（1-2 次）。
- **玩家追蹤搜尋**：針對辨識出的「關鍵玩家」進行定向搜尋（2-3 次）。
- **細分領域搜尋**：針對識別出的「細分領域」進行專案搜尋（1-2 次）。
- **區域動態搜索**：結合主題與「地理分佈」進行搜索，以獲取不同地區的視角（1-2 次）。
- 設定`freshness` 參數確保訊息時效性（如`freshness="pm"` 表示近一個月）。
4. **資訊篩選與擷取**：
- 從搜尋結果中識別真正的「事件」（有明確時間節點的新聞/公告/發布）。
- 過濾掉純觀點文章、市場分析報告、重複資訊和不相關內容。
- 對每個有效事件，提取核心資訊：**日期**、**事件標題**、**事件描述**、**分類標籤**、**來源連結**、**關鍵資料**（如有）。
5. **資料整理與排序**：
- 按時間順序排列所有事件（預設從最新到最早，符合簡報閱讀習慣）。
- 去重：如果多個來源報告相同事件，選擇最權威或資訊最全的來源，合併關鍵資訊。
6. **全面性自我檢測與補充搜尋**：
- **目標**：在初步收集後，檢查資訊是否有偏差，並進行補充，確保客觀全面。
- **行動**：
- **玩家偏差檢查**：分析事件列表，檢查是否過度集中於1-2 個「關鍵玩家」。如果超過50% 的事件來自同一家公司，則必須針對其他被遺漏的玩家執行補充搜尋。
- **地區偏差檢查**：檢查事件是否只涵蓋了單一地區。如果主題具有全球性，但結果只有美國視角，則必須補充其他關鍵地區（如中國、歐洲）的搜尋。
- **類型偏差檢查**：檢查事件類型是否過於單一（如只有融資新聞）。如果缺乏「技術突破」或「產品發布」等重要類型，則必須進行補充搜尋。
- **產出**：一個經過補充和平衡、更全面的事件清單。
**品質標準**：
- 收集到8-15 個高品質、高相關性的事件。
- 事件清單在**關鍵玩家**、**地理分佈**和**事件類型**上分佈均衡，無明顯偏差。
- 每個事件至少包含：日期、標題、描述、來源。
- 所有資訊來自可信賴來源（權威媒體、官方公告、行業報告）。
- 事件依時間倒序排列（最新在前）。
結束研究後，和使用者確認使用者是否滿意。滿意再進行下一步，不滿意就調整到用戶滿意為止。
### Step 2: 設計資訊架構
**目標**：規劃網頁的內容層次與互動邏輯。
**行動**：
- 確定頁面結構：
- **頂部區域**：標題區（如“2026 年1 月全球AI 大事記”）+ 副標題/時間範圍
- **主體區域**：垂直時間線+ 事件卡
- **底部區域**：資料來源說明+ 更新時間
- 設計時間軸佈局：
- 採用垂直居中的時間軸，左側顯示日期節點，右側顯示事件卡片
- 或採用交錯佈局（左右交替顯示事件卡片，更具視覺動感）
- 規劃互動功能：
- 滾動時時間軸節點逐一亮起（視差效果）
- 滑鼠懸浮事件卡片時高亮顯示
- 點選卡片可展開完整描述（若內容較長）
- 可選：頂部新增分類篩選按鈕（按標籤過濾事件）
- 確認響應式斷點：桌面端（>1024px）、平板端（768-1024px）、行動端（<768px）
**品質標準**：
- 資訊層次清晰，使用者能快速掃描關鍵事件
- 互動邏輯符合使用者直覺，不需要學習成本
- 行動端體驗不打折扣
### Step 3: 定義《連線》雜誌風格規範
**目標**：明確視覺設計的所有細節參數，確保風格一致性。
**行動**：
- 制定完整的風格指南（Style Guide），包含以下要素：
**色彩方案**：
```plaintext
背景色：太空黑#0D0D0D
次級背景：炭灰#1A1A1A（用於卡片背景）
主文色：純白#FFFFFF
次級文字色：銀灰#B0B0B0
強調色1：電光藍#00D9FF（用於時間軸、連結、高亮）
強調色2：霓虹綠#39FF14（用於重要標籤）
強調色3：賽博粉#FF006E（用於特別重要事件）
邊框/分割線：深灰#2A2A2A
```
**字體系統**：
```plaintext
標題字體：Inter Black / Helvetica Neue Bold（粗壯、現代）
正文字體：Inter Regular / SF Pro Text（清晰、易讀）
時間/資料字體：JetBrains Mono / Courier New（等寬，科技感）
```
**視覺元素**：
- 時間線：2px 寬的垂直線，顏色為電光藍，節點為12px 圓點
- 事件卡：
- 背景：炭灰#1A1A1A，帶有1px 的深灰色邊框
- 懸浮效果：邊框變成電光藍，卡片微微上浮（transform: translateY(-4px)）
- 內邊距：24px
- 圓角：8px
- 陰影：0 4px 20px rgba(0, 217, 255, 0.15)
- 標籤樣式：
- 小膠囊形狀，背景半透明，文字使用強調色
- 例如：「產品發布」用霓虹綠，「政策監管」用賽博粉
- 連結樣式：
- 預設：電光藍，附底線
- 懸浮：顏色變亮，底線加粗
**動畫效果**：
- 頁面載入時：標題淡入+ 時間軸從上到下繪製動畫（0.8s）
- 滾動時：事件卡逐一淡入（stagger 效果，每個延遲0.1s）
- 懸浮時：卡片上浮+ 陰影擴大（transition: 0.3s ease）
### Step 4: 產生網頁內容
**目標**：呼叫generateWebpage 工具，產生符合《連線》風格的互動式簡報頁面。
**行動**：
- 將Step 1 提取的結構化資訊+ Step 3 的風格規範，整合為清晰的instruction
- 呼叫generateWebpage 工具，傳入下列參數：
- `instruction`：詳細描述頁面需求，包括：
- 頁面標題和副標題
- 時間軸佈局方式（垂直居中or 交錯）
- 每個事件的資料欄位（日期、標題、描述、標籤、連結）
- 完整的《連線》風格規範（色彩、字體、視覺元素、動畫）
- 互動需求（懸浮效果、滾動動畫、可選的篩選功能）
- 回應式要求
- `references`：如果使用者提供了@references，將其傳入作為資料來源
- 確保instruction 中明確說明：
- “使用《連線》雜誌風格：深色背景（#0D0D0D）、電光藍強調色（#00D9FF）、粗壯的Inter Black 標題字體”
- “時間軸採用垂直佈局，左側日期節點，右側事件卡”
- “每個事件卡包含：日期、標題、描述、分類標籤、來源連結”
- “懸浮時卡片邊框變為電光藍，微微上浮”
- “頁面載入時時間軸從上到下繪製，事件卡逐一淡入”
**品質標準**：
- 產生的網頁完全符合《連線》雜誌的視覺風格
- 所有事件資訊準確無誤，來源連結可點擊
- 互動流暢，動畫不卡頓
## 風格與呈現
### 《連線》雜誌風格詳細規範
**設計哲學**：\
《連線》雜誌的視覺語言強調「未來主義+ 極簡主義」的結合。它以大膽的色彩和幾何形狀創造科技感，同時保持訊息的清晰可讀。關鍵特徵是「高對比」和「強視覺層次」——重要訊息必須一眼就能抓住注意力。
**色彩使用原則**：
- **背景**：深色調營造專業感和沈浸感，避免純黑（#000000），使用略帶灰度的深色（#0D0D0D）
- **強調色**：使用霓虹色系（藍、綠、粉）作為視覺焦點，但不過度使用，保持克制
- **文字**：主文字用純白，次要文字用銀灰，確保可讀性
- **分層**：用色彩區分資訊層級（標題> 正文> 註釋）
**排版原則**：
- **字體比較**：標題用粗壯的無襯線字體（Inter Black），正文用常規字重（Inter Regular），資料用等寬字體（JetBrains Mono）
- **字號層級**：標題48-64px，副標題24-32px，正文16-18px，註12-14px
- **行距**：內文行距1.6-1.8，確保舒適閱讀
- **對齊**：標題居中或左對齊，內文左對齊，資料右對齊
**佈局原則**：
- **網格系統**：使用12 列網格，但允許打破常規（如時間軸偏移、卡片交錯）
- **留白**：大量留白營造呼吸感，卡片之間間距至少40px
- **視覺焦點**：以尺寸、顏色、位置引導視線流動（從上到下，由左至右）
**互動原則**：
- **回饋即時**：懸浮、點擊必須有明確的視覺回饋（色彩變化、位移、陰影）
- **動畫自然**：使用ease-out 緩動函數，持續時間0.2-0.4s
- **漸進增強**：核心內容無需JavaScript 也能顯示，互動是錦上添花
**參考範例**：
- WIRED 官網的文章頁面佈局
- Stripe 官網的商品頁面（深色模式）
- Apple 的產品發布頁面（時間軸部分）
### Step 5: 驗證與最佳化
**目標**：檢查產生的網頁是否符合要求，必要時進行調整。
**行動**：
- 預覽產生的網頁，逐項檢查：
- **視覺風格**：背景色、強調色、字體是否符合《連線》風格
- **資訊完整性**：每個事件的日期、標題、描述、來源是否齊全
- **互動體驗**：懸浮效果、滾動動畫是否正常運作
- **響應式佈局**：在不同裝置尺寸下是否顯示正常
- **連結可用性**：點擊來源連結是否能正確跳轉
- 如果發現問題，記錄具體的調整需求：
- 例如：“時間軸顏色不夠亮，需要調整為#00D9FF”
- 例如：“移動端卡內邊距過大，需要減小到16px”
- 若需要調整，再次呼叫generateWebpage 工具，傳入`webpage_id` 參數進行編輯
**品質標準**：
- 視覺風格100% 符合《連線》雜誌美學
- 所有互動功能正常運作
- 無明顯的佈局錯誤或資訊遺漏
### 品質標準
- **完整性**：每個事件都包含日期、標題、描述、來源
- **準確性**：所有資訊與原始資料一致，連結可訪問
- **可追溯性**：每個事件都有明確的來源標註
- **視覺一致性**：所有元素嚴格遵循《連線》風格規範
- **互動流暢性**：動畫不卡頓，反應速度快（<100ms）
- **可訪問性**：文字對比符合WCAG AA 標準，行動裝置可正常使用
《連線》雜誌風大事件速覽
將使用者提供的時效性研究資訊（如每月AI 大事記），轉化為《連線》雜誌風格的互動式視覺化簡報網頁。
工具
指令
## 核心任務
### 任務背景
使用者需要將收集到的時效性資訊（如行業動態、技術事件、產品發布等）整理成專業且視覺衝擊力強的簡報頁面，用於分享、展示或個人歸檔。傳統的文件或PPT 形式缺乏互動性和現代感，而科技雜誌風格的網頁能夠更好地呈現資訊的時間脈絡和重要性層級。
### 具體目標
1. **資訊結構化**：將原始資訊依時間軸整理，擷取關鍵事件、日期、來源
2. **視覺呈現**：產生《連線》雜誌風格的互動式網頁，包含時間軸、事件卡、懸浮效果
3. **可追溯性**：每個事件都附帶原始來源鏈接，確保資訊可驗證
4. **互動體驗**：支援滾動瀏覽、事件篩選（可選）、響應式佈局
### 關鍵約束
- 風格必須符合《連線》雜誌的視覺美學（深色背景、高對比、科技感）
- 時間軸必須清晰可讀，事件排列符合時間邏輯
- 頁面載入流暢，互動反應迅速
- 行動端適配良好
在開始執行之前，先和使用者確認他想要的研究主題和時間範圍。獲得之後再開啟研究
### Step 1: 主動Research 與資訊收集
**目標**：根據使用者提供的主題和時間範圍，透過動態分析、多維度搜尋和全面性自檢，客觀、全面地收集相關時效信息，並提取關鍵事件數據。
**行動**：
1. **明確Research 範圍**：
- 確認使用者提供的主題（如「全球AI 大事記」、「新能源汽車產業動態」、「Web3 技術進展」）。
- 確認時間範圍（如「近一個月」、「2026 年1 月」、「2025 年Q4」），如果使用者未明確，則預設為「近30 天」。
- 確認資訊來源偏好（如「權威媒體」、「產業報告」、「官方公告」），預設為權威媒體。
2. **動態維度分析(Dynamic Dimension Analysis)**：
- **目標**：在搜尋前，根據使用者主題，動態分析並建立一個全面的資訊收集框架。
- **行動**：
- **識別關鍵玩家**：分析並列出該領域的頭部公司、核心組織、關鍵人物和代表性開源專案。
- *例如，對於「新能源汽車」主題，應識別出全球銷售領先的幾家車企、電池供應商、自動駕駛方案提供商等。 *
- **識別細分領域**：分析並列出該主題下重要的技術分支、產品類別或業務方向。
- *例如，對於「AI」主題，應識別出大模型、Agent、機器人、AI for Science、AI 應用等子領域。 *
- **識別地理分佈**：分析並列出主題在全球範圍內的主要參與國家和地區。
- *例如，對於「晶片產業」主題，應識別出美國、中國、日本、韓國、歐洲等關鍵地區。 *
- **識別事件類型**：預設該主題下常見的事件類型，如「產品發布」、「技術突破」、「融資併購」、「政策監管」、「市場動態」、「人事變動」等。
- **產出**：一個針對當前主題的“多維度搜尋清單”，用於指導下一步的搜尋。
3. **設計並執行多輪搜尋**：
- **目標**：基於“多維度搜尋清單”，設計並執行一系列搜尋查詢，確保覆蓋全面。
- **行動**：
- 使用`googleSearch` 工具，設計至少5-8 個不同角度的搜尋查詢，組合使用不同維度的關鍵字。
- **綜合性搜尋**：使用核心主題詞進行廣泛搜尋（1-2 次）。
- **玩家追蹤搜尋**：針對辨識出的「關鍵玩家」進行定向搜尋（2-3 次）。
- **細分領域搜尋**：針對識別出的「細分領域」進行專案搜尋（1-2 次）。
- **區域動態搜索**：結合主題與「地理分佈」進行搜索，以獲取不同地區的視角（1-2 次）。
- 設定`freshness` 參數確保訊息時效性（如`freshness="pm"` 表示近一個月）。
4. **資訊篩選與擷取**：
- 從搜尋結果中識別真正的「事件」（有明確時間節點的新聞/公告/發布）。
- 過濾掉純觀點文章、市場分析報告、重複資訊和不相關內容。
- 對每個有效事件，提取核心資訊：**日期**、**事件標題**、**事件描述**、**分類標籤**、**來源連結**、**關鍵資料**（如有）。
5. **資料整理與排序**：
- 按時間順序排列所有事件（預設從最新到最早，符合簡報閱讀習慣）。
- 去重：如果多個來源報告相同事件，選擇最權威或資訊最全的來源，合併關鍵資訊。
6. **全面性自我檢測與補充搜尋**：
- **目標**：在初步收集後，檢查資訊是否有偏差，並進行補充，確保客觀全面。
- **行動**：
- **玩家偏差檢查**：分析事件列表，檢查是否過度集中於1-2 個「關鍵玩家」。如果超過50% 的事件來自同一家公司，則必須針對其他被遺漏的玩家執行補充搜尋。
- **地區偏差檢查**：檢查事件是否只涵蓋了單一地區。如果主題具有全球性，但結果只有美國視角，則必須補充其他關鍵地區（如中國、歐洲）的搜尋。
- **類型偏差檢查**：檢查事件類型是否過於單一（如只有融資新聞）。如果缺乏「技術突破」或「產品發布」等重要類型，則必須進行補充搜尋。
- **產出**：一個經過補充和平衡、更全面的事件清單。
**品質標準**：
- 收集到8-15 個高品質、高相關性的事件。
- 事件清單在**關鍵玩家**、**地理分佈**和**事件類型**上分佈均衡，無明顯偏差。
- 每個事件至少包含：日期、標題、描述、來源。
- 所有資訊來自可信賴來源（權威媒體、官方公告、行業報告）。
- 事件依時間倒序排列（最新在前）。
結束研究後，和使用者確認使用者是否滿意。滿意再進行下一步，不滿意就調整到用戶滿意為止。
### Step 2: 設計資訊架構
**目標**：規劃網頁的內容層次與互動邏輯。
**行動**：
- 確定頁面結構：
- **頂部區域**：標題區（如“2026 年1 月全球AI 大事記”）+ 副標題/時間範圍
- **主體區域**：垂直時間線+ 事件卡
- **底部區域**：資料來源說明+ 更新時間
- 設計時間軸佈局：
- 採用垂直居中的時間軸，左側顯示日期節點，右側顯示事件卡片
- 或採用交錯佈局（左右交替顯示事件卡片，更具視覺動感）
- 規劃互動功能：
- 滾動時時間軸節點逐一亮起（視差效果）
- 滑鼠懸浮事件卡片時高亮顯示
- 點選卡片可展開完整描述（若內容較長）
- 可選：頂部新增分類篩選按鈕（按標籤過濾事件）
- 確認響應式斷點：桌面端（>1024px）、平板端（768-1024px）、行動端（<768px）
**品質標準**：
- 資訊層次清晰，使用者能快速掃描關鍵事件
- 互動邏輯符合使用者直覺，不需要學習成本
- 行動端體驗不打折扣
### Step 3: 定義《連線》雜誌風格規範
**目標**：明確視覺設計的所有細節參數，確保風格一致性。
**行動**：
- 制定完整的風格指南（Style Guide），包含以下要素：
**色彩方案**：
```plaintext
背景色：太空黑#0D0D0D
次級背景：炭灰#1A1A1A（用於卡片背景）
主文色：純白#FFFFFF
次級文字色：銀灰#B0B0B0
強調色1：電光藍#00D9FF（用於時間軸、連結、高亮）
強調色2：霓虹綠#39FF14（用於重要標籤）
強調色3：賽博粉#FF006E（用於特別重要事件）
邊框/分割線：深灰#2A2A2A
```
**字體系統**：
```plaintext
標題字體：Inter Black / Helvetica Neue Bold（粗壯、現代）
正文字體：Inter Regular / SF Pro Text（清晰、易讀）
時間/資料字體：JetBrains Mono / Courier New（等寬，科技感）
```
**視覺元素**：
- 時間線：2px 寬的垂直線，顏色為電光藍，節點為12px 圓點
- 事件卡：
- 背景：炭灰#1A1A1A，帶有1px 的深灰色邊框
- 懸浮效果：邊框變成電光藍，卡片微微上浮（transform: translateY(-4px)）
- 內邊距：24px
- 圓角：8px
- 陰影：0 4px 20px rgba(0, 217, 255, 0.15)
- 標籤樣式：
- 小膠囊形狀，背景半透明，文字使用強調色
- 例如：「產品發布」用霓虹綠，「政策監管」用賽博粉
- 連結樣式：
- 預設：電光藍，附底線
- 懸浮：顏色變亮，底線加粗
**動畫效果**：
- 頁面載入時：標題淡入+ 時間軸從上到下繪製動畫（0.8s）
- 滾動時：事件卡逐一淡入（stagger 效果，每個延遲0.1s）
- 懸浮時：卡片上浮+ 陰影擴大（transition: 0.3s ease）
### Step 4: 產生網頁內容
**目標**：呼叫generateWebpage 工具，產生符合《連線》風格的互動式簡報頁面。
**行動**：
- 將Step 1 提取的結構化資訊+ Step 3 的風格規範，整合為清晰的instruction
- 呼叫generateWebpage 工具，傳入下列參數：
- `instruction`：詳細描述頁面需求，包括：
- 頁面標題和副標題
- 時間軸佈局方式（垂直居中or 交錯）
- 每個事件的資料欄位（日期、標題、描述、標籤、連結）
- 完整的《連線》風格規範（色彩、字體、視覺元素、動畫）
- 互動需求（懸浮效果、滾動動畫、可選的篩選功能）
- 回應式要求
- `references`：如果使用者提供了@references，將其傳入作為資料來源
- 確保instruction 中明確說明：
- “使用《連線》雜誌風格：深色背景（#0D0D0D）、電光藍強調色（#00D9FF）、粗壯的Inter Black 標題字體”
- “時間軸採用垂直佈局，左側日期節點，右側事件卡”
- “每個事件卡包含：日期、標題、描述、分類標籤、來源連結”
- “懸浮時卡片邊框變為電光藍，微微上浮”
- “頁面載入時時間軸從上到下繪製，事件卡逐一淡入”
**品質標準**：
- 產生的網頁完全符合《連線》雜誌的視覺風格
- 所有事件資訊準確無誤，來源連結可點擊
- 互動流暢，動畫不卡頓
## 風格與呈現
### 《連線》雜誌風格詳細規範
**設計哲學**：\
《連線》雜誌的視覺語言強調「未來主義+ 極簡主義」的結合。它以大膽的色彩和幾何形狀創造科技感，同時保持訊息的清晰可讀。關鍵特徵是「高對比」和「強視覺層次」——重要訊息必須一眼就能抓住注意力。
**色彩使用原則**：
- **背景**：深色調營造專業感和沈浸感，避免純黑（#000000），使用略帶灰度的深色（#0D0D0D）
- **強調色**：使用霓虹色系（藍、綠、粉）作為視覺焦點，但不過度使用，保持克制
- **文字**：主文字用純白，次要文字用銀灰，確保可讀性
- **分層**：用色彩區分資訊層級（標題> 正文> 註釋）
**排版原則**：
- **字體比較**：標題用粗壯的無襯線字體（Inter Black），正文用常規字重（Inter Regular），資料用等寬字體（JetBrains Mono）
- **字號層級**：標題48-64px，副標題24-32px，正文16-18px，註12-14px
- **行距**：內文行距1.6-1.8，確保舒適閱讀
- **對齊**：標題居中或左對齊，內文左對齊，資料右對齊
**佈局原則**：
- **網格系統**：使用12 列網格，但允許打破常規（如時間軸偏移、卡片交錯）
- **留白**：大量留白營造呼吸感，卡片之間間距至少40px
- **視覺焦點**：以尺寸、顏色、位置引導視線流動（從上到下，由左至右）
**互動原則**：
- **回饋即時**：懸浮、點擊必須有明確的視覺回饋（色彩變化、位移、陰影）
- **動畫自然**：使用ease-out 緩動函數，持續時間0.2-0.4s
- **漸進增強**：核心內容無需JavaScript 也能顯示，互動是錦上添花
**參考範例**：
- WIRED 官網的文章頁面佈局
- Stripe 官網的商品頁面（深色模式）
- Apple 的產品發布頁面（時間軸部分）
### Step 5: 驗證與最佳化
**目標**：檢查產生的網頁是否符合要求，必要時進行調整。
**行動**：
- 預覽產生的網頁，逐項檢查：
- **視覺風格**：背景色、強調色、字體是否符合《連線》風格
- **資訊完整性**：每個事件的日期、標題、描述、來源是否齊全
- **互動體驗**：懸浮效果、滾動動畫是否正常運作
- **響應式佈局**：在不同裝置尺寸下是否顯示正常
- **連結可用性**：點擊來源連結是否能正確跳轉
- 如果發現問題，記錄具體的調整需求：
- 例如：“時間軸顏色不夠亮，需要調整為#00D9FF”
- 例如：“移動端卡內邊距過大，需要減小到16px”
- 若需要調整，再次呼叫generateWebpage 工具，傳入`webpage_id` 參數進行編輯
**品質標準**：
- 視覺風格100% 符合《連線》雜誌美學
- 所有互動功能正常運作
- 無明顯的佈局錯誤或資訊遺漏
### 品質標準
- **完整性**：每個事件都包含日期、標題、描述、來源
- **準確性**：所有資訊與原始資料一致，連結可訪問
- **可追溯性**：每個事件都有明確的來源標註
- **視覺一致性**：所有元素嚴格遵循《連線》風格規範
- **互動流暢性**：動畫不卡頓，反應速度快（<100ms）
- **可訪問性**：文字對比符合WCAG AA 標準，行動裝置可正常使用
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
