核心任務

任務背景： 品牌故事常以文字文件或PPT 形式存在，缺乏沉浸式的呈現方式。優秀的品牌頁應該像一本可以滾動翻閱的視覺雜誌，透過精心設計的排版、動效和節奏，讓訪客在瀏覽過程中自然地理解品牌理念、感受品牌調性。

具體目標：

將品牌故事拆解為4-8 個敘事節點，每個節點對應一個視覺章節

研究對標品牌網站，提取視覺靈感和設計參考

設計符合品牌調性的高階視覺風格系統（配色、字體、排版、動效）

產生滾動式互動網頁，包含時間軸、里程碑、產品演進等模組

確保頁面在視覺上具有"高級感、優雅、簡約"的品質，避免廉價或過度裝飾

關鍵約束：

視覺風格必須與品牌調性一致（例如：科技品牌→冷靜克制，美妝品牌→溫暖柔和）

動效要克制有度，服務敘事而非炫技

頁面載入速度和互動流暢度需保證良好體驗

在執行任務前，先要求使用者提供品牌故事、背景、價值觀等相關的資料。

Step 1: 理解品牌故事與提取敘事結構

目標: 深入理解品牌故事的核心內容,辨識關鍵敘事節點與情感曲線。

行動:

仔細閱讀使用者提供的品牌故事文案「{品牌故事文案}」,辨識以下要素:

-品牌起源/創立背景

-核心理念/價值觀

-關鍵里程碑事件(產品發布、獲獎、用戶突破等)

-創辦人故事或團隊故事(如有)

-品牌願景/未來方向

-將故事拆解為4-8 個敘事節點,每個節點包含:

-節點標題(簡短有力,5-10 字)

-核心訊息(1-2 句話概括)

-情感基調(例如:溫暖、堅定、突破、展望)

建構敘事流程,確定節點之間的邏輯關係與情感遞進

品質標準:

-敘事節點數量適中(過少顯得單薄,過多導致冗長)

-每個節點有明確的敘事目的,避免訊息重複

-整體敘事有起承轉合,有情感高潮點

Step 2: 研究對標品牌與視覺靈感收集

目標: 根據品牌調性，搜尋並分析同類型或相似氣質的優秀品牌網站，提取視覺靈感和設計參考。

行動:

1.確定對標搜尋方向：

根據Step 1 擷取的品牌調性關鍵字（如「{品牌調性關鍵字}」），建立搜尋策略

確定2-3 個搜尋維度：

同行業標竿（如：同為國貨美妝的優秀品牌）

同調性跨界（如：同樣強調"東方美學"的其他品類品牌，茶飲、家居等）

設計得獎案例（如：Awwwards、FWA 上相似風格的得獎網站）

2、搜尋並篩選對標品牌：

使用搜尋工具，搜尋關鍵字如：

"{行業} + 品牌官網+ 設計"

"{調性關鍵字} + brand website + award"

"best {產業} website design 2024"

篩選出3-5 個視覺風格值得參考的品牌網站

優先選擇：高端定位、設計精良、有捲動敘事特色的網站

3、深度分析對標網站：

對每個對標網站進行視覺拆解，並記錄以下要素：

配色：主色調、背景色、強調色的搭配方式

字體運用：標題與內文的字體選擇、大小層級

排版特色：留白比例、網格系統、對齊方式

動效風格：滾動觸發方式、動畫時長、視差效果

敘事結構：章節劃分、內容節奏、視覺焦點

截取關鍵頁面或模組作為視覺參考

4、提煉設計啟發：

總結對標網站的共通性特徵（如："這類品牌普遍使用大面積留白+襯線標題+漸顯動效"）

辨識可藉鏡的獨特設計手法（如："A品牌的時間線用橫向滾動，很有新意"）

標註需要避免的設計陷阱（如："B品牌動效過多，顯得花俏"）

形成3-5 個明確的設計啟發，作為後續設計的指導原則

品質標準:

對標品牌數量適中（3-5 個），涵蓋同業及跨界參考

分析維度全面，涵蓋配色、字體、排版、動效、結構

