精選 · 開放 · 免費

Lusion

Lusion 創造 3D 視覺敘事與互動式網頁體驗，協助品牌脫穎而出。

01

設計氣質 DNA

一個打造沉浸式3D敘事的數位熔爐。

02

色彩

高對比度的畫布，單一電光藍強調色與單色形體對比。

03

字型

geometric-sans · monospace

• display144px · 500
• heading143px · 400
• body16px · 400
• caption14px · 400

大型展示文字使用緊湊的負字母間距 · 所有字體保持乾淨、幾何美感 · 長文內容優先使用左對齊文字以提升可讀性

04

間距

垂直與水平節奏使用一致的 8px 基本增量。

05

表面 (圓角 / 陰影 / 邊線)

除了卡片上細微的 box-shadow 外，無可見邊框。

0px 2px 4px rgba(0, 0, 0, 0.04) · 0px 6px 10px rgba(0, 0, 0, 0.04)

06

版面

以大型 3D 視覺首頁區塊為主的流動式響應佈局。

07

動效與互動

hover 時平滑的 transform 動畫 · UI 元素細微的透明度過渡 · 首頁區塊中持續的 3D 物件移動

互動元素的 scale 與顏色過渡。 · 透過細微的 transform 變化提供即時視覺回饋。

08

組件

• button 藥丸形按鈕，深色背景搭配淺色文字，採用圓角設計。
• card 用於展示 3D 專案縮圖的大型圓角容器。
• chip 用於導覽或分類的簡潔大寫文字標籤。
• input 極簡輸入欄位，具圓角與細微邊框。
• hero 全寬區塊，以 3D 視覺與大規模字體排印為主導。

09

文案語氣與禁用清單

• 語氣 自信、專業且具創新性。
• 標題風格 大膽、簡潔的陳述，強調視覺衝擊力與敘事性。
• 按鈕文案 直接且以行動為導向，常使用大寫文字。

• 不要使用多種強調色 —— 截圖顯示單一電光藍強調色 (#1A2FFB) 主導畫面。
• 不要使用裝飾性或襯線字體 —— 截圖顯示乾淨的幾何無襯線字體 (Aeonik)。
• 不要使用繁忙的背景或複雜的圖案 —— 截圖顯示純色、淺灰白色背景 (#F0F1FA)。
• 不要使用直角方角 —— 截圖顯示所有容器與按鈕採用圓角 (15px-100px)。
• 不要使用細緻的輕量字體 —— 截圖顯示標題採用粗重的幾何字體粗細。
• 不要使用明亮、飽和的背景 —— 截圖顯示低飽和度的調色盤，僅單一跳色。
• 避免: 充斥術語的描述
• 避免: 被動語態
• 避免: 雜亂的佈局

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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