OpenDesign·你的设计资产库

网页参考

Balenciaga

一个严肃的高级时装电商平台,电影般的摄影与严峻的UI共同营造出高端、编辑风格的氛围。

FashionLuxury

封面待补录,可通过原站查看设计。

01

设计气质 DNA

高级时装极简主义前卫编辑风格奢华

一个严肃的高级时装杂志版面,被赋予生命,成为一个沉浸式的数字购物体验。

02

色彩

#000000Ink
#FFFFFFBG
#767676Muted
rgba(0,0,0,1)Line

高对比度的单色调色板,优先考虑图像并保持一种严格、严峻的奢华美学。

03

字体

sans-serif

  • display22px · 700
  • heading14px · 400
  • body12px · 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

包内真实截图

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

11

System Prompt

Balenciaga是一个高级时装电商平台,使用严峻的单色UI让全出血的电影感摄影主导用户体验。设计依赖于严格的黑、白、灰配色方案(墨色#000000、背景#FFFFFF、柔和灰#767676)和干净的无衬线字体系统。UI元素严峻,具有直角矩形按钮和极简边框。关键规则:1) 保持UI严格直角,零border-radius。2) 所有主要导航和标题使用大写。3) 永远不要为卡片或面板添加投影,转而依赖干净的边框。4) 为弹窗过渡使用锐利的cubic-bezier(0.32, 0, 0.67, 0)缓动曲线。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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