精选 · 开放 · 免费

Usedrop

一个面向社交客户关系管理的现代 SaaS 平台，以大胆的字体、高对比度的深色表面以及独特的紫色点缀为特色。

SaaSProductivityApp UIBold TypographyClean

Usedrop 网站截图

↓ 下载设计系统包 (10 MB)在 OpenDesign 中打开

原站: https://www.usedrop.io

📦 浏览包内文件 →

01

设计气质 DNA

社交客户关系管理用户互动投资回报率现代

一个专为商业分析优化的、简洁现代的社交媒体平台。

02

色彩

#4A5AFFAccent

#101010Ink

#9B9B9BInk soft

#FFFFFFBG

#B8AFDABG soft

#FBF8F3BG quiet

rgba(16,16,16,0.1)Line

简洁的高对比度配色，采用大胆的深色与紫色点缀。

03

字体

transitional-serif · humanist-sans

display169px · 400
h148px · 400
body14px · 400

标题使用高对比度的过渡衬线字体。 · 正文使用简洁、中性的人文主义无衬线字体。 · 展示性文字严格使用负字间距。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

所有间距与尺寸均采用统一的4像素网格。

05

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

sm · 4px

md · 8px

lg · 16px

pill · 999px

1px solid rgba(16,16,16,0.1)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

采用大尺寸视觉区块的非对称双栏布局。

07

动效与交互

200msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

UI 元素采用平滑的淡入效果。 · 按钮与卡片具备交互式悬停状态。

交互元素具备细腻的缩放或色彩变化。 · 通过轻微的移动提供即时的触觉反馈。

08

组件

button 高对比度的胶囊形按钮（黑色/白色）以及简洁的轮廓标签。
card 深色、圆角的卡片，搭配简洁的排版。
chip 小型胶囊形开关（例如：社交客户关系管理 / 付费广告）。
input 极简、干净的输入框，带有细微的边框。
hero 醒目的衬线标题，辅以说明性正文和高对比度的深色插图区块。

09

文案语气与禁用清单

语气自信、现代、直接。
标题风格 有力、以收益为导向、且在视觉上占主导地位。
按钮文案 清晰、以行动为导向（例如：“立即开始”）。

不要使用小巧、纤细的衬线字体——截图显示的是巨大、高对比度的展示衬线字体。
不要仅使用白色配色——截图显示主导的深色表面（#101010）和紫色点缀（#B8AFDA）。
不要使用复杂的、多步骤的表单——截图显示的是精简的、类似聊天的交互流程。
不要使用僵化、密集的网格——截图显示的是充裕的留白和非对称布局。
不要使用细微、次要的按钮——截图显示的是大胆、高对比度的主行动号召。
不要为标题使用普通的无衬线字体——截图使用的是独特的过渡衬线字体。
避免: 杂乱的布局
避免: 低对比度
避免: 过时的美学

10

包内真实截图

Usedrop — 桌面首屏（hero） — 桌面首屏（hero）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Usedrop — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这是一个名为 Drop 的社交客户关系管理工具的现代 SaaS 落地页。它采用高对比度设计，配以巨大的过渡衬线标题和简洁的人文主义无衬线正文。配色方案基于纯白（#FFFFFF）和深黑（#101010），并使用独特的柔和紫色（#B8AFDA）和鲜明的蓝色（#4A5AFF）作为点缀。布局采用充裕的12列网格，使用大尺寸、圆角的深色卡片来展示产品。关键设计原则：大胆的字体运用、高对比度、充裕的间距。必须避免的事项：避免低对比度，切勿在正文使用纤细的衬线字体，不要用不必要的元素使界面杂乱。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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