AI 做出來的網站怪怪的，怎麼修？

我真的罵過「醜死了」

我曾經對 AI 說「醜死了」。但我馬上補了一段話：

這句話有三個 AI 可以執行的資訊：想要什麼形式、希望產生什麼感覺，以及舊版本哪個元素要移除。

感覺不對沒關係，把「哪裡」和「想要什麼」補上，就是好指令。

如果只加新的東西、不說舊的要刪，頁面很容易越改越擁擠。這篇我會分享我後來整理出來的四件事：怎麼修版、手機怎麼檢查、怎麼放進真實的證據，以及怎麼讓文章區慢慢長起來。

修版指令只有四個部分：位置、問題、改法、保留

我後來歸納出的修版說法很簡單：先說畫面在哪裡，再說問題、希望怎麼改，最後說要保留什麼。

必要時附上截圖，讓 AI 不用猜我正在看哪一版。一次先處理一個區塊，驗證後再繼續，通常比一次丟出很多模糊的要求更容易確認結果。

我的真實例子：選單與提示

我曾經要求選單字大一點，旁邊還要有小動物告訴大家可以從選單找內容。改完之後，我覺得電腦版有的地方太空，有的地方又集中太多圖片與元素。

我沒有只說「不好看」，而是指出問題來自哪些區塊擠在一起、提示適合放在哪裡。後來，提示文字移到首頁動物角色的對話框，角色像是在和訪客說話，選單則回到導覽的角色。

可以直接複製的指令

目前在＿＿頁的＿＿位置，我覺得＿＿。原因是＿＿。請改成＿＿，保留＿＿，並移除原本的＿＿。先只處理這個範圍，完成後讓我看結果。

最後的「移除原本的＿＿」很重要。只加新的、不說舊的要刪，頁面很容易越改越擁擠。

小地方也要逐一檢查

名字、連結與單位全名看起來很小，卻直接影響專業可信度。我就特別更正過英文姓名為 ZHUANG AILING，也修正了合作單位為「臺灣原住民洄瀾協會」。

手機版要當成另一個使用情境來檢查

電腦版好看，不代表手機版也好用。我很早就跟 AI 說過這句話：

電腦有比較大的觀看空間，也有滑鼠懸停；手機則需要容易點選的按鈕、合理的文字大小，以及不會互相遮擋的元件。同一份內容，在電腦可以橫向排，在手機就要直向排。

用「被遮住的是誰」說明問題

電腦版的對話框調整好之後，手機版仍然需要再修。我後來是這樣說的：

這比「手機有點醜」更容易修，因為已經指出被遮住的主體、發生問題的裝置，以及調整方向。鹿角是角色的辨識特徵，保住它，也等於保住整個畫面的敘事。

新增頁面時，連細節一起檢查

後來我也要求手機下方的快捷選單加入「靈感筆記」，讓訪客不用回到頁首就能前往文章區。小鹿的浮動入口則要避開手機原本的底部導覽。

常見問答頁新增之後，我發現它的滑鼠不是腳掌，就請 AI 和其他頁統一。新增頁面不只要補內容，也要檢查共用的字型、選單、按鈕與互動樣式。

腳印游標主要是電腦滑鼠的體驗。手機仍然要以好點選、好閱讀為優先，不能把滑鼠效果當成手機的主要引導方式。

手機檢查清單

每次改完，都可以拿手機實際點一輪：

• □ 文字有沒有被切掉
• □ 角色是否遮住按鈕
• □ 橫向列表能不能滑動
• □ 表單能不能輸入
• □ 彈窗能不能關閉
• □ 選單會不會蓋住主要內容

可以直接複製的指令

請檢查桌機與手機的字級、選單、圖片比例、橫向滑動與浮動按鈕，尤其不要遮住角色或主要操作。請說明你實際驗證的裝置尺寸與操作，沒有測到的部分也要說明。

最後這句很關鍵。AI 有時只測電腦版，卻回報「已完成」。你要求它交代測過什麼，才不會把「有寫手機樣式」當成「已在手機驗證過」。

可愛不夠，還要放上真實的證據

森林和小動物能讓人記住我，但學校和企業要判斷能不能合作，需要的是真實紀錄。我把這些證據一批一批補進網站，每一批都有自己要注意的地方：

數字要看得懂，也要查得到

我要求回饋卡右下角用「竹商學生」這類匿名方式標示，最後也移除了分數下方一整段統計說明，只保留數字與回饋。這是版面的選擇。

但資料來源、題目定義與計算方式，仍然要保存在後台或工作檔，未來更新時才能查核。單一場次的結果，也不要直接當成全部課程的長期平均；以後如果把多場資料合併，要重新確認題目、分母與計算方式，不能只把新數字覆蓋上去。

照片能不能公開，先確認再放

準備照片時，先整理好檔名、場次與使用權限，並確認適合公開的影像範圍。有學員出鏡時，要先確認相關同意與單位規範。

不要把「資料夾有分享連結」直接當成「任何用途都能公開」。