OpenDesign·你的设计资产库

网页参考

Leonardo.Ai

一个大胆、沉浸式的AI图像生成平台落地页，采用高对比度暗色主题、鲜亮紫罗兰强调色和极致的3D透视排版。

AIImage
Leonardo.Ai 网站截图

01

设计气质 DNA

生成式大胆沉浸式创作者优先3D透视

通往生成式AI创意工作室的门户

02

色彩

#6B5CE7Accent
#FFFFFFInk
#EDEDEDInk soft
#030303BG
#0A0A0ABG soft
#353535Muted
rgba(255,255,255,0.1)Line

极致的高对比度暗色主题，点缀以单一的鲜亮紫罗兰强调色

03

字体

geometric-sans · humanist-sans · monospace

  • display120px · 900
  • heading48px · 900
  • body14px · 400
  • caption10px · 400

标题和导航广泛使用大写字母 · 大型展示字体应用负字距 · 巨型展示字体使用极致紧凑的行高

04

间距

2px
4px
8px
12px
16px
24px
32px
48px
54px
80px

一致的4px基础比例，交互元素采用充裕的内边距

05

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

sm · 6px
md · 8px
lg · 8px
pill · 999px

采用半透明白色边框，在暗色背景上形成低调对比

0px 16px 48px 0px rgba(0,0,0,0.4) · 0px 24px 80px 0px rgba(0,0,0,0.5)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血暗色英雄区，巨大的3D排版跨越整个视口，下方过渡为标准内容宽度章节

07

动效与交互

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover时的平滑颜色和背景色过渡 · 展示元素的基于变换的3D透视移动 · 排版元素的错开入场动画

交互元素上细微的背景色偏移和轻微的缩放或变换调整 · 通过状态变化提供即时视觉反馈，保持暗色主题连续性

08

组件

  • button 胶囊形和圆角矩形按钮，采用高对比度填充（暗色上的白色）或细微边框变体
  • card 暗色背景卡片，带有细微边框和充裕的内边距
  • chip 小型胶囊形标签，带有细微边框
  • input 标准文本输入框，带有细微圆角边框和暗色背景
  • hero 沉浸式全屏区域，以巨大的3D透视排版为特色，带有醒目的行动号召覆盖层

09

文案语气与禁用清单

  • 语气 大胆、自信、以创作者为中心，且极具创新性
  • 标题风格 简短、有力、全大写的陈述，强调创造力和工具所有权
  • 按钮文案 直接且可操作，使用高对比度胶囊形按钮驱动即时用户行动
  • 不要使用浅色或彩色背景——截图显示的是深邃的近黑色暗色主题。
  • 不要对主要信息使用小巧、精致的排版——截图显示的是巨大的、超粗的展示字体。
  • 不要引入多种相互竞争的强调色——截图显示的是单一、主导的紫罗兰/蓝色强调色。
  • 不要对英雄区域使用严格的平面2D网格布局——截图显示的是极致的3D透视文字。
  • 不要对主导航和标题使用小写字母——截图显示的是全大写文字。
  • 不要使用纤细、低对比度的边框——截图显示的是细微但清晰的边框来定义组件边界。
  • 避免: 软弱或犹豫的语言
  • 避免: 过度正式的行话
  • 避免: 行动号召中的被动语态

10

包内真实截图

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

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

11

System Prompt

此系统为Leonardo.Ai设计，这是一个创作者优先的生成式AI平台。美学风格大胆、沉浸、高对比度。调色板严重依赖深邃的近黑色背景（#030303）搭配纯白（#FFFFFF）文字和单一、鲜亮的紫罗兰/蓝色强调色（#6B5CE7）。展示元素使用粗体几何无衬线字体，应用极致的负字距和紧凑的行高，尤其是在巨大的3D透视英雄区域。正文使用清晰的人文主义无衬线字体。英雄区域采用全出血、宽阔布局，过渡到标准容器宽度。关键禁忌：避免浅色背景，避免多种强调色，避免小巧/精致的展示排版，避免严格的平面2D英雄布局，避免小写标题，以及避免高对比度装饰性边框。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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