OpenDesign·你的设计资产库

网页参考

Warby Parker

一个干净、高端的眼镜电商界面，平衡大幅摄影与简洁、极简的字体排印。

E-commerceEyewear
Warby Parker 网站截图

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

  • display-lg56px · 400
  • display-sm40px · 400
  • body-lg18px · 400
  • body16px · 400

所有功能文本、导航和按钮均使用无衬线字体。 · 仅主要编辑标题使用衬线字体。 · 保持宽松的行高以提升可读性。

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

悬停时平滑的透明度和box-shadow过渡。 · 文本和交互元素的颜色过渡。

微妙的透明度变化和box-shadow提升效果。 · 即时响应，无复杂动画。

08

组件

  • button 药丸形状，搭配粗体无衬线文字，使用主蓝色或深海军蓝填充。
  • card 干净的容器，具有微弱或无阴影，常展示大幅图像。
  • chip 药丸形状的标签，搭配细线轮廓或微弱背景。
  • input 干净的带边框字段，内边距宽松。
  • hero 全宽沉浸式摄影，叠加粗体字体和号召性用语。

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 — 移动首屏
移动首屏

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

11

System Prompt

Warby Parker是一个高端、直面消费者的眼镜品牌，拥有干净、编辑感和亲切的电商界面。其设计基因建立在柔和的白色(#FCFBF9, #FFFFFF)、浅灰色(#E1E5E6)、深墨色(#121212)和深海军蓝(#072369)的调色板上，并以主操作蓝色(#1050D0)点缀。字体排印采用人文主义/几何无衬线字体作为正文，过渡衬线字体作为展示标题。关键约束：保持宽松的留白和12列网格；使用大型、高质量摄影；按钮保持药丸形状和高度易读性；避免杂乱布局和不必要的装饰元素；并确保高对比度以实现无障碍访问。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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