OpenDesign·你的设计资产库

网页参考

Baseten

一个面向开发者的首要基础设施平台,用于部署和扩展AI模型,并具备干净、权威的排版。

AIInfra
Baseten 网站截图

01

设计气质 DNA

推理开发者云运行时规模

云原生模型推理的技术蓝图

02

色彩

#19E76EAccent
#000000Ink
#FFFFFFBG
#F5F8F4BG quiet
#B3B3B3Muted
rgba(0,0,0,0.05)Line

高对比度单色基底,搭配单一鲜亮的绿色作为高饱和度点缀色。

03

字体

grotesque-sans · ui-sans-serif · monospace

  • display64px · 400
  • body16px · 400
  • mono14px · 400

标题使用紧凑的负字距以增强冲击力 · 按钮与导航栏采用等宽大写字母以体现技术感 · 正文保持高度可读性,使用标准行高

04

间距

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

以4px为基础单位,padding与间距使用一致的倍数

05

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

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

使用rgba(0,0,0,0.05)的1px细微边框作为分隔线,以及虚线作为结构网格线。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

严格的12栏网格,部分区域使用可见虚线以强调底层结构。

07

动效与交互

75msmicro
236mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的平滑颜色与背景过渡 · 内容加载的淡入过渡

通过快速缓动实现细微的颜色或背景变化。 · 即时视觉反馈。

08

组件

  • button 等宽大写文本,药丸形或直角边框,高对比度黑色或白色填充。
  • card 极简或不可见,依赖底层网格线构建结构。
  • chip 药丸形点缀容器,内含等宽文本。
  • input 标准表单字段,带有细微边框。
  • hero 分栏布局,左侧为粗体大字排版,右侧为技术图示。

09

文案语气与禁用清单

  • 语气 权威、技术、直接。
  • 标题风格 加粗的陈述性语句,字距紧凑。
  • 按钮文案 行动导向,大写等宽按钮,配有清晰的方向箭头。
  • 勿使用装饰性衬线字体 — 截图显示的是干净的无衬线标题和等宽标签。
  • 勿使用圆润、柔和的UI模式 — 截图显示的是直角边缘、药丸形按钮和几何图表。
  • 勿使用厚重的投影 — 截图显示的是完全扁平、无边框或仅有细微边框的表面。
  • 勿使用多彩的彩虹调色板 — 截图显示的是严格的黑/白/绿配色方案。
  • 勿对UI元素使用随意的句首大写 — 截图显示按钮和标签均为大写等宽字体。
  • 勿隐藏网格结构 — 截图使用可见虚线以强调技术布局。
  • 避免: 戏谑的语言
  • 避免: 过多的感叹号
  • 避免: 模糊的营销话术

10

包内真实截图

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

11

System Prompt

Baseten是一个用于AI模型推理的开发者基础设施平台,其特点是干净、技术化的美学,强调精确性与可扩展性。视觉系统采用高对比度的黑白调色板,并以单一鲜亮的绿色(#19E76E)作为高亮点缀。排版上,标题使用粗体无衬线字体以增强冲击力,技术标签与按钮则采用等宽字体。布局采用严格的12栏网格,常通过可见的虚线显露以强化工程导向的定位。关键注意事项包括:避免使用装饰性衬线字体、柔和的圆角UI模式、厚重的阴影或戏谑的语言,因为该设计优先考虑专业、蓝图般的清晰度而非亲和力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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