OpenDesign·你的设计资产库

网页参考

Pitch

紫色首屏用大字号标题配合幻灯片拼贴，下方白色输入卡片承接操作。

SaaSBold TypographyEditorialCollaboration
Pitch 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 标题在繁复拼贴中保持强对比
  • 白色操作区与背景分离

适合什么项目

  • 演示工具
  • 内容创作产品

如何带进你的设计

  • 用少量有代表性的自有作品展示结果
  • 给输入或试用区设置稳定的纯色背景

使用边界

  • 静态输入框外观不能证明生成流程或交互能力
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

演示文稿AI协作大胆创意

一个大胆、富有创意的画布，供团队打造制胜的演示文稿。

02

色彩

#d4fb6bAccent
#ffffffInk
#0c021cInk soft
#1a0d33BG soft
#ebe3feBG quiet
#c6a5ffMuted
rgba(198, 165, 255, 0.2)Line

深邃的紫色背景营造出大胆、聚焦的画布，使充满活力的点缀色和清晰的白色排版脱颖而出。

03

字体

geometric-sans · humanist-sans · monospace

  • display120px · 900
  • display-sm60px · 700
  • body-lg20px · 400
  • body16px · 400
  • caption12px · 400

标题使用紧凑的负字距和粗重字重以增强冲击力。 · 正文使用标准字重，确保在深色背景上的可读性。 · 大号字体用于建立强烈的视觉层级。

04

间距

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

充裕的留白突出了粗体的排版，并营造出干净、高级的感觉。

05

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

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

很少使用细微边框；深度主要通过色块和柔和光晕来实现。

0 20px 60px -20px rgba(198, 165, 255, 0.35)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中、全出血的英雄区域，搭配散落、重叠的UI元素。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.34, 1.56, 0.64, 1)easing

交互元素使用弹性微交互。 · 悬停状态使用平滑的淡入淡出和变换效果。 · 背景元素使用动态浮动效果。

通过细微的缩放或颜色变化提供反馈，避免干扰。 · 通过弹性过渡提供即时的触觉响应。

08

组件

  • button 大号、圆角的‘药丸’按钮。主要操作使用充满活力的青柠绿背景搭配深色文字。次要操作使用白色描边。
  • card 用于推荐的圆角矩形卡片，采用纯紫色背景或全出血摄影图片。
  • chip 药丸状标签，使用纯色背景和粗体排版。
  • input 大号、圆角的输入框，配有柔和的紫色边框和内部操作按钮。
  • hero 全出血深紫色画布，配以超大字号排版、散落的浮动UI元素和中央AI提示界面。

09

文案语气与禁用清单

  • 语气 自信、大胆且现代。
  • 标题风格 简短、有力且极具冲击力的陈述。
  • 按钮文案 直接且以行动为导向，常使用‘注册’或‘获取演示’。
  • 不要使用柔和或去饱和的颜色——截图显示的是深邃、充满活力的紫色和明亮的青柠绿调色板。
  • 不要使用精致的衬线字体——截图显示的是用于展示的粗重、几何感强的无衬线字体。
  • 不要用太多元素使布局杂乱——截图显示的是留白充裕的干净画布。
  • 不要使用小而怯懦的按钮——截图显示的是大号、圆角、高对比度的药丸按钮。
  • 不要依赖粗重边框来构建结构——截图显示的是通过色块和深度来实现。
  • 不要使用标准的商务蓝作为点缀色——截图显示的是独特的青柠绿作为主要操作颜色。
  • 避免: 企业行话
  • 避免: 被动语态
  • 避免: 犹豫不决的语言

10

包内真实截图

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

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

11

System Prompt

一个大胆、富有创意的SaaS协作演示平台。其特点是深紫色画布（#0c021c），搭配充满活力的青柠绿（#d4fb6b）和柔和的薰衣草紫（#c6a5ff）。排版以粗重、几何感强的无衬线展示字体为主，采用紧凑的负字距，并搭配简洁的人文主义无衬线正文字体。关键禁忌包括：避免使用标准商务蓝，避免精致的衬线排版，以及避免杂乱、边框繁重的布局。该设计依赖于充裕的留白和色块，以营造高端、专注的体验。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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