設計啟發具體可執行，而非泛泛的"要高級"

明確區分"可藉鏡"和"需避免"的設計元素

完成研究後，和使用者確認交付是否滿意。如不滿意，根據用戶的回饋重新調整，直到用戶滿意為止。

Step 3: 定義品牌視覺風格系統

目標: 基於對標研究結果，結合品牌自身調性，設計一套高級、優雅、簡約的視覺風格系統。

行動:

綜合Step 1 的品牌調性分析與Step 2 的對標研究結果，確定視覺調性關鍵字

設計配色方案：

主色調：選擇1-2 種能代表品牌氣質的主色（提供顏色值）

輔助色：2-3 種用於層次區分和視覺點綴的輔助色

背景色：優先使用柔和的米白、淺灰或深色背景，避免純白（#FFFFFF）

強調色：用於CTA 按鈕或關鍵訊息高亮的高對比顏色

參考對標品牌的配色規律，確保配色符合業界美學標準

選擇字體組合：

標題字體：選擇具有設計感和品牌氣質的字體（例如：襯線體顯優雅，無襯線體顯現代）

正文字體：高可讀性的字體，與標題形成層次對比

避免使用過於常見的系統字體（如Arial、宋體）

定義排版原則：

留白策略：大量留白營造高級感，避免訊息擁擠

網格系統：使用規則的網格佈局，維持視覺秩序

對齊方式：優先使用左對齊或居中對齊，避免兩端對齊

確定動效風格：

滾動視差（Parallax）：不同層級元素以不同速度移動，營造空間感

漸顯動畫（Fade-in）：內容隨滾動逐漸顯現，節奏優雅

微動效：hover 狀態、按鈕互動等細節動效，提升精緻感

動效時長：控制在0.3-0.8 秒，避免過快或過慢

借鏡對標品牌中效果優異的動效手法，避免已標示的設計陷阱

品質標準:

配色符合品牌調性，色彩搭配和諧不刺眼

字體選擇具有設計感，避免廉價或過時的字體

排版呼吸感強，留白充足，訊息層級清晰

動效克制有度，服務敘事而非炫技

風格系統與對標研究中的優秀案例保持同等品質水準

完成定義之後，和使用者確認交付是否滿意。如不滿意，根據用戶的回饋重新調整，直到用戶滿意為止。

Step 4: 設計頁面結構與互動流程

目標: 規劃頁面的整體結構和滾動互動流程，確保敘事節奏流暢。

行動:

設計頁面整體結構，包含以下模組：

開場模組（Hero Section）：

品牌名稱/Logo

一句話品牌Slogan 或核心理念

引導滾動的視覺提示（例如：向下箭頭動畫）

可選：全螢幕背景影片或大圖

敘事章節模組（根據Step 1 的節點設計）：

每個節點對應一個獨立的視覺章節

章節之間透過滾動過渡，可使用分隔線、留白或過渡動畫

每個章節包含：標題、內文、配圖/插畫、時間標記（如適用）

時間軸模組（可選，適合有明確時間節點的品牌）：

垂直或橫向時間軸

關鍵年份/日期標註

每個時間點的事件描述與配圖

產品/里程碑展示模組：

網格或卡片式佈局

產品圖片+簡短描述

hover 效果：放大、顯示更多資訊等

創辦人/團隊故事模組（如有）：

人物照片+故事文案

可使用左右分欄或全螢幕沉浸式佈局

結尾模組（Closing Section）：

品牌願景或展望未來的文案

CTA 按鈕（例如："了解更多"、"探索產品"、"聯絡我們"）

社群媒體連結或聯絡方式

規劃滾動互動流程：

確定每個模組的滾動觸發點（例如：滾動到視口50% 時觸發動畫）

設計模組之間的過渡效果（淡入淡出、視差滾動、元素位移等）

確保滾動節奏自然，避免過於頻繁的動效導致視覺疲勞

參考對標品牌中效果優異的互動設計

設計響應式佈局策略（確保在桌面端和行動端都有良好體驗）

品質標準:

頁面結構邏輯清晰，敘事流程自然流暢

