精選 · 開放 · 免費

Rog Ie

Figma 產品設計師的精緻個人作品集，展示充滿表現力的視覺工具。

01

設計氣質 DNA

融合專業技藝與個人特質的數位素描本

02

色彩

中性畫布，搭配刻意、高飽和的情感強調色

03

字型

transitional-serif · humanist-sans

• display24px · 500
• body14px · 400
• caption11px · 400

特定強調關鍵字（如 'HORROR'）使用全大寫 · 內文維持高度可讀性的 14px 基線 · 主標題嚴格使用襯線字體

04

間距

充裕的垂直內邊距（64px）界定出不同的內容區塊

05

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

纖細的 1px 實線邊框，主要用於專案列表分隔線

浮動元素使用 0px 3px 3px -2px rgba(0,0,0,0.2) · 微小邊界使用內陰影 0px 0px 0px 1px rgba(0,0,0,0.05)

06

版面

主要內容區域採用置中單欄佈局

07

動效與互動

專案列表項目 hover 時的平滑過渡 · 互動元素變換使用 cubic-bezier 緩動

游標變為手指，文字顏色微調或產生變換 · 立即導航至專案詳情

08

組件

• button 極簡、以排版為導向的連結，無厚重按鈕容器
• card 如電影海報般的圖片堆疊元素
• chip 簡潔的內聯式分類標籤
• input 提供的視圖中無可見輸入欄位
• hero 左側對齊的導言區，包含頭像、姓名與簡要個人簡介

09

文案語氣與禁用清單

• 語氣 隨性、個人化且高度專業
• 標題風格 直接、以襯線字體驅動的標題，為各章節定錨
• 按鈕文案 細膩的內聯連結，帶有特定色彩高亮

• 避免使用純白背景——截圖顯示為柔和的中性色 #EDEDED。
• 避免背景使用厚重漸層——截圖顯示為平面、純色表面。
• 避免所有標題都使用無襯線字體——截圖為章節標題使用過渡性襯線字體。
• 避免使用多種競爭的強調色——截圖僅使用單一高飽和紅色作為強調。
• 避免使用粗邊框或厚重的卡片容器——截圖使用纖細的 1px 線條與細微陰影。
• 避免使用寬版、左右對齊的文字佈局——截圖顯示為緊湊的置中單欄佈局。
• 避免: 具侵略性的行銷用語
• 避免: 密集的多欄文字區塊
• 避免: 過度正式的企業術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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