精选 · 开放 · 免费
Aliciamoore
一个高端时尚品牌网站，运用极致的克制和满版图像，创造沉浸式的画廊般购物体验。
EditorialPremiumRestraintPhotographicConsumer
01
设计气质 DNA
极简高端时尚氛围感
一个安静、光线昏暗的豪华展厅，产品是唯一的焦点。
02
色彩
#F1F0ECInk
#000000BG
#222A37BG quiet
#999999Muted
rgba(241, 240, 236, 0.15)Line
高对比度单色色板，辅以深海军蓝状态色，依靠摄影图片提供暖意。
03
字体
grotesque-sans
- display
32px · 400 - body-small
12px · 300 - body
14px · 400
使用 Founders Grotesk 作为主字体 · 导航链接使用细体 (300)，并加大字间距 · 在排版元素周围保持充足的留白
04
间距
4px
8px
12px
16px
24px
32px
36px
48px
64px
96px
108px
边缘使用充足的内边距 (36px)，首屏垂直方向留出 108px 的呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用墨色 1px 细边框，仅在需要分隔时少量使用。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全屏画布，以中央核心视觉为主导，角落对齐的导航和品牌元素作为锚点。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.32, 0.94, 0.6, 1)easing
UI 元素平滑的透明度渐变 · 文本和图像的错开入场动画
交互文本链接在悬停时透明度轻微降低。 · 即时视觉反馈，并平滑过渡到下一状态。
08
组件
- button 纯文本链接，无背景，依靠 hover 时的透明度过渡。
- card 大型满版图像块，作为主要的交互界面。
- hero 全视口区域，由单张大图主导，品牌名称位于左侧，行动号召位于右侧。
09
文案语气与禁用清单
- 语气 极简、精致、含蓄。
- 标题风格 全大写，字间距宽松，字体轻盈。
- 按钮文案 简洁的小写文本提示，置于边缘位置。
- 不要使用投影——截图显示为平面图像和文本
- 不要使用圆角——截图显示为完美的直角边缘
- 不要添加装饰性边框——截图显示为无边框、边到边布局
- 不要使用多种强调色——截图显示为严格的单色色板
- 不要使用粗重的字重——截图显示仅使用细体 (300) 和常规体 (400)
- 不要将文本居中对齐——截图显示为左对齐和右对齐的边缘文本
- 避免: 过多的形容词
- 避免: 响亮的行动号召
- 避免: 拥挤的布局
- 避免: 鲜艳的色彩
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
设计一个高端、极简的时尚电商界面，具有画廊感。使用深黑 (#000000) 背景和灰白 (#F1F0EC) 文本以实现最大对比度。字体应使用干净的 grotesque-sans，采用细体和常规体，并加大字间距。优先使用大型、高质量的摄影图片作为核心视觉元素，将界面元素推向边缘。使用 cubic-bezier(0.32, 0.94, 0.6, 1) 实现流畅、优雅的动效。避免任何装饰元素，如投影、圆角或鲜艳色彩；保持极致克制。导航应低调且仅使用文本。
en · zh-CN · zh-TW · ja · ko