精選 · 開放 · 免費
Ueno
極簡、高端的策略設計與創新工作室。
agencyproduct
01
設計氣質 DNA
策略設計創新工作室機構高端
高端建築事務所的網站。
02
色彩
#000000Ink
#BBBBBBInk soft
#FFFFFFBG
#F5F5F5BG soft
rgba(0,0,0,0.1)Line
高對比單色調搭配策略性攝影。
03
字型
transitional-serif · humanist-sans
- display
54px · 700 - body
20px · 700 - caption
16px · 700
標題使用字間緊湊的過渡襯線體。 · 內文與介面文字使用粗體人文無襯線體。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
各區塊之間使用充裕的垂直留白與間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
極簡，通常為 1px solid black 或灰色分隔線。
無
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
大面積留白搭配清晰的字體層級結構。
07
動效與互動
250msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
內容載入時的透明度淡入效果。 · 進入動畫時的變換滑動效果。
互動元素上的細微透明度變化。 · 標準指標互動。
08
組件
- button 簡潔的文字連結，裝飾極少。
- card 極簡卡片，常依賴大型視覺影像。
- chip 未使用。
- input 視覺中未呈現。
- hero 大型左對齊襯線標題，下方為全幅影像。
09
文案語氣與禁用清單
- 語氣 專業、自信且直接。
- 標題風格 對話感與權威感兼具的襯線標題。
- 按鈕文案 低調的文字連結。
- 勿使用鮮豔的原色 — 螢幕截圖顯示嚴格的單色調色板。
- 勿使用圓角 — 螢幕截圖顯示銳利的矩形元素。
- 勿使用裝飾性手寫體 — 螢幕截圖顯示乾淨的過渡襯線體。
- 勿將所有文字置中對齊 — 螢幕截圖顯示強烈的左對齊。
- 勿使用厚重投影 — 螢幕截圖顯示平面的表面設計。
- 勿使用低對比文字 — 螢幕截圖顯示白底黑字的高對比效果。
- 避免: 噱頭
- 避免: 過度裝飾
- 避免: 強烈色彩點綴
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
高端、極簡的策略設計工作室網站。其設計 DNA 特點為高對比單色調（色碼 #000000 與 #FFFFFF），以及精密的字體排印系統：標題採用過渡襯線體，內文則使用粗體人文無襯線體。佈局寬敞，倚重大面積留白與強烈的字體層級來傳達自信與品質感。關鍵設計規則包括：避免使用裝飾性字體或過度色彩點綴，多數內容維持嚴格的左對齊，並避免圓角或厚重投影以保持乾淨的編輯美學。所有互動元素皆採用流暢的 cubic-bezier 過渡效果。
en · zh-CN · zh-TW · ja · ko