精选 · 开放 · 免费

Raindrop

一款为创意人士设计、为代码开发者打造的一体化书签管理器

01

设计气质 DNA

一个为现代网络设计的数字文件柜

02

色彩

干净的白色表面，搭配主蓝色强调色和柔和的深色文本

03

字体

system-ui · monospace

• display50px · 500
• h236px · 600
• body18px · 400
• small16px · 400

使用 system-ui 或 Segoe UI 以获得原生、干净的外观 · 标题紧凑、干净，并略微加粗 · 在白色背景上保持高对比度以确保可读性

04

间距

主视觉区域使用充足的垂直内边距（50px），水平方向则保持一致的 30px 内边距

05

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

容器和输入框使用 1px solid rgba(0,0,0,0.1) 边框

0px 12px 24px rgba(0, 0, 0, 0.1) · 0px 2px 4px rgba(0, 0, 0, 0.1) · 0px 0px 0px 0.5px rgba(0, 0, 0, 0.15)

06

布局

分屏主视觉布局，左侧放置文案，右侧放置重叠的产品截图，并利用有机背景色块增加视觉趣味

07

动效与交互

hover 状态使用平滑的透明度和 transform 过渡 · 交互元素使用微妙的背景颜色变化

微妙的背景颜色变化或透明度调整 · 最小化的物理反馈，依赖状态变化

08

组件

• button 主按钮为填充的明亮蓝色，带有小圆角；次要按钮为透明的文本链接
• card 容器和功能卡片使用柔和阴影和浅色边框
• chip 圆角胶囊形标签，带有柔和背景色（例如 'New: AI Assistant' 标签）
• input 简洁、极简的输入框，带有微妙边框和 4px 圆角
• hero 左侧为大号加粗的展示文本，右侧为多层产品截图，背景为白色并配有彩色的抽象有机形状

09

文案语气与禁用清单

• 语气 专业、乐于助人且直截了当
• 标题风格 简短、陈述性，并聚焦于收益
• 按钮文案 直接且以行动为导向（注册、下载应用）

• 不要使用深色模式作为主要背景——截图显示以白色背景为主
• 不要使用刺眼的霓虹强调色——截图使用了干净、明亮的蓝色（#0B7ED0）
• 不要使用厚重、华丽的衬线字体——截图使用了干净的原生系统字体
• 不要让布局显得僵硬刻板——截图融入了有机、柔和的背景色块
• 不要用过多的边框使界面显得杂乱——截图利用了留白和微妙阴影
• 不要使用深色的主文本颜色——截图使用了更柔和、略浅的深灰色（#1A1A1A）
• 避免: 过于随意的俚语
• 避免: 激进或夸张的营销语言
• 避免: 缺乏上下文的复杂技术术语

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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