OpenDesign·你的设计资产库

网页参考

Descript

为领先 AI 视频编辑平台打造的简洁、温暖且高度实用的设计。

AIVideo
Descript 网站截图

01

设计气质 DNA

AI 视频编辑器协作式直观专业

一个既强大又易于上手的现代工作室。

02

色彩

#1A1A1AInk
#F1EAEDBG
#D1C7CBMuted
rgba(229,231,235,1.0)Line

采用温暖的米白色画布搭配高对比度深墨色以提升可读性，并在首屏区域使用深勃艮第红作为强调色。

03

字体

transitional-serif · humanist-sans · monospace

  • display56px · 400
  • body18px · 400

04

间距

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

以 4px 为标准基础单位，间距和留白采用清晰的 8px/16px/24px 递增序列。

05

表面 (圆角 / 阴影 / 边线)

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

1px solid #E5E7EB

rgba(0,0,0,0.16) 0px 2px 4px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

采用全宽首屏区块，关键信息居中布局，随后是用于功能卡片的多列网格。

07

动效与交互

100msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 和 focus 时的淡入过渡 · 平滑的背景色变化

交互元素上细微的背景色或透明度变化。 · 即时视觉反馈，无延迟动画。

08

组件

  • button 简洁的矩形按钮，圆角 4px，垂直内边距 16px。
  • card 圆角 12px 的卡片，采用大尺寸背景图与叠加文字。
  • chip 用于分类的简洁文字标签。
  • input 带细微边框的标准表单输入框。
  • hero 大尺寸居中首屏区块，采用深勃艮第红背景与加粗衬线字体。

09

文案语气与禁用清单

  • 语气 专业、清晰且赋能。
  • 标题风格 加粗的大号衬线字体，传递权威与清晰感。
  • 按钮文案 直接且以行动为导向（例如：‘免费开始使用’）。
  • 不要使用深色模式界面——截图显示的是以浅色、温暖的米白色背景作为主要画布。
  • 不要为标题使用高度几何化的无衬线字体——截图显示的是用于展示文字的经典过渡衬线体。
  • 不要将霓虹色或电光蓝用作主要强调色——截图使用的是深勃艮第红和柔和的珊瑚红。
  • 不要为主要按钮使用过度圆润或‘药丸’形状——截图显示的是圆角为 4px 的按钮。
  • 不要使用过多的投影或 3D 效果——截图显示的是一个平整、干净的表面，仅使用一个细微的单层 box-shadow 来营造层次感。
  • 不要使用拥挤的多侧边栏导航——截图显示的是一个干净、带有充足留白的水平顶部导航栏。
  • 避免: 过于技术性的术语
  • 避免: 拥挤的布局
  • 避免: 刺眼的霓虹色
  • 避免: 圆形、气泡式的 UI 元素
  • 避免: 过度装饰性动画
  • 避免: 深色模式作为主要主题

10

包内真实截图

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

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Descript 的设计是一种干净、专业的 SaaS 美学，在温暖与权威之间取得了平衡。它使用浅色米白色背景（#F1EAED）搭配高对比度的深墨色（#1A1A1A）以提升可读性。字体方面，粗体标题使用经典的过渡衬线体，正文使用人文主义无衬线体，营造出精致而亲切的感觉。关键设计元素包括：基于 4px 的间距比例、细微的 1px 边框（#E5E7EB），以及在首屏区域克制地使用深勃艮第红。关键设计规则包括：1）避免默认使用深色模式；2）不要使用过度圆润或气泡式的 UI 组件；3）绝不使用霓虹色或高饱和度的强调色；4）保持充足的留白和结构化的 12 列网格布局。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。