OpenDesign·你的设计资产库

网页参考

Lucid

一个豪华电动汽车品牌,通过电影感的摄影画面和克制、优雅的字体排印来呈现其高端SUV产品。

AutomotiveEv

封面待补录,可通过原站查看设计。

01

设计气质 DNA

奢华电动汽车高端精致

一个融合了电影感摄影与极简镀铬装饰的高端汽车展厅。

02

色彩

#d7be96Accent
#000000Ink
#323232Ink soft
#0f0f0fBG
#f0f0f0BG soft
#7f7f7fMuted
rgba(0,0,0,0.1)Line

采用深黑色与亮白色构成的高对比度色板,以电影感摄影画面为主导,并点缀以低调的金色来增添高端暖意。

03

字体

transitional-serif · grotesque-sans

  • display64px · 400
  • body16px · 400
  • caption12px · 400

展示型标题使用具有过渡特征的衬线字体,字距紧凑以营造高端感。 · 正文使用简洁的无衬线字体以确保可读性。 · 小字文本和标签使用宽字距以营造通透、奢华的美感。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

基于一致的4px网格系统,并运用充足留白来突出摄影内容。

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

仅谨慎地使用最小化的1px实线边框进行分隔或用于表单字段。

rgba(0, 0, 0, 0.3) 0px 0px 7px -2px

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

采用全出血式电影感首屏图像,配合左对齐的文字叠加以及简洁、极简的导航栏。

07

动效与交互

220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

在hover状态下进行平滑的不透明度与颜色过渡(0.3s ease-in-out)。 · 为交互元素应用微妙的变换动画。 · 全视口背景媒体,进行缓慢、电影感的转场。

在文本链接上应用微妙的颜色过渡和下划线效果。 · 立即响应,并提供最小化的视觉反馈。

08

组件

  • button 极简的大写文字按钮,采用宽字距,或采用带有小圆角的微妙描边按钮。
  • card 最少或不使用卡片;内容通过全出血式摄影画面和简洁的排版区块来呈现。
  • input 简洁的底部边框或全边框输入框,装饰极少。
  • hero 全视口的电影感视频或摄影画面,叠加衬线字体标题,并辅以微妙的深色渐变。

09

文案语气与禁用清单

  • 语气 自信、精致且具权威性。
  • 标题风格 声明式且富有声望感,使用衬线字体并关联奖项或荣誉。
  • 按钮文案 直接且极简,使用宽字距的大写文字或简洁的描边按钮。
  • 避免使用多种相互竞争的颜色——截图显示的是一种严格的中性色调,仅搭配一种暖色调点缀。
  • 避免使用圆角按钮或俏皮形状——截图显示的是利落的极简直角或胶囊形状。
  • 避免为标题使用装饰性无衬线字体——截图显示的是用于展示文本的过渡特征衬线字体。
  • 避免布局被众多元素填满——截图强调充足的留白和电影感聚焦。
  • 避免使用明亮、高饱和度的颜色——截图使用的是一种低调、大地色系的金色(#d7be96)。
  • 避免使用厚重的阴影或3D效果——截图依赖于微妙的渐变和干净的摄影画面。
  • 避免: 过多的感叹号
  • 避免: 非正式的俚语
  • 避免: 杂乱的布局

10

包内真实截图

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

11

System Prompt

一个为Lucid Motors打造的豪华汽车网站,通过电影感的摄影画面和克制、精致的设计来展示其高端电动SUV。色板以深黑色(#0f0f0f)、纯净白色(#ffffff)以及单一的暖色调、低调金色(#d7be96)为主导。字体排印将用于展示标题的过渡特征衬线字体与用于正文的简洁无衬线字体相搭配。布局简洁而开阔,强调全出血式摄影和极简的镀铬装饰。关键禁忌:切勿使用多种相互竞争的颜色,避免俏皮或圆角形状,切勿为标题使用装饰性无衬线字体,切勿让布局显得杂乱,避免明亮/高饱和度的颜色,并且绝不使用厚重的阴影或3D效果。整体感觉应高端、权威且富有电影感,与高端汽车品牌的定位相契合。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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