精選 · 開放 · 免費

Gitpod

用於背景代理的平台。

devtool
Gitpod 網站截圖
↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://www.gitpod.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI雲端平台自動化治理

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

02

色彩

#397554Accent
#0A0E19Ink
#636363Ink soft
#FFFFFFBG
#F9F9F9BG soft
#E1E1E1BG quiet
#818181Muted
rgba(10,14,25,1.0)Line

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

03

字型

transitional-serif · neo-grotesque-sans · monospace

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

04

間距

4px
8px
12px
16px
24px
32px
40px
43px
64px

8px 網格

05

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

sm · 6px
md · 8px
lg · 12px
pill · 33554440px

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

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

動效與互動

200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

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

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

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個高端、以企業為導向的 B2B SaaS 平台,用於 AI 開發工具。它使用簡潔的單色調色盤(白色、淺灰、深灰、近黑色),並以單一柔和的深綠色(#397554)作為強調色。字體方面,大型、具權威感的過渡襯線體用於展示標題,與簡潔的新怪誕體無襯線體用於所有內文和 UI 文字形成對比。關鍵佈局限制:使用充裕的留白、12 欄居中網格,以及基於 8px 的邊框圓角。重要限制:保持墨黑色(#0A0E19)與背景之間的高對比度,避免使用過於裝飾性的字體,僅使用指定的柔和綠色作為強調連結,並確保所有互動元素均使用標準的 0.2 秒 cubic-bezier 過渡效果。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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