OpenDesign·你的设计资产库

网页参考

Screen Studio

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

ProductMac

封面待补录,可通过原站查看设计。

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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

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

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。