精選 · 開放 · 免費

Audemars Piguet

Audemars Piguet 的高端編輯體驗，強調傳承、電影感攝影與克制的奢華。

watchesluxury
Audemars Piguet 網站截圖
↓ 下載設計系統包 (32 MB)在 OpenDesign 中開啟

原站: https://www.audemarspiguet.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

傳承精緻瑞士工藝永恆

融合傳承與現代敘事的電影感時尚編輯。

02

色彩

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

嚴謹的單色調色盤（黑、白與冷色調灰色），讓攝影內容佔據主導地位。

03

字型

transitional-serif · humanist-sans

使用過渡襯線體於高衝擊力的編輯標題。 · 使用人文無襯線體於所有使用者介面元素、導覽與內文。 · 維持寬裕字距於大寫說明文字。

04

間距

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

寬裕的垂直節奏，搭配大型區塊內邊距（100px+）以框定內容。

05

表面 (圓角 / 陰影 / 邊線)

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

rgba(0, 0, 0, 0.2) 0px 0px 18px 0px · rgba(0, 0, 0, 0.2) 0px 0px 10px 0px

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

組件

09

文案語氣與禁用清單

10

包內真實截圖

Audemars Piguet — 桌面首屏（hero）
桌面首屏（hero）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Audemars Piguet — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是 Audemars Piguet 的高端奢華腕錶網站。設計 DNA 深具電影感與編輯風格，優先考慮高品質攝影而非使用者介面元素。關鍵十六進位色碼為 #000000 作為主要背景色，#ffffff 作為文字色，建立高對比、單色的基礎。字型類別使用過渡襯線體於展示標題，人文無襯線體於內文。關鍵禁忌：勿使用鮮豔或霓虹強調色；勿使用厚重、方塊狀的使用者介面邊框；勿使用粗重、加粗的字型於標題。版面由全出血首圖與寬裕的垂直間距定義，創造精緻、從容的瀏覽體驗。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko