精選 · 開放 · 免費

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

採用高對比深色介面，搭配單一鮮明紫色強調色以引導使用者視線。

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

文案語氣與禁用清單

語氣專業、 Helpful 且自信。
標題風格 簡短有力的短語，突顯核心效益。
按鈕文案 直接且以行動為導向（例如：下載 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

這是一款專為 macOS 螢幕錄製工具 Screen Studio 設計的極簡深色主題產品登陸頁面。設計採用高對比調色盤，包含深炭灰色背景 (#13151B) 與鮮明紫色強調色 (#4D2FF5)。字體採用乾淨現代的無襯線字體，標題使用緊密字距。主要特色包含大型置中主視覺區塊（搭配產品徽章），以及深色背景的功能卡片。關鍵規則：避免使用多種強調色、避免使用襯線字體，且避免使用多餘元素使佈局雜亂。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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