精选 · 开放 · 免费

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