精选 · 开放 · 免费

Aesop

一个克制、高端的电商体验，用于精选护肤和香水产品。

ecommerceeditorialminimal

Aesop 网站截图

↓ 下载设计系统包 (31 MB)在 OpenDesign 中打开

原站: https://www.aesop.com

📦 浏览包内文件 →

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 — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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