精选 · 开放 · 免费

Algolia

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

01

设计气质 DNA

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

02

色彩

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

03

字体

humanist-sans · geometric-sans · monospace

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

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

04

间距

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

05

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

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

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 专业、自信且具有技术权威性。
• 标题风格 简短、有力、直接，常使用如'Agentic'或'Generative'等强有力的形容词。
• 按钮文案 行动导向的短语，如'探索平台'或'立即开始'。

• 不要使用纯黑色背景 — 该网站使用的是深邃午夜蓝（#000033）。
• 不要为正文使用纤细、轻盈的字体粗细 — 该网站主要偏好粗体（700）或常规（400）字重。
• 不要在所有地方都使用尖锐的方角 — 设计采用圆角，主要为8px或12px。
• 不要使用明亮的霓虹强调色 — 主要强调色是沉稳自信的蓝色（#003DFF）。
• 不要创建过于密集、拥挤的布局 — 该网站使用宽裕的间距（24px间距，64px区域间隙）。
• 不要在UI组件上使用复杂、厚重的投影 — 阴影是微妙的，主要用于柔和的提升或发光效果。
• 避免: 避免过于随意或俏皮的俚语。
• 避免: 避免杂乱的布局掩盖核心信息。
• 避免: 避免使用软弱或无描述性的行动号召。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko