01
设计气质 DNA
干净专业高效现代
一个用于管理实体物品的流线型仪表板,融合了软件效率与品牌商品的有形温度。
02
色彩
#2D5EF5Accent#111111Ink#555555Ink soft#FFFFFFBG#F8F9FABG soft#888888Mutedrgba(0, 0, 0, 0.08)Line一个克制、高对比度的调色板,使用主蓝色作为交互元素,在纯净的白色背景上,让多彩的产品图像成为主要的视觉驱动力。
03
字体
- display
64px · 700 - heading
40px · 700 - body
18px · 400 - caption
14px · 500
04
间距
4px8px16px24px32px48px64px96px128px8px 基线网格,在 padding 和 margin 中保持一致应用。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
非常微妙的 1px solid 边框,谨慎地用于轮廓。
elevation-1: 0 2px 8px rgba(0, 0, 0, 0.06)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
标准的居中栏布局,带有非对称的主视觉分割。
07
动效与交互
200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
元素进入视口时的微妙淡入效果,可能由 Framer Motion 等库处理。
按钮的背景透明度或颜色发生轻微变化。 · 标准的按钮按下或状态变化。
08
组件
- button 胶囊形(主要)和描边(次要)按钮,采用大写字母间距。
- card 干净的白色卡片,带有微妙的圆角,用于展示产品图像。
- chip 未观察到。
- input 未观察到。
- hero 双栏布局:左侧为大标题和文本,右侧为堆叠的产品图像。
09
文案语气与禁用清单
- 语气 乐于助人、直接且专业,专注于解决特定的运营痛点。
- 标题风格 简洁、行动导向的陈述,强调易用性。
- 按钮文案 清晰、直接的祈使句动词,如“预约现场演示”或“查看我们的目录”。
- 不要使用深色模式——截图显示以白色背景为主。
- 不要使用装饰性或衬线字体——截图显示干净的几何无衬线字体。
- 不要使用圆形按钮——截图显示胶囊形和严格的描边矩形按钮。
- 不要在产品图像上使用投影——截图显示扁平、干净的图像呈现。
- 不要使用混乱的布局——截图显示高度结构化、基于网格的对齐。
- 不要使用柔和或粉彩背景——截图显示纯白色(#FFFFFF)和浅灰色。
- 避免: 术语
- 避免: 激进的销售语言
- 避免: 模糊的承诺
11
System Prompt
Slingshot 是一个用于活动礼品管理的现代 SaaS 产品,其特点是干净、大量留白的设计,并专注于有形的产品图像。UI 依赖于高对比度的调色板,拥有纯白色背景(#FFFFFF)、深黑色墨水(#111111)和用于行动号召的充满活力的主蓝色(#2D5EF5)。排版采用粗体、几何无衬线标题,搭配干净的人文主义无衬线正文。关键约束:完全避免深色模式,使用胶囊形或严格的描边按钮而非完全圆润的按钮,并保持充足的留白,以防止产品图像显得杂乱。