精选 · 开放 · 免费

Baggu

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

01

设计气质 DNA

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

02

色彩

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

03

字体

grotesque-sans

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 直接、友好、自信且直率。
• 标题风格 简短、有力、描述性强，常采用全大写。
• 按钮文案 以行动为导向，使用祈使动词，并设置为高对比度按钮中的全大写形式。

• 不要在版块中使用彩色或繁复的背景——截图显示的是统一的中性米白色（#F6F4EE）画布。
• 不要在标题中使用衬线或手写字体——截图显示的是粗体无衬线风格。
• 不要使用小而纤细的按钮——截图显示的是高对比度、胶囊形的黑色按钮。
• 不要在版面中堆砌密集的文本块——截图显示的是充足的留白和大型图像。
• 不要使用深色模式或厚重的炭灰色背景——截图显示的是以浅色、温暖中性背景为主。
• 不要用极简摄影隐藏产品——截图显示的是鲜艳、高饱和度的产品照片作为主要焦点。
• 避免: 华丽或过于技术性的术语
• 避免: 过多的形容词或最高级
• 避免: 过于正式或疏离的企业语言

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko