精选 · 开放 · 免费

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