OpenDesign·你的设计资产库

网页参考

Baggu

一个现代电商平台,专营功能性强且设计有趣的日常包袋与配件。

ProductCleanPhotographicCurationPremium

封面待补录,可通过原站查看设计。

01

设计气质 DNA

功能性趣味性日常精心设计实用

一家灯光明亮、井然有序的零售店,陈列着色彩丰富、高品质的商品。

02

色彩

#000000Ink
#212121Ink soft
#F6F4EEBG
rgba(0,0,0,1.0)Line

温暖的中性背景如同干净的画廊画布,让多彩的产品摄影主导视觉层次。

03

字体

grotesque-sans

  • display40px · 700
  • body16px · 400
  • label14px · 700

导航链接、分类标签和主要行动号召按钮使用全大写形式。 · 保持紧凑的负字距,营造现代、紧凑的感觉。 · 优先使用高字重(700)的标题,确保强烈的视觉层次。

04

间距

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

标准8px基础网格,主要区域之间留有充足空白,让产品得以呼吸。

05

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

sm · 2px
md · 6px
lg · 0px
pill · 100px

结构元素使用1px solid #000000边框;按钮采用胶囊形圆角和纯色背景。

0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

布局

1440container
12columns
16pxgutter
768 / 1024breakpoints

全宽图像主视觉区域,后接结构化、基于网格的产品目录。

07

动效与交互

100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停状态下流畅的颜色和变换过渡 · 购物车和导航状态切换的微交互 · 产品画廊的无缝图片轮播过渡

可点击文本元素和按钮的微妙背景或颜色过渡。 · 按钮按下时的即时视觉反馈,通常是轻微的颜色变化或缩放。

08

组件

  • button 纯黑背景(#000000)配白色(#FFFFFF)大写文字,高度圆润(胶囊形),内边距极小。
  • card 简洁、无边框的布局,依靠中性背景上的高品质产品摄影呈现。
  • chip 大写、加粗的文本链接,用于分类导航,间距较大,无可见背景或边框。
  • input 极简的仅底部边框输入框,黑色下划线,带浮动标签文字。
  • hero 全出血、高饱和度的生活方式摄影,横跨整个视口宽度。

09

文案语气与禁用清单

  • 语气 直接、友好、自信且直率。
  • 标题风格 简短、有力、描述性强,常采用全大写。
  • 按钮文案 以行动为导向,使用祈使动词,并设置为高对比度按钮中的全大写形式。
  • 不要在版块中使用彩色或繁复的背景——截图显示的是统一的中性米白色(#F6F4EE)画布。
  • 不要在标题中使用衬线或手写字体——截图显示的是粗体无衬线风格。
  • 不要使用小而纤细的按钮——截图显示的是高对比度、胶囊形的黑色按钮。
  • 不要在版面中堆砌密集的文本块——截图显示的是充足的留白和大型图像。
  • 不要使用深色模式或厚重的炭灰色背景——截图显示的是以浅色、温暖中性背景为主。
  • 不要用极简摄影隐藏产品——截图显示的是鲜艳、高饱和度的产品照片作为主要焦点。
  • 避免: 华丽或过于技术性的术语
  • 避免: 过多的形容词或最高级
  • 避免: 过于正式或疏离的企业语言

10

包内真实截图

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

11

System Prompt

Baggu是一个现代电商网站,专营功能性的日常包袋与配件。设计采用温暖的中性色(#F6F4EE)背景作为干净画布,让鲜艳、高饱和度的产品摄影主导视觉层次。排版依赖于粗体无衬线字体,主要用于导航、分类标签和强有力的行动号召按钮的大写形式。按钮为纯黑色(#000000)配白色文字,并具有独特的胶囊形状。关键禁忌包括:避免使用深色模式或厚重背景,不要使用纤细或小尺寸的按钮样式,切勿在标题中使用衬线字体。布局宽敞且以图像为主导,优先考虑清晰、直接的沟通和一种精致、精选的高级感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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