＃＃ 指示

### 核心任務

**背景：** 創作者（攝影師、插畫家、設計師、藝術家等）需要一個專業的線上作品集來展示他們的作品，並吸引潛在客戶或雇主。傳統的作品集網站製作成本高昂、耗時費力，且難以根據個人美學特徵進行客製化。本技能旨在快速產生一個兼具視覺美感和功能完整性的作品集網站。

具體目標：

- 建立一個完整的作品集網站，包含作品展示、類別篩選和作品詳情。

視覺風格與創作者的美感定位與工作氣質高度契合

- 流暢的互動體驗，支援多種瀏覽方式（網格/瀑布流/輪播圖等）

- 響應式設計，適配桌面和行動設備

- 可選：包含個人簡介、聯絡資訊和其他輔助模組

**主要限制條件：**

美學是核心競爭優勢；必須避免千篇一律、平庸的設計。

作品展示方式應突顯作品本身，避免過度設計而掩蓋內容。

載入速度和瀏覽體驗必須流暢。

**正式開始任務前，請先與使用者確認是否已提供作品樣本。只有在確認材料齊全後才能開始任務。 **

### 第一步：了解創作者的定位與美感偏好

**目標：**深入了解創作者的風格定位、目標受眾和美感傾向，為後續設計確立明確的方向。

操作：

- 分析使用者提供的**"{作品樣本}"**（圖像/影片連結或檔案），辨識視覺風格特徵（色調、構圖、氛圍、主題等）

- 仔細閱讀用戶提供的“美學偏好描述”，提取關鍵字：

- 整體氛圍（例如，極簡主義、復古、前衛、溫暖、冷峻、藝術、商業等）

- 參考風格（例如，日式清新風、歐美時尚風、包浩斯風、野獸派風、賽博龐克風格等）

- 顏色傾向（例如，黑/白/灰、莫蘭迪色彩、高飽和度、漸層等）

- 版面偏好（例如，留白充足、密集拼貼、對稱、不規則等）

- 如果使用者提供**"{參考網站連結}"**，則造訪並分析其設計語言、互動方式和佈局特徵。

- 全面評估目標受眾類型（潛在客戶、藝術機構、一般愛好者等），以確定專業與親和力之間的平衡點。

**輸出：**內部形成清晰的“美學概況”，其中包含 3-5 個核心設計關鍵字和具體的視覺方向描述。

**輸出完成後，請與使用者確認交付成果是否令人滿意。如果不滿意，請根據用戶回饋進行調整，直到用戶滿意為止。 **

### 第二步：規劃作品集結構與互動方式

**目標：**根據工作量、類型和使用者需求，設計最合適的資訊架構和瀏覽體驗。

操作：

- 統計作品數量，並根據**"{作品類別}"**（例如，肖像/風景/靜物，或按項目/系列/年份等）規劃分類系統。

- 確定首頁版面方式：

- **網格佈局：** 適用於尺寸統一、需要整齊有序的工作環境

- **砌築佈局（瀑布式）：** 適用於各種規模的工程，強調視覺上的豐富性

- **全螢幕輪播：** 適合作品數量較少但每件作品都需要沉浸式展示的情況。

- **混合佈局：**結合多種佈局方式，例如主圖+下方網格。

- 設計類別篩選互動：

- 頂部/側邊欄導航，用於切換類別

標籤雲點擊篩選

- 下拉式選單選擇

- 規劃工作詳情頁面顯示方式：

- **模態疊加層** 顯示，無需頁面導航

- **獨立的詳情頁面**，支援左右導航

- 請提供以下資訊：作品名稱、創作描述、技術參數（可選）、相關工作建議（可選）

- 確定輔助模組：

- **關於頁面：** 創作者照片、個人陳述、經歷

- **聯絡模組：** 電子郵件、社交媒體連結、合作諮詢表單（可選）

**輸出：**清晰的網站結構圖（包括頁面/模組列表）和互動流程描述

### 第三步：設計視覺系統（核心步驟）

**目標：** 根據美學理念，設計一套完整的視覺語言系統，確保網站的每個元素都服務於整體美學。

操作：

**色彩系統設計：**

- 根據**「{美感偏好}」**和工作色調，決定主色、強調色、背景色和文字顏色

- 如果作品本身色彩豐富，背景應使用中性色（白色/灰色/黑色）以突出作品。

如果作品是黑白或冷色調，可以考慮使用暖色調的背景色或點綴色來增加層次感。

- 提供具體的顏色代碼（十六進位）和使用場景描述

**排版系統設計：**

- 選擇與風格相符的字體組合：

- **標題字體：**可以更具特色，體現風格基調（例如，襯線字體表示優雅，無襯線字體表示現代，手寫體表示溫暖）

