精選 · 開放 · 免費

SiteInspire

一個優質、極簡的策展圖庫，展示網路上最優秀的設計與人才。

01

設計氣質 DNA

一個精心策劃的數位設計博物館展覽

02

色彩

單色且克制，依賴柔和的灰白畫布，讓展示的多彩設計作品得以呼吸，而不相互競爭。

03

字型

grotesque-sans

• display56px · 500
• heading30px · 500
• body14px · 400

所有文字皆使用緊湊的字距（-0.4px），以維持緊實、高端的編輯感。 · 內文字號保持相對較小（14px），以優先呈現圖庫縮圖的視覺密度。 · 字重 500 專用於標題、副標題及啟用的導覽項目。

04

間距

所有內部邊距與外邊距皆採用一致的 4px 微型格線，創造緊實且可預期的結構。

05

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

1px solid rgb(228,228,231) 用於結構性區隔與卡片邊框。

0px 0px 0px 0px rgba(0,0,0,0) · 0 4px 6px -1px rgba(0,0,0,0.05)

06

版面

固定的頂端導覽列位於全寬度主視覺區域之上。下方則是靈活的格線佈局（通常為三欄），顯示專案縮圖，並附有可收合的頁尾用於分類導覽。

07

動效與互動

懸停時針對透明度與顏色進行快速的 150 毫秒過渡。 · 針對互動狀態變化（如邊框顏色與背景顏色）採用更平順的 0.15 秒過渡。

文字連結與 UI 元素上的細微色彩變化，維持整體的沉靜美感。 · 互動元素使用標準的指標游標，並透過過渡效果提供即時的視覺回饋。

08

組件

• button 藥丸形（border-radius: 9999px）用於主要操作，例如「登入」，通常帶有深色實心背景。導覽則使用標準文字連結。
• card 一個簡潔、無邊框或帶有細邊框的容器，內含大型縮圖影像，下方整齊排列著中繼資料（標題、日期、作者）。
• chip 位於頁尾區域的文字式分類標籤，以簡單的文字連結水平列表呈現。
• input 頂端導覽中的極簡搜尋輸入框，主要透過放大鏡圖示與簡潔文字標籤來指示。
• hero 一個大型的水平滾動輪播區域，在柔和的灰色背景上展示精選的專案截圖。

09

文案語氣與禁用清單

• 語氣 權威、策展性且客觀。
• 標題風格 直接、簡潔且有力的陳述（例如：「展示網路上最優秀的設計與人才」）。
• 按鈕文案 極簡且以行動為導向，通常僅為單個詞彙或短語（例如：「登入」、「訂閱」）。

• 不要使用鮮豔、高對比的強調色——截圖顯示的是嚴格的單色調色板，僅有一個細微的紅色標誌點。
• 不要使用裝飾性、襯線或手寫字體——截圖完全採用乾淨、統一的 grotesque-sans。
• 不要實作沉重的陰影或複雜的圓角——截圖顯示的主要是平面表面，僅有最小半徑（2px、4px 或藥丸形）。
• 不要讓介面充斥過多文字或複雜的 UI 元素——截圖高度依賴乾淨、以圖像為主的格線佈局。
• 不要使用大型、笨重的按鈕樣式——截圖顯示的是簡約的藥丸形按鈕，並留有充足的留白。
• 不要偏離嚴格的 4px 基礎格線——截圖顯示所有元素間的間距模式非常一致且緊實。
• 避免: 避免過於隨意或熱情的語言。
• 避免: 避免視覺雜亂或複雜的裝飾性元素。
• 避免: 避免使用明亮、相互競爭的強調色，以免分散對展示作品的注意力。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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