OpenDesign·你的设计资产库

网页参考

Myafterglo

一个精致、画廊般的私密健康产品电商体验,将编辑式摄影与极简主义 UI 相融合。

ConsumerPhotographicRefinedCleanCuration
Myafterglo 网站截图

01

设计气质 DNA

私密健康雕塑感物品编辑式摄影柔和奢华

一个精心策划的私密健康物品画廊,以高端设计杂志的克制手法呈现。

02

色彩

#000000Ink
#131313Ink soft
#f3f2ecBG
#e3e4dfBG soft
#ffffffBG quiet
#e3e1d9Muted
rgba(19, 19, 19, 0.15)Line

温暖、柔和的中性色提供了一个柔和的画布,让丰富、摄影感的图像成为舞台中心。

03

字体

transitional-serif · humanist-sans

  • display132px · 400
  • heading50px · 400
  • body15px · 400

对于大型、富有表现力的标题,使用过渡衬线体以传达优雅感。 · 对于导航和 UI 元素,使用人文无衬线体以确保清晰度。 · 为大写展示文本保持充足的字间距。

04

间距

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

宽敞、开放的布局,大型摄影元素周围留有充足间距。

05

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

sm · 5px
md · 8px
lg · 12px
pill · 999px

用于输入框和细微分隔线的 1px solid rgba(19, 19, 19, 0.15) 边框。

rgb(203, 201, 189) 0px -6.66667px 0px 0px inset

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血的主视觉区,带有居中的文字叠加,随后是用于编辑式图像的居中内容列。

07

动效与交互

150msmicro
300mssmall
600msmedium
cubic-bezier(0.38, 0.005, 0.215, 1)easing

产品轮播平滑的滑入过渡。 · 主视觉区文字叠加的细微淡入效果。

交互元素上的细微光标变化(指针);最小的视觉反馈以保持美感。 · 立即响应,状态平滑过渡。

08

组件

  • button 极简的、带圆角(border-radius: 5px)的描边按钮,用于 'Start Exploring'。
  • card 简洁、无边框的卡片,依赖高质量的摄影和充足的留白。
  • chip 导航栏中基于文本的简单导航链接。
  • input 集成在顶部导航栏中的极简搜索和账户图标。
  • hero 全屏、分屏的主视觉区,带有大型、重叠的衬线体排版和一个简单的 CTA 按钮。

09

文案语气与禁用清单

  • 语气 精致、私密且赋权。
  • 标题风格 大型、富有表现力的过渡衬线体排版,与摄影图像融合。
  • 按钮文案 简洁、直接且低调,通常使用描边按钮。
  • 不要使用鲜艳、霓虹色——截图显示的是一种由暖灰色、灰白色和深邃黑色构成的柔和调色板。
  • 不要使用深色模式界面——主要背景是温暖的灰白色(#f3f2ec)。
  • 不要使用尖锐的几何无衬线字体——展示排版是精致的过渡衬线体。
  • 不要使用厚重的投影或粗边框——表面是平面的,仅有极简、细微的内嵌阴影。
  • 不要使用间隙狭小的杂乱网格——布局宽敞,各部分之间留有充足的留白。
  • 不要使用通用的产品摄影——该网站使用具有独特布光的艺术静物构图。
  • 避免: 喧闹、激进的营销语言
  • 避免: 过于技术性或临床化的描述
  • 避免: 带有厚重边框或阴影的杂乱布局

10

包内真实截图

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

11

System Prompt

这是一个精致、画廊般的私密健康产品电商网站。它使用温暖、柔和的调色板(灰白色 #f3f2ec,深邃黑色 #000000)来营造宁静、高端的氛围。排版特点是在展示标题上使用优雅的过渡衬线体,在正文上使用干净的人文无衬线体。关键设计元素包括大型、艺术感的摄影、充足的留白以及带有细微边框的极简 UI 组件。布局宽敞且居中,强调产品的精心策划性质。关键禁忌包括避免深色模式、明亮霓虹色或杂乱的网格。整体基调是精致且私密的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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