精選 · 開放 · 免費

Dribbble

一個透過視覺敘事，串連設計師與客戶的精選市集。

01

設計氣質 DNA

一座用於數位設計作品集的簡潔圖庫風格展覽廳。

02

色彩

採用高對比的中性基底，旨在讓多彩的用戶原創作品成為焦點。

03

字型

grotesque-sans

• display52px · 600
• headline32px · 600
• body-lg16px · 400
• body14px · 400
• caption12px · 400

大型展示標題使用 -1px 字母間距，以營造緊湊、高級的質感。 · 主要標題保持一致的 600 字重，內文則使用 400 字重。

04

間距

採用嚴格的 4px 基準網格，並搭配寬裕的留白空間，以維持簡潔、通透的佈局。

05

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

1px solid rgba(13, 12, 34, 0.08)

0px 3px 6px rgba(0, 0, 0, 0.14) · 0px 15px 50px rgba(27, 32, 50, 0.1) · 0px 2px 4px rgba(6, 3, 24, 0.1)

06

版面

響應式 12 欄網格，於手機版縮減為 4 欄。

07

動效與互動

按鈕與卡片的 hover 微互動效果。 · 背景顏色變化採用 0.5 秒的平滑 ease-in-out 過渡動畫。

卡片具有細微的陰影提升效果，按鈕則有背景顏色變化。 · 透過 0.05 秒的色彩過渡，提供即時的視覺回饋。

08

組件

• button 主要按鈕採用膠囊形狀，深色背景搭配白色文字；次要按鈕則帶有淺灰色邊框。
• card 以圖片為主的卡片，搭配極簡的元數據，採用 12px 圓角與細微的 hover 陰影效果。
• chip 小型、圓角的標籤，具有淺色背景，用於導覽與篩選功能。
• input 大型、圓角的搜尋欄位，整合了操作按鈕與佔位文字。
• hero 分割式首頁版面，左側為粗體標題，右側為情境圖片。

09

文案語氣與禁用清單

• 語氣 自信、專業且具啟發性。
• 標題風格 直接且著重效益，經常使用粗體排版來強調關鍵功能。
• 按鈕文案 以行動為導向且清晰明確，使用膠囊形按鈕作為主要的行動呼籲。

• 勿使用襯線字體——截圖顯示整體一致使用 grotesque-sans。
• 勿使用圓角半徑大於 12px 的卡片——截圖顯示 12px 為標準規格。
• 勿使用高彩度背景顏色——截圖顯示嚴格使用白色與淺灰色調色盤。
• 勿在首頁版面使用文字靠左對齊——截圖顯示根據區塊採用置中或靠右對齊的佈局。
• 勿使用細且對比度低的邊框——截圖顯示明顯的 1px 邊框，顏色為 rgba(13, 12, 34, 0.08)。
• 勿使用深色模式主題——截圖顯示純粹的淺色模式介面。
• 避免: 過度隨意或充斥俚語的語言。
• 避免: 指令中使用被動語態。
• 避免: 缺乏脈絡的專業術語。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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