精選 · 開放 · 免費

Lovable

透過與 AI 對話來建立應用程式與網站。

01

設計氣質 DNA

一個友善、色彩豐富的入口，能將自然語言轉化為功能性軟體。

02

色彩

以溫暖中性色為基調，搭配活潑、富有表現力的多色漸層。

03

字型

geometric-sans · monospace

• display60px · 480
• heading48px · 480
• body16px · 400
• small14px · 400

04

間距

採用充裕的留白，並在章節間設置較大的垂直間距。

05

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

1px solid rgb(236, 234, 228)

oklch(0.2 0 0 / 0.12) 0px 2px 2px -1px · oklch(0.2 0 0 / 0.12) 0px 4px 4px -2px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px

06

版面

以單欄居中佈局為主，並設有顯眼的首頁主視覺區塊。

07

動效與互動

UI 元素採用流暢的透明度與變形過渡效果。 · 滑鼠懸停時觸發漸層變換。

細微的色彩偏移與透明度變化。 · 透過縮放或透明度調整提供即時反饋。

08

組件

• button 高對比、小圓角的膠囊形主按鈕。
• card 邊框細緻、背景溫暖且帶有柔和圓角的卡片。
• input 作為主要互動點的大型圓角輸入容器。
• hero 全寬漸層背景，搭配置中文字與浮動式輸入框。

09

文案語氣與禁用清單

• 語氣 鼓勵、清晰且具啟發性。
• 標題風格 簡短有力、注重行動。
• 按鈕文案 直接並聚焦於使用工具所帶來的好處。

• 勿使用純白色背景——截圖顯示的是溫暖、略帶米色的背景。
• 勿使用尖銳的方形邊角——截圖顯示卡片與輸入框皆採用圓角設計。
• 勿使用冷色調的單一配色方案——截圖顯示的是活潑的多色漸層。
• 勿使用過於密集、擁擠的佈局——截圖顯示的是充裕的留白與清晰的層次結構。
• 勿使用複雜、華麗的字體——截圖顯示的是簡潔的幾何無襯線字體風格。
• 勿使用深色、生硬的邊框——截圖顯示的是細緻的淺色邊框。
• 避免: 充滿術語的技術性描述
• 避免: 過於密集的文字段落
• 避免: 被動或過於正式的語氣

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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