精選 · 開放 · 免費

Hugging Face

一個友善、高實用性的平台，讓 AI 社群能協作開發模型、資料集與應用程式。

01

設計氣質 DNA

機器學習工程師與研究員的繁華數位城鎮廣場。

02

色彩

乾淨的白色背景搭配細微灰色邊框，以深海軍藍漸層在首圖區域作為視覺錨點。

03

字型

humanist-sans · monospace

• display56px · 700
• h132px · 700
• h220px · 600
• body16px · 400
• caption12px · 400

04

間距

一致的 8px 網格，搭配緊湊的 4px 微間距。

05

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.1) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px

06

版面

標準響應式 12 欄網格，在行動裝置上收合成單欄。

07

動效與互動

hover 時細微的色彩過渡 · 互動元素的縮放與位移轉換

以 0.15s ease 變化背景亮度或邊框顏色。 · 細微的縮小轉換。

08

組件

• button 深海軍藍填色按鈕，搭配白色文字與膠囊圓角，或是透明帶有邊框的版本。
• card 白色卡片，帶有淺灰色邊框與 12px 圓角，用於功能特色與組織列表。
• chip 小型、圓角的標籤，帶有淺灰色背景，用於任務與程式庫等分類。
• input 圓角搜尋欄位，帶有細微灰色邊框與內部 padding。
• hero 深海軍藍至黑色的漸層背景，搭配大型白色文字與顯眼的吉祥物。

09

文案語氣與禁用清單

• 語氣 友善、協作且技術精準。
• 標題風格 粗體、宣言式的陳述，強調社群與建構。
• 按鈕文案 直接且以行動為導向（例如：「探索」、「瀏覽」）。

• 避免使用強烈的霓虹色調——調色板依賴海軍藍、灰色與白色。
• 避免使用沉重的陰影——卡片僅使用細微的立體感。
• 避免在長段落中使用置中文字——對齊方式為左對齊。
• 避免在所有元素上使用完全圓角——混合使用 8px 與膠囊形狀。
• 避免使用複雜的插圖——介面依賴簡潔的圖標與單一吉祥物。
• 避免預設使用深色模式——主要體驗為淺色，搭配深色首圖。
• 避免: 過於企業化的行話
• 避免: 強勢的銷售用語
• 避免: 在主要介面中使用複雜的學術術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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