精选 · 开放 · 免费
Aather
一个为高端家居香氛设计的、精致的杂志风格电子商务体验。
PremiumEditorialPhotographicConsumerRefined
01
设计气质 DNA
极简香氛精心策划静谧奢华编辑式
一家精品蜡烛品牌的高端编辑式画册。
02
色彩
#dec39dAccent
#000000Ink
#ffffffBG
#f7f7f7BG soft
#808080Muted
rgba(0,0,0,0.5)Line
克制的单色基底，搭配温暖的摄影色调和柔和的沙土色点缀。
03
字体
transitional-serif · humanist-sans
- display
56px · 200 - h1
32px · 200 - body
20px · 100 - small
13px · 300
所有大型展示性文案使用过渡衬线字体。 · 导航、按钮和功能性 UI 元素使用人文主义无衬线字体。 · 所有文本保持非常轻的字重（100-300）。 · 应用统一的 0.5px 字母间距以提高可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
布局开阔、不对称，元素间留有充足的空白。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
最小化边框；使用 1px solid rgba(0,0,0,0.5) 进行微妙分隔。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血主视觉图片，随后是单栏文本区域。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.2, 0, 0.1, 1)easing
页面加载时的透明度和位置柔和渐变。 · 文本链接上平滑的 hover 过渡。
微妙的透明度变化或下划线出现。 · 通过状态变化提供即时视觉反馈。
08
组件
- button 带 1px 底部边框的极简文本链接。
- card 干净的摄影卡片，无背景或边框。
- chip 小型大写无衬线标签。
- input 带有微妙底部边框的干净无衬线输入框。
- hero 全出血摄影主视觉，覆盖大型衬线文字。
09
文案语气与禁用清单
- 语气 诗意、富有感染力且宁静。
- 标题风格 营造氛围的、富有感染力的衬线句子。
- 按钮文案 简单、直接的文本链接，带底部边框。
- 不要对正文使用粗体——截图显示使用的是非常轻、细的字重（100-300）。
- 不要给 UI 元素添加厚重的投影——截图显示的是完全扁平的表面。
- 不要在组件上使用圆角——截图显示的是尖锐的、0px 圆角的边缘。
- 不要使用深色模式——截图显示的是以白色和浅色为主的背景。
- 不要使用高饱和度的强调色——截图显示的是柔和、质朴的沙土色强调色。
- 不要用元素挤满布局——截图显示的是充足的留白和极简的排列。
- 避免: 激进的销售语言
- 避免: 响亮的感叹号
- 避免: 密集、厚重的文本块
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为一家精品蜡烛品牌设计一个高端的、编辑式电子商务体验。美学风格极简而精致，使用单色黑白基底搭配温暖的摄影色调。排版应非常轻盈（标题使用过渡衬线字体，UI 使用人文主义无衬线字体），并应用统一的 0.5px 字母间距。关键颜色包括白色（#ffffff）、米白色（#f7f7f7）、黑色（#000000）和柔和的沙土色（#dec39d）。避免使用粗重的字重、圆角、投影或激进的销售文案；保持宁静、诗意且开阔的布局。
en · zh-CN · zh-TW · ja · ko