OpenDesign·你的设计资产库

网页参考

Fableandmane

一个干净、高端的匠心香氛产品电子商务界面。

PremiumConsumerCleanProductRefined

封面待补录，可通过原站查看设计。

01

设计气质 DNA

高端干净匠心香氛植物

一个极简、高端的药剂师货架

02

色彩

#F9423AAccent
#000000Ink
#1A243DInk soft
#FFF5ECBG
#A3A3A3Muted
rgba(0,0,0,0.1)Line

在温暖的米白色背景上使用高对比度的单色文字，并辅以单一的高饱和度红色作为主要操作强调色。

03

字体

transitional-serif · geometric-sans

  • display72px · 800
  • headline56px · 700
  • body16px · 400

使用过渡衬线字体作为富有表现力、高冲击力的标题。 · 使用几何无衬线字体作为所有功能性及正文文本。

04

间距

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

一致的4px基础单元，辅以充足的留白以维持高端、整洁的感受。

05

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

sm · 4px
md · 8px
lg · 24px
pill · 999px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.25) 0px 4px 20px 0px · rgba(0, 0, 0, 0.05) 0px -4px 10px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏布局，聚焦于产品展示，并配有充足的水平留白。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.46, 0.01, 0.32, 1)easing

模态框和页面元素使用平滑的淡入过渡。 · 交互元素采用细微的悬停状态变换。

按钮和链接上的背景色或透明度发生细微变化。 · 通过 transform 或透明度变化提供即时视觉反馈。

08

组件

  • button 药丸形状的主要按钮，采用高饱和度红色背景和白色文字；次要按钮为描边样式，配深色文字。
  • card 干净的产品卡片，带有细微边框或柔和阴影，圆角（24px）。
  • chip 不适用 - 在所分析的模态框/主视觉状态中未显著出现。
  • input 不适用 - 在所分析的模态框/主视觉状态中未显著出现。
  • hero 分屏布局，一侧为大号排版，另一侧为产品图像。

09

文案语气与禁用清单

  • 语气 精致、考究且平易近人。
  • 标题风格 粗体、富有表现力的衬线标题，字间距紧凑。
  • 按钮文案 直接、面向行动的动词，置于药丸形按钮内。
  • 避免使用霓虹或过度饱和的颜色 —— 截图显示的是温暖的米白色背景（#FFF5EC），搭配单一的红色强调色。
  • 避免使用纯等宽或手写字体 —— 截图使用的是几何无衬线和过渡衬线字体类别。
  • 避免到处使用尖锐的直角 —— 截图显示组件使用了24px的大圆角。
  • 避免UI信息过于密集 —— 截图保持了充足的间距和干净的布局。
  • 避免使用亮白色（#FFFFFF）作为主要背景 —— 截图一致地使用温暖的奶油色调。
  • 避免为正文文本使用纤细、难以阅读的字重 —— 截图使用常规400字重以确保可读性。
  • 避免: 杂乱的界面
  • 避免: 过于俏皮或随意的语言
  • 避免: 刺眼、高饱和度的配色方案

10

包内真实截图

Fableandmane — 桌面首屏（hero）
桌面首屏（hero）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Fableandmane — 移动首屏
移动首屏

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

11

System Prompt

一个高端、干净的匠心消费品电子商务设计系统。主要背景是温暖的奶油色（#FFF5EC），搭配高对比度的黑色（#000000）文字和单一的高饱和度红色（#F9423A）用于行动号召。排版上，使用过渡衬线字体作为富有表现力的展示标题，搭配干净的几何无衬线字体作为正文副本。布局留白充足，采用12列网格和24px间距。关键禁忌：避免霓虹色、尖锐直角（使用24px圆角）和杂乱的界面。整体美学精致、考究且聚焦产品。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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