OpenDesign·你的设计资产库

网页参考

Gleap

自动化支持、反馈与开发任务的 AI 智能体

SaaSAIProductCleanRestraint
Gleap 网站截图

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 — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Gleap.io 是一个提供 AI 驱动支持与开发工具的 SaaS 平台。设计采用温暖、中性的色系，主背景为 #F6F6F3，主文字为 #353535，细微对比色为 #EDEDE8。字体使用人文主义无衬线字体（Switzer），大号展示文字（64px）字间距紧凑。关键元素：主要操作的胶囊形按钮使用深色背景，充裕的 84px 纵向内边距，以及干净的居中布局。关键禁忌：绝不使用霓虹色，绝不使用衬线字体，绝不使用装饰元素使布局拥挤。设计优先保证清晰度与专业性，而非视觉复杂性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。