01
设计气质 DNA
航空航天工程未来探索大胆
高端航空航天制造商的数字任务控制中心。
02
色彩
#F0F0FAInk#F0F0FAE6Ink soft#000000BG#808080Mutedrgba(240, 240, 250, 0.35)Line基于摄影感的沉浸式体验，搭配高对比度的白色排版。
03
字体
- display
48px · 700 - body
16px · 400
文本以大写形式为主 · 导航链接使用宽字距 · 标题使用厚重的粗体字重
04
间距
4px8px16px24px32px48px64px96px基于4px网格，采用充裕留白以营造电影化的展示效果。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(240, 240, 250, 0.35)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血主视觉图像搭配极简的界面叠加层。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
悬停时微妙的背景色与颜色过渡 · 移动端菜单的线性滑入动画
微妙的背景色与颜色过渡，持续时间0.5秒。 · 即时反馈
08
组件
- button 透明背景，搭配白色边框和大写文字，使用微妙的背景过渡效果。
- card 图像为主的列表项，文字极少，配有方向指示箭头。
- chip 无
- input 无
- hero 全视口电影化摄影图像，底部对齐的加粗文字。
09
文案语气与禁用清单
- 语气 权威且富有远见
- 标题风格 加粗、大写、简洁
- 按钮文案 直接且面向行动（例如：观看、加入任务）
- 不要使用圆角或柔和的UI元素——截图显示的是锐利的矩形按钮。
- 不要使用浅色背景——截图显示的是以黑色和深色摄影背景为主的设计。
- 不要使用低字重的无衬线字体——截图显示所有主要文本均使用厚重、几何感的无衬线字体。
- 不要使用彩色强调色——截图显示的是黑、白、灰的单色调色板。
- 不要使用复杂的导航菜单——截图显示的是扁平化的大写列表，带有V形箭头。
- 不要使用多栏文本布局——截图显示的是单栏、左对齐的文本块。
- 避免: 俏皮或异想天开的语言
- 避免: 过多的正文文本
- 避免: 明亮或饱和的强调色
10
包内真实截图
11
System Prompt
SpaceX的网站是一个为航空航天公司打造的电影化、高端界面，采用深色模式美学，在黑色（#000000）背景上使用高对比度的白色排版（#F0F0FA）。设计采用几何无衬线字体类别（D-DIN），使用粗体字重，并广泛采用大写样式。关键元素包括全视口摄影主视觉，以及带有1px边框的极简、透明界面组件。关键禁忌：避免使用明亮的强调色，使用锐利的矩形按钮形状代替圆角，并保持标题中看到的那种厚重的排版字重。界面依赖微妙的过渡效果和单色调色板，以强调工程优先、高端的品牌身份。