OpenDesign·你的设计资产库

网页参考

Mrpops Ua

为手工冰棒打造的、充满活力且以图片为核心的电商体验

ConsumerProductBold TypographyPhotographicWarm

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

俏皮清爽夏日手工乐趣

一家清爽冰棒店的、适合在Instagram分享的着陆页

02

色彩

#E41E31Accent
#FFFFFFBG
#888888Muted
rgba(228, 30, 49, 0.2)Line

摄影图像占据主导;白色背景上的红色点缀用于品牌强化

03

字体

geometric-sans

  • display120px · 900
  • nav16px · 600

主标题使用全大写字母 · 展示文本使用字重 900 · 大标题采用紧凑的字间距

04

间距

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

有机的节奏,由摄影构图驱动

05

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

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

导航项目使用 2px 实线 #E41E31 边框

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血主图,叠加排版文字

07

动效与交互

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

导航项目悬停时显示颜色填充或边框强调 · 标准的按钮反馈

08

组件

  • button 带红色文字和图标的边框矩形
  • card 在截图中不可见
  • chip 在截图中不可见
  • input 在截图中不可见
  • hero 全视口摄影背景,叠加巨大的文字

09

文案语气与禁用清单

  • 语气 俏皮、随性、清爽
  • 标题风格 粗体、全大写、超大号字体
  • 按钮文案 简单的红色边框按钮
  • 避免使用深色背景——截图显示的是明亮、以图片为主导的构图
  • 避免使用柔和颜色——截图中使用了高对比度的红色点缀
  • 避免使用小标题——截图使用了 100 像素以上的巨大展示字体
  • 避免使用衬线字体——截图整体使用几何无衬线字体
  • 避免使用圆角 UI 元素——截图显示的是棱角分明的矩形按钮
  • 避免使用复杂导航——截图显示的是仅包含 3 个项目的极简导航
  • 避免: 正式语言
  • 避免: 深色背景
  • 避免: 柔和的色彩方案
  • 避免: 小字体
  • 避免: 杂乱的布局

11

System Prompt

这是一个为手工冰棒设计的、俏皮且以图片为核心的电商网站。设计由全出血的摄影图像主导,并叠加了巨大的白色几何无衬线字体。主要品牌色是用于标志和导航元素的活力红色(#E41E31),背景为纯净的白色。导航极简,仅有三个带边框的矩形按钮。关键设计规则:使用巨大的全大写展示字体(100像素以上),让摄影图像占据整个视口,使用带红色边框的棱角分明的矩形按钮,避免深色背景或柔和的配色方案,保持文本与图像之间的高对比度,并将导航保持极简,仅保留 3 个核心项目。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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