精選 · 開放 · 免費

Metabase

以 AI 回答問題的開源分析平台。

01

設計氣質 DNA

一個整潔、數據驅動的儀表板

02

色彩

以白色背景為基底，搭配強烈的主色調藍色強調，整潔且專注於數據呈現。

03

字型

humanist-sans · monospace

• display48px · 700
• h140px · 700
• h228px · 700
• body16px · 400
• small14px · 400

04

間距

以 8px 為基礎單位，搭配 4px 微間距，形成一致的節奏感。

05

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

1px solid rgba(90, 96, 114, 0.15)

0 1px 2px rgba(16, 24, 40, 0.05) · 0 16px 28px -6px rgba(24, 39, 75, 0.12) · 0 32px 88px -4px rgba(24, 39, 75, 0.14)

06

版面

標準的置中容器佈局，並帶有清晰的區塊分隔線。

07

動效與互動

捲動時淡入 · 按鈕懸停轉場效果

互動元素在懸停時，會有細微的背景顏色變化或陰影提升效果。 · 提供即時的視覺反饋。

08

組件

• button 主要按鈕使用強調色藍色，並帶有圓角 (8px)。次要按鈕則採用外框樣式。
• card 整潔的白色卡片，帶有細微邊框與柔和陰影。
• chip 畫面中未明確顯示，但類似的 UI 元素通常呈現柔和的膠囊形狀。
• input 整潔、帶有邊框的文字輸入欄位。
• hero 大型標題與副標題，搭配兩個顯眼的行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 專業、清晰且具有幫助性。
• 標題風格 直接、以效益為導向且字體粗壯。
• 按鈕文案 採用「試用」、「部署」等以行動為導向的動詞。

• 不採用深色模式主題——截圖顯示的是一個明亮、淺色系的介面。
• 不使用高對比的霓虹色彩——調色盤以柔和的藍色與中性色調為主。
• 不對卡片或按鈕使用尖銳的 90 度直角——截圖顯示的是圓角設計。
• 不使用纖細、優雅的襯線字體作為主要內文字體——採用的是整潔的人文主義無襯線字體。
• 不使用缺乏充足留白的大段密集文字——佈局呈現開放、通透的感覺。
• 不將複雜的漸層作為主要背景——背景大多為純白色或非常細微的淺藍色。
• 不採用俏皮或異想天開的插畫風格——視覺設計保持整潔、功能性與專業感。
• 避免: 主要文案中避免使用過度技術性的術語
• 避免: 避免使用咄咄逼人的銷售用語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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