厳選・オープン・無料

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

見出しには、密集したモダンな印象を与えるための tightenされたネガティブ文字間隔を使用。 · 本文はダーク背景に対する可読性を確保するため、快適な行間を維持。

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

コンポーネント

09

文体と禁止事項

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）を持つ高コントラストパレットを採用しています。タイポグラフィは、見出しにtightな文字間隔を持つクリーンでモダンなhumanist-sans-serifです。主要な機能には、製品バッジを備えた大きく中央揃えのヒーローセクション、およびダーク背景の機能カードが含まれます。重要なルール：複数のアクセント色を使用しない、セリフフォントを使用しない、不要な要素でレイアウトを雑踏させないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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