我以為加個影片只要五分鐘：用 AI 架站的真實挫折記錄
我讓 AI 幫我在網站嵌入 X 影片，結果花了一個下午、部署了六次。這篇記錄整個過程，以及我從中學到的事。
目錄+
我在 akiraxclaw.com 上有很多文章會嵌入 X（推特）的貼文。
有一天我發現：同樣是「嵌入 X 貼文」，別的網站點下去影片可以直接播，我的只有一張靜止圖片，點了就跳走到 X。
我以為這是小問題，讓 Claude Code 幫我改一下就好。
五分鐘變成一個下午
我把問題描述給 AI，它解釋了原因：我用的是 react-tweet，這個套件會把推文「抄回來重畫」，外觀很像 X 的卡片，但本質上只是一張仿製品。影片播放是 X 官方播放器的功能，仿製品做不到。
要讓影片真的能播，需要換成 X 官方的「嵌入方式」：在頁面裡開一個小窗口，直接讓 X 本人渲染那個貼文。這樣影片、按讚、所有 X 上能做的事，在那個窗口裡都能做。
聽起來很合理。AI 三分鐘寫好了程式，我部署上去。
結果：只看到一行「在 X 上查看」的連結，影片呢？
AI 解釋說，可能是載入時序的問題。它改了一個地方，我再部署。
結果：整個頁面直接崩潰，白畫面。
好，再改。再部署。
結果：還是只有「在 X 上查看」。
問題出在哪裡，我們花了太久才找到
部署了三次之後，我問 AI 到底怎麼回事。
AI 說：「請你打開瀏覽器的開發者工具，點 Console（控制台），把錯誤訊息截圖給我。」
我照做。螢幕上出現一排紅字，大意是：
「這個頁面的安全設定，不允許載入來自 platform.twitter.com 的程式。」
就是這樣。 整個問題從頭到尾的根本原因，就是這一條。
我的網站有一個叫做 CSP（Content Security Policy，內容安全政策）的設定，它的作用是告訴瀏覽器：「這個頁面只允許從這些地址載入程式，其他的一律擋掉。」
X 的影片播放器需要從 platform.twitter.com 載入程式，但我的 CSP 名單裡沒有這個地址。所以瀏覽器忠實地執行了規則，把 X 的程式擋在門外，什麼也沒發生。
解法很簡單：在設定裡把 platform.twitter.com 加進白名單，讓它通過。
一行設定，問題解決。
為什麼我們繞了這麼遠
問題的根本原因在第一次就存在，但我們最後才找到它。
原因是：我們沒有先看錯誤訊息，就開始改程式。
AI 第一次失敗的時候，它（和我）的反應都是「可能是程式寫法有問題」，然後就開始猜、開始改、開始重新部署。每次部署需要兩到三分鐘，每次結果出來又要對著輸出思考。就這樣來回六次。
但瀏覽器 Console 從第一次失敗開始就已經把答案寫在那裡了。只要在第一次「不對勁」的時候打開 Console，幾秒鐘就能看到「CSP 擋住了 platform.twitter.com」這行字。
這件事讓我理解了一個原則：
「出問題時，先讀錯誤訊息，再動手。」
這個原則對資深工程師來說是本能，但對剛開始用 AI 架站的人（包括我）來說，很容易跳過。因為 AI 給你的感覺是「它知道怎麼改」，你就跟著它的節奏走，忘了先停下來看清楚發生了什麼事。
用 AI 架站的真實感受
我不是要說 AI 架站沒用。這個網站 90% 以上的程式都是 AI 寫的，我沒有工程師背景，做不到這件事。
但用 AI 架站有一個很容易踩到的坑：你以為「問題給 AI，它就會解決」，但 AI 能解決的前提是「它知道真正的問題在哪裡」。
這次的狀況是，我把「影片播不了」這個問題交給 AI，但沒有提供「Console 裡的錯誤訊息」這個線索。AI 只能猜，猜錯就改，改了再猜。而我坐在旁邊等，以為它正在解決問題。
事實上我們兩個都在瞎忙。
我現在怎麼做
現在遇到任何「功能做了但不對勁」的狀況，我的第一步是：
打開瀏覽器的開發者工具（F12），看 Console 有沒有紅字。
然後把紅字截圖或複製給 AI，再開始討論怎麼解決。
這個習慣讓診斷時間從「一個下午」變成「幾分鐘」。
不是因為問題變簡單了，而是因為我現在知道：AI 是修問題的工具，但找到問題在哪裡，那個責任還是在我。
附帶一提：這個「影片嵌入」最後有效了。現在網站上所有含影片的 X 貼文都可以直接在頁面裡播放，不需要跳去 X。如果你也在用 Next.js 或類似框架架站，記得 CSP 的白名單要加上 platform.twitter.com、cdn.syndication.twimg.com、video.twimg.com——這三個是 X 影片嵌入所需的最低門檻。
遇到同樣的情況：怎麼指揮 AI 幫你診斷
這裡說的不是「你去 debug」，而是「你叫 AI 去 debug」。
你不需要看懂任何錯誤訊息，你只需要把它交給 AI 判讀。有兩種方式：
方式一：截圖給 AI 看（最簡單）
按 F12 打開瀏覽器的開發者工具，點上方的 Console 分頁，把紅字區域截圖，貼給 AI。
然後說：「這是我的 Console，有什麼問題？」
AI 會讀懂截圖，告訴你根本原因，再提出修法。這是最低門檻、最快的方式。
方式二：讓 AI 直接連你的瀏覽器（進階）
如果你用的是 Claude Code，可以安裝 Chrome DevTools MCP。
設定完成後，AI 可以直接讀取你瀏覽器的 Console、網路請求、頁面狀態——不需要你截圖、不需要你複製貼上。你說「我的影片播不了」，AI 自己去看錯誤在哪。
這個設定有一點門檻（需要 Chrome 144 以上、在 chrome://inspect/#remote-debugging 開啟遠端除錯），但設定一次之後，之後每次出問題都省掉一來一回的溝通。
提示詞：強迫 AI 先診斷、後動手
不管哪種方式，如果 AI 拿到問題就直接猜、直接改程式，可以把這段提示詞貼給它：
我的網站有一個功能做好了，但結果不對。 問題是：（在這裡描述你的問題，例如：影片播不了、按鈕沒反應）
請先幫我診斷，不要直接修改程式。步驟如下：
- 告訴我應該去哪裡找錯誤訊息（Console？Network？）
- 我把錯誤訊息截圖或文字貼給你之後，你再分析根本原因
- 確認根本原因之後，再提出修正方案
不要在看到錯誤訊息之前開始猜測或改程式碼。
這段提示詞的邏輯很簡單：先找到病因，再開藥。 AI 不是不聰明，它只是在沒有資訊的情況下很容易開始猜。給它這個框架，它就會帶著你一步一步把問題找出來。