Claude Code Web:在瀏覽器裡讓 AI 幫你改代碼、跑測試、提 PR! | 100次AI

更新 發佈閱讀 4 分鐘
Claude Code Web

Claude Code Web

嘿,大家好,我是 Lewis!

今天要分享一個讓我驚艷的新功能 — Claude Code Web

簡單說,就是直接在瀏覽器上,讓 Claude 幫你改代碼、測試、甚至提 Pull Request 到 GitHub。完全不用打開 IDE 或終端機。


🚀 怎麼用?超簡單

三個步驟:

1. 打開 https://claude.ai/code,連接 GitHub

2. 選擇你的 repository,下個 prompt

比如我這次給的任務:

為這個用戶註冊系統添加完整的輸入驗證功能:前端驗證用戶名、Email、密碼格式,後端也要加上相同邏輯,密碼要包含大小寫字母和數字。

3. 看著 Claude 在雲端沙箱工作,完成後直接提 PR

就這樣。真的就這麼簡單。


💻 我實測的過程

我讓 Claude 為一個用戶註冊系統添加輸入驗證功能。

按下 Enter 後,Claude 開始工作,而且每一步都清楚顯示

  • 正在讀取哪些文件
  • 修改了什麼地方
  • 跑了什麼測試

幾分鐘後完成,Claude 告訴我:

  • ✅ 修改了後端的 service.go(加入驗證邏輯)
  • ✅ 修改了前端的 signup.ts(加入驗證邏輯)
  • ✅ 添加了 .gitignore(排除編譯產物)
  • ✅ 測試通過,代碼可以正常編譯

然後 Claude 問:要不要提 PR?

我點了「Create PR」,PR 就直接出現在我的 GitHub 上了,包含清楚的 commit message 和 PR 描述。

我只需要在 GitHub 上點「Merge」就完成了。

下Prompt

下Prompt

完成 還可以Open In CLI查看

完成 還可以Open In CLI查看

自動PR提出 要求Merge

自動PR提出 要求Merge


🎯 最驚艷的三個點

1. 完全雲端化 不需要本地開發環境、不用配置 Git,只要有瀏覽器就能做。手機都可以用。

2. 透明的工作流程 Claude 不是黑箱作業,每一步都看得到。你知道它在做什麼、為什麼這樣做。

3. 完整的 Git 整合 從改代碼到提 PR 全自動。以前要 7 個步驟,現在只要 3 步。


💡 適合什麼場景?

快速修 bug — 不用為了改一行代碼開整個開發環境

添加簡單功能 — 像輸入驗證、表單處理這種明確的需求

在路上處理緊急問題 — 只要有手機和網路就能改代碼

對於日常開發的 80% 任務,Claude Code Web 真的夠用了。


🎬 官方示範影片

想看更完整的展示?Anthropic 有做官方示範:

https://www.youtube.com/watch?v=CBneTpXF1CQ


🌟 我的感想

Claude Code Web 不是要取代開發者,而是讓我們:

  • 更專注在重要的決策上
  • 把重複的工作交給 AI
  • 更快地迭代想法

它就像一個 24/7 待命的初級開發者,不會累、速度快、而且隨時可用。

對獨立開發者或小團隊來說,這真的是神器。

未來的開發者,可能不是寫更多代碼,而是下更好的 prompt

當然,理解代碼的能力變得更重要了,因為你要知道怎麼檢查 AI 生成的代碼、怎麼指導它改進。


如果你有 Claude Pro 帳號,可以訪問 https://claude.ai/code 試試看。

我保證你會和我一樣驚艷。

留言
avatar-img
Lewis的100挑戰
15會員
38內容數
如果我們一個事情做100遍,會怎樣嗎? 我也不知道會怎樣, 我們只要知道,我們做100遍, 我們或許會變得不一樣!
Lewis的100挑戰的其他內容
2025/11/01
前言 還記得以前要爬取網站資料,需要學 Python、寫一堆程式碼嗎? 現在,只要用中文跟 Claude 說話,它就能幫你完成所有事情! 今天我要分享一個讓我驚艷的功能:Claude Desktop 現在可以直接操控你的 MacBook 了!
Thumbnail
2025/11/01
前言 還記得以前要爬取網站資料,需要學 Python、寫一堆程式碼嗎? 現在,只要用中文跟 Claude 說話,它就能幫你完成所有事情! 今天我要分享一個讓我驚艷的功能:Claude Desktop 現在可以直接操控你的 MacBook 了!
Thumbnail
2025/10/29
在使用 Claude AI 的過程中,你是否曾經遇到過這些困擾:想找回之前對話的某個重要內容但翻遍了聊天記錄都找不到?一個精彩的對話因為長度限制而被迫中斷,必須重新開始解釋之前的討論?想要編輯 Claude 的回應但發現沒有相關功能?
Thumbnail
2025/10/29
在使用 Claude AI 的過程中,你是否曾經遇到過這些困擾:想找回之前對話的某個重要內容但翻遍了聊天記錄都找不到?一個精彩的對話因為長度限制而被迫中斷,必須重新開始解釋之前的討論?想要編輯 Claude 的回應但發現沒有相關功能?
Thumbnail
2025/10/29
大家好,我是 Lewis。今天想跟大家分享一個讓我驚艷的發現 —— Claude 現在也能做 PowerPoint 簡報了!
Thumbnail
2025/10/29
大家好,我是 Lewis。今天想跟大家分享一個讓我驚艷的發現 —— Claude 現在也能做 PowerPoint 簡報了!
Thumbnail
看更多
你可能也想看
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
網址:https://gadget.chienwen.net/x/text/articlecut 這個網頁裡面有許多小工具, 但感覺現在有很多被 AI 取代掉的東西, 推薦大家可以來用看看~
Thumbnail
網址:https://gadget.chienwen.net/x/text/articlecut 這個網頁裡面有許多小工具, 但感覺現在有很多被 AI 取代掉的東西, 推薦大家可以來用看看~
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
生成式人工智慧可以輸出文章、圖片、影片、音樂和簡報等內容,就連創建網站都不必學習程式碼。Websim.ai 是一個利用 AI 技術來創建網站的體驗平台,輸入簡單的文字即可生成互動式網站。目前開放免費使用,AI 會根據指令生成相應功能
Thumbnail
生成式人工智慧可以輸出文章、圖片、影片、音樂和簡報等內容,就連創建網站都不必學習程式碼。Websim.ai 是一個利用 AI 技術來創建網站的體驗平台,輸入簡單的文字即可生成互動式網站。目前開放免費使用,AI 會根據指令生成相應功能
Thumbnail
這篇文章分享如何透過免費電子郵件課程提供價值,建立信任,並引導訂閱者購買付費產品。透過豐富內容、獨特風格,以及AI的幫助,讓你的需求看起來更具吸引力。
Thumbnail
這篇文章分享如何透過免費電子郵件課程提供價值,建立信任,並引導訂閱者購買付費產品。透過豐富內容、獨特風格,以及AI的幫助,讓你的需求看起來更具吸引力。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News