精選 · 開放 · 免費

Joshuakaplan

高度結構化、以排版為驅動力的設計師作品集，透過乾淨的網格版面優先呈現資訊層級。

01

設計氣質 DNA

如同結構化索引或帳冊般，一個精心組織的設計作品集。

02

色彩

黑與白的強烈高對比調色盤，僅使用單一亮色萊姆綠作為狀態指示器。

03

字型

sans-serif

• display16px · 500
• body12px · 500

所有文字使用中等字重 (500) 的無襯線字體。 · 行高非常緊湊，通常介於 1.0 到 1.2 之間。 · 字體大小始終偏小，主要尺寸為 16px 和 12px。

04

間距

網格儲存格內使用緊湊且一致的 8px padding，並以水平分隔線定義主要區塊。

05

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

廣泛使用 1px solid rgba(0,0,0,0.75) 水平分隔線來區隔行列與區塊。

06

版面

單欄垂直堆疊的行列式版面，每一行分為四個寬度不一的欄位。

07

動效與互動

所有互動元素皆套用轉場效果。

文字連結於 hover 時變為藍色。 · 可點擊元素使用標準指標游標。

08

組件

• button 無視覺按鈕樣式的文字連結，用於導覽。
• card 行列作為資料卡片，內容組織於對齊的欄位中。
• chip 藥丸形狀的狀態標示（例如：「✓ 已收購」），使用亮色萊姆綠背景。
• hero 純文字的頁首區域，介紹設計師並提供導覽連結。

09

文案語氣與禁用清單

• 語氣 專業、簡潔且系統化。
• 標題風格 直接且資訊化，說明職稱與地點。
• 按鈕文案 簡樸、無裝飾的文字連結用於導覽。

• 不要使用圓角容器 — 螢幕截圖顯示所有行列與區塊皆為銳利的 90 度角。
• 不要使用投影或立體效果 — 螢幕截圖顯示完全扁平化設計，無任何陰影。
• 不要使用多種強調色 — 螢幕截圖顯示單色調色盤，僅有一種萊姆綠用於狀態標示。
• 不要使用大型、多樣化的排版 — 螢幕截圖顯示非常緊湊的排版比例，尺寸變化極小。
• 不要使用厚重的邊框或方框 — 螢幕截圖僅使用細薄的單像素水平分隔線進行區隔。
• 不要使用裝飾性圖片或背景紋樣 — 螢幕截圖顯示純白背景，除標誌外無任何圖片。
• 避免: 裝飾性語言
• 避免: 行銷術語
• 避免: 過多形容詞

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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