How to Design In Lovable Better than 99% of People
三句話摘要
Loveable 的四個設計控制功能——用系統化工具替代無盡提示詞，掌握 AI 生成網站的視覺風格。 Loveable 的設計控制不在於更長的提示詞，而在於在對的時機用對的工具——方向決定基礎、參考維持一致、重設計改善全局、標註精細調整。 設計方向解決通用感問題。新項目建立時，Loveable 暫停並呈現三個視覺方向選擇，各自預設排版、色彩、間距、容器風格的完整系統。在程式碼生成前就鎖定方向，使所有後續組件自動遵循該規則，避免 AI 回退預設的通用介面（間距可預測、卡片重複、缺乏個性）。
重點整理
重點- 1
設計方向解決通用感問題。新項目建立時，Loveable 暫停並呈現三個視覺方向選擇，各自預設排版、色彩、間距、容器風格的完整系統。在程式碼生成前就鎖定方向，使所有後續組件自動遵循該規則，避免 AI 回退預設的通用介面（間距可預測、卡片重複、缺乏個性）。
- 2
跨專案參考維持品牌一致性。用戶在新項目的聊天框按 @ 鍵參考既有項目後，Loveable 以只讀方式讀取原項目的 Tailwind 配置、全局主題、色板、排版、組件樣式，自動適應並應用到新項目。無需手動複製代碼，新專案自動繼承一致的視覺語言，防止多個專案間的設計漂移。
- 3
重設計是結構化的整體改善工具。當介面經多次迭代變得混亂時，/redesign 命令觸發自動審計，檢查佈局、組件層級、排版、色彩是否符合現代標準，生成診斷報告並提出至少兩個改善方案。用戶選擇後才應用變更，避免文字提示導致的不可預期樣式替換，確保改變是協調而有針對性的。
- 4
設計標註透過視覺反饋消除文字歧義。用戶在即時預覽激活標註工具，可直接繪製圓圈（標記需移動元素）、箭頭（指示新位置）、刪除線（移除部分）。Loveable 將圖形映射到佈局坐標和原始碼組件，精確執行變更，完全避免「往上移」被誤解為移動錯誤容器的問題。
實用技巧與重點
乾貨- 設計方向示例
- 「The Ritual of the Bean」：溫暖有機極簡風（米色/奶油背景 + 優雅襯線字體 + 開放空間 + 水平列表排版）
- 「Precision Alchemy」：高級工業深色風（深黑背景 + 白色文本 + 金色襯線標題 + 幾何網格 + 對稱分割佈局）
- 「The Ritual of the Perfect Roast」：現代非對稱瑞士網格風（灰色背景 + 粗體襯線 + 最少容器邊框 + 多欄文本 + 圓角元素）
- 操作指令
- 跨專案參考：聊天框按 @ 鍵 → 選擇工作區項目 → 提示「Pull the design system of @[project] to design this application」
- 重設計命令：/redesign [評估請求，例如「evaluate this app and update the look to match its functionality」]
- 設計標註工具：預覽容器底部的鉛筆圖標
- 平台網址：https://loveable.dev
- 工作流順序
- ① 設計方向（新專案建立時）→ ② 跨專案參考（創建相關產品時）→ ③ 重設計（功能完成後整體改善）→ ④ 設計標註（最終細節調整）
- 實例專案
- BrewBase Pro（精品咖啡超市）採用工業風 → Pastry Lab（精密烘焙廚房）參考後自動繼承同一視覺系統
- Archform Studio（建築作品集）建立高對比結構風格 → Archform Specs（技術藍圖入口）參考後保持一致性同時強化功能性
結論
結論“Loveable 的設計控制不在於更長的提示詞，而在於在對的時機用對的工具——方向決定基礎、參考維持一致、重設計改善全局、標註精細調整。”
完整解析
詳細大多數 Loveable 用戶過度依賴文字提示，導致設計通用、不一致、需反覆修改。講者系統展示了四個功能如何聯動破解這個困境。
設計方向是起點。新項目時 Loveable 自動暫停，呈現三個預設視覺方向。每個方向都是完整的設計系統——不僅規定色彩和字體，更包括間距邏輯、容器樣式、佈局密度、背景處理。用戶在程式碼生成前選擇，之後所有組件都遵循該系統，防止 AI 回退通用預設。以咖啡超市 BrewBase Pro 為例，選擇工業風（深黑、金色、幾何網格）後，整個網站從色彩搭配到卡片排列都體現精品感。
跨專案參考解決多產品品牌一致性。傳統做法需手動重新配置設計元素。這功能讓新專案通過 @ 符號參考既有專案，Loveable 以只讀方式讀取原專案的所有設計配置——Tailwind 類別、全局主題、色板、排版規則、組件樣式——然後適應套用到新專案。原專案不變，新專案自動繼承一致視覺語言。Pastry Lab 參考 BrewBase Pro 後，儘管主題不同（烘焙廚房 vs 咖啡超市），卻因共享深黑背景、金色點綴、幾何網格而明確關聯，節省了大量一致性維護工作。
重設計適合已成型但需整體改善的階段。多次迭代後介面往往混亂、不一致，此時文字提示（「讓這看起來更專業」）效果很差，易導致意想不到的樣式替換。/redesign 命令啟動結構化流程：Loveable 先審計介面，檢查佈局、組件層級、排版、色彩是否符合現代標準，生成診斷報告列出問題，最後提出至少兩個改善方案讓用戶選擇（例如「Warm Refined Product Forward」vs「Keep the Dark Thing Double Down on Precision」）。用戶確認方案後才應用，避免反覆試錯，確保改變協調而有針對性。
設計標註是最後一環。用戶在即時預覽激活標註工具（鉛筆圖標），像在紙本上標註一樣直接繪製：圓圈框出要移動的元素、箭頭指示新位置、刪除線標記要移除部分。Loveable 將圖形映射到佈局坐標和原始碼組件，精確執行變更。這解決了文字描述空間變更的歧義——「把這往上移」可能被誤解為移動錯誤容器，但視覺標註完全明確。
整個工作流的力量在於層次性和順序性。先用設計方向建立全局基礎，再用跨專案參考保持一致性，然後用重設計進行結構化整體改善，最後用標註微調細節。每個功能在恰當的專案階段發揮最大效用。講者用兩個完整示例演示：BrewBase 系列（咖啡超市 + 烘焙廚房）和 Archform 系列（建築作品集 + 藍圖入口），都遞進地應用四個功能，展現如何從混亂的文字迴圈轉變為可控的視覺系統。
關鍵時刻
Pipeline v2帶時間戳的重點，會在逐字稿層級分析上線後產生。目前請先透過原始影片觀看。
事實查核
Pipeline v2說法查證是下一次管線升級的一部分。KeyFrame 只會顯示它真正能驗證的內容。
