OpenDesign·你的设计资产库

网页参考

Aesop

大幅洗护产品照片覆盖首屏，浅色文字与细边框操作叠在照片上。

E-commerceEditorialMinimal
Aesop 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 产品瓶身成为视觉锚点
  • 浅色后续内容与较暗摄影首屏形成章节切换

适合什么项目

  • 美妆品牌
  • 生活方式电商

如何带进你的设计

  • 先选留有文字安全区的自有照片
  • 逐张检查叠字与按钮的可读性

使用边界

  • 截图不能证明轮播行为，也不能保证所有照片上的文字对比度
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

药房极简主义植物高端护肤精选

一个植物药房产品的数字画廊

02

色彩

#333333Ink
#666666Ink soft
#FFFEF2BG
#93938DMuted
rgba(51, 51, 51, 0.2)Line

高对比度、克制的调色板，优先考虑排版和产品图像。

03

字体

humanist-sans

  • display31px · 400
  • h131px · 400
  • body14px · 400
  • caption11px · 400
  • label12px · 400

所有主要文本元素使用humanist-sans字体。 · 保持轻到常规的字重（400），营造精致感。 · 确保充足的行高（1.2-1.3）以提高可读性。

04

间距

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

一致的4px网格，具有适中的缩放步骤。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

1px solid rgba(51, 51, 51, 0.2)

rgba(255, 254, 242, 0.2) 0px 2px 4px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

不对称网格，搭配大幅产品摄影和居中文本区块。

07

动效与交互

200msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

在hover时平滑过渡背景颜色。 · 交互元素上的微妙transform效果。

微妙的背景颜色变化和光标更新。 · 通过过渡提供即时视觉反馈。

08

组件

  • button 幽灵/轮廓样式，细边框和大写文本。
  • card 简洁卡片，最少边框，居中产品图像。
  • chip 微妙、带边框的筛选标签，用于产品属性。
  • input 最小化的搜索输入框，细边框和图标。
  • hero 全宽摄影背景，搭配居中文本叠加。

09

文案语气与禁用清单

  • 语气 精致、诗意、信息丰富。
  • 标题风格 简短、引人入胜的标题。
  • 按钮文案 低调，使用箭头或简单文本如'探索'。
  • 不要使用明亮、饱和的强调色——调色板是柔和且中性的。
  • 不要使用粗重、加粗的字重——设计依赖轻和常规字重。
  • 不要使用圆角或柔和阴影——美学是锐利且精确的。
  • 不要使用复杂、多色的渐变——背景是平坦、温暖的米白色。
  • 不要使用杂乱的布局——优先考虑充足的留白和大幅图像。
  • 不要使用响亮、紧急的行动号召文本——保持低调和优雅。
  • 避免: 推销语言
  • 避免: 喧闹的促销横幅
  • 避免: 杂乱的界面

10

包内真实截图

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

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

11

System Prompt

为一个精选护肤和香水品牌设计克制、高端的电商体验。调色板使用暖调米白色（#FFFEF2）背景，深灰色（#333333）墨色和柔和（#93938D）强调色。排版完全使用humanist-sans字体，轻到常规字重（400），营造精致、通透的感觉。关键禁忌：绝不使用明亮的强调色；避免粗重的字重；并保持充足的留白。布局应感觉像一个数字画廊，搭配大幅产品摄影和居中文本区块。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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