精选 · 开放 · 免费
Loewe
一个将大幅摄影与极简界面相融合,以提升产品叙事的高端时装品牌网站。
fashionluxury
01
设计气质 DNA
奢华时尚编辑式工艺感趣味性
一本高级时装杂志版面的数字化呈现。
02
色彩
#00AEEFAccent
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
以黑白为基底,让丰富的摄影图像成为视觉焦点,点缀以单一而醒目的青色强调色。
03
字体
geometric-sans
- display
120px · 400 - heading
22px · 400 - body
14px · 400 - caption
13px · 400
所有主标题与 UI 元素使用 Avus 字体。 · 保持严格的排版层级,各级之间留有充足间距。 · 字重使用常规或中等;避免在标准文本中使用粗体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用一致的 4px 基础网格与宽裕的内边距(水平方向常为 24px),为内容区块创造呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
尽可能简洁,必要时使用 1px 实线黑色线条进行细微分隔。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血式杂志版式,以大幅影像为主导,留白充足,并配有固定的顶部导航栏。
07
动效与交互
220msmicro
300mssmall
500msmedium
cubic-bezier(0, 0, 0.3, 1)easing
用于内容渐显的流畅透明度过渡。 · 用于导航菜单与浮层的细微 transform 动画。 · 用于内容区块展开的 Flex-basis 过渡。
细微的透明度变化或视觉渐显,保持网站精致感。 · 平滑的过渡与状态变化,常用于展开更多文本或切换视图。
08
组件
- button 极简设计,常仅为文字搭配三角形图标(▸),依靠排版与留白而非容器。
- card 内容通过大幅全宽图片呈现,下方配以简洁排版,作为扩展式卡片使用。
- input 简洁的文本框,仅底部有一条边框,无背景或可见容器。
- hero 巨大的全视口摄影主视觉区,叠加超大号粗体排版。
09
文案语气与禁用清单
- 语气 自信、优雅,略带诗意。
- 标题风格 直接、陈述式且常富有感染力,采用大号简洁字体。
- 按钮文案 含蓄内敛,使用小型三角形图标(▸)搭配文字链接,而非突出按钮。
- 不要使用投影——截图显示为扁平、干净的版式。
- 不要为容器设置圆角——截图显示为锐利的零圆角边缘。
- 不要为正文使用粗体字重——截图显示为常规字重文本。
- 不要使用复杂渐变——截图显示为纯色与干净的摄影图像。
- 不要为主操作使用宽幅填充按钮样式——截图显示为极简的文字链接。
- 不要在版式中用多列文本填满——截图显示为充足的留白。
- 避免: 避免在界面中堆砌不必要的 UI 元素或装饰性图形。
- 避免: 避免使用厚重投影或复杂渐变。
- 避免: 避免突兀或生硬的动画。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
你正在设计一个高端时装品牌网站。美学风格为编辑式与摄影主导,以大幅图像与极简 UI 为核心。关键色彩为纯白(#FFFFFF)背景、黑色(#000000)文本,以及用于品牌名称的单一醒目青色(#00AEEF)强调色。排版使用几何无衬线字体(Avus),覆盖所有尺度,从超大展示标题到小型导航文本。关键禁忌:永远不要为元素添加投影。永远不要为容器设置圆角。永远不要为标准正文使用粗体字重。版式为杂志式,留白充足且采用全出血图像。交互应流畅细腻,使用 cubic-bezier 缓动。
en · zh-CN · zh-TW · ja · ko