厳選・オープン・無料

Audemars Piguet

Audemars Piguetのためのプレミアム・エディトリアル体験。Heritage、シネマティックな写真、抑制されたラグジュアリーを重視します。

watchesluxury
Audemars Piguet のスクリーンショット
↓ デザインシステムをダウンロード (32 MB)OpenDesign で開く

オリジナル: https://www.audemarspiguet.com

📦 パックの中身を見る →

01

デザイン DNA

HeritageSophisticationSwiss CraftsmanshipTimeless

伝統と現代のストーリーテリングを融合した、シネマティックなファッションエディトリアル。

02

カラー

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

厳格なモノクロームパレット（黒、白、クールグレー）。写真コンテンツが支配的となるよう設計。

03

タイポグラフィ

transitional-serif · humanist-sans

高インパクトのエディトリアル見出しにはトランジショナル・セリフを使用。 · すべてのUI要素、ナビゲーション、本文にはヒューマニスト・サンズを使用。 · 大文字キャプションには豊富な文字間隔を維持。

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は深くシネマティックかつエディトリアルであり、UI要素よりも高品質な写真を優先します。主要なHEXカラーは、プライマリ背景の#000000とテキストの#ffffffであり、高コントラストのモノクローム基盤を形成します。タイポグラフィカテゴリは、ディスプレイ見出しにはトランジショナル・セリフ、本文にはヒューマニスト・サンズを使用します。重要な禁忌：明るいまたはネオンのアクセントカラーを使用しない；UI要素に太く、ブロック状のボーダーを使用しない；見出しに太く-boldなフォントを使用しない。レイアウトは、フルブリードのヒーロー画像と豊富な垂直間隔で定義され、洗練された、落ち着いたブラウジング体験を生み出します。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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