OpenDesign·你的设计资产库

网页参考

Algolia

一个高端的AI驱动搜索平台,平衡了深厚的技术能力与易于理解、大胆的视觉传达。

Developer ToolsSearch

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

01

设计气质 DNA

搜索AI开发者平台检索

一个面向开发者的精密搜索基础设施,融合了深邃的技术美学与明亮、平易近人的强调色。

02

色彩

#003DFFAccent
#000000Ink
#374151Ink soft
#000033BG
#F2F2F2BG soft
#F6F6F6BG quiet
#E5E7EBMuted
rgba(0, 0, 0, 0.05)Line

高对比度的深色模式基础,搭配充满活力的主蓝色强调色和用于内容区域的中性浅色表面。

03

字体

humanist-sans · geometric-sans · monospace

  • display56px · 700
  • h240px · 700
  • body16px · 400

标题使用粗体、几何风格的无衬线字体,字间距紧凑。 · 正文默认使用清爽的几何无衬线字体以获得最佳可读性。 · 代码片段使用标准等宽字体。

04

间距

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

基于4px的基础网格,配以宽裕的间距以获得呼吸感。

05

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

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

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(0, 61, 255, 0.12) 0px 0px 6px 2px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的最大宽度容器,采用12列网格和24px的间距。

07

动效与交互

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

按钮和链接悬停时的平滑颜色与透明度过渡。 · 交互元素的微妙缩放或变换效果。

微妙的背景色变化或透明度改变。 · 即时的视觉反馈,无繁重动画。

08

组件

  • button 实心蓝色主按钮,采用药丸形或圆角,以及幽灵/描边次按钮。
  • card 简洁的矩形卡片,带有微妙的阴影或边框,常用于展示客户徽标。
  • chip 在截图中不显眼。
  • input 带有微妙边框和放大镜图标的搜索输入框。
  • hero 分屏布局,左侧为粗体文字,右侧为大型深色主题的产品截图或交互式视觉。

09

文案语气与禁用清单

  • 语气 专业、自信且具有技术权威性。
  • 标题风格 简短、有力、直接,常使用如'Agentic'或'Generative'等强有力的形容词。
  • 按钮文案 行动导向的短语,如'探索平台'或'立即开始'。
  • 不要使用纯黑色背景 — 该网站使用的是深邃午夜蓝(#000033)。
  • 不要为正文使用纤细、轻盈的字体粗细 — 该网站主要偏好粗体(700)或常规(400)字重。
  • 不要在所有地方都使用尖锐的方角 — 设计采用圆角,主要为8px或12px。
  • 不要使用明亮的霓虹强调色 — 主要强调色是沉稳自信的蓝色(#003DFF)。
  • 不要创建过于密集、拥挤的布局 — 该网站使用宽裕的间距(24px间距,64px区域间隙)。
  • 不要在UI组件上使用复杂、厚重的投影 — 阴影是微妙的,主要用于柔和的提升或发光效果。
  • 避免: 避免过于随意或俏皮的俚语。
  • 避免: 避免杂乱的布局掩盖核心信息。
  • 避免: 避免使用软弱或无描述性的行动号召。

10

包内真实截图

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

11

System Prompt

Algolia是一个为开发者和企业设计的高端AI搜索平台。其视觉识别建立在深邃午夜蓝(#000033)背景的首屏和导航之上,与内容区域的清爽浅灰(#F2F2F2)或白色背景形成对比。主强调色是充满活力的蓝色(#003DFF),战略性地用于行动号召和交互高亮。字体依赖于清爽的几何无衬线字体类别,通常使用Sora作为粗体展示标题,Inter作为正文。关键设计约束包括避免纯黑背景、使用宽裕的留白、保持高对比度以利于可读性、使用圆角(8-12px)而非尖锐边缘,以及避免过于复杂或厚重的投影,转而采用微妙的提升或发光效果。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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