01
设计气质 DNA
俏皮清爽夏日手工乐趣
一家清爽冰棒店的、适合在Instagram分享的着陆页
02
色彩
#E41E31Accent#FFFFFFBG#888888Mutedrgba(228, 30, 49, 0.2)Line摄影图像占据主导;白色背景上的红色点缀用于品牌强化
03
字体
- display
120px · 900 - nav
16px · 600
主标题使用全大写字母 · 展示文本使用字重 900 · 大标题采用紧凑的字间距
04
间距
4px8px16px24px32px48px64px96px有机的节奏,由摄影构图驱动
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 个核心项目。