精選 · 開放 · 免費
Buzzusborne
一個將複雜問題轉化為簡潔、討人喜歡產品的個人創作者作品集。
PortfolioFriendlyCleanApp UIConsumer
01
設計氣質 DNA
創作者簡潔討人喜歡作品集
一位友善的在地創作者，展示其數位創作。
02
色彩
#2A394EInk
#FFFFFFBG
rgba(42, 57, 78, 1)Line
乾淨的白色畫布搭配深海軍藍字體，實現高對比度與可讀性。
03
字型
humanist-sans · geometric-sans
- display
46px · 500 - body
15px · 400
內文使用 Roboto，醒目的展示標題使用 Poetsen One。 · 保持寬裕的行高（內文為 1.6）以提升可讀性。 · 大型標題避免使用過緊的字距，以維持友善感受。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白，桌面版側邊內距為 150px，將注意力集中於中央內容。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 20px
pill · 999px
深海軍藍的 2px 實線邊框，用於細微的 UI 元素。
0 4px 20px rgba(42, 57, 78, 0.05)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中單欄佈局，各區塊之間有寬裕的垂直間距。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
元素進入視窗時，採用流暢的淡入與變形過渡效果。
互動元素有細微的透明度或色彩變化。 · 即時的視覺回饋，搭配輕微的縮放或色彩改變。
08
組件
- button 圓角膠囊按鈕，搭配深色實心背景與白色文字。
- card 圓角容器，採用柔和米色背景，展示專案截圖。
- hero 大型置中標題，搭配俏皮的臉書符號表情，後接一張專案展示卡片。
09
文案語氣與禁用清單
- 語氣 友善、平易近人且自信。
- 標題風格 第一人稱的對話式陳述，搭配俏皮的臉書符號表情。
- 按鈕文案 深色實心按鈕上搭配清晰、以行動為導向的文字。
- 不要使用生硬、冰冷的色盤——截圖顯示的是溫暖的白色背景搭配友善的深海軍藍文字。
- 不要在卡片上使用銳利的棱角——截圖顯示的是大型的 20px 圓角。
- 不要使用狹小、擁擠的字體排版——截圖顯示的是大型、易讀的 46px 展示字體。
- 不要使用複雜的多欄佈局——截圖顯示的是簡潔的單欄置中設計。
- 不要使用密集、文字量大的區塊——截圖顯示的是寬裕的留白與呼吸空間。
- 不要使用侵略性、企業化的語言——截圖顯示的是友善、第一人稱的對話語氣。
- 避免: 過度技術性的術語
- 避免: 侵略性的銷售語言
- 避免: 複雜的多詞語號召性用語
- 避免: 冰冷、企業化的語氣
- 避免: 全大寫的吼叫式標題
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個名為 Buzz 的創作者個人作品集網站。它將自己定位為一位友善、平易近人的創作者，致力於將複雜問題轉化為簡潔、討人喜歡的產品。關鍵十六進位色碼包括乾淨的白色背景（#FFFFFF）與深海軍藍文字（#2A394E）。字體類別包含展示用的 humanist-sans 與內文用的 geometric-sans，主要字體家族使用 Roboto。佈局為置中且寬裕，帶有充足的內距。重要禁忌：不要使用銳利的角（請用 20px 圓角），不要使用狹小擁擠的字體（請用大型 46px 標題），不要使用冰冷企業化的語言（請用友善的對話語氣）。設計強調留白、圓角元素與俏皮的臉書符號表情，以營造溫暖、友善的氛圍。
en · zh-CN · zh-TW · ja · ko