這是蒼何的第 485 篇原創(chuàng)！

大家好，我是蒼何。

兄弟們，真的炸裂。

我真的實(shí)現(xiàn)了躺在床上指揮 AI Agent 來 Coding，并自動(dòng)發(fā)布到 GitHub ，然后自動(dòng)部署到Vercel。

用 Openclaw+ OpenCode+GitHub+Vercel 實(shí)現(xiàn)了網(wǎng)站的開發(fā)，部署上線。

這個(gè)過程全程是由 Openclaw 在我的私人服務(wù)器完成的。

這已經(jīng)不是 vibe coding 了，我大膽的來造一個(gè)新名詞吧，姑且就叫 Agent Coding。

也許后面，人們會(huì)有更加炫酷的名字，但這一切都不重要了。

我很興奮，為了防止你說我在瞎扯淡，我決定公布所有我和 Openclaw 的聊天記錄。

我全程并沒有使用什么高深的技術(shù)，也沒有操作過服務(wù)器，我全程是用最簡單的提示詞來完成的。

這個(gè)項(xiàng)目是Openclaw全自主完成的：

游戲完全可用：

下面是我和 Openclaw 的全部聊天。

先安裝 opencode：

新建目錄用做項(xiàng)目目錄：

切換目錄，啟動(dòng) opencode：

用 opencode 來開發(fā)貪吃蛇游戲：

提供我的 GitHub 信息，讓他連：

按照它給的提示，創(chuàng)建一個(gè) token，權(quán)限就給倉庫權(quán)限，直接丟給他 token。

這里一定記得開啟部分權(quán)限，防止它瞎搞。

它說已經(jīng)推送好了：

我打開 GitHub 看下，果然有了，已經(jīng)自動(dòng)將代碼推送到 GitHub 了。

然后讓它部署到Vercel，方便得到一個(gè)可訪問的網(wǎng)頁鏈接：

同樣按照要求，給個(gè) token，就已經(jīng)完成了自動(dòng)部署。

，就已經(jīng)完成了全鏈路的自動(dòng)化，真的麻了，兄弟們，雖然只是跑通了閉環(huán)，但Openclaw 想象空間真的無限。

我甚至直接讓但 Openclaw 記錄下這個(gè)過程，并寫一篇文章，推送到剛才這個(gè)倉庫，這個(gè)由 Agent 自主開發(fā)部署的倉庫。

提示詞；這個(gè)過程太棒了，我打算寫一篇文章，你幫我直接根據(jù)你剛才的步驟，生成一篇文章，標(biāo)題是：用 Openclaw+ OpenCode+GitHub+Vercel 實(shí)現(xiàn) Agent Coding，最好是有流程圖詳細(xì)解釋下這個(gè)步驟

然后打開 GitHub 看，也已經(jīng)有了描述：

下面，我把 Openclaw 生成的教程也貼出來，方便大家看看。Openclaw 的應(yīng)用仿佛打開了潘多拉魔盒，未來，coding 的范式是不是可以變?yōu)?agent coding，每一個(gè)人都有一個(gè)專屬 agent，幫我們 coding，或者做任何我們希望做的事情。

貪吃蛇游戲 + Agent Coding 完整教程

本文檔由 「OpenClaw AI Agent」 全程自動(dòng)生成，記錄從需求到上線的完整開發(fā)流程。

「在線試玩」: https://myopencode.vercel.app
「項(xiàng)目源碼」: https://github.com/freestylefly/snake-game
「生成工具」: OpenClaw + OpenCode + GitHub + Vercel

用 OpenClaw + OpenCode + GitHub + Vercel 實(shí)現(xiàn) Agent Coding

從零開始，讓 AI Agent 幫你寫代碼、管理版本、自動(dòng)部署，全程無需離開終端！

本文將介紹如何構(gòu)建一個(gè)完整的「AI 驅(qū)動(dòng)開發(fā)工作流」：

• 「OpenClaw」- AI 助手運(yùn)行平臺(tái)，協(xié)調(diào)所有工具

• 「OpenCode」- AI 編程助手，自動(dòng)生成代碼

• 「GitHub」- 代碼托管和版本管理

• 「Vercel」- 自動(dòng)化部署和托管

通過這個(gè)工作流，你只需要告訴 AI 要做什么，剩下的代碼編寫、提交、部署全部由 Agent 自動(dòng)完成。

完整流程圖

