01
设计气质 DNA
AIBuilderDeveloperModernPrompt
面向开发者的 AI 驱动创意工作室。
02
色彩
#1488fcAccent#ffffffInkrgba(255,255,255,0.75)Ink soft#111114BG#1e1e21BG soft#171719BG quietrgba(255,255,255,0.6)Mutedrgba(255,255,255,0.1)Line高对比度深色模式，搭配一个鲜明的蓝色点缀色。
03
字体
- display
56px · 700 - heading
48px · 600 - body
16px · 400 - small
14px · 400
04
间距
4px8px16px24px32px48px64px96px统一使用 4px 增量，主要间距为 16px 和 24px。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.1)
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px -15px 24.8px 0px rgba(17, 114, 226, 0.6)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容，固定最大宽度。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的颜色过渡 · hover 和 focus 时的透明度淡出
细微的颜色偏移或透明度变化。 · 即时视觉响应。
08
组件
- button 实心蓝色作为主要操作按钮，次要操作使用幽灵按钮，采用圆角药丸形或小圆角。
- card 深色表面，搭配细微边框和柔和阴影。
- chip 用于标签和工具的描边或最小背景样式。
- input 深色文本区域，搭配柔和边框和细微内阴影。
- hero 居中的大型排版，搭配发光的蓝色曲线渐变背景。
09
文案语气与禁用清单
- 语气 直接、赋能、现代。
- 标题风格 问题导向，行动驱动。
- 按钮文案 清晰、祈使语气。
- 不要使用浅色背景——截图显示的是严格的深色模式界面
- 不要使用衬线字体——截图显示的是现代人文无衬线字体
- 不要添加浓重的投影——截图最多显示细微、柔和的阴影
- 不要使用多种颜色——截图显示的是深灰、白色和一种鲜明蓝色的严格配色
- 不要使用尖锐的直角——截图显示的是统一的圆角和药丸形状
- 不要使用低对比度文本——截图显示的是深色背景上的高对比度白色文本
- 避免: 技术术语
- 避免: 正式的企业语言
- 避免: 过于复杂的句子
10
包内真实截图
11
System Prompt
Bolt.new 是一个现代 AI 驱动开发者工具，用于通过自然语言构建应用程序和网站。设计采用深邃、高对比度的深色主题，使用鲜明的电光蓝 (#1488fc) 作为唯一的高饱和度点缀色。排版依赖干净的人文无衬线字体系列，包括用于粗体、紧凑字间距标题的专用展示字体。关键限制：不要引入浅色背景或次要亮色，避免使用衬线字体，绝不为组件应用生硬的直角。整体布局居中且宽敞，强调干净、高科技、专注的用户体验。