OpenDesign·你的设计资产库

网页参考

Typesense

一个简洁、面向开发者的 SaaS 落地页，用于推广一款开源搜索引擎。

Developer ToolsSearch
Typesense 网站截图

01

设计气质 DNA

搜索开源快速开发者API

一个为追求无繁琐搜索体验的开发者打造的锐利、实用的工具箱。

02

色彩

#353FD7Accent
#000000Ink
#4D4D4DInk soft
#FAFAFABG
#FFFFFFBG soft
#F1F1F1BG quiet
#999999Muted
rgba(229,231,235,1)Line

高对比度、以黑与浅灰为主的单色调色板，点缀活力靛蓝色与标志性的高饱和度石灰绿用于交互元素。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 500
  • h248px · 500
  • body16px · 300
  • caption14px · 300

使用粗体几何无衬线字体作为展示标题。 · 使用简洁的人文主义无衬线字体作为正文，采用细字重。 · 等宽字体保留用于代码片段和技术要点。

04

间距

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

采用一致的 4px 基础网格，广泛用于组件内部间距（内边距和间隙）。

05

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

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

1px solid rgb(229,231,235)

rgba(0,0,0,0.1) -5px 4px 34px 0px · rgba(0,0,0,0.2) 0px 10px 15px -3px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏主内容区，留有充足空白，特性卡片部分转为多栏网格。

07

动效与交互

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

交互元素上平滑的颜色和背景过渡。 · 用于菜单或元素揭示的裁剪路径动画。 · 主要操作按钮上的细微 hover 变换。

交互元素上的颜色变化、细微背景改变或轻微向上位移。 · 标准指针光标，提供即时视觉反馈。

08

组件

  • button 药丸形或高度圆角矩形，采用纯色填充（石灰绿）或高对比度描边（黑色），配有硬质投影或柔和光晕。
  • card 带轻微边框或阴影的矩形，内部留有充足间距，用于分组特性描述。
  • chip 小型圆角边框标签，用于类别或标签。
  • input 高度圆角的搜索栏，配有显眼边框，设计为中心交互元素。
  • hero 一个居中的巨大文本块，使用醒目的强调色，下方是一个大型交互式搜索组件。

09

文案语气与禁用清单

  • 语气 自信、平易近人且略带趣味，将复杂技术定位为易于接近。
  • 标题风格 大号、粗体且直接，常使用对比色进行强调。
  • 按钮文案 以行动为导向且具有鼓励性，使用趣味性标点或明确的指示。
  • 不要使用复杂或杂乱的背景——截图显示的是干净、主要为纯色的浅色背景。
  • 不要在标题中使用厚重或正式的衬线字体——截图显示的是粗体几何无衬线字体。
  • 不要使用柔和或去饱和的调色板——截图特点是活力石灰绿和强烈的靛蓝色强调。
  • 不要为首要元素使用尖锐的直角——截图始终使用圆角或药丸形边框。
  • 不要将深色模式作为默认——截图显示的是以浅色为主的主题。
  • 不要使用纤细、薄弱的排版——截图对关键信息使用了大号、粗体字重。
  • 避免: 未经解释的行话
  • 避免: 过于正式或刻板的语言
  • 避免: 模糊的价值主张

10

包内真实截图

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

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

11

System Prompt

这是一个面向开发者的 SaaS 落地页，用于推广一款开源搜索引擎。其视觉识别干净、自信且略带趣味，使用以浅色为主的背景与高对比度排版。关键颜色包括：用于主要墨色的纯黑 (#000000)、用于强调的活力靛蓝色 (#353FD7)，以及用于主要操作和交互高亮的标志性高饱和度石灰绿 (#C0FF58)。排版特点是使用粗体几何无衬线字体作为展示文本，以及简洁的人文主义无衬线字体作为正文。关键设计约束：切勿使用深色背景作为主画布；避免在交互元素上使用尖锐的直角；并避免使用柔和、低对比度的颜色，以免降低界面的锐利度和清晰度。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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