┌─────────────────────────────────────────────────────────────────────────────┐│  AgentCoding完整工作流 │└─────────────────────────────────────────────────────────────────────────────┘
     ┌──────────────┐     │   用戶需求    │  "幫我創(chuàng)建一個(gè)貪吃蛇游戲并部署上線"     └──────┬───────┘            │            ▼┌──────────────────────────────────────────────────────────────────┐│  Step1:環(huán)境準(zhǔn)備(OpenClaw協(xié)調(diào)) ││  ┌─────────────┐┌─────────────┐┌─────────────┐ ││  │安裝OpenCode││安裝GitHubCLI││安裝VercelCLI│ ││  │(AI編程)││(代碼托管)││(自動(dòng)部署)│ ││  └──────┬──────┘└──────┬──────┘└──────┬──────┘ │└─────────┼────────────────┼────────────────┼──────────────────────┘   ││ │   ▼▼ ▼┌──────────────────────────────────────────────────────────────────┐│  Step2:AgentCoding(OpenCode) ││  ┌─────────────────────────────────────────────────────────┐     ││  │用戶:"創(chuàng)建一個(gè)貪吃蛇游戲"│ ││  │││ ││  │▼│ ││  │  ┌─────────────────────────────────────────────────┐    │     ││  ││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:自動(dòng)部署(Vercel) ││  ┌──────────────────────────────────────────────────────────┐    ││  │1.vercel--token 

 登錄并關(guān)聯(lián)│ │ 
│  │2.自動(dòng)檢測項(xiàng)目類型(靜態(tài)網(wǎng)站)│ ││  │3.構(gòu)建并上傳到VercelCDN│ ││  │  4. 分配域名: https://myopencode.vercel.app  │ ││  └──────────────────────────────────────────────────────────┘    │└──────────────────────────────────────────────────────────────────┘          │          ▼     ┌──────────────┐     │   網(wǎng)站上線    │   訪問鏈接，游戲可玩！     └──────────────┘

# 安裝 OpenCodenpm install -g opencode-ai
# 驗(yàn)證安裝opencode --version

# 下載并安裝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/
# 驗(yàn)證gh --version

# 安裝 Vercel CLInpm install -g vercel
# 驗(yàn)證vercel --version

# 創(chuàng)建項(xiàng)目目錄mkdir -p ~/myopencodecd ~/myopencode
# 初始化 Git 倉庫git init
# 配置 Git 用戶信息git config --global user.email "your@email.com"git config --global user.name "yourname"

# 啟動(dòng) OpenCode（需要 PTY 模式）# 在 OpenClaw 中使用：bash pty:true workdir:~/myopencode command:"opencode"

然后在 OpenCode 中輸入：

創(chuàng)建一個(gè)貪吃蛇游戲，使用 HTML5 Canvas，包含完整的游戲邏輯、得分系統(tǒng)和響應(yīng)式設(shè)計(jì)

# 直接運(yùn)行任務(wù)opencode run "Create a complete Snake game using HTML5 Canvas, CSS, and JavaScript"

如果 OpenCode 運(yùn)行有問題，可以直接創(chuàng)建文件：

「index. html:」

html>            貪吃蛇游戲 
title></code>     
head>             貪吃蛇游戲 
h1>                    得分: 0 
span> 
div>            最高分: 0 
span> 
div>         
div>         
canvas>                    
使用方向鍵 ↑↓←→ 控制蛇的移動(dòng) 
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"

「方式一：使用 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

# 進(jìn)入項(xiàng)目目錄cd ~/myopencode
# 使用 token 部署vercel --token YOUR_VERCEL_TOKEN --yes --prod

部署成功后，會(huì)輸出類似：

Production: https://myopencode-xxx.vercel.app

Vercel CLI 會(huì)自動(dòng)檢測并關(guān)聯(lián) GitHub 倉庫，實(shí)現(xiàn)自動(dòng)部署：

• 每次 push 到 GitHub，Vercel 自動(dòng)重新部署

