精選 · 開放 · 免費

Jhey Tompkins

專注於 UI 實驗與互動設計的開發者作品集。

01

設計氣質 DNA

一個為設計工程師打造的簡潔、以字型為主的個人作品集。

02

色彩

以高對比的黑白為基礎，搭配暖色調強調色用於互動重點。

03

字型

didone-serif · humanist-sans · monospaced

• display58px · 400
• subtitle14px · 600
• body16px · 300

元資料文字採用全大寫，並使用緊湊字距 · 主要標題使用襯線字型，內文使用無襯線字型

04

間距

主要區塊之間保留充足的垂直間距。

05

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

無可見的結構性邊框。

06

版面

置中的單欄版面，具備充足留白。

07

動效與互動

所有元素均定義了過渡效果屬性。

互動元素上顯示指標游標。 · 互動元素上顯示指標游標。

08

組件

• button 無可見的按鈕。
• card 無可見的卡片。
• chip 無可見的標籤。
• input 無可見的輸入框。
• hero 大型襯線標題，後接等寬字型副標題與無襯線內文段落。

09

文案語氣與禁用清單

• 語氣 專業、親切且略帶趣味。
• 標題風格 大型、優雅的襯線字型。
• 按鈕文案 帶有箭頭的簡潔文字連結。

• 避免使用深色背景——截圖顯示的是乾淨的白色背景。
• 避免使用無襯線字型作為主視覺標題——截圖顯示的是襯線標題。
• 避免使用藍色作為主要連結顏色——截圖顯示的是暖紅/橘色強調色。
• 避免使用單欄全寬版面——截圖顯示的是受限的段落寬度。
• 避免使用粗體字重作為內文——截圖顯示的是輕字重。
• 避免使用小寫作為元資料標籤——截圖顯示的是全大寫並帶有緊湊字距。
• 避免: 過度企業化的術語
• 避免: 強勢的銷售用語
• 避免: 雜亂的版面配置

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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