Claude Code 前端即時預覽:AI 自己截圖驗證改動,連後端都能自我除錯

在跟 AI 要一段前端程式碼之後,你是不是也常常經歷這個循環:複製、貼上、切回瀏覽器、重新整理、發現壞掉、再把錯誤訊息貼回去給 AI。來回五六趟,一個小按鈕才對齊。Claude Code 桌面版的「即時預覽(Preview pane)」想解決的,就是這段最惱人的空轉——它讓 Claude 自己把成果跑起來、自己看、自己改。

它到底在做什麼

簡單講,Claude Code 桌面版在對話視窗旁邊多了一塊內嵌的瀏覽器。當你請它做一個網頁或前端功能,它會自己啟動 dev server,把你的 App 直接渲染在這塊預覽面板裡。你不用切視窗,就能看到成品,而且可以直接在預覽裡跟跑起來的 App 互動——點按鈕、填表單、捲頁面,跟真的開在瀏覽器裡一樣。

預覽面板能開的不只有跑起來的網頁。專案裡的靜態 HTML、PDF、圖片、影片,只要點對話裡的檔案路徑就會在旁邊打開,不用再另外找程式去讀。對一邊寫東西一邊要對照文件、對照設計稿的人來說,這一格省下的切換次數其實很可觀。

這是 2026 年 4 月 14 日桌面版大改版的一部分,同一批還推出了 parallel sessions(平行工作階段)、拖放式面板、以及 Routines。底層的預覽能力其實更早,在 3 月就已經出現了。

為什麼這比一般 AI 寫網頁強

關鍵差別在「自我驗證」這四個字。

一般的 AI 生成程式碼,是把字丟給你,它看不到自己寫的東西跑起來長怎樣。Claude Code 桌面版不一樣:它會自己截圖、檢查 DOM、點擊頁面上的元素、填入表單資料,實際去操作那個剛做好的介面。發現某個按鈕沒反應、某段版面跑掉、某個流程卡住,它會直接回頭改程式,然後再驗證一次。這個「做—看—修」的迴圈,是它自己在跑,不是你在幫它跑。

而且這不只限於前端。後端一樣吃這一套——它可以打自己寫的 API endpoint、去看 server logs、根據回傳結果反覆迭代,直到行為正確為止。對進階的工作者來說,這等於把你原本要親自扮演的「QA 加除錯」角色,交還給 AI 自己承擔一部分。你的注意力可以往上移,去看需求對不對、方向對不對,而不是卡在「為什麼這行又報錯」。

誰適合用、怎麼開始

這功能收在 Claude Code 桌面版 App 裡,支援 macOS 與 Windows,Linux 目前是 beta。付費的 Pro、Max、Team、Enterprise 方案都能用,也可以透過 Claude API 走。

最適合的人,是那種「不一定是全職工程師,但常常要自己拼一點東西出來」的工作者:想快速做個內部小工具、驗證一個產品點子、把重複的流程寫成腳本、或是把一份資料變成能互動的網頁。你不必先在本機裝一堆環境、開終端機、設一串指令——桌面版把跑起來、看結果、改到好這整段包在同一個視窗裡。開始的方式也很直接:下載桌面版 App、開一個專案,然後就照平常的方式跟它講你要做什麼,需要看成果時打開 Preview 面板即可。

一個誠實提醒

這裡要講清楚,免得你抱著錯的期待去用。這是「開發者用的桌面 App」功能,不是一般人在用的 Claude 聊天網頁,也不是 Artifacts。你在手機或瀏覽器版的 Claude 裡是找不到這塊預覽面板的。

另外一個容易誤會的點:內建預覽目前只有基本的 mobile 切換,並沒有「手機／平板／桌面」那種三段式的裝置切換器。這件事社群有人許願,但官方明確標記為 not planned(沒有規劃)。所以如果你需要嚴謹地做多裝置 RWD 檢查,還是得靠瀏覽器自己的開發者工具,別以為這格預覽能全包。把它當成「快速看、快速互動、快速讓 AI 自我驗證」的工具,期待值就會剛好。

說到底,這個改動真正的價值不是「AI 會寫網頁」——那早就不稀奇了——而是「AI 開始能自己看見結果、自己負責改到對」。當驗證這一步被交回給模型,你花在來回貼錯誤訊息上的時間,才真的省得下來。

如果你想拿到這篇提到的下載連結、以及一份「第一次用桌面版怎麼開專案」的懶人包,在貼文底下留言「我要」,我直接私訊給你。