AI 協助網站編輯的安全指南：讓 ChatGPT 幫你調整網頁卻不會搞砸
AI 工具像 ChatGPT , Gemini 或 Claude，讓原本只能找工程師處理的網頁調整，變得「好像」人人都能自己動手。想在官網加個按鈕、調整區塊顏色、甚至加入計數器功能？問一下 AI，幾秒鐘就給你一段程式碼——聽起來很美好對吧？
但等等，別急著複製貼上！
我們遇過太多次這樣的情況：客戶興沖沖地說「我用 ChatGPT 生成了一段程式碼，但貼上去後整個版面都跑掉了」、「手機版變得超級醜」、「原本的按鈕顏色都被改掉了」……（實際例子更常出現的是現在（2025/12）號稱最強的 Gemini 3 Pro，我們也很想知道 AI 到底給了什麼神奇的建議）
所以這篇文章要告訴你：如何安全地使用 AI 工具來協助網站編輯，同時避開那些可能讓你欲哭無淚的陷阱。
第一步：學會正確地「問問題」
跟 AI 對話不是在跟工程師對話——它不會主動問你「咦，你確定要這樣做嗎？」或是「你的網站是用什麼系統建的？」所以你得主動給它足夠的資訊。
✅ 好的提問範例
我的 WordPress 網站使用 Page Builder 編輯器，我想在某個區塊加入一個倒數計時器，顯示距離活動開始還有多久。請提供適合放在 HTML 元素中的程式碼，並且要能在手機上正常顯示。
為什麼這樣問比較好？
- 明確說明使用的系統（WordPress，或是其他 CMS 管理系統、TinyCME 等）
- 說明編輯方式（Page Builder）
- 描述清楚想達成的效果
- 提出特定需求（手機顯示）
- 搭配擷取你想要的效果範例圖片（選用）
❌ 不夠好的提問範例
給我一個倒數計時器的程式碼
為什麼不好？
- AI 不知道你用什麼系統
- 不知道要放在哪裡
- 可能會給你一整套完整的 HTML 檔案（而不是你需要的片段）
關鍵重點：貼上程式碼前的 5 個檢查點
就算 AI 給了你程式碼，也千萬別急著貼到正式網站上。先檢查這 5 件事：
1. 檢查有沒有完整的 HTML 文檔標籤
AI 很愛給你一整套「完整的網頁」，包含這些：
<!DOCTYPE html>
<html>
<head>
<body>問題在哪？ 你的網站已經有這些標籤了，再貼一次會造成「網頁中的網頁」，導致顯示異常、SEO 出問題（聽到 SEO 出問題，相信很多老闆都怕了）。
解決方法： 刪掉這些標籤，只保留你需要的內容部分（通常是 <div> 和 <style> 標籤）。
舉個例子：
假設你請 AI 幫你做一個活動倒數計時器，它可能給你：
<!DOCTYPE html> <html> <head> <style> .countdown { font-size: 24px; } </style> </head> <body> <div class="countdown">距離活動開始還有 10 天</div> </body> </html>你只需要這些：
<style>
.countdown { font-size: 24px; }
</style>
<div class="countdown">距離活動開始還有 10 天</div>2. 檢查 CSS 樣式是否會「打架」
AI 可能會用很一般的名稱來命名樣式，例如：
css
.title { color: red; }
.button { background: blue; }問題在哪？ 你的網站可能已經有 .title 或 .button 的樣式了，新的程式碼會覆蓋掉原本的設定，導致整個網站的按鈕或標題都變色！
解決方法： 使用更具體、不容易重複的名稱，例如：
css
.activity-countdown-title { color: red; } .activity-cta-button { background: blue; }3. 一定要測試手機版顯示
超級重要！現在超過 70% 的使用者都是用手機瀏覽網站，但 AI 生成的程式碼很常忽略響應式設計（或是以我們的經驗，AI 提供的代碼通常不夠好，因為他通常不是像人類，直接看到結果，而是透過推估、經驗法則去猜測）。
怎麼測試？
- 在瀏覽器按
F12打開開發者工具 - 點選「手機模式」圖示
- 切換不同尺寸查看
常見問題：
- 文字太小（建議最小 14px）
- 邊距、間距不合理的大或小
- 區塊寬度超出螢幕
- 按鈕間距太小，手指按不到
提醒： 如果可以，盡量使用編輯器內建的元素來建構內容，這些元素通常已經針對手機版做過優化。AI 生成的程式碼在響應式設計（RWD）方面的能力還不夠成熟。
4. 小心「絕對定位」
AI 有時會用 position: absolute 或 position: fixed 來定位元素。
為什麼要小心？ 絕對定位會讓元素脫離正常排版，可能造成：
- 內容重疊
- 在不同螢幕尺寸下消失
- 破壞整體版面
建議： 除非你確定需要，否則盡量使用 position: relative 或不設定 position。
5. 先在測試頁面試用
絕對不要直接在正式頁面貼程式碼（如果你自己無法判斷的話）！
正確流程：
- 建立一個測試用的頁面
- 貼上程式碼並儲存
- 前台檢查效果
- 用上面的 5 個檢查點逐一確認
- 確認無誤後才套用到正式頁面
建議的做法是，用 AI 協助寫文章，使用純文字貼到後台，並且稍微人工修改，添加點人味！
什麼情況該找專業的網頁設計公司？
並不是所有調整都適合自己動手。以下這些情況，建議還是交給專業的：
⚠️ 建議先諮詢專業：
- AI 給的程式碼超過 30 行
- 包含 JavaScript 功能（互動效果、動態載入等）
- 需要串接第三方服務（金流、物流、API）
- 修改電商功能（購物車、結帳流程）
- 不確定會不會影響其他頁面
✅ 可以自己嘗試：
- 修改文字、顏色、大小
- 調整間距（margin、padding）
- 更換圖片連結
- 簡單的排版調整
實用技巧：讓 AI 給你更好的答案
技巧 1：要求 AI 提供說明
在提問時加上：
請同時說明：
- 這段程式碼的作用
- 可能的風險或注意事項
- 手機版是否需要調整
技巧 2：分階段測試
不要一次貼入大量程式碼，建議：
- 先測試基本結構
- 確認沒問題後再加入樣式
- 最後加入進階效果
技巧 3：讓 AI 檢查你的程式碼
貼上後，可以截圖給 AI 看，問它：「這樣的顯示效果正常嗎？有什麼需要調整的？」
AI 是好幫手，但你仍需要判斷力
AI 工具確實大幅降低了網站調整的門檻，讓不懂程式的人也能做一些簡單的修改。但就像學開車，你還是需要了解基本的交通規則，才不會出事。而 AI 工具整體來說還是個放大器，同樣的工具交給工程師、設計師、文案來執行，得到的結果都會依照他們的 Prompt 有很大的差異，怎麼給他的一個完整的使用情境，和你的目標，是和 AI 溝通的關鍵（其實，這也是和專案、人與人溝通的關鍵，只是我們常常忘記）！
記住這幾個原則：
- 明確提問，給 AI 足夠資訊
- 貼上前檢查，避開常見陷阱
- 先測試再上線，別拿正式網站當實驗場
- 遇到複雜需求，找專業網頁設計公司協助
