精選 · 開放 · 免費
Daily
一個用於全球即時通訊平台的極簡單色調介面。
devrtc
01
設計氣質 DNA
即時基礎設施WebRTC全球企業開發者
工業級基礎設施供應商,具備簡潔、以開發者為中心的美學。
02
色彩
#161618Ink
#374151Ink soft
#FCFCFCBG
#F4F5F6BG soft
#6B7280Muted
rgba(229,231,235,1)Line
嚴格的單色調色盤,透過高對比與中性灰聚焦內容清晰度。
03
字型
humanist-sans · monospace
- display
48px · 500 - headline
36px · 500 - subhead
20px · 400 - body
16px · 400 - label
14px · 400 - stat
36px · 500
使用 DM Sans(人文無襯線體)作為標題與內文字體。 · 使用 DM Mono 作為介面標籤、導航項目與技術註釋的字體。 · 大型標題保持緊湊字距,大寫標籤則使用寬鬆字距(0.7px)。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基礎單位,主要內容區塊間使用寬裕的垂直間距(48px-96px)。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 4px
lg · 0px
pill · 9999px
1px solid #E5E7EB
0px 4px 6px -4px rgba(0,0,0,0.1) · 0px 10px 15px -3px rgba(0,0,0,0.1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
非對稱首頁區塊,文字置左、極簡圖形置右;採用結構化網格呈現統計數據。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
標準介面互動採用平滑的透明度與變換過渡。 · 內容顯現使用細微的淡入與向上滑動效果。
互動元素採用標準的顏色與背景過渡效果(0.15s)。 · 提供即時視覺回饋,不使用誇張的縮放或複雜動畫。
08
組件
- button 單色調按鈕,可使用純黑背景配白色文字,或幽靈樣式並帶有方塊項目符號前綴。
- card 簡潔、無邊框的內容區塊,以細微水平分隔線區隔。
- chip 大寫文字標籤,使用等寬字型,並以方括號包裹,例如 [PLATFORM]。
- input 極簡主義,主要視圖中不強調。
- hero 大型粗體標題,搭配簡潔副標題與主要操作按鈕。
09
文案語氣與禁用清單
- 語氣 技術性、權威且精確。
- 標題風格 直接且具描述性,聚焦於規模與能力。
- 按鈕文案 以行動為導向,例如「開始建構」和「深入了解」。
- 勿使用鮮豔的強調色——截圖顯示採用嚴格的單色調色盤。
- 勿使用裝飾性或襯線字體——截圖僅顯示人文無襯線與等寬字型類別。
- 勿使用圓角、親和的卡片樣式——截圖顯示尖角或輕微圓角(4px)及硬式分隔線。
- 勿使用擁擠、緊密的版面——截圖顯示區塊間有寬裕的留白(48px-96px)。
- 勿使用非正式、隨意的語言——截圖使用精確的技術術語,如「WebRTC 基礎設施」。
- 勿使用複雜、雜亂的背景圖案——截圖使用純淨的近白色(#FCFCFC)背景。
- 避免: 過度行銷術語
- 避免: 複雜句型結構
- 避免: 缺乏技術支撐的模糊聲明
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個以開發者為中心的極簡介面,適用於全球即時基礎設施平台。系統採用嚴格的單色調色盤,包含近白色(#FCFCFC)與深炭灰色(#161618),次要文字使用中灰色(#6B7280),邊框使用 #E5E7EB。字型分為人文無襯線體(DM Sans)用於主要內容,以及等寬字型(DM Mono)用於介面標籤與導航,維持 4px 基礎網格與寬裕的垂直節奏。關鍵禁忌:避免使用任何鮮豔強調色,不使用裝飾性襯線字體,絕不使用圓角、親和的卡片元件。版面應優先考慮極致的清晰度與技術權威感,而非視覺華麗。
en · zh-CN · zh-TW · ja · ko