OpenDesign·你的设计资产库

网页参考

Zapier

一个统一 AI 治理与工作流自动化的企业级 SaaS 平台

SaaSDeveloper ToolsProductivityAIClean
Zapier 网站截图

01

设计气质 DNA

自动化AI 治理集成企业级工作流

一个连接 AI 与商业工具的中立指挥中心

02

色彩

#FF4F00Accent
#201515Ink
#36342EInk soft
#FFFDFBBG
#F8F4F0BG soft
#ECEAE3BG quiet
#605D52Muted
rgba(32,21,21,0.1)Line

温暖、纸质的中性色搭配高饱和度、充满活力的橙色

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 600
  • heading-lg48px · 500
  • stat32px · 500
  • body-lg20px · 400
  • body16px · 400
  • caption14px · 500

使用几何无衬线字体，以紧凑的字距呈现有力的标题 · 使用人文无衬线字体，以标准尺寸呈现可读性强的正文 · 对小型元数据标签应用大写转换并增加字距

04

间距

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

宽敞的留白定义了布局，以 4px 为基本单位，向上扩展到大型结构区块

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

采用柔和中性色调的微妙 1px 实线边框

0 1px 3px rgba(0,0,0,0.08) · 0 4px 12px rgba(0,0,0,0.05)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单列主视觉布局，过渡到基于网格的功能区块

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing

状态变化时平滑的透明度淡入淡出 · 内容区块加速的入场动画

光标变为指针；按钮和链接颜色微妙偏移或变亮 · 即时的视觉反馈，微交互延迟极小

08

组件

  • button 胶囊形实心填充（使用强调色），或带中性边框和文字的描边样式
  • card 带微妙圆角和浅色边框，用于模板和功能预览
  • chip 用于标签页式导航，带圆角和交替填充状态
  • input 圆角矩形输入框，带微妙边框和清晰标签
  • hero 大型、居中的字体组合，包含醒目的双重行动号召

09

文案语气与禁用清单

  • 语气 赋能的、权威的、高度专业的
  • 标题风格 简洁、有力的陈述，强调用户控制权
  • 按钮文案 直接且面向行动（例如，'通过邮箱免费开始'）
  • 不要使用鲜艳渐变——截图显示的是一个干净、主要为扁平化的布局，采用温暖中性色
  • 不要使用厚重的投影——截图显示的是微妙、柔和的浮起效果或扁平边框
  • 不要在标题上使用宽字距——截图显示的是紧凑排列的展示文本
  • 不要将正文段落居中对齐——截图显示的是左对齐的可读性文案
  • 不要使用冷色调蓝色强调色——截图显示的是温暖、充满活力的橙色作为主要操作色
  • 不要使用高度装饰性的字体——截图显示的是清晰易读的几何和人文无衬线字体
  • 避免: 无实质内容的流行词汇
  • 避免: 被动或过于正式的语言
  • 避免: 模糊或令人困惑的技术术语

10

包内真实截图

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

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

11

System Prompt

Zapier 是一个专注于 AI 治理和工作流自动化的专业 SaaS 平台。核心色板使用温暖、纸质的灰白色（#FFFDFB, #F8F4F0）和深墨色（#201515, #36342E），搭配单一的高饱和度橙色（#FF4F00）用于主要操作。字体方面，展示文本使用干净的几何无衬线字体，正文使用人文无衬线字体。布局宽敞且居中，从大型主视觉区域过渡到有序的内容网格。避免使用装饰性字体、厚重投影或冷色调。优先考虑清晰的层级关系、宽敞的留白和微妙的边框，以保持平台干净、可信赖且具备企业级美感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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