OpenDesign·你的设计资产库

网页参考

Gamma

轻松实现AI设计，用于演示文稿、网站及其他场景

ProductivityAI
Gamma 网站截图

01

设计气质 DNA

AI设计演示文稿自动化

一个创意副驾驶，能立即将原始想法转化为精美的演示文稿

02

色彩

#0888F7Accent
#002253Ink
#38383CInk soft
#FAFAFABG
#E8EEFCBG soft
#66666BMuted
rgba(223,223,224,1)Line

以深邃海军蓝墨迹点缀的清爽白色画布，辅以柔和的蓝色水洗效果和单个电光蓝点缀色

03

字体

geometric-sans · humanist-sans

  • display56px · 700
  • h230px · 700
  • body18px · 500
  • small14px · 500

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

以4px为基础单位，保持一致并搭配充足的留白

05

表面 (圆角 / 阴影 / 边线)

sm · 8px
md · 12px
lg · 24px
pill · 9999px

使用#DFDFE0颜色的细微1px边框来定义卡片和输入框

0 1px 2px rgba(0,0,0,0.05) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 5.59px 11.18px rgba(71,123,245,0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

交替使用白色和柔和蓝色（#E8EEFC）的区块

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0, 0, 0.2, 1)easing

按钮背景颜色的平滑过渡 · 悬停时细微的变换和透明度变化 · UI状态变化时轻柔的ease-in-out变换

背景颜色加深，细微的box-shadow效果增强 · 通过颜色过渡提供即时视觉反馈

08

组件

  • button 胶囊形状（9999px圆角），主CTA按钮采用纯#002253背景和白色文字
  • card 白色卡片，搭配柔和的蓝色渐变背景（#E8EEFC至#84C1FA）和24px圆角
  • chip 胶囊形状的标签，带有细边框和柔和的文字
  • input 大号、圆角的文本区域，背景色较浅
  • hero 全宽区块，配有大型几何无衬线字体标题和抽象的3D风格插图

09

文案语气与禁用清单

  • 语气 赋能、清晰，且略带趣味
  • 标题风格 直接、以利益为导向，且语法完整
  • 按钮文案 以行动为导向且简洁，例如 '免费开始' 或 '生成'
  • 避免使用尖锐的直角——截图显示大多数组件采用慷慨的24px和12px圆角
  • 避免为主站框架使用深色背景——截图显示背景为白色和非常浅的蓝色
  • 避免使用单一的纯色背景——截图显示使用了在蓝色色调间过渡的线性渐变
  • 避免使用小而紧凑的标题字体排印——截图显示为大号、粗体、几何无衬线字体标题，并带有负字间距
  • 避免使用杂乱、密集的布局——截图显示留白充足，并有清晰的12栏网格结构
  • 避免使用激进的红色或橙色点缀色——截图显示主要点缀色为明亮、友好的蓝色（#0888F7）
  • 避免: 过于技术性的术语
  • 避免: 激进的紧迫感
  • 避免: 复杂的多词命令

10

包内真实截图

Gamma — 桌面首屏（hero）
桌面首屏（hero）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Gamma — 移动首屏
移动首屏

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

11

System Prompt

Gamma是一个简洁、现代的AI SaaS着陆页，专注于赋能用户轻松创建演示文稿。其设计DNA由清爽的白色背景（#FAFAFA）搭配深邃的海军蓝墨迹（#002253）定义，以实现高对比度和权威感。柔和、空灵的蓝色水洗效果（#E8EEFC至#84C1FA）提供了深度和友好感。字体排印方面，大型、有冲击力的标题采用粗体几何无衬线字体，并带有负字间距；可读的正文则使用简洁的人文主义无衬线字体。关键禁忌包括：不要使用尖锐的直角（应采用12px-24px圆角），避免为主布局使用深色背景（保持明亮通透），切勿使用激进或冲突的点缀色（坚持使用主要的明亮蓝色#0888F7）。整体美学专业而平易近人，利用平滑的过渡和充足的留白，引导用户注意力至'免费开始'这一主要行动号召。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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