精选 · 开放 · 免费

Myafterglo

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

01

设计气质 DNA

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

02

色彩

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

03

字体

transitional-serif · humanist-sans

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 精致、私密且赋权。
• 标题风格 大型、富有表现力的过渡衬线体排版，与摄影图像融合。
• 按钮文案 简洁、直接且低调，通常使用描边按钮。

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

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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