OpenDesign·你的设计资产库

网页参考

Ganni

一个以粗犷字体和高冲击力摄影为特色的高端时尚电商平台。

Fashion

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

01

设计气质 DNA

斯堪的纳维亚风格大胆潮流驱动自信

一本大胆、极简的时尚编辑刊物

02

色彩

#000000Ink
#686A6AInk soft
#F1F1F1BG
#F8F8F5BG soft
#F0F0F0BG quiet
rgba(0,0,0,0.1)Line

中性画布,让生动的摄影驱动视觉能量。

03

字体

grotesque-sans

  • display26px · 500
  • body16px · 400
  • small14px · 400
  • micro12px · 400

导航和类别标签通常使用大写字母。 · 标题使用混合大小写或全大写,并采用紧凑的字间距。 · 正文使用标准的首字母大写句式。

04

间距

4px
8px
16px
20px
24px
32px
50px

一个灵活的4px基础网格,确保组件内部间距和布局间隙保持一致。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 0px
lg · 0px
pill · 999px

用于标准交互元素的1px黑色实线边框。

rgba(0, 0, 0, 0.4) 0px 4px 8px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个自适应的流体网格系统,可从全出血摄影布局切换至多栏产品布局。

07

动效与交互

100msmicro
150mssmall
400msmedium
cubic-bezier(0, 1, 0.5, 1)easing

用于标准界面状态变化的平滑0.15秒缓入过渡。 · 用于较大元素移动的0.8秒 cubic-bezier 过渡。

通过细微的背景或文字颜色变化指示状态更改。 · 交互元素的标准指针交互。

08

组件

  • button 高对比度的纯色块(通常是黑色背景配白色文字),不带圆角。
  • card 一个简洁、结构化的产品展示布局,以一张主图为核心,辅以最少的文字信息。
  • input 通过底部边框定义的极简矩形输入框。
  • hero 全出血摄影图像,结合大号字体和醒目的行动号召按钮。

09

文案语气与禁用清单

  • 语气 直接、简洁且自信。
  • 标题风格 简短、有力,常通过特定的大写形式进行风格化处理。
  • 按钮文案 清晰且带有紧迫感,频繁使用全大写文本。
  • 不要在按钮上使用柔软的圆角——截图显示的是棱角分明的矩形界面元素。
  • 不要依赖单一的强强调色——截图显示的是以摄影为主导的、以单色为主的配色方案。
  • 不要使用纤细或花哨的字体——截图显示的是粗壮、实心的无衬线字体。
  • 不要用过多的边框使布局显得杂乱——截图显示的是通过清晰、开放的留白来界定元素。
  • 不要为导航使用低对比度文本——截图显示的是浅色背景上的醒目黑色文字。
  • 不要为标准界面元素使用装饰性阴影——截图显示的是一种扁平、干净的美学风格。
  • 避免: 过于装饰性的字体
  • 避免: 过度使用次要颜色
  • 避免: 复杂的界面模式

10

包内真实截图

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

11

System Prompt

GANNI是一个高端的斯堪的纳维亚时尚电商平台,拥有大胆、极简的美学风格。其设计高度依赖置于黑色(#000000)和灰白色(#F1F1F1)的中性画布之上的高质量、全出血摄影。柔和的灰色(#686A6A)用于辅助文本。字体全部采用粗犷的无衬线字体,导航和行动号召按钮频繁使用全大写。复现此设计需遵守的关键约束包括:避免在按钮和输入框上使用圆角,确保整体采用棱角分明的矩形形状,并避免使用任何与图像竞争的单一主导强调色。始终保持一个严格、干净的网格,并留有充足的负空间。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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