精選 · 開放 · 免費

Relume

Relume 是一款 AI 驅動的設計與開發工具，能更快速地建置行銷網站。

01

設計氣質 DNA

一款融合 AI 生成與人類策展的網頁設計創意副駕駛。

02

色彩

中性、溫暖的灰色調提供潔淨的畫布，讓鮮明的紫色強調色與深色文字引導視覺焦點。

03

字型

humanist-sans · monospace

• display80px · 500
• h240px · 500
• body-lg19px · 400
• body16px · 400
• caption14px · 400

大型展示標題採用緊湊的字距調整。 · 所有內文內容使用標準的 400 字重。

04

間距

一致的 4px 倍數在佈局中創造出結構化、可預測的節奏。

05

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

1px solid rgba(22,22,22,0.1)

rgba(0, 0, 0, 0.04) 0px 1px 2px 0px · rgba(0, 0, 0, 0.08) 0px 1px 3px 0px · rgba(0, 0, 0, 0.08) 0px 8px 10px -4px

06

版面

居中欄位佈局，搭配充裕的留白與首頁區域的浮動 UI 元素。

07

動效與互動

在 hover 時有流暢的透明度與變形過渡效果。 · 裝飾性 UI 元素的浮動動畫。 · 在進入視窗時有加速的佈局位移。

卡片與按鈕在 hover 時有細微的背景色調變化與輕微的垂直位移。 · 透過背景變化或縮放變形提供立即的視覺回饋。

08

組件

• button 深色填滿的主按鈕，搭配白色文字；另有紫色邊框的幽靈按鈕變體。
• card 白色或淺灰色卡片，具有柔和陰影與圓角邊框。
• chip 小型、圓潤的藥丸狀標記，用於社會證明與導覽標籤。
• input 大型、醒目的輸入欄位，帶有漸層邊框與內嵌的填滿式操作按鈕。
• hero 以巨大字體居中於淺色背景上，兩側點綴著浮動的互動式 UI 卡片。

09

文案語氣與禁用清單

• 語氣 賦能、專業且具創新性。
• 標題風格 粗體、直接且強調效益的陳述。
• 按鈕文案 以行動為導向且具吸引力。

• 勿使用純白背景 — 螢幕截圖顯示的是溫暖的灰白色調。
• 勿使用襯線展示字體 — 螢幕截圖顯示的是幾何或人文主義無襯線字體。
• 勿使用明亮的霓虹強調色 — 螢幕截圖顯示的是深邃、飽和的紫色。
• 勿讓佈局顯得雜亂 — 螢幕截圖顯示了充裕的留白與居中對齊。
• 勿使用生硬的陰影 — 螢幕截圖顯示的是柔和、擴散的 box-shadow。
• 勿在 UI 元素上使用銳利的角 — 螢幕截圖顯示的是最大至 16px 的圓角。
• 避免: 被動語態
• 避免: 未經解釋的過度技術術語
• 避免: 模糊的承諾

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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