精選 · 開放 · 免費

Warby Parker

一個簡潔、高級的眼鏡電商介面，平衡了大幅攝影與清晰、極簡的排版。

ecommerceeyewear
Warby Parker 網站截圖
↓ 下載設計系統包 (41 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

頂級平易近人時尚直接面對消費者眼鏡

一個精緻、平易近人的現代必需品精品店。

02

色彩

#1050D0Accent
#121212Ink
#3A434CInk soft
#FCFBF9BG
#FFFFFFBG soft
#E1E5E6BG quiet
#072369Muted
rgba(18,18,18,0.12)Line

以深海軍藍與亮藍色為高對比基礎調色板，引導使用者操作。

03

字型

transitional-serif · geometric-sans

所有功能文字、導航與按鈕皆使用無襯線字體。 · 僅在主要的編輯標題使用襯線字體。 · 保持寬裕的行高以利閱讀。

04

間距

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

以 4px 為基礎的穩定網格，互動元素擁有寬裕的內距（13px 24px）。

05

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

sm · 4px
md · 12px
lg · 16px
pill · 100px

使用細的 1px 實線邊框作為輪廓與分隔線。

rgba(0, 0, 0, 0.04) 0px 1px 4px 0px · rgba(0, 0, 0, 0.02) 0px 4px 12px 0px · rgba(18, 18, 18, 0.12) 0px 8px 12px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

12 欄網格，搭配寬間距與最大寬度容器，用於內容與產品展示。

07

動效與互動

200msmicro
350mssmall
800msmedium
cubic-bezier(0.25, 0, 0.35, 0.95)easing

hover 時，opacity 與 box-shadow 的平滑過渡。 · 文字與互動元素的顏色過渡。

細微的 opacity 變化與 box-shadow 擡升效果。 · 立即回應，無複雜動畫。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

Warby Parker 是一個頂級的直接面對消費者眼鏡品牌，擁有簡潔、編輯風格且平易近人的電商介面。設計 DNA 建立於柔和白色（#FCFBF9, #FFFFFF）、淺灰色（#E1E5E6）、深墨色（#121212）與深海軍藍（#072369）的調色板上，搭配主要的行動藍色（#1050D0）。排版採用人文主義/幾何無襯線字體作為內文，並以過渡襯線字體作為展示標題。關鍵約束：保持寬裕的留白與 12 欄網格；使用大尺寸、高品質的攝影；保持按鈕為藥丸形狀且高度易讀；避免雜亂佈局與不必要的裝飾元素；並確保高對比以符合無障礙標準。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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