Lovable 是「和 AI 對話就能建構全端應用」的 AI 開發平台。其風格整體溫暖：羊皮紙米色（#f7f4ed）取代純白，所有灰色都由 #1c1c1c 的不同透明度推導，Camera Plain Variable 字型帶人文溫度和編輯式字距，按鈕用內嵌陰影（白色 0.5px 內高光加黑色 0.5px 描邊）塑造實體感，描邊也是暖中性（#eceae4）。適合 AI 建站與低程式碼產品。
Lovable開發者工具
提示詞範本
基礎範本
Design a Lovable-inspired interface. - Warm parchment background (#f7f4ed) — not white, not beige, a deliberate cream that feels hand-selected; - Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes; - Opacity-driven color system: all grays derived from #1c1c1c at varying transparency levels; - Inset shadow technique on buttons: rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset; - Warm neutral border palette: #eceae4 for subtle, rgba(28,28,28,0.4) for interactive elements. Colors: #f7f4ed, #1c1c1c, #fcfbf8, #5f5f5d with #3b82f6 accent. Typography: Camera Plain Variable.
變體提示詞
📱 行動裝置
Design a mobile app with Lovable aesthetics. Use Lovable color identity with #3b82f6 accents. Clean, touch-friendly, native feel.
💻 Web 端
Design a web application with Lovable style. Use Lovable color identity with #3b82f6 accents. Professional, responsive layout.
📊 儀表板
Design a dashboard with Lovable design language. Use Lovable color identity with #3b82f6 accents. Data-rich, organized, clear hierarchy.
📄 到達頁
Design a landing page with Lovable visual identity. Use Lovable color identity with #3b82f6 accents. Compelling, conversion-focused.
使用範例
Lovable 應用程式
Web 端Build a web app with Lovable design language and #3b82f6 color system.
Lovable 儀表板
儀表板Create a dashboard using Lovable style with data visualization and Camera Plain Variable typography.
✅ 適用情境
- 開發者工具
- AI 生成類產品官網
- 個人開發者的作品發布頁
❌ 不適用情境
- 嚴肅的企業合規頁面
- 單色極簡的文件網站
DESIGN.md 檔案
符合 design.md 開放格式的設計系統描述，可複製或下載後交給 AI 程式設計工具使用。