OpenDesign·你的设计资产库

网页参考

Luma

一个用于创建、主办和发现社交活动的现代化平台。

EventsRefinedProduct
Luma 网站截图

01

设计气质 DNA

活动社交日历主办消费者

一个为现代社交聚会精心设计的数字邀请函

02

色彩

#F31A7CAccent
#131517Ink
#64666AInk soft
#F7F8F9BG
#FFFFFFBG soft
#444648Muted
rgba(19, 21, 23, 0.1)Line

浅色的中性画布,让活泼的 3D 图像和充满活力的粉色点缀脱颖而出。

03

字体

system-ui

  • display64px · 600
  • body-lg20px · 400
  • body16px · 400
  • caption14px · 400

展示字号使用紧凑的负字间距 · 使用系统字体栈以获得最佳性能 · 展示标题字体粗细为 600,正文为 400

04

间距

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

基于 4px 的一致网格,配合充裕的间距,营造开阔、通透的布局。

05

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

sm · 8px
md · 15px
lg · 16px
pill · 100px

使用 rgba(19, 21, 23, 0.1) 的微妙 1px 实线边框

0 2px 8px rgba(0,0,0,0.04)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

双栏英雄布局,左侧为文本,右侧为大型 3D 插图。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 和 focus 状态使用平滑的 0.3 秒过渡 · 顺序元素的级联动画

带有 0.3 秒过渡的微妙背景色或透明度变化。 · 通过轻微的缩放或透明度变化提供即时视觉反馈。

08

组件

  • button 高对比度的胶囊形 CTA(深灰色背景,白色文字),带有微妙的 hover 过渡效果。
  • card 带有微妙边框或阴影的柔和圆角容器。
  • chip 用于辅助信息的小型胶囊形徽章。
  • input 简洁、圆角的输入框,带有微妙边框。
  • hero 采用分屏布局,包含一个醒目的标题和一个大型圆形 3D 插图。

09

文案语气与禁用清单

  • 语气 热情、鼓励、轻松。
  • 标题风格 简短有力的短语,混合使用中性和充满活力的色彩。
  • 按钮文案 直接且以行动为导向,例如“创建您的第一个活动”。
  • 不要为英雄区使用深色背景——截图显示的是浅色、通透的背景。
  • 不要为标题使用衬线字体——截图显示的是简洁、几何感的无衬线字体栈。
  • 不要对所有元素都使用尖锐的 90 度角——截图显示了 8px、15px 和胶囊形状的混合应用。
  • 不要使用柔和或单色的调色板——截图采用了充满活力的粉色点缀和 3D 彩色插图。
  • 不要为英雄区图像使用标准的矩形布局——截图显示的是一个大型、圆形的 3D 构图。
  • 不要使用复杂的导航栏——截图显示的是极简、清晰的右上角导航。
  • 避免: 过于正式或企业化的语言
  • 避免: 大段密集的文本
  • 避免: 复杂的行话

10

包内真实截图

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

11

System Prompt

Luma 是一个精致、现代化的社交活动主办平台。设计采用浅色中性背景(#F7F8F9),搭配简洁的系统字体栈。一个充满活力的粉色(#F31A7C)在极简画布上增添了活泼的气息。关键禁忌:绝不使用深色背景作为英雄区;避免使用衬线字体;不要为所有 UI 组件应用尖锐的直角。英雄区的大型圆形 3D 插图增添了深度和视觉趣味,而排版则依靠紧凑的字间距来营造粗犷、现代的感觉。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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