精選 · 開放 · 免費

Theseawebreathe

結合氛圍攝影與數據驅動 UI 元素的沉浸式電影級網頁體驗。

01

設計氣質 DNA

深海探險的任務控制儀表板。

02

色彩

嚴謹的單色調藍色調色盤，依賴氛圍攝影與淺青色強調色，創造沉浸式、數據豐富的環境。

03

字型

geometric-sans

• display80px · 500
• display-sm44px · 500
• body14px · 400

在所有文字元素中一致使用 text-transform: uppercase。 · 為較小的文字維持寬鬆的 letter-spacing（1.5px 以上）以確保可讀性。 · 在標題與內文中皆使用幾何無襯線字體以維持技術感。

04

間距

寬裕的間距以強調沉浸感，並避免數據點顯得擁擠。

05

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

使用複合 border 簡寫模式的 1px 細邊框，顏色為淺青色（#94E6FB）或近白色（#E5FAFF）。

06

版面

全視窗畫布，UI 元素以絕對定位置於邊角與中央。

07

動效與互動

輻射狀進度指示器的流暢旋轉動畫。 · 數據點的階梯式淡入效果。 · 維持電影級氛圍的優雅頁面過場。

互動元素上的細微色彩變化或結構性揭示。 · 啟動沉浸式旅程的下一階段。

08

組件

• button 純文字操作，以角落括號裝飾取代實心背景。
• card 不適用 - 版面使用氛圍影像而非傳統卡片元件。
• chip 不適用 - 狀態指示器直接整合於文字層級中。
• input 不適用
• hero 全螢幕攝影背景，搭配中央輻射狀數據視覺化與大型文字覆蓋。

09

文案語氣與禁用清單

• 語氣 技術性 yet 詩意，結合數據點與環境意識。
• 標題風格 粗體、大寫、具氛圍感，常跨多行顯示。
• 按鈕文案 極簡且具指導性，以技術性角落括號框飾。

• 不要使用實心背景作為按鈕 — 截圖顯示僅有文字與角落括號的操作。
• 不要使用小型、密集的文字區塊 — 截圖顯示大型、寬鬆的排版與寬鬆 letter-spacing。
• 不要使用暖色或鮮豔色彩 — 截圖顯示嚴謹、冷調的單色調藍色調色盤。
• 不要使用圓角作為 UI 元素 — 截圖顯示銳利、零圓角的邊框。
• 不要使用厚重的陰影 — 截圖顯示完全平面、氛圍性的光照風格。
• 不要使用混合字體風格 — 截圖顯示一致使用幾何無襯線字體於標題與內文。
• 避免: 暖色調
• 避免: 俏皮語言
• 避免: 密集文字區塊
• 避免: 雜亂的 UI 元素
• 避免: 明亮、飽和的漸層

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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