
Day 20 實際在手機上測試後,我想在練習後的心情紀錄加入 emoji 選項。但系統內建的 emoji 和 App 的藍天白雲風格不太搭,所以決定和 AI 一起做一組專屬的情緒插畫。
1.0 版本畫面

請 AI 做任何 UI 時,一張圖勝過文字表達,尤其風格這種東西時常文字說的和實際做出來每個人感受不同,所以提供圖給 AI 是最好的方式。
給 AI 的素材參考和方向
一開始腦中閃過的是皮克敏和 GrokBot 的插畫風格,就先拿來試試看效果。


AI 產出的第一版
感覺效果還行,但是目前看起來就是直接照抄原本素材圖的風格進去XD,於是進行第二次迭代。

UI 迭代
提示詞:基於我 App 目前的設計風格藍天白雲,以雲為意象當情緒語言去做插畫風格,呈現三種不同的情緒(緊繃/平靜/放鬆
AI 產出的第二版
AI 給了我兩個方向。整體的感覺有符合我目前的預期,蠻滿意的,氣泡和雲比起來,認為雲的意象比較符合我的目標,也因此決定用雲朵進行實作。

確定方向後,請 Claude Code 進行實作,並且在 Xcode 上開啟模擬器來做模擬,效果非常滿意,也讓畫面元素更豐富活潑!
