OpenDesign·你的设计资产库

网页参考

Porsche

高端汽车品牌网站,以沉浸式摄影和醒目的标题排版为特色。

AutomotiveLuxury
Porsche 网站截图

01

设计气质 DNA

性能奢华精准竞速

融合赛车运动传统与现代奢华的高端汽车展示。

02

色彩

#FAFBFFInk
#000000BG
#9E9EFFMuted
rgba(250, 251, 255, 0.1)Line

深色模式为主,搭配白色文字,确保与摄影背景形成最大对比度。

03

字体

grotesque-sans

  • display95px · 400
  • body16px · 400

导航和标签全部使用大写字母 · 展示文字采用紧凑行距 · 深色背景上使用高对比度白色文字

04

间距

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

大型图像与排版周围留有充足的空白

05

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

sm · 4px
md · 12px
lg · 32px
pill · 999px

透明度为10%的细微白色边框

0 4px 24px rgba(0,0,0,0.5)

06

布局

1440container
12columns
30pxgutter
768 / 1024breakpoints

全出血英雄区,下方为基于网格的卡片区段

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0, 0, 0.2, 1)easing

宽度变化时的平滑过渡 · 叠加层的淡入/淡出效果

按钮、卡片等交互元素的视觉反馈 · 即时响应并伴随平滑状态转换

08

组件

  • button 带白色文字的透明背景描边胶囊按钮
  • card 全宽摄影卡片,带有渐变叠加层以提高文字可读性
  • chip 用于分类的小型圆角胶囊(电动、混动、燃油)
  • hero 全视口图像/视频,搭配大字号排版与播放控制

09

文案语气与禁用清单

  • 语气 自信且权威
  • 标题风格 简短有力的陈述句,以句号结尾
  • 按钮文案 简单的“了解更多”并带有箭头指示
  • 勿使用明亮饱和的背景——截图显示深色摄影背景
  • 勿使用装饰性衬线字体——截图显示简洁的无衬线字体
  • 勿使用过度的界面装饰——截图显示极简导航元素
  • 勿为标题使用小号文字——截图显示大字号展示排版
  • 勿使用彩色强调按钮——截图显示深色背景上的白色描边按钮
  • 勿使用杂乱的布局——截图显示内容区段间留有充足间距
  • 避免: 感叹号
  • 避免: 非正式用语
  • 避免: 标题中的技术术语

10

包内真实截图

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

11

System Prompt

Porsche 是一个高端汽车品牌网站,采用深色、以摄影为核心的设计。调色板使用 #000000 背景搭配 #FAFBFF 白色文字以形成高对比度。排版采用 Porsche Next,一种自定义的粗体无衬线字体,展示字号最大可达 95px。网站优先呈现沉浸式图像,界面元素极少。关键设计规则:绝不使用装饰性衬线字体,避免小号标题,保持充足空白,使用描边按钮而非填充按钮,保持导航极简,并确保所有摄影区段采用深色背景。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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