從 vibe 到執念:一像素的距離,一百次的微調
講者:Daphne | FUNTEK 樂堤科技 | 資深產品經理
活動:9/17 Generative AI 年會小聚 2025
題目:從 vibe 到執念:一像素的距離,一百次的微調

演講介紹
講者去年開始練前端,本來是因為常常要和前端工程師改東西,剛好公司有一個產品,就趁機練習。
一開始用 HTML + CSS 做了首頁,後來又嘗試了詳細頁,但過程裡發現,第一階段的 prompt 效果非常差,究竟是哪裡出錯了? 講者分享了幾個重點,都是自己踩過坑才學到的,值得大家參考:
給 AI 的輸入要選對
最推薦:Figma + 原始碼。
其次:頁面網址 (但有限制,AI 抓不到畫面)
再其次:截圖 (原本就不錯,適合做樣式微調)
Figma → HTML + CSS 的轉換
成果比預期好很多,但其實 prompt 直接寫「請參考這頁的程式碼」就更有效。
確定既有頁面架構
比如 navbar 要和 index.html 一致
在動手實作前,一定要先檢查整體結構能不能搬過來。
列出必要元素 → 拆解步驟
先把畫面 UI 條出來
再逐步對應架構去做,效率會高很多
修改要具體
想要改一個時間軸,結果卡很久
後來才發現要 「截圖 + 文字描述」 一起給 AI,才能更快達成。
總結
AI 幫忙生畫面很快,但如果心裡有理想的畫面,還是得一步一步具體地溝通,AI 是很好用的 UIUX 夥伴,但它更像是一個需要清楚溝通的外包設計師。
省時間沒問題,可以快速搭出框架
但 細節的執著省不了,這部分還是要人工 push,這部分我個人感覺也很深刻
作者:Chi