OpenDesign·你的设计资产库

网页参考

Useslingshot

一个干净、大量留白的 SaaS 落地页,运用粗体排版和充满活力的产品摄影,传达轻松的活动礼品管理体验。

ProductCleanTooling

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

干净专业高效现代

一个用于管理实体物品的流线型仪表板,融合了软件效率与品牌商品的有形温度。

02

色彩

#2D5EF5Accent
#111111Ink
#555555Ink soft
#FFFFFFBG
#F8F9FABG soft
#888888Muted
rgba(0, 0, 0, 0.08)Line

一个克制、高对比度的调色板,使用主蓝色作为交互元素,在纯净的白色背景上,让多彩的产品图像成为主要的视觉驱动力。

03

字体

geometric-sans · humanist-sans · monospace

  • display64px · 700
  • heading40px · 700
  • body18px · 400
  • caption14px · 500

04

间距

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

8px 基线网格,在 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)。排版采用粗体、几何无衬线标题,搭配干净的人文主义无衬线正文。关键约束:完全避免深色模式,使用胶囊形或严格的描边按钮而非完全圆润的按钮,并保持充足的留白,以防止产品图像显得杂乱。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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