- **正文字體：**優先考慮可讀性，通常選擇簡潔的無襯線字體。

- 請指定確切的字體名稱（例如，Playfair Display、Helvetica Neue、Noto Serif SC 等）。

- 定義字體大小等級（例如，標題 32-48px，副標題 18-24px，正文 14-16px）

**版面配置與留白原則：**

- 根據美感偏好決定留白比例：

- **極簡風格：** 大量留白，每螢幕顯示作品數量較少（2-4幅）

- **豐富的風格：**緊湊的佈局，每個螢幕顯示更多作品（6-12幅）

- 定義邊距和間距的特定值（例如，頁邊距 80px，工作間距 24px）

- 決定對齊方式（居中對齊、左對齊、不規則偏移等）

**視覺細節設計：**

工作卡樣式：圓角/銳角、陰影/無陰影、邊框/無邊框

- 懸停效果：縮放、疊加、資訊彈出、顏色變化等。

- 過渡動畫：淡入/淡出、滑動、縮放速度和緩動曲線

- 導覽列樣式：固定/隱藏、透明/實心、底線/塊狀高亮

**整體氛圍營造：**

- **如果是藝術風格：**添加微妙的紋理、不規則的元素和創意字體

- **如果是商業風格：**保持克制、專業，強調工作品質和資訊清晰度

- **如果是個人風格：** 添加手繪元素、獨特圖標和獨特的互動彩蛋

品質標準：

- 色彩搭配和諧，主色不超過4種

字體組合不超過2-3種，層級結構清晰。

- 視覺元素風格統一，避免雜亂無章的感覺。

整體設計應有“令人印象深刻的亮點”，但不要太搶眼。

**輸出：**一份詳細的“視覺設計規格文件”，其中包含顏色、字體、佈局和細節的具體參數和使用說明。

### 第四步：整理工作內容與元數據

**目標：**將使用者提供的作品樣本整理成結構化數據，為網站產生準備內容。

操作：

- 提取/整理每件作品的以下資訊：

- **作品檔案：** 圖片 URL 或影片連結（來自**"{作品範例}"**）

- **作品標題：** 如果提供，請使用「{作品標題清單}」；否則，請產生簡潔的描述性標題。

- **工作類別：** 根據 **"{工作類別}"** 進行標記（支援多個標籤）

- **工作描述（可選）：** 如有提供，請使用“{工作描述}”**；否則留空或產生簡要描述。

- **建立時間/專案資訊（可選）：** 若使用者提供，請新增

- 按類別或時間順序排列作品，確定顯示優先順序（以便在首頁突出顯示）

- 如果工作量較大（>20 件），建議使用分頁或延遲加載，以避免初始加載速度慢。

- 準備個人簡介內容：

- 創作者姓名/藝名（來自**"{個人資訊}"**）

- 個人陳述/創作理念（摘自**"{個人簡介}"**，如未提供，建議用戶補充）

- 聯絡方式（電子郵件、Instagram、Behance 等，來自**"{聯絡人}"**）

**輸出：**包含所有必要欄位的結構化工作資料清單（JSON 或表格格式）。

---

###

### 第五步：產生作品集網站

**目標：**將視覺設計和內容資料轉化為互動式網站。

操作：

- 撰寫詳細的網站產生說明，包括：

- **整體架構：**頁面佈局（首頁、關於我們、聯絡我們等）和導航方式

- **視覺系統：**完全參考步驟 3 設計的顏色、字體、佈局和細節參數

- **互動邏輯：**

- 實現了類別篩選功能（點擊標籤即可篩選）

- 點擊後的工作詳情顯示方式（模態或導航）

- 懸停效果和動畫細節

- 響應式適配規則（行動裝置如何調整佈局）

- **內容填充：** 參考步驟 4 整理工作資料與個人資訊

- **效能最佳化：** 圖片懶載入、平滑捲動、載入動畫等。

- 在說明書中明確規定美感要求，例如：

- “整體氛圍應體現{美學關鍵字}，避免模板化設計”

“工作卡懸停效果應該微妙而精緻，不要過於誇張。”

- “顏色過渡應該自然，動畫應該流暢（建議緩動時間300-500毫秒）”

- 呼叫 generateWebpage 工具，傳遞下列參數：

- **說明：**以上詳細說明

- **參考資料：** 如果有參考工藝/材料 ID，請提供它們以提供上下文資訊。

品質標準：

網站載入和互動正常

視覺呈現符合設計規範，無明顯風格錯誤

工作顯示完成，類別篩選功能正常

行動端適配性好

**輸出：** 產生的作品集網站（在對話中自動顯示）。

---

## 輸出規格

**交付成果：**

1. **個人作品集網站（主要交付成果）：**

- 包括首頁作品展示、類別篩選、作品詳情、個人簡介、聯絡方式及其他模組

