精選 · 開放 · 免費

Gitpod

用於背景代理的平台。

01

設計氣質 DNA

一個企業級的協作平台，用於管理自主的 AI 軟體代理。

02

色彩

以高對比度的單色為基礎，搭配細微的灰色階層，並使用深綠色強調關鍵連結。

03

字型

transitional-serif · neo-grotesque-sans · monospace

• display72px · 400
• body18px · 400
• caption12px · 400

大型展示字體使用過渡襯線體，以傳達編輯的權威感。 · 所有 UI 元素與內文使用新怪誕體，以達到最佳可讀性。 · 大型展示文字保持緊湊的字距，以形成連貫的區塊感。

04

間距

8px 網格

05

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

1px solid rgba(10,14,25,1.0)

0px 0px 120px 0px rgba(0,0,0,0.07) · 0px 0.0346895px 0.208137px 0px rgba(0,0,0,0)

06

版面

居中內容，搭配充裕留白與固定頂端導覽列。

07

動效與互動

選單與 UI 狀態切換時，使用流暢的透明度過渡。 · 滑鼠懸停時，背景與邊框顏色進行細微過渡。

文字與邊框進行流暢的顏色過渡。 · 透過透明度或背景變化提供細微的視覺回饋。

08

組件

• button 深色實心填充搭配白色文字，或白色填充搭配深色邊框與文字。
• card 簡潔的容器，帶有細微邊框與 8px 圓角。
• chip 小型圓角容器，用於標籤或狀態指示。
• input 標準化的文字輸入欄位，具有清晰的聚焦狀態。
• hero 大型編輯風格的襯線標題，搭配無襯線副文字。

09

文案語氣與禁用清單

• 語氣 權威、專業且高度技術性。
• 標題風格 使用襯線字體，呈現大膽、具宣示性的語句。
• 按鈕文案 直接且以行動為導向，例如「立即開始」或「申請示範」。

• 避免使用霓虹或高彩度的強調色 — 截圖顯示的是柔和的深綠色強調色。
• 避免使用過於裝飾性的無襯線字體 — 截圖顯示展示字體使用過渡襯線，內文則使用簡潔的新怪誕體。
• 避免使用厚重的陰影 — 截圖顯示的是極簡、大圓角的盒子陰影或完全不使用。
• 避免主要文字使用低對比度 — 截圖顯示深色墨黑（#0A0E19）文字在白色背景上。
• 避免使用複雜、雜亂的背景圖案 — 截圖顯示的是簡潔的純色背景。
• 避免使用生硬的方形邊角 — 截圖顯示一致使用 8px 至 12px 的邊框圓角。
• 避免: 過於隨意的俚語
• 避免: 過多的驚嘆號
• 避免: 缺乏上下文、意義模糊的專業術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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