精選 · 開放 · 免費

Mixpanel

為現代工程與成長團隊提供主動式 AI 驅動產品分析。

01

設計氣質 DNA

為產品團隊打造的精緻數據驅動指揮中心。

02

色彩

白色背景上搭配高對比度字體與鮮明紫色漸層強調色。

03

字型

geometric-sans · humanist-sans · monospace

• display60px · 500
• heading36px · 500
• subheading18px · 400
• body16px · 400

標題使用緊湊字間距與 500 字重。 · 內文採用高度易讀的人文主義無襯線體。 · 等寬字體僅嚴格用於程式碼片段。

04

間距

以 8px 為基準網格，區塊之間留有充裕的留白。

05

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

卡片與輸入框使用 1px solid rgba(0,0,0,0.1) 邊框。

rgba(0,0,0,0.05) 0px 0px 0px 1px · rgba(0,0,0,0.08) 0px 4px 16px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

版面

採用置中、最大寬度容器，搭配堆疊式區塊與基於網格的功能佈局。

07

動效與互動

互動元素上有流暢的懸停過渡效果。 · 彈出視窗與抽屜出現時使用細微的淡入動畫。

透過細微的顏色變化或背景改變來指示互動性。 · 透過狀態改變或小型縮放動畫提供即時回饋。

08

組件

• button 實色主要按鈕採用藥丸形圓角（999px）與白底高對比文字；次要操作使用幽靈按鈕。
• card 淺色背景搭配細微 1px 邊框、12px 圓角與 16px-24px 內距。
• chip 小型、圓角 16px 的標籤，用於分類與篩選。
• input 簡潔的帶框輸入框，具有 8px 圓角與清晰的聚焦狀態。
• hero 置中標題，採用大型幾何字型，搭配輔助副文字，以及一列水平功能開關。

09

文案語氣與禁用清單

• 語氣 自信、專業且略帶遠見。
• 標題風格 直接、主動的陳述，強調速度、數據與智慧。
• 按鈕文案 以行動為導向且清晰（例如：「免費開始使用」、「預約產品演示」）。

• 不要使用俏皮或圓潤的展示字型——截圖顯示標題應採用幾何無襯線體，字重中等。
• 不要使用霓虹或過度飽和的顏色——截圖顯示 sophisticated 紫色強調色搭配中性深色調色板。
• 不要在卡片上使用厚重邊框——截圖顯示細微 1px 邊框搭配柔和陰影。
• 不要使用密集、擁擠的佈局——截圖顯示充裕留白與清晰的垂直節奏。
• 不要使用斜體文字進行強調——截圖顯示使用字重變化（500 與 400）代替。
• 不要使用圓角方形按鈕——截圖顯示主要行動呼籲嚴格採用藥丸形（999px 圓角）。
• 避免: 充滿術語的句子
• 避免: 被動語態
• 避免: 過度俏皮的語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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