精選 · 開放 · 免費

Gleap

自動化支援、反饋與開發任務的 AI 代理

SaaSAIProductCleanRestraint

Gleap 網站截圖

↓ 下載設計系統包 (13 MB)在 OpenDesign 中開啟

原站: https://gleap.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

AI 支援自駕開發生產力SaaS

一位專業且能幹的 AI 團隊成員，整合至你的工作流程

02

色彩

#353535Ink

#292929Ink soft

#F6F6F3BG

#EDEDE8BG soft

#FFFFFFBG quiet

rgba(53,53,53,0.5)Muted

rgba(53,53,53,0.12)Line

溫潤中性色調，以高對比確保清晰度

03

字型

humanist-sans · monospace

display-lg64px · 400
display-sm32px · 400
body-lg22px · 400
body16px · 400
caption14px · 400

所有文字使用人文主義無襯線字體 · 大型標題文字維持緊湊的字距 · 內文維持 16px 基礎尺寸以確保可讀性

04

間距

4px

8px

16px

18px

24px

32px

60px

84px

一致的 4px 基礎網格，垂直間距充裕

05

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

sm · 6px

md · 12px

lg · 200px

pill · 999px

1px solid rgba(53,53,53,0.12)

0px 18px 55px 0px rgba(16,24,40,0.12) · 0px 1px 3px 0px rgba(0,0,0,0.15) · 0px 0px 20px 0px rgba(0,0,0,0.1)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

內容採置中單欄版面，定價卡片採寬網格佈局

07

動效與互動

200msmicro

200mssmall

200msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

懸停時流暢的透明度與背景色過渡 · 互動元素的變換過渡

細微的背景色變化與透明度調整 · 即時視覺回饋，無延遲

08

組件

button 膠囊造型按鈕，主要操作採深色背景，次要操作採淺色背景搭配深色邊框
card 簡潔卡片，背景細微（高亮卡片帶綠色調），無厚重邊框
chip 小型圓角徽章，用於功能標示與標籤
input 簡約的文字輸入欄位，樣式極簡
hero 大型置中標題，搭配輔助文字與顯眼的 CTA 按鈕

09

文案語氣與禁用清單

語氣專業而親和，對 AI 能力充滿信心
標題風格 清晰、聚焦利益點的陳述，使用句號結尾
按鈕文案 行動導向，明確價值主張（例如：「開始 14 天免費試用」）

勿使用霓虹或高飽和強調色——截圖僅顯示柔和、溫潤的中性色調
勿使用襯線字體——截圖顯示一致的人文主義無襯線字體
勿透過色彩建立厚重的視覺層級——截圖使用字重與大小，而非色彩
勿添加裝飾性邊框或厚重陰影——截圖使用細微邊框與極簡陰影
勿使用複雜漸層——截圖顯示平坦、溫潤的背景色
勿過度擁擠版面——截圖維持充裕的留白與呼吸空間
避免: 技術術語
避免: 過於口語化的語言
避免: 模糊的價值主張

10

包內真實截圖

Gleap — 桌面首屏（hero） — 桌面首屏（hero）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gleap — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Gleap.io 是一個提供 AI 驅動的支援與開發工具的 SaaS 平台。設計採用溫潤、中性的色調，以 #F6F6F3 為主要背景，#353535 為主要文字色，#EDEDE8 用於細微對比。字體為人文主義無襯線字體（Switzer），大型標題文字（64px）使用緊湊字距。關鍵元素：膠囊造型按鈕，主要操作採深色背景，垂直內距充裕達 84px，版面簡潔置中。重要禁忌：絕不使用霓虹色、絕不使用襯線字體、絕不過度使用裝飾元素擁擠版面。設計優先考量清晰度與專業感，而非視覺複雜度。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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