平時在網路上看了不少高手能用 AI 快速生成精美的前端網頁設計,我愈看愈心癢 – 別人寫程式都在開火箭,我怎能停留在石器時代😅
但想進步,需要門路。好在我看多了文章,有些人會稍微透露一點技巧,再加上自身累積的經驗,能猜出個大概。
我最近領悟一個用 AI 降維打擊的技巧,能讓自己使用 AI 的產出得到巨大提升:你覺得對自己很難、做不到的事,直接問 AI 怎麼做!
(我想這大概是因為這些 AI 模型的訓練資料大部分用的是較為通用、精美的資料,所以當你向 AI 詢求建議,它往往會給出較常用、精美的資料。)
比如我雖然會寫程式,但前端 UI 美術設計沒有天份,常常只做得出能用的介面,但也常被人覺得醜。甚至到了 AI 時代,我寫出的 UI 還是醜,所以 UI 設計對我來說還真難😅 我不懂怎麼下提示詞能做出精美的 UI。這個難題就很適合用 AI 幫我提升能力的維度。
我昨天就決定要驗證以上方法,用 AI 做一款精美的前端網頁 app。我想了一個題目:可愛貼紙線上商店 app
但我不知道要怎麼下提示詞生成精美 UI 的 app,所以我就請 ChatGPT 幫我生成給 AI coding agent 使用的提示詞,如下:
“I want to design an online cute sticker shopping frontend only website. The site has a sticker catalog page, payment page, a shopping cart, a cute, shiny, and colorful theme for children. Use typescript, react, vite. Give me coding agent prompt for this website. Provide serveral samples of stickers. a mock payment UI.”
然後我再把 ChatGPT 幫我生成的提示詞丟給 coding AI (Codex + GPT-5.5) 幫我生成程式碼,才 4 分鐘就生出一個不差的版本,後續我再調了一下,總時長應該不超過 3 小時 (沒仔細計時),就完成了如圖的作品。不敢說是什麼鉅作,但比我以前的作品有有質感多了😆
總算覺得自己在 UI 設計這一塊沒落後太多😄
