精選 · 開放 · 免費

Vapi

一個開發者優先的平台，用於大規模建構與部署企業語音 AI 代理。

01

設計氣質 DNA

一個感覺如同消費級應用般易於接近的企業級開發者平台，融合了高端編輯攝影與簡潔的技術文件。

02

色彩

一個溫潤的奶油色基礎色盤，搭配高對比度的深色墨色，並以單一高彩度紅色作為主要動作的強調色。

03

字型

geometric-sans · humanist-sans · monospaced

• display56px · 500
• h240px · 500
• h324px · 500
• body16px · 400
• caption14px · 400

大型展示文字採用緊湊的字間距（負值），營造現代且有力的感覺。 · 類別標籤與「眉標」文字使用大寫及字間距加寬的樣式。 · 標題一致使用主要的幾何無襯線字體，以建立大膽、技術性的識別形象。

04

間距

寬敞、均勻的間距，特別偏好使用 24px 和 40px 的間隔，以在密集的功能網格中維持清晰度。

05

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

使用極簡的 1px 實線邊框，用於細微的容器界定與卡片定義。

rgb(204, 204, 204) 0px 0px 2px 2px · 0px 4px 6px -1px rgba(0, 0, 0, 0.1)

06

版面

標準 12 欄網格系統，具有充裕的外邊距，在移動端堆疊為單欄佈局。

07

動效與互動

互動元素上的平滑色彩與背景轉換。 · 下拉選單與覆蓋層顯示時的 opacity 與可見性漸隱。 · 狀態變換時的細微 transform 移動。

按鈕與連結上的細微色彩轉換與背景變化。 · 透過輕微的 transform 或 opacity 變化提供即時視覺回饋。

08

組件

• button 主要按鈕使用深色藥丸形狀搭配白色文字；次要按鈕是透明的幽靈按鈕，帶有細微邊框。
• card 簡潔、大多無邊框的區塊，以充裕的留白與細微的水平分隔線分隔。
• chip 功能性的下拉選單與狀態標籤，帶有細微灰色邊框和 6px 至 8px 的邊框圓角。
• input 標準文字輸入欄位，具 8px 邊框圓角、細微邊框與內部內邊距。
• hero 全寬電影感攝影，搭配深色漸層覆蓋，以確保白色展示文字具有高度可讀性。

09

文案語氣與禁用清單

• 語氣 自信、技術導向且聚焦於企業。
• 標題風格 簡短、有力且以人為本（例如：「以人類語言對話每一位客戶」）。
• 按鈕文案 直接且以行動為導向（例如：「開始使用」、「發起通話」）。

• 請勿使用純白（#FFFFFF）背景——截圖中使用的是溫潤的奶油色米白（#FFFAEA）。
• 請勿使用裝飾性襯線字體——截圖完全依賴簡潔的幾何與人文無襯線字體類別。
• 請勿使用明亮的霓虹或多色漸層——色盤嚴格限定為奶油色、黑色與單一紅色強調色。
• 請勿使用厚重的陰影——截圖使用非常細微、幾乎不可見的 box-shadow 來營造深度。
• 請勿用邊框 clutter 佈局——截圖使用充裕的留白與水平線進行分隔。
• 請勿使用大型、多行的區塊引用——截圖使用高度壓縮的大型展示字體以達到最大衝擊力。
• 避免: 過於俏皮或隨意的語言
• 避免: 缺乏清晰脈絡的專業術語
• 避免: 視覺上雜亂的佈局

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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