精選 · 開放 · 免費
Rog Ie
Figma 產品設計師的精緻個人作品集,展示充滿表現力的視覺工具。
PortfolioCalmTypographyCleanProductivity
01
設計氣質 DNA
作品集個人設計師Figma表現力
融合專業技藝與個人特質的數位素描本
02
色彩
#ED2720Accent
#101010Ink
#666666Ink soft
#EDEDEDBG
#999999Muted
rgba(102,102,102,0.25)Line
中性畫布,搭配刻意、高飽和的情感強調色
03
字型
transitional-serif · humanist-sans
- display
24px · 500 - body
14px · 400 - caption
11px · 400
特定強調關鍵字(如 'HORROR')使用全大寫 · 內文維持高度可讀性的 14px 基線 · 主標題嚴格使用襯線字體
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
充裕的垂直內邊距(64px)界定出不同的內容區塊
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 8px
lg · 40px
pill · 100px
纖細的 1px 實線邊框,主要用於專案列表分隔線
浮動元素使用 0px 3px 3px -2px rgba(0,0,0,0.2) · 微小邊界使用內陰影 0px 0px 0px 1px rgba(0,0,0,0.05)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
主要內容區域採用置中單欄佈局
07
動效與互動
200msmicro
240mssmall
800msmedium
cubic-bezier(0.22, 0.61, 0.36, 1)easing
專案列表項目 hover 時的平滑過渡 · 互動元素變換使用 cubic-bezier 緩動
游標變為手指,文字顏色微調或產生變換 · 立即導航至專案詳情
08
組件
- button 極簡、以排版為導向的連結,無厚重按鈕容器
- card 如電影海報般的圖片堆疊元素
- chip 簡潔的內聯式分類標籤
- input 提供的視圖中無可見輸入欄位
- hero 左側對齊的導言區,包含頭像、姓名與簡要個人簡介
09
文案語氣與禁用清單
- 語氣 隨性、個人化且高度專業
- 標題風格 直接、以襯線字體驅動的標題,為各章節定錨
- 按鈕文案 細膩的內聯連結,帶有特定色彩高亮
- 避免使用純白背景——截圖顯示為柔和的中性色 #EDEDED。
- 避免背景使用厚重漸層——截圖顯示為平面、純色表面。
- 避免所有標題都使用無襯線字體——截圖為章節標題使用過渡性襯線字體。
- 避免使用多種競爭的強調色——截圖僅使用單一高飽和紅色作為強調。
- 避免使用粗邊框或厚重的卡片容器——截圖使用纖細的 1px 線條與細微陰影。
- 避免使用寬版、左右對齊的文字佈局——截圖顯示為緊湊的置中單欄佈局。
- 避免: 具侵略性的行銷用語
- 避免: 密集的多欄文字區塊
- 避免: 過度正式的企業術語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Figma 產品設計師的個人作品集,強調充滿表現力的視覺工具與插圖。美學精緻、沉靜,基於柔和的 #EDEDED 中性背景與清晰的 #101010 墨色。排版採用人文無襯線字體作為內文,過渡性襯線字體作為章節標題,並以單一高飽和 #ED2720 紅色作為偶爾的強調色。關鍵設計準則包括:維持充裕的垂直間距以分隔內容區塊,避免厚重的 UI 容器,改用細微的 1px 邊框,並始終為主要導航錨點使用特定的襯線字體。佈局嚴格採用置中單欄,確保聚焦且具編輯風格的閱讀體驗。
en · zh-CN · zh-TW · ja · ko