OpenDesign·你的设计资产库

网页参考

Segment

一个简化复杂数据管道的专业客户数据平台。

SaaSData

封面待补录,可通过原站查看设计。

01

设计气质 DNA

数据平台集成管道统一

为处理客户数据而设计的可靠基础设施管道

02

色彩

#1866EEAccent
#FFFFFFInk
#CADCD8Ink soft
#000D25BG
#151F36BG soft
#F3F4F7BG quiet
rgba(202, 205, 216, 1.0)Line

高对比度深色模式营造技术感与高级感,蓝色用于主要操作。

03

字体

humanist-sans · monospace

  • display56px · 700
  • headline40px · 700
  • body16px · 400

在大型展示文字上使用紧凑的字间距以保持视觉密度。 · 正文采用 1.75 的标准行高以确保可读性。 · 字重保持保守,主要使用 400 和 700。

04

间距

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

版块间充足的垂直间距营造出平静、整洁的布局。

05

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

sm · 4px
md · 8px
lg · 10px
pill · 50px

边框使用极少,主要为按钮和下划线使用的 1px 或 2px 边框。

0px 10px 37.5px 0px rgba(18, 28, 45, 0.15) · inset 0px 0px 0px 2px rgb(24, 102, 238) · inset 0px 0px 0px 2px rgb(255, 255, 255)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

简洁的上重式布局,包含突出的首屏区域,其后是多列功能网格。

07

动效与交互

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

交互元素上平滑的 background-color 和 color 过渡。 · 按钮和链接在 hover 时微妙的 transform 效果。

通过背景颜色或不透明度的微妙变化来指示可交互性。 · 通过颜色变化提供即时视觉反馈。

08

组件

  • button 圆角药丸形按钮,主要操作使用纯蓝色填充,次要操作使用描边。
  • card 简洁的深色卡片,通过细微的边框或背景变化来区分内容区域。
  • chip 小型药丸形标签,浅色背景配深色文字,用于分类。
  • input 标准的表单字段,具有清晰的边框和圆角。
  • hero 全宽深色区域,包含大标题、辅助文字和突出的插图。

09

文案语气与禁用清单

  • 语气 专业、实用、直接。
  • 标题风格 清晰直接,常使用第一人称复数以建立信任。
  • 按钮文案 行动导向且具体,引导用户进入下一步。
  • 不要使用杂乱、多彩的渐变——截图显示的是纯色深海军蓝背景。
  • 不要使用尖锐的方形圆角——截图显示所有组件都使用圆角(4px、8px、50px)。
  • 不要在长段落中使用居中文本——截图显示正文左对齐以提高可读性。
  • 不要使用纤细、精致的字体——截图显示的是粗体、清晰的标题和易读的正文。
  • 不要使用杂乱的导航栏——截图显示的是简单的、顶部对齐的、项目极少的导航。
  • 不要使用厚重的投影来营造深度——截图显示的是用于扁平化设计美学的微妙、柔和阴影。
  • 避免: 过于随意的俚语
  • 避免: 侵略性的销售语言
  • 避免: 不必要的复杂术语

10

包内真实截图

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

11

System Prompt

这是一个为客户数据平台设计的专业 B2B SaaS 落地页。设计特点是深海军蓝(#000D25)背景、清晰的白色(#FFFFFF)文字和主蓝色(#1866EE)强调色。字体采用 humanist-sans 字体家族(Whitney SSm),标题使用紧凑字间距,正文使用宽松间距。布局简洁宽敞,使用 12 列网格并具有充足的垂直节奏。关键交互涉及按钮和链接上平滑的 0.3 秒过渡。关键设计规则包括:不要在按钮上使用方形圆角,不要将长文本地文本居中,不要引入多种高对比度强调色。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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