厳選・オープン・無料

Cap

スクリーンレコーディングツールのための、クリーンでモダンなSaaSランディングページ。

productmacoss
Cap のスクリーンショット
↓ デザインシステムをダウンロード (8 MB)OpenDesign で開く

オリジナル: https://cap.so

📦 パックの中身を見る →

01

デザイン DNA

開発者ツールスクリーンレコーディングオープンソーススクリーンショット

スクリーンレコーディングツールのための、クリーンでモダンなSaaSダッシュボード

02

カラー

#0D74CEAccent
#000000Ink
#202020Ink soft
#fcfcfcBG
#838383Muted
rgba(229, 231, 235, 1)Line

近白色の背景に黒のタイポグラフィで高コントラストを実現し、プライマリアクションには鮮やかなブルーをアクセントとして1つだけ使用。

03

タイポグラフィ

sans-serif · ui-monospace

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一貫した4pxの基本単位を基に、セクション間の上下余白をたっぷりと確保

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 4px 10px 0px · rgba(0, 0, 0, 0.05) 0px 20px 25px -5px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

12カラムグリッドを持つ標準的なセンターコンテナ

07

モーションとインタラクション

150msmicro
150mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素へのスムーズなhover transition · ビデオタイムライン上のプレイヘッドアニメーション

ボタンやリンクへのスムーズなカラー変化 · 繊細なスケールまたはカラーの変化

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Cap — 桌面首屏（hero）
桌面首屏（hero）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cap — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

これは、Cap（オープンソースのスクリーンレコーディングツール）のための、クリーンでモダンなSaaSランディングページです。デザインDNAは、明るく近白色の背景（#fcfcfc）、高コントラストの黒のタイポグラフィ、プライマリアクション（「新規登録」や「アップグレード」など）に使われる鮮やかなブルー（#0D74CE）をアクセントとする特徴を持っています。フォントは、ヘッドラインに60pxの大きいサイズとtightな字間で使用される、ニュートラルなヒューマニストサンセリフです。重要な禁止事項: 1) スクリーンショットがライトテーマを示しているため、ダークモードやダーク背景は使用しない。 2) ボタンやカードにシャープな角を使用せず、ピル形状や角丸を使用する。 3) 過度な影は使用せず、奥行きを出すために繊細で柔らかい影を使用する。レイアウトはたっぷりとした余白を持ち、明確さとプロフェッショナルさを重視しています。インタラクティブ要素には繊細でスムーズなトランジションを。トーンはプロフェッショナルで率直であり、製品のユーティリティとオープンソースの性質に焦点を当てています。

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

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

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

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