精选 · 开放 · 免费

Screen Studio

一个为专业macOS屏幕录制工具打造的、采用深色主题的极简产品着陆页。

productmac

Screen Studio 网站截图

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

原站: https://screen.studio

📦 浏览包内文件 →

01

设计气质 DNA

屏幕录制MacOS视频生产力设计

一个精致的现代macOS实用工具，将复杂的视频编辑转化为简单、自动化的过程。

02

色彩

#4D2FF5Accent

#FFFFFFInk

#8C8C8CInk soft

#13151BBG

#1B1E26BG soft

#A091FAMuted

rgba(255,255,255,0.1)Line

采用单一鲜艳紫色强调的高对比度深色UI，以引导用户视线。

03

字体

humanist-sans · monospace

display70px · 450
h236px · 600
body16px · 400
small13px · 400

标题采用紧凑的负字间距，营造密集、现代的感觉。 · 正文文本在深色背景下保持舒适的行高，以确保可读性。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

各板块间采用宽松的垂直间距，以突出产品视觉。

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

包内真实截图

Screen Studio — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Screen Studio — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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