OpenDesign·你的设计资产库

网页参考

Glossier

一个现代的直接面向消费者的美妆品牌,将极简设计与趣味、温暖的摄影相结合。

BeautyE-commerceClean
Glossier 网站截图

01

设计气质 DNA

美妆护肤极简趣味现代

一位友好、极简主义的美妆编辑,穿着粉色衣服,喝着冰咖啡。

02

色彩

#000000Ink
#101010Ink soft
#FFFFFFBG
#F7F7F7BG soft
#666666Muted
rgba(0,0,0,0.06)Line

高对比度的黑白基础搭配柔和的暖色中性色,颜色主要依赖于摄影和粉色的产品点缀。

03

字体

grotesque-sans · monospace

  • display130px · 400
  • h132px · 500
  • body16px · 400
  • small12px · 400

导航和小标签使用全大写字母 · 展示文字使用紧凑的字距 · 正文保持常规字重以确保可读性

04

间距

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

标准的 4px 网格,区块之间留有充足空间。

05

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

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

按钮和输入字段使用 1px 细黑色边框,无圆角。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影英雄区块,叠加大型排版文字。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

模态框叠加层和内容区块的淡入过渡。 · 交互元素的平滑字号和透明度过渡。

标准指针光标,可能带有微妙的透明度或颜色过渡。 · 即时响应,标准光标反馈。

08

组件

  • button 带黑色边框和黑色文字的矩形轮廓按钮。
  • card 整洁、无边框的内容块,依赖排版和摄影。
  • chip 无可见组件。
  • input 简单的矩形输入框,带 1px 边框和占位符文本。
  • hero 全出血的生活方式摄影,叠加巨大的白色排版文字。

09

文案语气与禁用清单

  • 语气 趣味、对话式且亲切。
  • 标题风格 简短、有力,通常为小写或句首大写,带有一丝态度。
  • 按钮文案 直接、以行动为导向,略带非正式感(例如,'Get the look')。
  • 不要使用鲜艳的霓虹色——截图显示严格的黑、白、柔和粉色配色方案。
  • 不要给组件加圆角——截图显示按钮和模态框均为尖锐的方形边缘。
  • 不要使用投影来营造层次感——截图显示大多数元素采用扁平、无边框的设计。
  • 不要使用衬线字体——截图显示一致使用干净的几何无衬线字体。
  • 不要用紧凑的内边距挤占元素——截图显示文字和图片周围有充足的留白。
  • 不要使用厚重的渐变作为背景——截图显示使用纯色和摄影背景。
  • 避免: 企业行话
  • 避免: 激进的销售语言
  • 避免: 过于正式的术语

10

包内真实截图

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

11

System Prompt

这是一个简洁、现代的美妆电子商务网站。其设计 DNA 由鲜明的黑白基础搭配柔和的粉色点缀定义。排版使用干净的无衬线字体(Apercu 家族),展示文字字距紧凑,正文则留有充足空白以确保可读性。布局为全出血式摄影驱动,依赖大型生活方式图像而非复杂的 UI 元素。关键禁忌:不要在 UI 组件上使用圆角;美学风格是尖锐和几何的。不要引入鲜艳、高饱和度的点缀色;配色方案严格保持中性,仅带柔和粉色点缀。不要使用衬线字体;整个系统建立在干净的无衬线字体类别之上。交互模型是电子商务的标准模式,为模态框和叠加层提供平滑的透明度过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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