精選 · 開放 · 免費

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

高對比度、內容優先的配色方案，優先考慮可讀性，並使用單一亮藍色作為互動元素的強調色。

03

字型

grotesque-sans

display20px · 700
body15px · 400
caption13px · 400

所有文字使用一致的 grotesque-sans 字體系列 (TwitterChirp)。 · 保持 15px 基礎字號以確保可讀性。 · 名稱和標題使用 700 字重來強調。

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

基於 4px 網格的標準垂直節奏，主要間距為 16px 和 24px。

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

三欄佈局：左側邊欄用於導航，中間欄為主要動態，右側欄顯示建議內容與連結。

07

動效與互動

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

懸停和聚焦時，顏色與背景色進行平滑過渡。 · 互動元素有細微的透明度變化。

背景色輕微變化（例如變為 #F7F9F9），文字顏色平滑過渡。 · 透過顏色變化提供即時視覺反饋。

08

組件

button 膠囊形按鈕，圓角為 9999px。主要操作為白底黑字；次要操作為描邊樣式。
card 無獨立的卡片容器；內容透過水平線與留白分隔。
chip 行內元素，帶有膠囊形背景，常用於按鈕或標籤。
input 簡潔的單行文字輸入框，邊框極簡，常用於撰寫貼文。
hero 全寬的頂部橫幅圖像，下方是一個大型圓形個人頁面頭像，與橫幅重疊。

09

文案語氣與禁用清單

語氣直接、具資訊性、面向公眾。
標題風格 粗體、簡潔，常帶有行動導向。
按鈕文案 在強對比按鈕上使用清晰的祈使動詞（例如「註冊」、「建立帳號」）。

不要使用襯線字體——截圖顯示了統一的 grotesque-sans 字體系統。
不要使用厚重的陰影——截圖顯示大多數元素沒有或只有極簡的陰影，僅在卡片上有細微範例。
不要使用帶有多個間距的複雜網格——截圖顯示了乾淨的三欄佈局與一致的間距。
不要使用深色模式主題——截圖顯示以白色背景為主，搭配黑色文字。
不要使用多種強調色——截圖顯示僅使用單一、主導的藍色強調色用於連結與操作。
不要在按鈕上使用方形角——截圖顯示完全圓角的膠囊形按鈕。
避免: 正式或過於企業化的語言。
避免: 裝飾性或華麗的文辭。
避免: 模棱兩可的行動呼籲。

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) 作為互動元素的強調色。字體為統一的 grotesque-sans 系列，基礎字號為 15px。關鍵禁忌：絕不使用襯線字體或厚重陰影，避免深色模式美學，且絕不使用多種強調色。佈局為結構化的三欄網格，互動特徵為懸停時平滑、細微的顏色過渡。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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