精选 · 开放 · 免费

Luma

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

01

设计气质 DNA

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

02

色彩

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

03

字体

system-ui

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

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

04

间距

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

05

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

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 热情、鼓励、轻松。
• 标题风格 简短有力的短语，混合使用中性和充满活力的色彩。
• 按钮文案 直接且以行动为导向，例如“创建您的第一个活动”。

• 不要为英雄区使用深色背景——截图显示的是浅色、通透的背景。
• 不要为标题使用衬线字体——截图显示的是简洁、几何感的无衬线字体栈。
• 不要对所有元素都使用尖锐的 90 度角——截图显示了 8px、15px 和胶囊形状的混合应用。
• 不要使用柔和或单色的调色板——截图采用了充满活力的粉色点缀和 3D 彩色插图。
• 不要为英雄区图像使用标准的矩形布局——截图显示的是一个大型、圆形的 3D 构图。
• 不要使用复杂的导航栏——截图显示的是极简、清晰的右上角导航。
• 避免: 过于正式或企业化的语言
• 避免: 大段密集的文本
• 避免: 复杂的行话

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko