湖北
這是蒼何的第 485 篇原創(chuàng)！
大家好，我是蒼何。
兄弟們，真的炸裂。
我真的實現(xiàn)了躺在床上指揮 AI Agent 來 Coding，并自動發(fā)布到 GitHub ，然后自動部署到Vercel。
用 Openclaw+ OpenCode+GitHub+Vercel 實現(xiàn)了網(wǎng)站的開發(fā)，部署上線。
這個過程全程是由 Openclaw 在我的私人服務(wù)器完成的。
這已經(jīng)不是 vibe coding 了，我大膽的來造一個新名詞吧，姑且就叫 Agent Coding。
也許后面，人們會有更加炫酷的名字，但這一切都不重要了。
我很興奮，為了防止你說我在瞎扯淡，我決定公布所有我和 Openclaw 的聊天記錄。
我全程并沒有使用什么高深的技術(shù)，也沒有操作過服務(wù)器，我全程是用最簡單的提示詞來完成的。
這個項目是Openclaw全自主完成的：
游戲完全可用：
下面是我和 Openclaw 的全部聊天。
先安裝 opencode：
新建目錄用做項目目錄：
切換目錄，啟動 opencode：
用 opencode 來開發(fā)貪吃蛇游戲：
提供我的 GitHub 信息，讓他連：
按照它給的提示，創(chuàng)建一個 token，權(quán)限就給倉庫權(quán)限，直接丟給他 token。
這里一定記得開啟部分權(quán)限，防止它瞎搞。
它說已經(jīng)推送好了：
我打開 GitHub 看下，果然有了，已經(jīng)自動將代碼推送到 GitHub 了。
然后讓它部署到Vercel，方便得到一個可訪問的網(wǎng)頁鏈接：
同樣按照要求，給個 token，就已經(jīng)完成了自動部署。
，就已經(jīng)完成了全鏈路的自動化，真的麻了，兄弟們，雖然只是跑通了閉環(huán)，但Openclaw 想象空間真的無限。
我甚至直接讓但 Openclaw 記錄下這個過程，并寫一篇文章，推送到剛才這個倉庫，這個由 Agent 自主開發(fā)部署的倉庫。
提示詞；這個過程太棒了，我打算寫一篇文章，你幫我直接根據(jù)你剛才的步驟，生成一篇文章，標(biāo)題是：用 Openclaw+ OpenCode+GitHub+Vercel 實現(xiàn) Agent Coding，最好是有流程圖詳細(xì)解釋下這個步驟
然后打開 GitHub 看，也已經(jīng)有了描述：
下面，我把 Openclaw 生成的教程也貼出來，方便大家看看。Openclaw 的應(yīng)用仿佛打開了潘多拉魔盒，未來，coding 的范式是不是可以變?yōu)?agent coding，每一個人都有一個專屬 agent，幫我們 coding，或者做任何我們希望做的事情。
貪吃蛇游戲 + Agent Coding 完整教程
本文檔由 「OpenClaw AI Agent」 全程自動生成，記錄從需求到上線的完整開發(fā)流程。
「在線試玩」: https://myopencode.vercel.app
「項目源碼」: https://github.com/freestylefly/snake-game
「生成工具」: OpenClaw + OpenCode + GitHub + Vercel
用 OpenClaw + OpenCode + GitHub + Vercel 實現(xiàn) Agent Coding
從零開始，讓 AI Agent 幫你寫代碼、管理版本、自動部署，全程無需離開終端！概述
本文將介紹如何構(gòu)建一個完整的「AI 驅(qū)動開發(fā)工作流」：
「OpenClaw」- AI 助手運行平臺，協(xié)調(diào)所有工具
「OpenCode」- AI 編程助手，自動生成代碼
「GitHub」- 代碼托管和版本管理
「Vercel」- 自動化部署和托管
通過這個工作流，你只需要告訴 AI 要做什么，剩下的代碼編寫、提交、部署全部由 Agent 自動完成。
完整流程圖
┌─────────────────────────────────────────────────────────────────────────────┐│ AgentCoding完整工作流 │└─────────────────────────────────────────────────────────────────────────────┘┌──────────────┐│ 用戶需求 │ "幫我創(chuàng)建一個貪吃蛇游戲并部署上線"└──────┬───────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step1:環(huán)境準(zhǔn)備(OpenClaw協(xié)調(diào)) ││ ┌─────────────┐┌─────────────┐┌─────────────┐ ││ │安裝OpenCode││安裝GitHubCLI││安裝VercelCLI│ ││ │(AI編程)││(代碼托管)││(自動部署)│ ││ └──────┬──────┘└──────┬──────┘└──────┬──────┘ │└─────────┼────────────────┼────────────────┼──────────────────────┘││ │▼▼ ▼┌──────────────────────────────────────────────────────────────────┐│ Step2:AgentCoding(OpenCode) ││ ┌─────────────────────────────────────────────────────────┐ ││ │用戶:"創(chuàng)建一個貪吃蛇游戲"│ ││ │││ ││ │▼│ ││ │ ┌─────────────────────────────────────────────────┐ │ ││ ││OpenCodeAIAgent││ ││ ││┌──────────┐┌──────────┐┌──────────┐││ ││ │││生成HTML││生成CSS││生成JS│││ ││ │││index.html││style.css││game.js│││ ││ ││└──────────┘└──────────┘└──────────┘││ ││ │ └─────────────────────────────────────────────────┘ │ ││ └─────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step3:代碼管理(GitHub) ││ ┌──────────────────────────────────────────────────────────┐ ││ │1.gitinit初始化倉庫│ ││ │2.gitadd.添加文件│ ││ │3.gitcommit-m"Initial commit"提交│ ││ │4.創(chuàng)建GitHub倉庫(通過API)│ ││ │5.gitpush-uoriginmaster推送到遠(yuǎn)程│ ││ └──────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step4:自動部署(Vercel) ││ ┌──────────────────────────────────────────────────────────┐ ││ │1.vercel--token 登錄并關(guān)聯(lián)│ ││ │2.自動檢測項目類型(靜態(tài)網(wǎng)站)│ ││ │3.構(gòu)建并上傳到VercelCDN│ ││ │ 4. 分配域名: https://myopencode.vercel.app │ ││ └──────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────┐│ 網(wǎng)站上線 │ 訪問鏈接，游戲可玩！└──────────────┘
? 詳細(xì)步驟 第一步：環(huán)境準(zhǔn)備 1.1 安裝 OpenCode（AI 編程助手）
# 安裝 OpenCodenpm install -g opencode-ai# 驗證安裝opencode --version
1.2 安裝 GitHub CLI（代碼管理）
# 下載并安裝curl -fsSL https://github.com/cli/cli/releases/download/v2.63.2/gh_2.63.2_linux_amd64.tar.gz | tar -xz -C /tmpcp /tmp/gh_2.63.2_linux_amd64/bin/gh /usr/local/bin/# 驗證gh --version
1.3 安裝 Vercel CLI（自動部署）
# 安裝 Vercel CLInpm install -g vercel# 驗證vercel --version
第二步：創(chuàng)建項目目錄
# 創(chuàng)建項目目錄mkdir -p ~/myopencodecd ~/myopencode# 初始化 Git 倉庫git init# 配置 Git 用戶信息git config --global user.email "your@email.com"git config --global user.name "yourname"
第三步：Agent Coding（核心步驟） 方式一：使用 OpenCode 交互模式
# 啟動 OpenCode（需要 PTY 模式）# 在 OpenClaw 中使用：bash pty:true workdir:~/myopencode command:"opencode"
然后在 OpenCode 中輸入：
創(chuàng)建一個貪吃蛇游戲，使用 HTML5 Canvas，包含完整的游戲邏輯、得分系統(tǒng)和響應(yīng)式設(shè)計方式二：使用 OpenCode 非交互模式
# 直接運行任務(wù)opencode run "Create a complete Snake game using HTML5 Canvas, CSS, and JavaScript"
方式三：手動創(chuàng)建（備用方案）
如果 OpenCode 運行有問題，可以直接創(chuàng)建文件：
「index. html:」
html>貪吃蛇游戲 title></code>head>貪吃蛇游戲 h1>得分: 0 span> div>最高分: 0 span> div>div>canvas>使用方向鍵 ↑↓←→ 控制蛇的移動 p>開始游戲 button>暫停 button>重新開始 button>div>游戲結(jié)束! h2>最終得分: 0 span> p>再玩一次 button>div>div>script>body>html>
「style. css:」
* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);min-height: 100vh;display: flex;justify-content: center;align-items: center;color: #fff;}.container {text-align: center;padding: 20px;background: rgba(255, 255, 255, 0.05);border-radius: 20px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);}h1 {background: linear-gradient(45deg, #00d4aa, #00a8e8);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}#gameCanvas {border: 3px solid #00d4aa;border-radius: 10px;background: #0a0a0a;}
「game. js:」(完整游戲邏輯代碼)
第四步：推送到 GitHub 4.1 提交代碼
# 添加所有文件git add .# 提交git commit -m "Initial commit: Snake game with HTML5 Canvas"
4.2 創(chuàng)建 GitHub 倉庫并推送
「方式一：使用 GitHub CLI」
# 登錄 GitHubecho "YOUR_GITHUB_TOKEN" | gh auth login --with-token# 創(chuàng)建倉庫gh repo create snake-game --public --description "A classic Snake game"# 推送git push -u origin master
「方式二：使用 API 直接創(chuàng)建」
# 通過 API 創(chuàng)建倉庫curl -X POST https://api.github.com/user/repos \-H "Authorization: token YOUR_GITHUB_TOKEN" \-H "Accept: application/vnd.github.v3+json" \-d '{"name": "snake-game","description": "A classic Snake game built with HTML5 Canvas","private": false}'# 添加遠(yuǎn)程倉庫并推送git remote add origin https://username:token@github.com/username/snake-game.gitgit push -u origin master
第五步：部署到 Vercel 5.1 使用 Vercel CLI 部署
# 進(jìn)入項目目錄cd ~/myopencode# 使用 token 部署vercel --token YOUR_VERCEL_TOKEN --yes --prod
部署成功后，會輸出類似：
Production: https://myopencode-xxx.vercel.app5.2 關(guān)聯(lián) GitHub 倉庫（可選）
Vercel CLI 會自動檢測并關(guān)聯(lián) GitHub 倉庫，實現(xiàn)自動部署：
每次 push 到 GitHub，Vercel 自動重新部署
支持預(yù)覽部署（Pull Request）
步驟
命令
「安裝工具」npm install -g opencode-ai vercel「創(chuàng)建目錄」mkdir myopencode && cd myopencode && git init「Agent 編程」opencode run "創(chuàng)建貪吃蛇游戲"「提交代碼」git add . && git commit -m "init"「創(chuàng)建倉庫」gh repo create snake-game --public「推送代碼」git push -u origin master「部署」vercel --token TOKEN --yes核心優(yōu)勢 1.「全程自動化」
從需求到上線，無需手動編寫代碼
AI Agent 理解自然語言，自動生成完整項目
OpenClaw 作為中控，協(xié)調(diào)所有工具
GitHub 管理版本，Vercel 自動部署
幾分鐘內(nèi)從想法到可訪問的網(wǎng)站
每次修改自動重新部署
可以輕松擴展到更復(fù)雜的項目
支持 React、Vue、Next. js 等框架
「解決」: 使用非交互模式或直接用 GPT/Claude 生成代碼后手動保存
Q 2: GitHub 推送失敗？
「解決」: 檢查 token 權(quán)限，需要repo權(quán)限
Q 3: Vercel 部署失敗？
「解決」: 確保項目結(jié)構(gòu)正確，靜態(tài)網(wǎng)站不需要額外構(gòu)建配置
進(jìn)階玩法 自動評論到 PR
# OpenCode 審查代碼后自動評論gh pr comment --body "$(cat review.md)"
定時自動更新
# 使用 cron 定時讓 AI 更新網(wǎng)站內(nèi)容cron action:add job:{"schedule": {"kind": "cron", "expr": "0 9 * * 1"},"payload": {"kind": "agentTurn", "message": "更新網(wǎng)站內(nèi)容"}}
多 Agent 協(xié)作
# 同時運行多個 OpenCode 處理不同任務(wù)bash pty:true background:true command:"opencode '設(shè)計前端界面'"bash pty:true background:true command:"opencode '編寫后端 API'"
實際案例數(shù)據(jù)
本次貪吃蛇項目：
「開發(fā)時間」: ~5 分鐘（Agent 生成代碼）
「代碼行數(shù)」: ~400 行（HTML/CSS/JS）
「部署時間」: < 10 秒
「最終鏈接」: https://myopencode.vercel.app
通過「OpenClaw + OpenCode + GitHub + Vercel」的組合，我們實現(xiàn)了一個完整的 AI 驅(qū)動開發(fā)工作流：
「說」- 告訴 AI 你要什么
「寫」- AI 自動生成代碼
「存」- 自動提交到 GitHub
「上線」- 一鍵部署到 Vercel
這種工作流特別適合：
快速原型開發(fā)
個人項目
學(xué)習(xí)新技術(shù)
自動化重復(fù)任務(wù)
OpenClaw: https://docs.openclaw.ai
OpenCode: https://opencode.ai
GitHub: https://github.com
Vercel: https://vercel.com
本案例 GitHub 倉庫: https://github.com/freestylefly/snake-game
在線演示: https://myopencode.vercel.app
本文檔并非人工編寫，而是由「OpenClaw AI Agent」在開發(fā)過程中自動生成：
生成流程
「需求提出」- 用戶："幫我把整個過程寫成一篇文章"
「Agent 分析」- OpenClaw 分析剛才的操作歷史，提取關(guān)鍵步驟
「內(nèi)容生成」- 自動編寫完整教程，包含流程圖、代碼示例、速查表
「自動推送」- Agent 直接將 README 提交到 GitHub 倉庫
21:49 - 用戶："幫我安裝 opencode"21:53 - 創(chuàng)建項目目錄 myopencode21:56 - 啟動 opencode（交互模式）21:57 - OpenCode 卡住，改用直接創(chuàng)建文件21:58 - 貪吃蛇游戲代碼生成完成22:05 - 用戶提供 GitHub 賬號 freestylefly22:10 - 創(chuàng)建 GitHub 倉庫并推送代碼22:13 - 用戶要求部署到 Vercel22:20 - Vercel 部署成功，游戲上線22:28 - 用戶："寫一篇文章記錄這個過程"22:31 - README 自動生成并推送到 GitHub
核心指令
整個開發(fā)過程只用了幾個簡單的自然語言指令：
時間
用戶指令
Agent 動作
21:49
"幫我安裝 opencode"
安裝 OpenCode CLI
21:53
"幫我新建一個目錄 myopencode"
創(chuàng)建目錄并初始化 git
21:56
"啟動 opencode"
運行交互式編程助手
22:05
"https://github.com/freestylefly"
配置 GitHub 連接
22:13
"幫我部署到 vercel"
安裝 Vercel CLI 并部署
22:28
"幫我寫一篇文章..."
生成完整教程文檔
22:31
"推送到剛才貪吃蛇倉庫作為 readme"
自動提交 README
「全程無需編寫任何命令，只需用自然語言描述需求！」
本文檔由 OpenClaw AI Agent 全程自動生成 | 2026-02-03
特別聲明：以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布，本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
