精選 · 開放 · 免費

Xn Smon Vpa

一個極簡的工作室作品集，透過大膽的字體排印和柔和色彩強調，突顯計算設計。

01

設計氣質 DNA

在純白的美術館牆上，展示精心挑選的數位創作。

02

色彩

高對比的黑與白，點綴著柔和的粉彩與沈穩的暖色調。

03

字型

humanist-sans

• display172px · 400
• heading66px · 400
• body31px · 400

所有主要標題與內文均使用 Tex Gyre Heros。 · 僅將襯線字體保留給品牌標誌。 · 大型標題保持緊密的負字距。

04

間距

以 4px 為基礎的固定比例，各區塊間保持寬裕的間距。

05

表面 (圓角 / 陰影 / 邊線)

僅使用極簡邊框，以 2px 的頂部邊框分隔列表項目。

06

版面

全寬區塊，作品集列表中的每一行都以明顯的頂部邊框分隔。

07

動效與互動

互動元素平滑的 0.2s 顏色過渡 · 點擊時細微的 0.1s 變換偏移 · 展開內容時 0.5s 的高度動畫

文字元素在 0.2s 內進行顏色過渡。 · 細微的 0.1s 縮放變換效果。

08

組件

• button 大型膠囊形互動區域，採用全圓角（999px radius），作為主要的類別切換器。
• card 簡單的頂部邊框列表項目，包含索引、標題和年份欄位。
• hero 巨大的字體排印主視覺區域，包含堆疊的膠囊形元素，承載超大文字。

09

文案語氣與禁用清單

• 語氣 精緻、極簡且專業。
• 標題風格 粗體、緊湊字距、小寫或首字母大寫、極大比例。
• 按鈕文案 極簡文字，依賴大型互動區域而非傳統按鈕樣式。

• 不要使用生硬的邊框——截圖顯示僅有極簡的 2px 頂部邊框。
• 不要使用陰影效果——截圖顯示完全平坦的表面。
• 不要使用小按鈕尺寸——截圖顯示巨大的全寬膠囊形。
• 不要使用置中的導覽——截圖顯示左對齊的網站名稱和右對齊的連結。
• 不要使用複雜的格線——截圖顯示嚴格的單欄線性列表。
• 不要使用粗體字重——截圖顯示統一的 400 字重字體排印。
• 避免: 繁雜的佈局
• 避免: 厚重的陰影
• 避免: 明亮的霓虹色彩
• 避免: 裝飾性圖示

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko