精選 · 開放 · 免費

PocketBase

一個專為開發者設計的後端，透過簡潔、友善的 UI 強調簡約與易用性。

01

設計氣質 DNA

一個友好、易用的工具包，將複雜的後端基礎設施簡化為單一、可存取的檔案。

02

色彩

高對比、簡潔且功能性的調色盤，以友好的粉彩青綠色為主視覺，並使用標準深灰色以確保最佳可讀性。

03

字型

humanist-sans · monospace

• display48px · 600
• h228px · 600
• body15px · 400
• code14px · 400

主要 UI 和內文使用 Source Sans Pro。 · 所有程式碼區塊和技術片段使用 Ubuntu Mono。 · 保持嚴格的文字對齊和一致的行高。

04

間距

標準 4px 基線網格，搭配充裕的區塊內距。

05

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

1px solid rgba(37,39,45,0.12)

rgba(0, 0, 0, 0.06) 0px 2px 5px 0px · rgba(0, 0, 0, 0.06) 0px 3px 10px 3px

06

版面

登陸頁採用居中單欄佈局，搭配用於儀表板預覽的寬幅容器。

07

動效與互動

hover 時平滑的顏色和背景過渡。 · 互動元素的濾鏡和底部位置過渡。

互動元素上的細微背景和顏色變化。 · 標準的指標回饋。

08

組件

• button 簡潔、略帶圓角（4px）的按鈕，具明顯深色邊框和細微陰影；主要按鈕使用深色背景。
• card 白色背景，帶有細微投影和柔和的圓角邊框半徑。
• chip 小型膠囊狀標籤（999px 圓角），用於功能列表和狀態指示器。
• input 圓角膠囊狀搜尋列，淺色背景。
• hero 大型粉彩青綠色背景（#b8dbd6），搭配粗體文字和顯眼的 UI 螢幕截圖。

09

文案語氣與禁用清單

• 語氣 樂於助人、直接且專注於開發者。
• 標題風格 簡潔有力，強調核心價值主張。
• 按鈕文案 以行動為導向且直接（例如「閱讀文件」、「線上展示」）。

• 不要使用深色主視覺區塊 — 螢幕截圖顯示的是明亮的粉彩青綠色（#b8dbd6）背景。
• 不要使用裝飾性、俏皮或書法字體 — 螢幕截圖使用簡潔的 humanist-sans（Source Sans Pro）和等寬字體（Ubuntu Mono）。
• 不要使用厚重、發光的漸層 — 螢幕截圖使用純色、細微陰影和簡潔邊框。
• 不要使用圓潤、蓬鬆的按鈕 — 螢幕截圖使用略帶圓角（4px）並帶有明顯深色邊框的按鈕。
• 不要依賴單一高彩度的強調色 — 螢幕截圖使用灰色、青綠色和程式碼語法顏色的平衡調色盤。
• 不要讓介面充斥過多動畫 — 螢幕截圖顯示的是非常靜態、功能性和簡潔的 UI。
• 不要使用裝飾性圖標 — 螢幕截圖使用簡單、功能性的 Remixicon 線條圖標。
• 避免: 過度的行銷術語或華麗辭藻。
• 避免: 強勢的銷售語氣或複雜的銷售漏斗。
• 避免: 結構不清、難以閱讀的技術文件。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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