OpenDesign·你的设计资产库

网页参考

Glein Wien

一个极简、编辑风格的电商网站,通过高品质摄影和克制的排版,强调可持续的材质。

EditorialPhotographicProductPremiumClean
Glein Wien 网站截图

01

设计气质 DNA

极简可持续生活方式编辑风格高端

一个以材质为核心的生活方式精品画廊。

02

色彩

#000000Ink
#ffffffBG
#b3b3b3Muted
rgba(0,0,0,0.1)Line

严格的单色系调色板(黑、白、浅灰),作为大型高品质编辑摄影的中性画布。

03

字体

grotesque-sans · monospace

  • display111px · 400
  • heading30px · 400
  • body15px · 400
  • small13px · 400

导航和功能链接广泛使用大写字母。 · 所有排版元素均使用标准字重(400)。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

留白宽松,内部间距紧凑,通常依赖于图片的构图,而非严格的网格间距。

05

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

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

极少使用;主要使用单像素线条用于按钮、链接和细微的分隔线。

06

布局

1440container
12columns
16pxgutter
768 / 1024breakpoints

以大尺寸主视觉图片为主导的不对称瀑布流网格,在移动端自适应为单列堆叠。

07

动效与交互

100msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素上有微妙的透明度过渡。 · hover 状态下的颜色过渡。

微妙的颜色或透明度变化;视觉反馈极少。 · 标准指针光标和即时响应。

08

组件

  • button 极简主义;仅文本,使用等宽字体,或用于主要操作的简单带边框矩形。
  • card 以图片为驱动的容器,带有文字叠加,无传统卡片边框或背景。
  • chip 未观察到可见样式。
  • input 标准的极简表单元素(由 cookie 模态框暗示)。
  • hero 全出血或大面板的编辑风格摄影,叠加有类别标题和极少的“查看更多”链接。

09

文案语气与禁用清单

  • 语气 安静、低调且精致。
  • 标题风格 大、干净且极简,常叠加在图片上。
  • 按钮文案 低调,常使用带下划线的文本链接,而非突出的按钮。
  • 不要使用饱和的强调色——截图显示的是严格的单色系(黑/白/灰)调色板。
  • 不要使用粗体字重——截图显示所有文本均使用标准字重(400)。
  • 不要使用装饰性或手写字体——截图显示的是干净的几何无衬线体(grotesque-sans)和功能性的等宽字体。
  • 不要给卡片或按钮添加圆角——截图显示的是锐利、圆角为 0 的边缘。
  • 不要使用突出的投影——截图显示的是平面、干净、没有深度效果的表面。
  • 不要用密集的文字段落使界面变得杂乱——截图显示的是以视觉和摄影为主导、文字极少的布局。
  • 不要使用明亮、多彩的背景——截图显示的大多是白色或摄影图片背景。
  • 避免: 喧闹、高对比度的行动号召按钮
  • 避免: 密集的促销文字段落
  • 避免: 明亮、饱和的强调色
  • 避免: 复杂的图标

10

包内真实截图

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

11

System Prompt

这是一个高端、编辑风格的可持续生活方式电商网站。它使用严格的单色系调色板(黑、白、#b3b3b3 灰),带有锐利、圆角为 0 的边缘和零投影,营造出平面、极简的美学。排版依赖于干净的无衬线体(F-Grotesk)用于展示和正文,功能性的等宽字体(Maison-Neue-Mono)用于功能元素;所有文本均为标准字重(400)。布局是大胆、不对称的瀑布流网格,包含大尺寸、高品质的编辑风格摄影。关键禁忌:绝不使用粗体字重;绝不添加圆角或投影;绝不使用饱和的强调色;绝不使界面充满密集文本;绝不使用装饰性或手写字体;绝不使用明亮、多彩的背景。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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