OpenDesign·你的设计资产库

网页参考

Stream

使用Stream的开发者优先SDK,更快构建聊天、信息流与视频集成。

Developer ToolsChat
Stream 网站截图

01

设计气质 DNA

开发者实时API基础设施

一个干净、专业的开发者控制台,用于构建实时功能。

02

色彩

#005FFFAccent
#040405Ink
#323B44Ink soft
#FFFFFFBG
#FAFAFABG soft
#EFF0F1BG quiet
#979CA0Muted
rgba(13, 23, 33, 0.1)Line

高对比度的专业极简主义,搭配单一鲜亮的蓝色点缀。

03

字体

humanist-sans · monospace

  • display48px · 500
  • h236px · 500
  • h324px · 600
  • body16px · 400
  • code14px · 400
  • caption12px · 500

标题与标题字体粗细通常为500至600。 · 正文使用标准的400粗细,以确保最大可读性。 · 等宽字体专用于行内代码与命令块。

04

间距

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

以4px为基础保持一致间距,首屏与章节分隔处使用充裕留白。

05

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

sm · 6px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(13, 23, 33, 0.1)

0px 3px 12px 0px rgba(0, 0, 0, 0) · 0px 1px 4px 0px rgba(0, 0, 0, 0.14)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

标准居中容器,采用双栏首屏布局。

07

动效与交互

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

hover状态下平滑的background-color和opacity过渡。 · 交互过程中微妙的box-shadow调整。

background-color或opacity在0.15秒至0.5秒内变化。 · 即时状态变化,伴随细微的transform或shadow反馈。

08

组件

  • button 实心蓝色圆角胶囊形状用于主要操作;白色圆角胶囊带边框用于次要操作。
  • card 白色卡片配以微妙的灰色边框和圆角(16px),用于用例展示。
  • chip 小型大写标签,采用浅色背景与圆角。
  • input 代码块样式,使用等宽字体和深色背景,用于命令提示。
  • hero 左侧大型左对齐文本块,右侧搭配浮动、交叠的产品UI模型。

09

文案语气与禁用清单

  • 语气 专业、面向开发者且自信。
  • 标题风格 直接、行动导向,略带技术性。
  • 按钮文案 清晰即时,使用等宽字体点缀,如 '>_' 或 '->'。
  • 不要使用厚重的投影——截图显示的是非常微妙、几乎不可见的阴影。
  • 不要使用复杂的渐变——截图主要显示纯白色和浅灰色背景。
  • 不要使用装饰性衬线字体——截图对所有文本使用干净的人文主义无衬线字体。
  • 不要使用霓虹或多种点缀色——截图显示严格的仅蓝色点缀策略。
  • 不要在主要按钮上使用尖角——截图使用完全圆角的胶囊形状。
  • 不要使用密集布局——截图显示充裕的内边距和清晰的章节分隔。
  • 避免: 过于随意的俚语
  • 避免: 模糊的营销术语
  • 避免: 未经证实的技术主张

10

包内真实截图

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

11

System Prompt

Stream的网站是一个面向开发者的SaaS着陆页,采用干净、高对比度的设计。主色板包括白色背景、深墨色文本和单一鲜亮的蓝色点缀(#005FFF)。字体方面,标题和正文使用人文主义无衬线字体,代码片段使用等宽字体。关键设计元素包括充裕的留白、圆角胶囊按钮和微妙的卡片边框。默认不使用深色模式。不使用装饰性或衬线字体。不使用多种相互竞争的点缀色。布局居中且专业,优先考虑可读性,并为开发者提供清晰的行动号召。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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