01
设计气质 DNA
屏幕录制MacOS视频生产力设计
一个精致的现代macOS实用工具,将复杂的视频编辑转化为简单、自动化的过程。
02
色彩
#4D2FF5Accent#FFFFFFInk#8C8C8CInk soft#13151BBG#1B1E26BG soft#A091FAMutedrgba(255,255,255,0.1)Line采用单一鲜艳紫色强调的高对比度深色UI,以引导用户视线。
03
字体
- display
70px · 450 - h2
36px · 600 - body
16px · 400 - small
13px · 400
标题采用紧凑的负字间距,营造密集、现代的感觉。 · 正文文本在深色背景下保持舒适的行高,以确保可读性。
04
间距
4px8px16px24px32px48px64px96px各板块间采用宽松的垂直间距,以突出产品视觉。
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 10px
lg · 100px
pill · 1000px
1px solid rgba(255,255,255,0.1)
rgba(0, 0, 0, 0.4) 0px 0px 20px 10px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单列居中布局,随后为功能卡片过渡到多列网格。
07
动效与交互
200msmicro
250mssmall
500msmedium
cubic-bezier(0.44, 0.22, 0.26, 0.99)easing
用于悬停状态和交互的平滑、缓动过渡。
细微的背景色变化或轻微上浮效果。 · 提供即时反馈,无显著动画。
08
组件
- button 主按钮为实心紫色配白色文字,呈胶囊形状;次按钮为透明背景配细微边框。
- card 深灰色卡片,带有细微边框,包含图像和描述性文本。
- chip 一个细长的圆角胶囊形徽章,带有细微边框和白色文字。
- input 标准文本输入框,采用深色背景和细微边框。
- hero 一个居中的大标题,带有一个醒目的徽章,下方是大幅视觉素材。
09
文案语气与禁用清单
- 语气 专业、乐于助人且自信。
- 标题风格 简短、有力的短语,突出主要优势。
- 按钮文案 直接且以行动为导向(例如,“下载 Screen Studio”)。
- 不要使用杂乱或拥挤的背景——截图显示的是带有细微径向渐变的干净深色主题。
- 不要使用霓虹色或过于鲜艳的颜色——截图显示的是柔和的紫色强调色和白色文字。
- 不要使用衬线字体——截图显示的是现代无衬线字体。
- 不要使用尖锐的方形边角——截图显示按钮、卡片和徽章均采用圆角。
- 不要使用小而拥挤的文字——截图显示的是宽松的间距和清晰的层级。
- 不要使用复杂的多步骤导航——截图显示的是一个简单的扁平化顶部导航栏。
- 避免: 过于技术性的术语
- 避免: 激进的营销语言
- 避免: 密集的文字墙
10
包内真实截图


















11
System Prompt
这是一个为屏幕录制工具 Screen Studio 打造的、采用深色主题的极简产品着陆页。设计采用高对比度调色板,以深炭灰(#13151B)为背景,搭配鲜艳的紫色强调色(#4D2FF5)。字体是干净的现代人文无衬线体,标题采用紧凑的字间距。关键特性包括一个带有产品徽章的大型居中英雄区,以及采用深色背景的功能卡片。关键规则:不要使用多种强调色,不要使用衬线字体,不要用不必要的元素使布局变得杂乱。