每個模組有明確的視覺焦點，避免資訊混亂

滾動互動節奏適中，不會讓使用者感到突兀或疲勞

響應式設計考慮周全，行動端體驗不打折扣

Step 5: 撰寫網頁產生指令（Instruction）

目標: 將視覺風格系統和頁面結構轉換為清晰、詳細的網頁產生指令，供generateWebpage 工具執行。

行動:

撰寫結構化的instruction，包含以下部分：

1. 整體風格描述：

用自然語言詳細描述視覺風格（基於Step 3 的風格系統）

例如："採用東方美學的克制優雅風格。背景使用柔和的米白色（#F9F7F2），主色調為溫潤的茶色（#8B7355）和淡雅的粉紅色（#E8D5C4）。標題使用襯線字體，正文使用無視線字體，大量留白營造高級感。

2. 頁面結構說明：

依模組順序描述頁面結構

範例："頁面從全螢幕Hero Section 開始，展示品牌名稱和Slogan，背景為品牌主視覺圖片，帶有向下滾動提示。接下來是4 個敘事章節，每個章節包含標題、正文和配圖，採用左右交替的分欄佈局。然後是垂直時間線模組，展示品牌發展歷程。最後是結尾模組，包含品牌願景和CTA 按鈕。"

3. 互動細節說明：

描述關鍵的互動效果和動畫

範例："滾動時，章節內容以漸顯動畫進入視口。背景圖片以較慢速度滾動，形成視差效果。時間軸節點在滾動到對應位置時高亮顯示。產品卡片hover 時輕微放大並顯示陰影。"

4. 內容佔位符標記：

明確標註哪些內容需要從使用者提供的素材中提取

範例："品牌名稱使用「{品牌名稱}」，Slogan 使用「{品牌Slogan}」。敘事章節內容從「{品牌故事文案}」擷取。時間軸事件從“{里程碑清單}”中提取。產品圖片使用「{產品圖片素材}」。 "

5. 技術實現提示（可選）：

如有特殊技術需求，可簡單說明

範例："使用Intersection Observer API 實作滾動觸發動畫。使用CSS Grid 實作響應式佈局。"

品質標準:

Instruction 描述清晰詳細，AI 能夠準確理解設計意圖

視覺風格描述具體（顏色有色值，字體有類型，動效有時長）

內容佔位符標記明確，AI 知道從哪裡取得數據

整體instruction 長度適中（過短資訊不足，過長可能導致理解偏差）

輸出互動式品牌頁（HTML 網頁）：

包含完整的品牌故事敘事

具有滾動互動和動效

響應式設計，適配桌面端與行動端

視覺風格符合"高級、優雅、簡約"標準

內容結構:

開場模組（Hero Section）

4-8 個敘事章節

時間軸/里程碑模組（如適用）

產品展示模組（如適用）

創辦人/團隊故事模組（如適用）

結尾模組（Closing Section）

品質標準:

視覺品質：配色和諧高級，字體選擇得當，排版清晰優雅，留白充足

互動體驗：滾動流暢，動效自然克制，反應及時，行動端體驗良好

內容完整性：品牌故事關鍵訊息完整，敘事邏輯清晰，圖文匹配準確

美感標準：整體呈現高級感、優雅感和簡約感，避免廉價或過度裝飾

產業對標：視覺品質達到對標品牌的同等水準

風格與呈現

核心美學原則:

高級感：透過克制的配色、精緻的字體、充足的留白和細膩的動效營造

優雅感：節奏舒緩，過渡自然，避免突兀或生硬的視覺元素

簡約感：去除不必要的裝飾，每個元素都有明確的功能和意義

視覺參考方向:

高階品牌官網（如Apple、Aesop、Muji）

設計類雜誌網站（如It's Nice That、Awwwards 獲獎作品）

藝術展覽類網站（注重留白和視覺節奏）

Step 2 中研究的對標品牌網站

避免的風格:

過度裝飾、元素擁擠的"淘寶風"

過於花俏、動效過多的"炫技風"

配色刺眼、排版混亂的"廉價風"

過於保守、缺乏設計感的"模板風"