OpenDesign·你的设计资产库

网页参考

Audemars Piguet

为爱彼打造的高端社论式体验,强调传承、电影级摄影与克制的奢华感。

WatchesLuxury

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

01

设计气质 DNA

传承精致瑞士工艺永恒

一部融合传承与现代叙事的电影感时尚社论。

02

色彩

#ffffffInk
#8b8c8cInk soft
#000000BG
#f6f5f3BG soft
#808080Muted
rgba(139, 140, 140, 0.3)Line

严格的单色调色板(黑、白、冷灰),以让摄影内容占据主导。

03

字体

transitional-serif · humanist-sans

  • display60px · 300
  • body16px · 300
  • caption14px · 300

用于高冲击力社论标题的过渡衬线字体。 · 用于所有界面元素、导航及正文的人文无衬线字体。 · 大写说明文字保持充裕的字间距。

04

间距

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

采用充裕的垂直韵律与大段落内边距(100px+)来界定内容区域。

05

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

sm · 2px
md · 3px
lg · 0px
pill · 999px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血首图区域过渡至黑色、内容受限的社论式区块。

07

动效与交互

220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的色彩与背景过渡。

通过 0.3s 的 ease-in-out 过渡实现微妙的色彩变化。 · 可能通过透明度或色彩变化提供微妙反馈。

08

组件

  • button 极简文本链接,以水平线前缀取代传统边框。
  • card 用于社论叙事的大幅、通栏摄影卡片。
  • input 采用高对比度黑白样式的标准 Cookie 同意按钮。
  • hero 全视口电影级摄影,叠加衬线字体排版。

09

文案语气与禁用清单

  • 语气 精致、诗意且以叙事为驱动。
  • 标题风格 采用大号细衬线字体,常使用斜体以示强调。
  • 按钮文案 微妙而低调,使用线条图标和小写文本。
  • 避免使用明亮或霓虹强调色——截图显示为严格的单色调色板。
  • 避免为界面元素使用厚重、块状的边框——截图显示为精致的 1px 线条或无边框文本链接。
  • 避免为标题使用粗重、加粗的字体——截图显示为纤细、轻量的衬线字体。
  • 避免将所有文本内容居中——截图显示为强有力的左对齐排版布局。
  • 避免使用传统的矩形按钮——截图显示为带有水平线前缀的文本链接。
  • 避免在界面中使用多种相互竞争的字体——截图显示为严格的衬线/无衬线字体配对。
  • 避免: 紧迫性驱动的语言
  • 避免: 激进的行动号召按钮
  • 避免: 营销术语
  • 避免: 繁忙或杂乱的界面

10

包内真实截图

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

11

System Prompt

这是一个为爱彼打造的高端奢华腕表网站。其设计 DNA 深具电影感和社论风格,优先呈现高质量摄影而非界面元素。关键十六进制色值为 #000000 用作主要背景,#ffffff 用作文本,营造高对比度的单色基底。字体类别中,过渡衬线用于展示性标题,人文无衬线用于正文。关键禁忌:勿使用明亮或霓虹强调色;勿为 UI 元素使用厚重、块状的边框;勿为标题使用粗重、加粗的字体。布局以全出血首图和充裕的垂直间距定义,营造精致、从容的浏览体验。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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