精選 · 開放 · 免費

Jonaspelzer

一個展現超過15年數位產品設計經驗的精緻作品集。

01

設計氣質 DNA

一個精緻的數位作品集，如同一個活生生的案例研究目錄。

02

色彩

以高對比的黑白色調為基底，搭配單一、高飽和度的紫色作為強調。

03

字型

geometric-sans · transitional-serif

• display56px · 400

在同一個標題區塊內，混合幾何無襯線字體與過渡襯線字體，以創造節奏對比。 · 運用充裕的行高與字距，以實現優雅的可讀性。 · 主要導覽與分類標籤優先使用全大寫。

04

間距

充裕的垂直內邊距與留白，讓排版與專案內容有呼吸的空間。

05

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

使用 1px solid #000000 作為鮮明邊界；使用 1px solid rgb(212, 214, 221) 作為細微的分隔線。

0px 1px 4px 2px rgba(53, 2, 255, 0.1)

06

版面

以居中的首頁橫幅區塊為開頭，接著是三欄式的專案卡片網格。

07

動效與互動

流暢的頁面轉場與專案卡片的 hover 狀態。 · 專案縮圖上的細微縮放或位移。

專案卡片與導覽項目上細微的縮放或陰影變化。 · 互動元素上的即時視覺回饋。

08

組件

• button 藥丸狀導覽列，使用紫色實色作為啟用狀態。
• card 專案縮圖，具有圓角（12px）與細微陰影或邊框。
• hero 大型排版組合，混合無襯線與襯線字體，上方留有大量留白。

09

文案語氣與禁用清單

• 語氣 專業、自信且富有經驗。
• 標題風格 直接、具宣言性，並透過排版展現表達力。
• 按鈕文案 清晰、以行動為導向，常在導覽列中以全大寫呈現。

• 不要使用襯線字體作為主要導覽——截圖顯示為無襯線大寫標籤。
• 不要使用鮮豔或多色的配色方案——截圖顯示為嚴格的黑、白、紫色調。
• 不要將所有內容置中——截圖顯示首頁橫幅文字左對齊，並使用結構化網格。
• 不要使用厚重的投影——截圖中僅顯示一個細微的紫色 box-shadow。
• 不要使用複雜或裝飾性的 UI 元件——截圖顯示為簡潔的文字導向介面。
• 不要使用深色模式介面——截圖顯示為明亮的淺色背景設計。
• 避免: 避免使用過於隨意或俏皮的語言。
• 避免: 避免使用缺乏明確階層的大段文字。
• 避免: 避免使用通用的企業術語。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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