精選 · 開放 · 免費

Highlight

為現代網路應用程式打造的開源全端監控平台。

01

設計氣質 DNA

一個簡潔的深色 IDE 儀表板，用於全端監控。

02

色彩

優先採用深色模式，搭配高對比的青色強調色與細微的霓黃色高光。

03

字型

humanist-sans · monospace

• display58px · 600
• heading44px · 600
• body-lg18px · 400
• body16px · 400

04

間距

以一致的 4px 網格為基底，搭配充足的留白以提升可讀性。

05

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

1px solid rgba(48, 41, 78, 1)

rgb(108, 55, 244) 8px 8px 0px -2px

06

版面

內容居中，留有寬闊的邊距，使用 Flexbox 佈局功能分頁。

07

動效與互動

互動元素在懸停時的細微顏色過渡。 · 功能分頁之間的平滑切換過渡。

按鈕與連結在懸停時的細微顏色與透明度變化。 · 點擊時提供即時的顏色過渡回饋。

08

組件

• button 膠囊形按鈕，包含實心青色的主按鈕與描邊樣式的次要按鈕。
• card 深色卡片，帶有細微邊框，常包含整合圖示。
• chip 標籤式選項，用於功能導航（如：工作階段回放、錯誤監控等）。
• input 極簡風格的深色輸入框，但在主視覺中並未突出顯示。
• hero 大型居中標題，使用強調色，搭配堆疊的行動呼籲按鈕與功能概覽分頁。

09

文案語氣與禁用清單

• 語氣 兼具技術性與親和力，專業且專注於開發者。
• 標題風格 直接、強調價值，並突顯其開源本質。
• 按鈕文案 以行動為導向（開始使用、即時演示），並建立清晰的視覺層級。

• 切勿使用淺色主題——截圖顯示的是深色模式介面，背景為深海軍藍（#0D0225）。
• 切勿使用次要強調色——截圖顯示僅有一個主導的高飽和度青色（#72E4FC）用於按鈕與高光。
• 切勿使用裝飾性襯線字體——截圖顯示所有文字皆使用簡潔現代的 Poppins 無襯線字體。
• 切勿到處使用尖銳的圓角——截圖顯示結合了細微的 8px/16px 圓角與 44px 的膠囊形圓角。
• 切勿使用低對比文字——截圖顯示在深色背景上使用高對比的白色（#FFFFFF）與淺灰色（#DFDFDF）。
• 切勿讓頁首雜亂——截圖顯示清晰的頂端對齊導覽列，並有明確的主要/次要操作按鈕。
• 避免: 避免使用過於隨意或「新創兄弟」式的術語。
• 避免: 避免在主視覺中放入複雜的架構圖。
• 避免: 避免使用雜亂的佈局，以免模糊核心價值主張。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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