OpenDesign·你的设计资产库

网页参考

Courier

一个高端的深色主题 SaaS 平台，用于设计和发送通知。

Developer ToolsNotifications

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

01

设计气质 DNA

通知编排消息平台开发者

一个以开发者为中心的控制中心，用于编排跨渠道通知。

02

色彩

#FFFFFFInk
rgba(255,255,255,0.72)Ink soft
#0A0A0ABG
rgba(255,255,255,0.56)Muted
rgba(255,255,255,0.04)Line

高对比度深色 UI，搭配细微的层次感。

03

字体

humanist-sans · monospaced

  • display56px · 500
  • display-sm40px · 500
  • body-lg18px · 400
  • body-sm14px · 400
  • mono12px · 400

对大型展示文本使用紧凑的行高（1.0-1.2）。 · 在各部分之间保持充裕的垂直内边距。 · 对代码片段和变量使用等宽字体。

04

间距

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

以 8px 为基础单位，保持一致的垂直间距。

05

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

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

纤细、低对比度的边框用于实现细微的分隔。

0px 1px 1px 0px rgba(0, 0, 0, 0.12) · 0px 0.602187px 0.602187px -1.25px rgba(0, 0, 0, 0.25) · 0px 2.28853px 2.28853px -2.5px rgba(0, 0, 0, 0.22)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准的居中单栏布局，搭配全宽的 Hero 区域。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

平滑的淡入效果和滚动时的细微视差。 · 交互元素通过细微的缩放或透明度变化来响应悬停。

交互元素上的细微背景或透明度变化。 · 细微的缩放或深度变化以表示激活状态。

08

组件

  • button 圆角的药丸形按钮，带有细微的背景过渡效果。
  • card 带有圆角和细微背景渐变的凸起容器。
  • chip 用于状态或标签的微小圆角徽章。
  • input 深色主题的输入框，带有细微边框和圆角。
  • hero 居中的大型标题，配有辅助文本和交互式产品模型。

09

文案语气与禁用清单

  • 语气 自信、技术性和专业性。
  • 标题风格 直接、面向利益的陈述。
  • 按钮文案 行动导向的动词，例如“请求演示”、“注册”。
  • 不要使用浅色背景——截图显示主背景为近黑色（#0A0A0A）。
  • 不要使用多种明亮的强调色——截图显示为单色调色板，仅少量使用一种品牌色（紫色）。
  • 不要使用装饰性衬线字体——截图显示所有文本都使用简洁的人文无衬线字体。
  • 不要使用复杂的网格图案或厚重的纹理——截图显示为简洁的平面，带有细微渐变。
  • 不要使用尖锐的直角——截图显示所有 UI 元素都采用圆角（8px，12px）。
  • 不要使用拥挤的布局——截图显示为简洁的居中布局，留有充裕的空白。
  • 避免: 过于随意或俏皮的语言。
  • 避免: 模糊的营销术语。
  • 避免: 不必要的感叹号。

10

包内真实截图

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

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

11

System Prompt

Courier 是一个高端的 B2B SaaS 平台，专注于以开发者为中心的通知编排。它采用深色模式（#0A0A0A）设计系统，搭配高对比度白色（#FFFFFF）和柔和（#rgba(255,255,255,0.72)）的文本。排版采用简洁的人文无衬线字体，并为代码元素搭配等宽字体。布局宽敞、居中，并聚焦于产品模型。关键禁忌：不要使用明亮的多色强调；不要使用装饰性或衬线字体；不要用不必要的图案或纹理使界面变得杂乱；不要使用尖锐的直角；不要使用浅色背景。语调自信且技术性强，直接面向开发者和产品经理。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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