精選 · 開放 · 免費

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 高對比度的藥丸形號召行動按鈕（深灰色背景、白色文字），帶有細微的 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