根據研究調查由AI驅動的工作，可縮短約60%的工作時間 [1]。與AI共同協作的時代，善用AI乘著這波浪潮前進，是現今的大家都在學習的課題，這篇文章將分享如何透過 Stitch、Lovable、Figma make AI 工具，從自然語言生成介面到轉化為互動式頁面的完整流程，並探討設計師如何在這波變革中，找回創造的主動權與價值。
方法一：Stitch & Lovable 搭配使用，從自然語言到程式碼
步驟一：輸入一段指令
輸入自然語言指令「打造一個可以根據個人品味推薦音樂、並與朋友分享歌單的音樂平台。」，Stitch 根據語意自動生成對應的介面與結構。
步驟二：接續調整
依據初版設計稿，針對單頁或是局部進行調整：「最上方增加最多人聽的歌曲，像是專輯封面，或是MV畫面，並加上音樂所需控制按鍵…」，逐漸修改成符合預期的介面設計。
步驟三：視覺微調與色彩設計
利用工具列右上角調整外觀設計，快速套用品牌色調，強化品牌個性，也可以繼續輸入指令，調整局部外觀或是版面等。
步驟四：導入 Figma，進行細部優化和元件命名
Stitch 支援一鍵複製到 Figma，接著在Figma調整階層與元件命名，讓設計更有結構性，也方便團隊協作與接下來的導入Lovable動作。
步驟五：使用插件builder.io導入 Lovable
透過 Lovable 這類 AI-powered 工具，可以快速產生程式碼，並支援以指令方式直接產生與調整介面。若搭配 Stitch 工具，則能在 Figma 進行更細緻的人工微調，而不是依賴 AI 指令式的修正。依照使用目的、個人偏好與各平台輸出結果，設計師可靈活選擇最合適的工具組合。
方法二：一站式生成
步驟：輸入自然語言
在Lovable和Figma make輸入指令，即可產生互動式設計介面和程式碼。其中，Figma Make 也支援直接貼上 Figma 設計檔，再進一步轉換為程式碼。這次在兩個平台輸入相同指令，並切換至行動裝置時，皆出現了選單未能即時響應螢幕尺寸的問題。
AI協作心得分享
這次嘗試使用不同工具來產生互動介面與基礎程式碼，各家不同特色：
- Stitch：介面設計較為細緻，文字與色彩風格偏溫和。
- Figma 與 Lovable：設計風格更具空間感與高度顏色對比。
在這波 AI 工具浪潮中，選項越來越多，建議設計師多方嘗試與搭配。選對工具，不僅能提升效率，還能幫助我們 Smart Work，繁瑣操作的時間和心力留給 使用者體驗 與 創意思考。
此外，也需考慮 可擴展性與後續維護。目前的使用感想是：
- 適合快速產出一版，用於 使用者測試 或 對利益關係人提案。
- 但在實際開發階段，仍需結合傳統開發方式，才能確保完整性與長期維護。
新角色觀點：設計師與AI夥伴
1. 縮短開發前期流程，快速迭代，放大創意可能性
傳統設計流程可能從需求探索到高擬真原型要花上數週甚至數月。而 AI 可以將「概念 → 介面」的時間大幅壓縮至數小時內完成。這不只是效率提升，更讓設計師有更多餘裕去提出不同構想、進行 A/B 測試，驗證使用者偏好，這種快速試錯（rapid prototyping）讓設計師不再受限於高昂的設計與開發成本，更有空間自由嘗試各種創意。
2. 品牌調性與體驗故事，仍是人類的優勢
儘管 AI 能產出高品質設計，但對品牌精神與使用者情感的理解與轉化，依然是設計師不可取代的價值。設計師可以將品牌語言、故事與文化融入體驗流程，讓產品更有溫度與一致性，這正是 AI 難以複製的設計深度。
3. 從執行者走向策略夥伴，與 AI 建立「互動式協作」
AI 雖能處理介面，但仍須人類主導。設計師將商業目的轉換成可看見的介面，並梳理使用者與產品互動的體驗過程，用人性思維定義問題，輸入指令，善用 AI 輔助快速測試與修正。AI 工具不是一開始就懂你的需求，設計師需透過多次嘗試與微調，才能逐漸達到理想的輸出。
懂得使用 AI，成為新競爭力
輸入指令的方式（prompt engineering）已成為新技能之一。根據 Anthropic 官方分享，提高 AI 理解力的方法包括：
- 設定角色/情境（Role prompting）：給 AI 明確的身分與任務 [2]。
- 逐步引導（Chain-of-thought verification）：讓AI拆解需求，逐步說明減少模糊與誤解[3]。
- 反覆調整語境（Iterative refinement）：為了得出更理想的答案，不能缺少的還是練習、多次嘗試，逐漸掌握訣竅輸入精準的指令[3]。
Anthropic 提出的 AI 指令優化技巧中，強調「賦予 AI 角色身分」、「明確描述期待結果」，並在不同平台反覆調整語句，以取得更準確與契合需求的成果。這種與 AI 協作的能力，將是設計師未來的重要軟實力。
總結：有了AI工具，設計師能做的事情更多了！
AI 工具確實正在重塑 UI/UX 的設計流程。但它們不是要取代設計師，而是減少繁瑣重複的工作，讓人類能更專注於策略、敘事與創造價值。人類的生產速度無法超越AI工具，但我們可以定義該往哪裡走，設計師基於對於品牌和產品的了解，站在更遠的角度去宏觀整片森林，評估合適的路徑，再藉由AI的幫助，引領一步一步前進與修正方向。
未來的設計師更像策展師的角色，把品牌精神帶入產品，整合資源與工具，並關注整體動線、氛圍、使用者與產品的互動細節，包裝成一個完整的故事。
電商讀書會 