精选 · 开放 · 免费
Balenciaga
一个严肃的高级时装电商平台，电影般的摄影与严峻的UI共同营造出高端、编辑风格的氛围。
fashionluxury
01
设计气质 DNA
高级时装极简主义前卫编辑风格奢华
一个严肃的高级时装杂志版面，被赋予生命，成为一个沉浸式的数字购物体验。
02
色彩
#000000Ink
#FFFFFFBG
#767676Muted
rgba(0,0,0,1)Line
高对比度的单色调色板，优先考虑图像并保持一种严格、严峻的奢华美学。
03
字体
sans-serif
- display
22px · 700 - heading
14px · 400 - body
12px · 400
所有主要导航和交互文本必须使用大写字母。 · 主要UI字体必须使用无衬线字体类别。 · 为具有高冲击力的展示文本（如版块标题）使用较宽的字间距（约0.36px）。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
所有间距均受一个严格的、统一的4px基础单位支配，创造出精确且结构化的布局。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid #000000
rgb(0, 0, 0) 0px 0px 0px 0px · rgb(170, 170, 172) 0px 0px 0px 0px
06
布局
1440container
12columns
16pxgutter
768 / 1024breakpoints
全宽沉浸式网格，让大幅摄影主导视口，将标准UI元素推至外围。
07
动效与交互
150msmicro
250mssmall
350msmedium
cubic-bezier(0.32, 0, 0.67, 0)easing
弹窗和覆盖层过渡使用350毫秒持续时间，并采用锐利的cubic-bezier缓动曲线。 · 按钮交互依赖快速的150毫秒box-shadow或颜色过渡，提供细微反馈。 · 页面级状态变化通过0.25秒的ease-out透明度淡出效果来标记。
交互元素上的细微透明度或box-shadow过渡。 · 按下时立即发生视觉状态变化。
08
组件
- button 严格的直角矩形，提供高对比度填充（黑色）或描边（白色带黑色边框）两种变体。
- card 用于产品图片的简洁、无边框容器，通常采用纯白色背景。
- input 极简的文本输入框，没有可见边框，仅由占位符文本和一条细微的下划线定义。
- hero 全出血、电影感的主图或视频，横跨整个视口宽度，上方覆盖着极简的、居中的UI。
09
文案语气与禁用清单
- 语气 权威、严峻、极简。
- 标题风格 简短、陈述式，并使用大写无衬线字体。
- 按钮文案 直接、祈使句式，使用大写文本。
- 不要在UI元素上使用border-radius —— 截图显示的是严格直角的按钮和卡片。
- 不要为卡片或面板添加投影 —— 截图显示的是具有锐利边框的平面表面。
- 不要为UI文本使用衬线字体 —— 截图显示的是始终如一地使用无衬线字体。
- 不要为正文内容使用大写文本 —— 截图显示大写严格用于导航和标题。
- 不要在UI中使用多种颜色 —— 截图显示的是严格的黑、白、灰调色板。
- 不要为按钮添加圆角 —— 截图显示的是0px半径的锐利按钮。
- 避免: 友好或随意的语言
- 避免: 过多的描述性文本
- 避免: 圆润或俏皮的视觉元素
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Balenciaga是一个高级时装电商平台，使用严峻的单色UI让全出血的电影感摄影主导用户体验。设计依赖于严格的黑、白、灰配色方案（墨色#000000、背景#FFFFFF、柔和灰#767676）和干净的无衬线字体系统。UI元素严峻，具有直角矩形按钮和极简边框。关键规则：1) 保持UI严格直角，零border-radius。2) 所有主要导航和标题使用大写。3) 永远不要为卡片或面板添加投影，转而依赖干净的边框。4) 为弹窗过渡使用锐利的cubic-bezier(0.32, 0, 0.67, 0)缓动曲线。
en · zh-CN · zh-TW · ja · ko