精選 · 開放 · 免費

Stream

借助 Stream 以開發者為首的 SDK，更快建構聊天、動態消息與影片整合功能。

01

設計氣質 DNA

一個用於建構即時功能的乾淨、專業的開發者主控台。

02

色彩

高對比的專業極簡風格，搭配單一鮮亮藍色作為點綴。

03

字型

humanist-sans · monospace

• display48px · 500
• h236px · 500
• h324px · 600
• body16px · 400
• code14px · 400
• caption12px · 500

標題與大標題字重統一使用 500 至 600。 · 內文使用標準的 400 字重，以確保最佳可讀性。 · 等寬字體僅用於行內程式碼與指令區塊。

04

間距

以 4px 為基準的統一間距，並在主視覺區塊與區塊之間使用充裕的留白。

05

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

1px solid rgba(13, 23, 33, 0.1)

0px 3px 12px 0px rgba(0, 0, 0, 0) · 0px 1px 4px 0px rgba(0, 0, 0, 0.14)

06

版面

標準的中央容器佈局，採用雙欄主視覺區塊設計。

07

動效與互動

在 hover 狀態下，流暢地變換背景色與透明度。 · 在互動過程中，進行細膩的 box-shadow 調整。

背景色或透明度變換，轉場時間為 0.15 秒至 0.5 秒。 · 狀態即時改變，並帶有細微的 transform 或陰影回饋。

08

組件

• button 主要操作按鈕為實心藍色圓角膠囊按鈕；次要操作按鈕為帶邊框的白色圓角膠囊按鈕。
• card 白色卡片，帶有細微的灰色邊框與圓角（16px），用於展示應用案例。
• chip 小型大寫徽章，淺色背景搭配圓角。
• input 採用程式碼區塊樣式，使用等寬字體與深色背景，模擬指令提示。
• hero 左側為大型文字區塊，右側搭配懸浮、重疊的產品 UI 介面模型。

09

文案語氣與禁用清單

• 語氣 專業、聚焦於開發者、且充滿自信。
• 標題風格 直接、以行動為導向、略帶技術感。
• 按鈕文案 清晰且直接，使用如 '>_' 或 '->' 等等寬字體作為點綴。

• 避免使用厚重的陰影 — 螢幕截圖顯示其陰影非常細膩，幾乎不可見。
• 避免使用複雜的漸層 — 螢幕截圖顯示大多為純白與淺灰色背景。
• 避免使用裝飾性襯線字體 — 螢幕截圖顯示所有文字均採用簡潔的人文主義無襯線字體。
• 避免使用霓虹燈色或多樣化的點綴色 — 螢幕截圖顯示僅採用嚴格的單一藍色點綴策略。
• 避免在主要按鈕上使用銳利的邊角 — 螢幕截圖使用完全圓形的膠囊按鈕造型。
• 避免使用擁擠的佈局 — 螢幕截圖顯示其具有充裕的內距與清晰的區塊分隔。
• 避免: 過於隨意的俚語
• 避免: 模糊的行銷術語
• 避免: 無根據的技術主張

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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