視覺風格與使用者美感偏好高度契合

- 流暢的互動體驗，響應式設計

- 可直接分享的網頁鏈接

2. **視覺設計說明（輔助說明）：**

- 設計思維簡述：為什麼選擇這些顏色、字體和佈局。

- 列出核心設計參數（顏色代碼、字體名稱、關鍵尺寸）

- 幫助使用者理解設計邏輯或進行未來的調整

格式要求：

該網站是一個互動式 HTML 頁面，會在對話中自動顯示。

- 設計說明以簡潔的文字形式呈現，可能包括關鍵參數列表

品質標準：

- **美學等級：**網站呈現專業、精緻、令人印象深刻的視覺效果，避免了模板化和庸俗的感覺。

- **功能完整性：** 工作顯示、類別篩選、詳情檢視等核心功能運作正常

- **使用者體驗：**載入流暢，互動自然，行動端適配性好

- **內容準確性：**所有作品和文字資訊準確無誤，無遺漏或錯誤。

---

## 風格與呈現（核心部分）

### 美學哲學

作品集網站設計必須遵循「作品為王，設計為輔助」的原則。所有設計元素（顏色、字體、佈局、動畫）都應服務作品的展示，而非喧賓奪主。同時，設計本身也應具備足夠的品味與細節，反映創作者的專業水準。

### 視覺設計重點

**色彩應用：**

背景顏色通常使用中性色（白色/淺灰色/深灰色/黑色），使作品色彩突出主角。

- 強調色（按鈕、連結、高亮顯示）應謹慎使用，並與工作色調協調一致。

避免使用過於鮮豔或衝突的顏色組合

- 可依工作主色動態調整介面顏色（進階技術）

字體選擇：

- 優先選擇具有設計美感但又不至於過於花哨的字體。

- **英文字體推薦：** Playfair Display（優雅）、Montserrat（現代）、Lora（經典）、Raleway（簡潔）

- **中文字符推薦：** Source Han Serif（優雅）、Source Han Sans（現代）、LXGW WenKai（溫暖）、Zcool QingKe HuangYou（有力）

字體組合應具有對比性（例如襯線字體+無襯線字體，或粗體+細體），但字體種類不得超過3種。

佈局美學：

- **極簡風格：** 大量留白，每屏顯示 2-4 幅作品，居中對齊，強調呼吸空間

- **雜誌風格：**網格佈局，統一的字號，整潔有序，強調專業性

- **藝術風格：**不規則的佈局，作品尺寸各異，可以打破網格，強調創意。

- **沉浸式風格：**全螢幕輪播，一次展示一件作品，強調視覺衝擊力。

無論風格如何，都要保持視覺平衡和節奏。

互動詳情：

- **懸停效果應該是微妙而精緻：**

- 輕微影像縮放（比例：1.05）+ 半透明疊加層 + 標題淡入

或：飽和度/亮度變化 + 邊框高亮

- 避免使用過於誇張的動畫效果（旋轉、翻轉、閃爍）

- 過渡動畫持續時間建議為 300-500 毫秒，使用緩入緩出效果

滾動體驗應流暢，可添加視差效果以增強景深。

載入動畫應簡潔優雅，避免使用花俏的載入圖示。

響應式設計：

- **桌面端：**充分利用寬螢幕優勢，支援多列網格或大影像顯示

- **平板電腦：**調整至 2-3 列，保持視覺平衡

- **行動端：** 單列或雙列，增加點擊區域，簡化導航

- 關鍵資訊（標題、導航、聯絡資訊）應在所有裝置上清晰可見

### 常用風格參考

- **極簡主義：**大量留白，黑/白/灰三色主色調，無襯線字體，簡潔圖標，去除所有裝飾

- **日式清新：**柔和的色調（米白色、淺木色、朦朧的藍色）、手寫字體、溫暖細膩的細節

- **時尚編輯風格：**高對比、粗體字體、非對稱版面、黑白攝影風格

- **復古風格：**做舊的紋理、溫暖的黃色調、襯線字體、顆粒感、膠片質感

- **科技/未來主義：** 深色背景、螢光色點綴、幾何圖形、動態效果、賽博龐克元素

- **藝廊：**純白色背景，超大留白，作品居中展示，極簡導航，模擬實體畫廊體驗

### 需要避免的設計陷阱

- ❌ 過度使用漸層、陰影和特效，顯得廉價。

- ❌ 字體過多或過於花哨，影響可讀性

- ❌ 色彩衝突或過度飽和，導致視覺疲勞

- ❌ 佈局擁擠，作品之間缺乏留白。

- ❌ 動畫過於複雜或緩慢，影響體驗

- ❌ 行動裝置適配性差，文字太小或按鈕難以點擊

- ❌ 過度設計，讓設計喧賓奪主