精选 · 开放 · 免费
AssemblyAI
为开发者打造的简洁、专业的语音AI基础设施
aivoice
01
设计气质 DNA
基础设施语音开发者精准
构建语音应用的精密工具
02
色彩
#3923C7Accent
#1D1B16Ink
#4A4945Ink soft
#FDFCF8BG
#F5F3EBBG soft
#777673Muted
rgba(74, 73, 69, 0.15)Line
简洁、高对比度的基底，搭配一个用于主要操作的醒目强调色。
03
字体
transitional-serif · geometric-sans · monospace
- display
64px · 400 - body
16px · 400 - mono
14px · 400
大型展示标题使用过渡性衬线体 · 正文和导航使用几何无衬线体 · 代码片段和技术UI元素使用等宽字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于一致的8px基础网格，拥有充足的留白以保持清晰。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
使用柔和的深色细边框来定义容器，避免厚重感。
0px 4px 20px 4px rgba(29, 27, 22, 0.12)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
在导航、首屏和内容区域之间提供充足的间距和清晰的层次结构。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素在hover和focus时的细微过渡 · UI组件平滑的状态变化
按钮和导航链接在悬停时产生细微的颜色或透明度变化。 · 通过状态变化提供即时的视觉反馈。
08
组件
- button 粗体、全大写按钮，填充（强调色）和描边变体之间具有高对比度。
- card 简洁的容器，带有细边框和柔和的阴影，常用于容纳交互或技术内容。
- chip 全大写、等宽字体的标签，带有细边框，用于API分类。
- input 极简的样式，拥有干净的边框，专注于功能性。
- hero 大型、粗体的衬线标题，搭配简洁的无衬线副标题和明确的行动号召。
09
文案语气与禁用清单
- 语气 专业、权威且面向开发者。
- 标题风格 大型、有冲击力的衬线标题，传达规模和重要性。
- 按钮文案 直接、全大写且以行动为导向。
- 不要使用俏皮或圆润的字体——截图显示是过渡性衬线体与几何无衬线体的混合。
- 不要使用明亮、多彩的渐变——截图显示是一个干净、基本单色的配色方案，仅有一个强调色。
- 不要用太多元素使界面显得杂乱——截图显示有充足的留白和清晰的层次。
- 不要对主要行动号召使用小写——截图显示按钮和技术标签均为全大写。
- 不要对正文使用粗重、加粗的字重——截图显示大多数文本使用一致的400字重。
- 不要使用复杂、层叠的阴影——截图显示突出元素仅使用单个、柔和的box-shadow。
- 避免: 非正式语言
- 避免: 过度装饰
- 避免: 模糊术语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（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基础设施公司设计的简洁、专业的网站。设计在大型展示标题上使用过渡性衬线字体，在正文上使用几何无衬线字体，营造出精致而现代的感觉。主要强调色是深蓝/紫色（#3923C7），用于关键操作，如“免费注册”和“开始使用”。背景是温暖的米白色（#FDFCF8），并使用稍深的米白色（#F5F3EB）进行微妙的表面区分。文本主要采用非常深的棕黑色（#1D1B16）以获得高对比度。关键禁忌：避免使用俏皮字体，避免多彩渐变，避免使界面杂乱。布局宽敞，留白充足，强调清晰度和技术精准性。
en · zh-CN · zh-TW · ja · ko