iT邦幫忙

2025 iThome 鐵人賽

DAY 25
0
生成式 AI

30 天與 AI 同事打造系統的求生實錄系列 第 25

【Day 25】前端細節處理:逐步調整元件大小與樣式

  • 分享至 

  • xImage
  •  

鐵人賽第25天
昨天終於解決了無法調整介面的BUG後,今天要開始繼續調整UI了。
AI同事對前端跟後端不同,後端基本上主要在功能面上,出錯都有明顯回饋。

前端則是哪邊比較大,哪邊比較空,AI同事沒辦法將程式碼轉成當前可以看見的介面。
沒有明顯回饋,就像近視眼一樣,他可以知道哪邊有元件,顏色是什麼,但是間距跟大小比例只有個大概。
必須讓使用者一直跟他回饋哪邊需要調整,AI同事才能慢慢微調到我們想看到的畫面。

因此我今天主要是一直回饋AI同事UI元件位置調整跟大小調整。
而且不知道為什麼應用的標題很單調,我請AI同事去調整內容,才發現不是單調,而是UI的設定沒有作用。
我請AI同事使用context7去查正確用法才出現效果。

現在CSS的語法可以正常使用後,我開始一點一點的跟AI同事調整細節。
像是輸入框小一點,輸入框內文字大一點,標題小一點...等許多調整。
這邊就需要確實的告訴AI同事怎麼調整,例如長度改成現在的60%之類的,AI同事會比較了解如何去調整。

除了改動輸入框與標題大小,我還改動了警告框的大小避免影響網站的布局。
還有更改了密碼的限制條件,避免使用者使用過少的位數當密碼。

除此之外按鈕的回饋我原本以為AI同事沒有做,結果是少設定了顏色參數導致效果沒有出來。

我原本的預想其實是像,我給AI同事配色需求、風格需求,讓AI同事給我幾個可用的框架,
在透過粗略的調整,讓AI同事幫我調整細節。

但現在反過來,變成AI同事在差不多的位置丟元件上去,我在慢慢跟他說大小多大,顏色需求,字體大小粗細等等細節,請他慢慢調整成我覺得好看的樣子。

雖然比我重頭學前端去刻好一點,但真的很花心力也很花時間,明顯比在做後端的時候累很多。
感覺以實用性來說,可能使用範本在去修改會比較好一點,但就容易千篇一律,沒有鑑別度。

這畢竟是鐵人賽的挑戰,我想應該還是會繼續朝目前的方向走,只是之後就不太會有提供與AI溝通的指令,而是單純分享遇到的坑。
畢竟一直來回調整數字比較沒有參考價值,篇幅也會過大。

今天就先完成登入頁面與註冊頁面的前端調整,明天可能考慮繼續刻頁面,等幾個重要的頁面刻完後,再一起把功能串起來。


上一篇
【Day 24】降級求生:選擇 Tailwind v3 讓合作更順利
下一篇
【Day 26】前端登入遇阻:跨域與依賴衝突的雙重挑戰
系列文
30 天與 AI 同事打造系統的求生實錄30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言