OpenDesign·你的设计资产库

网页参考

Mihanaromatics

一款高端香水电商覆盖层,采用单色高对比度摄影背景与极简居中潜客获取表单。

PhotographicPremiumConsumerMobile UIClean

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

奢华极简高端香水香氛探索发现

一款高端香水社论式覆盖层,依靠氛围摄影与简洁排版打造专属感官体验。

02

色彩

#FFFFFFInk
#000000BG
#808080Muted
rgba(0, 0, 0, 0.1)Line

高对比度单色调色板,优先呈现氛围产品摄影而非界面元素。

03

字体

geometric-sans

  • display48px · 300
  • body16px · 400

使用轻字重(300-400)营造高端、通透的质感。 · 保持宽字间距(0.32px)以确保在复杂背景上的可读性。 · 避免使用厚重字重或装饰性字体。

04

间距

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

基于内容密度的灵活间距,表单元素内部留有充足内边距以保持视觉整洁。

05

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

sm · 2px
md · 4px
lg · 0px
pill · 50px

输入框与关闭按钮采用极简 1px 实线边框。

rgba(0, 0, 0, 0.1) 0px 5px 10px 0px · rgba(0, 0, 0, 0.06) 0px 2px 8px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单栏布局,聚焦于全出血摄影背景上的潜客获取表单。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing

覆盖层出现时的淡入效果 · 交互元素的色彩过渡。

交互元素的微妙色彩过渡。 · 按钮按下时的即时反馈。

08

组件

  • button 全宽黑色矩形按钮,白色大小写文本,2px 圆角。
  • card 整个覆盖层作为居中浮动卡片,置于模糊/调暗的摄影背景之上。
  • input 全宽矩形输入框,1px 黑色实线边框,内部留有充足边距。
  • hero 全屏摄影背景,半透明覆盖层内包含居中排版与表单堆叠。

09

文案语气与禁用清单

  • 语气 精致、优雅且富有专属感。
  • 标题风格 直接、聚焦利益且简洁明快。
  • 按钮文案 清晰且行动导向,承诺用户价值回报。
  • 勿使用鲜艳强调色——截图显示为严格单色、黑白摄影调色板。
  • 勿使用厚重或装饰性衬线字体——截图显示为简洁几何无衬线字体(Mihan/Montserrat)。
  • 勿用多栏布局造成视觉杂乱——截图显示为单一居中潜客获取表单。
  • 勿使用高饱和度背景——截图显示为去饱和度的氛围产品摄影。
  • 勿使用圆角药丸形按钮——截图显示为矩形按钮,仅带极微妙的 2px 圆角。
  • 勿添加过多投影或发光效果——截图显示为极简、柔和阴影,与深色背景自然融合。
  • 避免: 喧闹或侵略性的销售语言
  • 避免: 杂乱的布局
  • 避免: 过度复杂的排版

11

System Prompt

本系统定义了 Mihan Aromatics 高端香水电商网站的设计基因。其特征为极简摄影美学,以氛围化、高对比度产品影像为核心。主色调为黑色(#000000)和白色(#FFFFFF),柔和灰色(#808080)用于细微界面元素。排版采用简洁几何无衬线字体,强调宽字间距与轻字重以营造通透奢华感。布局采用单栏居中方式,完全聚焦于全出血摄影背景上的潜客获取表单。关键约束包括:避免使用鲜艳强调色,拒绝装饰性或厚重字体,保持去饱和单色调色板以维系高端感官品牌识别。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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