精选 · 开放 · 免费
Cap
为屏幕录制工具打造的简洁现代SaaS着陆页。
productmacoss
01
设计气质 DNA
开发者工具屏幕录制开源截图
简洁现代的屏幕录制工具SaaS仪表板
02
色彩
#0D74CEAccent
#000000Ink
#202020Ink soft
#fcfcfcBG
#838383Muted
rgba(229, 231, 235, 1)Line
近白色背景上的高对比度黑色排版，搭配单一醒目的蓝色作为主要操作强调色。
03
字体
sans-serif · ui-monospace
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以4px为基础单位保持间距统一，各区块间采用宽松的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.05) 0px 4px 10px 0px · rgba(0, 0, 0, 0.05) 0px 20px 25px -5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
采用标准居中容器与12列网格
07
动效与交互
150msmicro
150mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素平滑的悬停过渡效果 · 视频时间线上的播放头动画
按钮与链接采用平滑的颜色过渡 · 微妙的缩放或颜色变化
08
组件
- button 圆润的药丸形状，采用纯色填充（黑色或蓝色）搭配白色文字
- card 白色卡片配以微妙阴影与圆角
- chip 带图标的药丸形分类选择器
- input 圆角药丸形输入框，采用浅色边框
- hero 左右分栏布局，左侧为大字号排版，右侧为产品截图
09
文案语气与禁用清单
- 语气 专业、乐于助人且直截了当
- 标题风格 大号加粗的黑色无衬线字体
- 按钮文案 药丸形按钮上的行动导向文案
- 避免使用装饰性字体——截图显示为简洁中性的无衬线体。
- 避免使用深色模式——截图显示以浅色近白色背景为主。
- 避免使用生硬的阴影——截图显示为非常微妙柔和的阴影。
- 避免使用尖锐的直角——截图显示为药丸形按钮和圆角卡片。
- 避免使用霓虹色彩——截图显示为克制的配色方案，仅有一个主蓝色强调色。
- 避免使用密集的布局——截图显示为充裕的留白和清晰的层级结构。
- 避免: 炫目的动画
- 避免: 杂乱的布局
- 避免: 激进的销售语言
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是Cap的简洁现代SaaS着陆页，Cap是一款开源屏幕录制工具。设计基因以浅色近白色背景（#fcfcfc）、高对比度黑色排版，以及单一醒目的蓝色（#0D74CE）作为主要操作（如“注册”和“升级”）强调色为特征。字体采用中性的人文主义无衬线体，以大字号（标题60px）和紧凑字距使用。关键注意事项：1）不要使用深色模式或深色背景，因为截图显示的是浅色主题。2）按钮或卡片避免使用尖锐直角，应采用药丸形状和圆角。3）避免使用生硬阴影，应使用微妙柔和的阴影营造层次。布局宽敞，留白充裕，强调清晰度和专业性。交互元素具有平滑微妙的过渡效果。语调专业直白，聚焦于产品的实用性和开源特性。
en · zh-CN · zh-TW · ja · ko