厳選・オープン・無料

Create Video

高速な情報交換とパブリック・ディスコースのために設計された、マイクロブログ型ソーシャルプラットフォームです。

SocialCleanConsumerMobile UITypography
Create Video のスクリーンショット
↓ デザインシステムをダウンロード (17 MB)OpenDesign で開く

オリジナル: https://create.video

📦 パックの中身を見る →

01

デザイン DNA

ソーシャルタイムラインプロフィールフィード

短いコンテンツや更新情報を共有するためのデジタルの公共広場です。

02

カラー

#1D9BF0Accent
#0F141AInk
#52636FInk soft
#FFFFFFBG
#BACBD4BG soft
rgba(228, 234, 236, 1)Line

可読性を優先するハイコントラストのコンテンツファーストパレット。インタラクティブ要素には鮮やかな青のアクセントカラーを1色使用します。

03

タイポグラフィ

grotesque-sans

すべてのテキストに一貫した grotesque-sans ファミリー（TwitterChirp）を使用します。 · 可読性のために基本サイズを15pxに設定します。 · 名前や見出しには700のウェイトを使用して強調します。

04

余白

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

4pxグリッドに基づく標準的な垂直リズム。16pxと24pxが主要な gutter として使用されます。

05

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

sm · 4px
md · 14px
lg · 16px
pill · 9999px

1px solid #E4EAEC

0px 4px 12px 0px rgba(0, 0, 0, 0.08)

06

レイアウト

1265container
3columns
30pxgutter
768 / 1024breakpoints

3カラムレイアウト。左サイドバーにナビゲーション、中央カラムにメインフィード、右カラムに提案やリンクを配置します。

07

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

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

ホバーおよびフォーカス時の滑らかな color および background-color トランジション。 · インタラクティブ要素の微細な opacity 変化。

背景色が微かに変化（例：#F7F9F9）し、テキスト色がトランジションします。 · 色の変化による即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

リアルタイムのパブリック・ディスコースのためのマイクロブログ型ソーシャルプラットフォーム。デザインはクリーンで機能的。コンテンツファースト。白背景（#FFFFFF）、深いインク色のテキスト（#0F141A）、インタラクティブ要素には単一の鮮やかな青のアクセントカラー（#1D9BF0）を使用。タイポグラフィは15pxの基本サイズを持つ一貫した grotesque-sans ファミリー。重要な禁止事項：セリフフォントや重いドロップシャドウは絶対に使用せず、ダークモードの美学を避け、複数のアクセントカラーは絶対に使用しない。レイアウトは構造化された3カラムグリッド。インタラクションはホバー時の滑らかで微細な色の変化が特徴。

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

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

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

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