OpenDesign·你的设计资产库

网页参考

Aliciamoore

一个高端时尚品牌网站,运用极致的克制和满版图像,创造沉浸式的画廊般购物体验。

EditorialPremiumRestraintPhotographicConsumer
Aliciamoore 网站截图

01

设计气质 DNA

极简高端时尚氛围感

一个安静、光线昏暗的豪华展厅,产品是唯一的焦点。

02

色彩

#F1F0ECInk
#000000BG
#222A37BG quiet
#999999Muted
rgba(241, 240, 236, 0.15)Line

高对比度单色色板,辅以深海军蓝状态色,依靠摄影图片提供暖意。

03

字体

grotesque-sans

  • display32px · 400
  • body-small12px · 300
  • body14px · 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

包内真实截图

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

11

System Prompt

设计一个高端、极简的时尚电商界面,具有画廊感。使用深黑 (#000000) 背景和灰白 (#F1F0EC) 文本以实现最大对比度。字体应使用干净的 grotesque-sans,采用细体和常规体,并加大字间距。优先使用大型、高质量的摄影图片作为核心视觉元素,将界面元素推向边缘。使用 cubic-bezier(0.32, 0.94, 0.6, 1) 实现流畅、优雅的动效。避免任何装饰元素,如投影、圆角或鲜艳色彩;保持极致克制。导航应低调且仅使用文本。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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