OpenDesign·你的设计资产库

网页参考

Bugatti

以电影般的影像和克制的优雅,打造超高端汽车品牌体验

EditorialPremiumCleanRestraintReference
Bugatti 网站截图

01

设计气质 DNA

奢华传承精准汽车专属

高端汽车杂志与奢侈时尚品牌的结合

02

色彩

#FFFFFFInk
#000000BG
#999999Muted
rgba(255,255,255,0.2)Line

黑白鲜明对比,所有色彩均来自摄影图像

03

字体

humanist-sans · monospace

  • display60px · 400
  • headline36px · 400
  • body16px · 400
  • caption14px · 400
  • micro12px · 400

所有文字均为黑底白字 · 大写仅用于导航和标签,且需节制使用 · 大写文本元素需提供充足的字间距

04

间距

4px
8px
12px
16px
24px
36px
48px
64px
96px

基于4px的统一单位,以充足的留白营造奢华感

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 6px
lg · 8px
pill · 9999px

交互元素使用1px实线 rgba(255,255,255,0.2) 边框,其他元素无边框

rgba(0,0,0,0) 0px 0px 0px 0px · rgba(0,0,0,0.1) 0px 10px 15px -3px · rgba(0,0,0,0.1) 0px 4px 6px -4px

06

布局

1440container
2columns
36pxgutter
768 / 1024breakpoints

全幅主视觉区域,车辆卡片采用双列网格布局

07

动效与交互

150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

状态变化使用淡入淡出过渡 · 基于变换的悬停效果 · 页面切换使用较长的过渡时间

细微的透明度或颜色过渡 · 立即反馈,降低透明度

08

组件

  • button 极简幽灵按钮,1px白色边框,药丸形或6px圆角矩形
  • card 全幅图像卡片叠加文字,无可见容器边框
  • chip 未显著使用
  • input 未显著使用
  • hero 全视口电影感影像,居中白色文字,垂直节奏

09

文案语气与禁用清单

  • 语气 权威、尊贵、内敛
  • 标题风格 直接且陈述性的,大小写混合或全大写
  • 按钮文案 以动作为导向,使用祈使动词,如“见证”或“探索”
  • 勿使用多种字重——截图显示全文档均使用一致的400字重
  • 勿添加装饰性边框或阴影——截图显示极少或没有立体效果
  • 勿使用色彩点缀——截图完全依赖黑、白及摄影图像的色彩
  • 勿使内容拥挤——截图显示所有元素间留有充足的空白
  • 勿使用小写导航——截图显示“菜单”、“商店”、“见证传奇”均为全大写
  • 勿创建繁杂的布局——截图显示为简洁的单列或双列网格结构
  • 避免: 非正式语言
  • 避免: 过多的感叹号
  • 避免: 杂乱的布局
  • 避免: 明亮的色彩点缀
  • 避免: 装饰性字体

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Bugatti.com 是一个超高端定位的奢侈汽车品牌网站。设计采用黑白鲜明的配色方案(#000000背景,#FFFFFF文字),所有视觉焦点均来自电影感的汽车摄影。字体为humanist-sans-serif,统一使用400字重,主视觉标题尺寸最大可达60px。布局极简,采用全幅区域和充足的留白。交互元素使用带白色边框的细微幽灵按钮。网站整体散发出克制与传承的气息。关键禁忌:绝不要使用明亮的色彩点缀,绝不要添加装饰性阴影或边框,绝不要用繁杂的布局挤占内容,绝不要使用多种字重,绝不要使用小写导航标签,绝不要牺牲充足的留白。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。