精選 · 開放 · 免費
Ryanstephen
透過簡潔的照片網格，展示數位、空間與流體介面設計的作品集。
PortfolioMobile UIExperimentalPhotographicStudio
01
設計氣質 DNA
產品設計師原型設計師空間介面流體介面Microsoft
一個展示實驗性介面作品的純淨數位畫廊
02
色彩
#000000Ink
#404040Ink soft
#ffffffBG
#8b8b94Muted
rgba(0,0,0,0.1)Line
嚴格的中性調色板，讓專案影像佔據主導地位
03
字型
humanist-sans
- body
12px · 400 - body-large
16px · 400
04
間距
4px
8px
16px
20px
24px
32px
40px
100px
充足的留白將個人簡介與圖片網格分隔開來
05
表面 (圓角 / 陰影 / 邊線)
sm · 10px
md · 10px
lg · 10px
pill · 999px
none
06
版面
1400container
3columns
24pxgutter
768 / 1024breakpoints
固定式左欄用於個人簡介，滾動式右欄用於圖片網格
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
transition: all 0.2s ease
圖片與連結上的指標游標 · 標準連結行為
08
組件
- button 純文字連結（Email、Twitter、LinkedIn）
- card 密集網格中的圓角照片縮圖
- hero 個人簡介文字區塊
09
文案語氣與禁用清單
- 語氣 專業、直接、低調
- 標題風格 簡潔的個人簡介聲明
- 按鈕文案 純文字連結
- 不要使用複雜版面——截圖顯示的是簡單的固定側邊欄加上滾動網格
- 不要添加裝飾性陰影——截圖顯示圖片無投影效果
- 不要在容器上使用投影——截圖顯示的是平面化圖片卡片
- 不要使用彩色點綴——截圖顯示的是純粹的中性黑/白/灰色調
- 不要使用裝飾性邊框——截圖顯示的是無邊框元素
- 不要使用複雜字體排印——截圖顯示的是使用兩種尺寸的簡潔無襯線字體
- 不要使用厚重背景色——截圖顯示的是純白（#ffffff）背景
- 避免: 行銷術語
- 避免: 流行語
- 避免: 表情符號
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個極簡的產品設計師與原型設計師作品集網站。設計採用純淨的白色（#ffffff）背景，搭配黑色（#000000）文字與灰色（#8b8b94）連結強調色。字體使用簡潔的無襯線字體（humanist-sans 類別），內文為 12px，連結為 16px。版面特色是固定式左欄放置個人簡介文字，滾動式右欄則包含一個三欄的圓角照片縮圖網格（10px 圓角）。關鍵禁忌：不要添加複雜版面、避免在容器上使用投影、不要使用彩色點綴、避免裝飾性邊框、不要使用複雜字體排印，以及不要使用厚重背景色。
en · zh-CN · zh-TW · ja · ko