• 支持預(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.「全程自動(dòng)化」

• 從需求到上線，無需手動(dòng)編寫代碼

• AI Agent 理解自然語言，自動(dòng)生成完整項(xiàng)目

• OpenClaw 作為中控，協(xié)調(diào)所有工具

• GitHub 管理版本，Vercel 自動(dòng)部署

• 幾分鐘內(nèi)從想法到可訪問的網(wǎng)站

• 每次修改自動(dòng)重新部署

• 可以輕松擴(kuò)展到更復(fù)雜的項(xiàng)目

• 支持 React、Vue、Next. js 等框架

「解決」: 使用非交互模式或直接用 GPT/Claude 生成代碼后手動(dòng)保存

Q 2: GitHub 推送失??？

「解決」: 檢查 token 權(quán)限，需要repo權(quán)限

Q 3: Vercel 部署失??？

「解決」: 確保項(xiàng)目結(jié)構(gòu)正確，靜態(tài)網(wǎng)站不需要額外構(gòu)建配置

進(jìn)階玩法 自動(dòng)評(píng)論到 PR

# OpenCode 審查代碼后自動(dòng)評(píng)論gh pr comment 

 --body  
"$(cat review.md)"

# 使用 cron 定時(shí)讓 AI 更新網(wǎng)站內(nèi)容cron action:add job:{  "schedule": {"kind": "cron", "expr": "0 9 * * 1"},  "payload": {"kind": "agentTurn", "message": "更新網(wǎng)站內(nèi)容"}}

# 同時(shí)運(yùn)行多個(gè) OpenCode 處理不同任務(wù)bash pty:true background:true command:"opencode '設(shè)計(jì)前端界面'"bash pty:true background:true command:"opencode '編寫后端 API'"

本次貪吃蛇項(xiàng)目：

• 「開發(fā)時(shí)間」: ~5 分鐘（Agent 生成代碼）

• 「代碼行數(shù)」: ~400 行（HTML/CSS/JS）

• 「部署時(shí)間」: < 10 秒

• 「最終鏈接」: https://myopencode.vercel.app

通過「OpenClaw + OpenCode + GitHub + Vercel」的組合，我們實(shí)現(xiàn)了一個(gè)完整的 AI 驅(qū)動(dòng)開發(fā)工作流：

1. 「說」- 告訴 AI 你要什么

2. 「寫」- AI 自動(dòng)生成代碼

3. 「存」- 自動(dòng)提交到 GitHub

4. 「上線」- 一鍵部署到 Vercel

這種工作流特別適合：

• 快速原型開發(fā)

• 個(gè)人項(xiàng)目

• 學(xué)習(xí)新技術(shù)

• 自動(dòng)化重復(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ā)過程中自動(dòng)生成：

生成流程

1. 「需求提出」- 用戶："幫我把整個(gè)過程寫成一篇文章"

2. 「Agent 分析」- OpenClaw 分析剛才的操作歷史，提取關(guān)鍵步驟

3. 「內(nèi)容生成」- 自動(dòng)編寫完整教程，包含流程圖、代碼示例、速查表

4. 「自動(dòng)推送」- Agent 直接將 README 提交到 GitHub 倉庫

21:49 - 用戶："幫我安裝 opencode"21:53 - 創(chuàng)建項(xiàng)目目錄 myopencode21:56 - 啟動(dòng) opencode（交互模式）21:57 - OpenCode 卡住，改用直接創(chuàng)建文件21:58 - 貪吃蛇游戲代碼生成完成22:05 - 用戶提供 GitHub 賬號(hào) freestylefly22:10 - 創(chuàng)建 GitHub 倉庫并推送代碼22:13 - 用戶要求部署到 Vercel22:20 - Vercel 部署成功，游戲上線22:28 - 用戶："寫一篇文章記錄這個(gè)過程"22:31 - README 自動(dòng)生成并推送到 GitHub

整個(gè)開發(fā)過程只用了幾個(gè)簡單的自然語言指令：

時(shí)間

用戶指令

Agent 動(dòng)作

21:49

"幫我安裝 opencode"

安裝 OpenCode CLI

21:53

"幫我新建一個(gè)目錄 myopencode"

創(chuàng)建目錄并初始化 git

21:56

"啟動(dòng) opencode"

運(yùn)行交互式編程助手

22:05

"https://github.com/freestylefly"

配置 GitHub 連接

22:13

"幫我部署到 vercel"

安裝 Vercel CLI 并部署

22:28

"幫我寫一篇文章..."

生成完整教程文檔

22:31

"推送到剛才貪吃蛇倉庫作為 readme"

自動(dòng)提交 README

「全程無需編寫任何命令，只需用自然語言描述需求！」

本文檔由 OpenClaw AI Agent 全程自動(dòng)生成 | 2026-02-03