01
设计气质 DNA
开发者浏览器云端 IDE速度AI
专为浏览器端开发打造的高性能引擎。
02
色彩
#00a8dbAccent#ffffffInkrgba(255,255,255,0.8)Ink soft#0f1014BG#151619BG soft#1c1f25BG quiet#a1a5b0Mutedrgba(255,255,255,0.12)Line高对比度的深色 UI，强调速度与专注，点缀以单一的活力蓝色。
03
字体
- display
94px · 700 - heading
40px · 700 - body
16px · 400 - small
13px · 500
大型展示型字体使用 Manrope，正文/UI 文本使用 Inter。 · 标题保持紧凑的字间距，以营造密集、高冲击力的感觉。 · 任何技术性或与代码相关的片段使用 Roboto Mono。
04
间距
4px8px16px24px32px48px64px96px主要版块之间保持充裕的间距，UI 组件内部则使用紧凑的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(255, 255, 255, 0.12)
rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的高端营销网站布局，包含全宽深色主视觉区、居中内容列和并排比较网格。
07
动效与交互
100msmicro
1200mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
用于内容展示的平滑淡入与滑动过渡。 · 用于 UI 状态变化的弹性/伸缩过渡。
交互元素上的细微颜色或透明度变化。 · 通过状态变化提供即时反馈。
08
组件
- button 实心蓝色主按钮，搭配白色文字，采用药丸形或大圆角形状；具备细微的悬停状态。
- card 带有细微边框的深色表面，常用于数据或功能比较。
- chip 用于数据表格中的状态指示器或小标签。
- input 极简的深色输入框，带有细微的内嵌阴影和细边框。
- hero 以大规模字体为主的主视觉区域，拥有醒目的背景渐变和淡淡的、线框风格的 UI 插图。
09
文案语气与禁用清单
- 语气 自信、技术性、直接。
- 标题风格 加粗、以用户收益为导向，并经常使用大号字体来强调关键词。
- 按钮文案 简洁、行动导向的标签，例如“Try Bolt.new”。
- 不要使用白色背景——截图显示的是深色、近乎黑色的主背景。
- 不要使用衬线字体——截图显示的是简洁、现代的无衬线字体。
- 不要使用多个相互竞争的强调色——截图显示的是单一的主导蓝色点缀。
- 不要为圆角主按钮使用过大的 border-radius——截图显示的是矩形或略带圆角的按钮。
- 不要为焦点状态使用细的、浅色的轮廓——截图使用的是高对比度的白色或蓝色边框。
- 不要使用过于复杂的渐变——截图使用的是微妙的、由深到更深的渐变或纯色深色表面。
- 避免: 模糊的营销术语
- 避免: 过于复杂且未明确收益的技术解释
- 避免: 被动语态
10
包内真实截图
11
System Prompt
这是 StackBlitz，一款面向开发者的高性能、基于浏览器的云端 IDE。设计采用高端深色模式美学，将产品定位为快速、现代且专业。关键颜色是非常深的灰黑色背景 (#0f1014, #151619)、清晰的白色文字 (#ffffff, rgba(255,255,255,0.8)) 以及一个活力十足、高饱和度的蓝色点缀 (#00a8db)。字体使用人文主义无衬线类别 (Inter, Manrope)，展示比例非常大且字间距紧凑。关键禁忌：绝不要使用亮色主题；避免使用纤细的装饰性字体；且绝不要使用超过一种活力强调色。整体感觉沉静、专注，专为提升生产力而构建。