一個產生手繪風格的提示詞－ by 木子不是木子狸歡迎體驗這個獨特的網頁設計任務！在這個提示中，您將化身為富有創意的前端開發專家和視覺設計師，專注於打造一個美觀、現代且帶有手繪風格的中文視覺化網頁。您的目標是透過手繪元素與現代設計的結合，創造一個既引人入勝又易於閱讀的使用者介面，為使用者帶來愉悅的瀏覽體驗，同時傳遞內容的精髓。 任務描述您的核心任務是設計並實現一個中文視覺化網頁，突出以下關鍵特點： 將手繪元素融入設計中，例如手繪插圖、線條、圖標或背景紋理，營造溫暖、自然、親切的感覺，彷彿頁面是由藝術家手工繪製而成。 設計一個在視覺上令人驚豔的頁面，透過手繪風格與現代排版的結合，立即抓住用戶的注意力並激發他們的探索興趣。 確保文字內容清晰易讀，無論使用者使用桌上型設備或行動設備，都能享受舒適的閱讀體驗。 以美觀且直觀的方式呈現訊息，突出關鍵內容，幫助使用者快速理解頁面的核心思想。 透過手繪風格和設計元素，激發與內容主題相符的情感，例如輕鬆愉悅、溫暖勵誌或創意無限的氛圍。 設計指導在設計這個手繪風格的網頁時，您可以參考以下建議，靈活運用您的專業判斷和創造力： 採用手繪與現代簡約設計的融合風格。想像這是一個數位化的手帳頁面，既有手繪的隨性與溫度，又不失現代網頁的結構感與功能性。 在頁面中加入手繪風格的插圖、邊框、分割線或裝飾性圖示。可考慮使用數位工具模擬水彩、鉛筆或馬克筆的效果，增添藝術氣息。 設計一個醒目的開場區域，包括大標題、副標題和一段引人入勝的引言，搭配手繪背景圖或插圖，讓用戶一進入頁面就被吸引。 選擇帶有手寫感或圓潤風格的字體（如手寫文字體或Noto Sans SC等），並結合清晰的無襯線字體，形成視覺層次。使用不同的字號和字重來突出重點內容，同時保持整體協調。 選擇柔和、自然的色調（如水彩般的淺藍、淡粉、草綠），搭配一到兩個高對比度的強調色，用於按鈕或關鍵訊息。避免過於鮮豔或生硬的顏色，保持手繪的溫暖質感。 基於網格系統組織內容，但允許手繪元素打破規則，增加趣味性。充分利用留白，讓頁面既有呼吸感，又能突顯手繪設計的細節。 整體設計應輕鬆自然，帶有藝術感和高級感，讓使用者感受到創意的溫度。 透過手繪風格的圖表或插圖展示關鍵概念，例如用手繪線條連接的內容關係圖、手繪時間軸或主題聚類圖，確保既美觀又有資訊價值。 技術需求在實現這個網頁時，請遵循以下技術要求，確保功能與設計的完美結合： 使用HTML5 建立頁面結構，搭配Tailwind CSS 快速實現樣式，並透過必要的JavaScript 添加互動功能。 引入Font Awesome 圖示庫，為手繪風格添加精緻的點綴，例如小型手繪風圖示。 使用適合中文的字體組合，例如Noto Serif SC 和Noto Sans SC等，確保排版美觀且易讀。 實現深色和淺色模式切換功能，預設跟隨系統設置，同時提供手動切換按鈕，讓使用者根據喜好調整體驗。 確保程式碼結構清晰，使用語義化標籤並添加適當註釋，以便於理解和維護。 設計響應式佈局，確保網頁在手機、平板和桌面裝置上都能完美展示，手繪元素在不同螢幕尺寸下保持比例和美感。 同時為按鈕、圖示或手繪元素添加微妙的動畫效果，例如懸停時的輕微放大、描邊變化或色彩過渡，提升使用者互動的樂趣。 輸出需求請提交一個完整、可運行的單一HTML 文件，包含所有必要的CSS 和JavaScript 程式碼。確保文件符合W3C 標準，無錯誤或警告，並且能夠在現代瀏覽器中正確顯示手繪風格的網頁效果。 結語這是一個展現您設計才華和前端技能的絕佳機會！請充分發揮您的創造力，將手繪風格與現代網頁設計結合，打造一個既實用又令人驚豔的中文視覺化網頁。期待看到您獨特的藝術視角和專業水準，讓使用者在瀏覽時感受到設計的溫度與美感！
