← OpenDesign
精选 · 开放 · 免费
Qdrant
面向大规模 AI 检索的高性能向量搜索引擎。
dev ai
01
设计气质 DNA
性能 规模 向量搜索 开发者 基础设施
一条为 AI 构建的高速数据高速公路,旨在实现最大吞吐量。
02
色彩
#dc244cAccent
#ffffffInk
#8f98b2Ink soft
#090e1aBG
#28324dBG soft
#161e33BG quiet
rgba(40, 50, 77, 1.0)Line
采用高对比度暗色模式,搭配单一、高能量的强调色以驱动行动。
03
字体
humanist-sans · monospace
display 64px · 600h1 40px · 600body 16px · 400为展示标题设置紧凑的字间距,营造坚实、建筑感的感觉。 · 为正文文本设置充裕的行高,确保在深色背景上的可读性。 · 为技术标签和代码片段使用等宽字体,以建立开发者语境。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
垂直间距基于 4px 基础网格驱动,确保模块化组件的一致对齐。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用 1px 实线边框,颜色为 #28324d,用于微妙地定义模块和容器。
0px 2px 1px 0px inset 用于按钮发光效果。 · 0px 4px 8px 0px rgba(0, 0, 0, 0.2) 用于浮动元素。
06
布局
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
全宽英雄区域,包含居中文本和大型背景图像,过渡到用于内容部分的结构化网格。
07
动效与交互
200ms micro
300ms small
400ms medium
cubic-bezier(0.2, 0, 0, 1) easing
过渡和 hover 状态使用标准 ease-out。 · 模态框和菜单显示使用不透明度和可见性变化。 · 交互按钮状态使用颜色过渡。
背景颜色偏移和细微的不透明度变化。 · 通过 inset 阴影或轻微缩放偏移提供视觉反馈。
08
组件
button 主要按钮使用粗体红色渐变(#dc244c),并采用药丸形圆角以实现高可见性。 card 内容卡片由细微的 1px 边框和充裕的内边距定义。 chip 导航项是简洁的、基于文本的标签,带有 hover 过渡效果。 input 表单输入使用细微的背景、1px 边框和圆角。 hero 一个电影感的英雄区域,以太空主题的插画背景衬托大尺度排版。
09
文案语气与禁用清单
语气 技术性、自信且直接。 标题风格 大胆、声明式的陈述,强调性能和规模。 按钮文案 行动导向且以利益驱动(例如,“免费开始”)。 不要使用明亮、轻盈的背景——截图显示的是深色(#090e1a)界面。 不要到处使用柔软、圆润的边角——截图显示卡片和容器使用的是尖锐的 8px 圆角。 不要使用多种颜色——截图显示的是有限的调色板,以深蓝色和单一红色强调色为主。 不要使用低对比度文本——截图显示的是深色背景上的亮白色(#ffffff)文本。 不要使用俏皮或装饰性字体——截图显示的是功能性的、人文无衬线系统字体。 不要在布局中堆积许多并排元素——截图显示的是充裕的留白和清晰的垂直流。 避免: 模糊的营销术语。 避免: 标题中过于复杂的技术解释。 避免: 被动语态。
10
包内真实截图
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于 AI 向量搜索的高性能开发者工具。其设计 DNA 由深色、建筑感的美学定义,采用深海军蓝色背景(#090e1a)和鲜艳的红色强调色(#dc244c)用于关键操作。排版使用简洁的人文无衬线系统字体,展示标题采用紧凑字间距以传达速度和规模。关键禁忌:避免明亮背景、避免过度圆润的边角、避免低对比度文本。界面必须感觉是精心设计的、可靠的、为规模而构建的,具备充裕的留白和清晰的信息层次。
更多精选
en · zh-CN · zh-TW · ja · ko