OpenDesign·你的设计资产库

网页参考

Hartzlerdairy

一个高端匠心乳品品牌网站,采用大胆排版、大幅产品摄影,以及搭配青绿与深绿色点缀的纯净白色美学。

ProductCleanEditorialCurationPhotographic
Hartzlerdairy 网站截图

01

设计气质 DNA

匠心高端家族经营新鲜传统

一个高端本地乳品品牌,以大胆、自信的排版和高品质摄影来展示其产品。

02

色彩

#56DDDBAccent
#333333Ink
#FFFFFFBG
#035542Muted
rgba(51, 51, 51, 0.1)Line

极简配色方案,以留白和产品摄影作为主要视觉锚点。

03

字体

geometric-sans · humanist-sans

  • display333px · 900
  • display-md290px · 900
  • body14px · 400

产品标签与导航使用大写字母 · 大幅展示型文字保持紧凑的字间距 · 品牌元素与点缀使用深绿色

04

间距

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

充裕的间距,让产品得以呼吸

05

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

sm · 4px
md · 8px
lg · 20px
pill · 100px

主卡片上无可见边框

0 4px 20px rgba(0, 0, 0, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全幅首屏,搭配重叠的产品摄影与大幅背景文字

07

动效与交互

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

交互元素上的微妙悬停过渡 · 滚动触发的产品展示动画

交互元素上的微妙颜色变化或缩放 · 带有视觉反馈的即时响应

08

组件

  • button 圆角大写文字的青绿色标签
  • card 白色背景上带微妙投影的产品摄影
  • chip 带有手写体标识的圆形‘精选’徽章
  • hero 全视口产品展示,配有超大背景排版

09

文案语气与禁用清单

  • 语气 自信、高端且富有匠心
  • 标题风格 加粗、大写、大尺度排版
  • 按钮文案 圆角青绿色标签,搭配干净的无衬线字体
  • 不要使用纤细或轻量的字体——截图显示全程使用粗壮、厚重的字重
  • 不要使用小号首屏文字——截图显示超大的 333px 展示型文字
  • 不要使用深色背景——截图显示以白色为主
  • 不要使用多种点缀色——截图显示一致的青绿与深绿色
  • 不要隐藏产品摄影——截图将产品作为核心焦点
  • 不要使用装饰性元素——截图展示的是干净、极简的设计
  • 避免: 避免杂乱的布局
  • 避免: 避免过于活泼或随意的字体
  • 避免: 避免复杂的配色方案

10

包内真实截图

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

11

System Prompt

这是一个高端匠心乳品网站,采用大胆排版和干净的产品摄影。使用白色背景,搭配青绿色 (#56DDDB) 和深绿色 (#035542) 点缀。排版上,展示型文字使用几何无衬线字体,正文使用人文主义无衬线字体。设计强调大幅产品摄影与超大背景文字。关键约束:避免深色背景,保持充裕留白,标签使用大写字母,设计保持极简,让产品成为主角。布局应通过充足的间距和清晰的排版层次,让产品得以呼吸。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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