精选 · 开放 · 免费

Diptyque

一个以编辑优先的高端电商体验，服务于一家巴黎奢华香氛品牌，其特点是充足的留白、精美的摄影和克制的字体排印。

01

设计气质 DNA

一个经过策划的匠艺香氛画廊，每件产品都如同珍贵的艺术品，呈现在自然、富有纹理的背景之中。

02

色彩

高对比度的单色UI（黑底白字），完全服务于编辑摄影中丰富的自然色彩。

03

字体

transitional-serif · geometric-sans

• display32px · 400
• body14px · 400
• caption12px · 400

使用过渡衬线字体打造富有感染力的标题，以奠定优雅基调。 · 所有功能性UI文本和导航使用几何无衬线字体，以确保清晰度。 · 正文保持14px，以维持编辑感和整洁感。

04

间距

充足的留白和内边距定义了布局，营造出奢华感和宁静感。垂直节奏主要通过大版块分隔和图片边距来建立。

05

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

采用 rgba(229, 231, 235, 1) 的极简、干净边框。按钮使用1px实线边框与直角，仅偶尔有胶囊形输入框例外。

无 · 交互元素上使用 inset 0px -2px 0px 0px rgba(0, 0, 0, 1)

06

布局

全出血的主视觉图像过渡到带有充足边距的居中内容块。网格仅少量使用，主要用于产品轮播，主要依靠单栏编辑式布局来产生冲击力。

07

动效与交互

菜单覆盖层和横幅使用平滑的透明度过渡。 · 交互元素在hover状态下使用微妙的缓动。 · 轮播中对象定位使用标准线性过渡。

按钮上的文本下划线或微妙的边框过渡。 · 即时状态变化，无强烈反馈动画。

08

组件

• button 直角矩形轮廓，1px黑色边框，大写或混合大小写的衬线文本，无填充。除胶囊形变体外，无圆角。
• card 以图片为核心的卡片，UI极简；文本通常放置在图片边界之外，采用简洁、非结构化的布局。
• chip 未显著使用。
• input 极简字段，采用简洁的黑色边框，注重干净线条，无厚重背景填充。
• hero 占主导地位的全出血摄影横幅，搭配覆盖或居中的行动号召按钮。

09

文案语气与禁用清单

• 语气 富有感染力、精致且略带诗意，典型于奢华香氛营销。
• 标题风格 简短、描述性且优雅的短语，重在营造氛围而非硬性推销。
• 按钮文案 内敛，常以装饰性圆点或简单句号框住，邀请探索而非强制行动。

• 不要在按钮上使用圆角——截图显示的是直角矩形边框
• 不要在卡片或元素上使用投影——截图显示的是基于边框的扁平分隔
• 不要使用明亮、高色度的强调色——截图显示的是严格的单色UI，色彩仅来自摄影
• 不要使用密集的文本布局——截图显示的是充足的留白和简短、富有感染力的文案
• 不要为标题使用厚重、粗体的无衬线字体——截图显示的是用于展示文本的精致衬线字体
• 不要使用俏皮或圆润的字体——截图显示的是结构化、优雅、边缘锐利的字体
• 避免: 避免过度推销的语言或感叹号。
• 避免: 避免密集的段落或厚重的文本块。
• 避免: 避免刺眼、高饱和度的强调色。
• 避免: 避免杂乱的布局或繁忙的UI元素。
• 避免: 避免俏皮或非正式的语气。
• 避免: 避免厚重的投影或复杂的渐变。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko