湖北
這是蒼何的第 485 篇原創！
大家好，我是蒼何。
兄弟們，真的炸裂。
我真的實現了躺在床上指揮 AI Agent 來 Coding，并自動發布到 GitHub ，然后自動部署到Vercel。
用 Openclaw+ OpenCode+GitHub+Vercel 實現了網站的開發，部署上線。
這個過程全程是由 Openclaw 在我的私人服務器完成的。
這已經不是 vibe coding 了，我大膽的來造一個新名詞吧，姑且就叫 Agent Coding。
也許后面，人們會有更加炫酷的名字，但這一切都不重要了。
我很興奮，為了防止你說我在瞎扯淡，我決定公布所有我和 Openclaw 的聊天記錄。
我全程并沒有使用什么高深的技術，也沒有操作過服務器，我全程是用最簡單的提示詞來完成的。
這個項目是Openclaw全自主完成的：
游戲完全可用：
下面是我和 Openclaw 的全部聊天。
先安裝 opencode：
新建目錄用做項目目錄：
切換目錄，啟動 opencode：
用 opencode 來開發貪吃蛇游戲：
提供我的 GitHub 信息，讓他連：
按照它給的提示，創建一個 token，權限就給倉庫權限，直接丟給他 token。
這里一定記得開啟部分權限，防止它瞎搞。
它說已經推送好了：
我打開 GitHub 看下，果然有了，已經自動將代碼推送到 GitHub 了。
然后讓它部署到Vercel，方便得到一個可訪問的網頁鏈接：
同樣按照要求，給個 token，就已經完成了自動部署。
，就已經完成了全鏈路的自動化，真的麻了，兄弟們，雖然只是跑通了閉環，但Openclaw 想象空間真的無限。
我甚至直接讓但 Openclaw 記錄下這個過程，并寫一篇文章，推送到剛才這個倉庫，這個由 Agent 自主開發部署的倉庫。
提示詞；這個過程太棒了，我打算寫一篇文章，你幫我直接根據你剛才的步驟，生成一篇文章，標題是：用 Openclaw+ OpenCode+GitHub+Vercel 實現 Agent Coding，最好是有流程圖詳細解釋下這個步驟
然后打開 GitHub 看，也已經有了描述：
下面，我把 Openclaw 生成的教程也貼出來，方便大家看看。Openclaw 的應用仿佛打開了潘多拉魔盒，未來，coding 的范式是不是可以變為 agent coding，每一個人都有一個專屬 agent，幫我們 coding，或者做任何我們希望做的事情。
貪吃蛇游戲 + Agent Coding 完整教程
本文檔由 「OpenClaw AI Agent」 全程自動生成，記錄從需求到上線的完整開發流程。
「在線試玩」: https://myopencode.vercel.app
「項目源碼」: https://github.com/freestylefly/snake-game
「生成工具」: OpenClaw + OpenCode + GitHub + Vercel
用 OpenClaw + OpenCode + GitHub + Vercel 實現 Agent Coding
從零開始，讓 AI Agent 幫你寫代碼、管理版本、自動部署，全程無需離開終端！概述
本文將介紹如何構建一個完整的「AI 驅動開發工作流」：
「OpenClaw」- AI 助手運行平臺，協調所有工具
「OpenCode」- AI 編程助手，自動生成代碼
「GitHub」- 代碼托管和版本管理
「Vercel」- 自動化部署和托管
通過這個工作流，你只需要告訴 AI 要做什么，剩下的代碼編寫、提交、部署全部由 Agent 自動完成。
完整流程圖
┌─────────────────────────────────────────────────────────────────────────────┐│ AgentCoding完整工作流 │└─────────────────────────────────────────────────────────────────────────────┘┌──────────────┐│ 用戶需求 │ "幫我創建一個貪吃蛇游戲并部署上線"└──────┬───────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step1:環境準備(OpenClaw協調) ││ ┌─────────────┐┌─────────────┐┌─────────────┐ ││ │安裝OpenCode││安裝GitHubCLI││安裝VercelCLI│ ││ │(AI編程)││(代碼托管)││(自動部署)│ ││ └──────┬──────┘└──────┬──────┘└──────┬──────┘ │└─────────┼────────────────┼────────────────┼──────────────────────┘││ │▼▼ ▼┌──────────────────────────────────────────────────────────────────┐│ Step2:AgentCoding(OpenCode) ││ ┌─────────────────────────────────────────────────────────┐ ││ │用戶:"創建一個貪吃蛇游戲"│ ││ │││ ││ │▼│ ││ │ ┌─────────────────────────────────────────────────┐ │ ││ ││OpenCodeAIAgent││ ││ ││┌──────────┐┌──────────┐┌──────────┐││ ││ │││生成HTML││生成CSS││生成JS│││ ││ │││index.html││style.css││game.js│││ ││ ││└──────────┘└──────────┘└──────────┘││ ││ │ └─────────────────────────────────────────────────┘ │ ││ └─────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step3:代碼管理(GitHub) ││ ┌──────────────────────────────────────────────────────────┐ ││ │1.gitinit初始化倉庫│ ││ │2.gitadd.添加文件│ ││ │3.gitcommit-m"Initial commit"提交│ ││ │4.創建GitHub倉庫(通過API)│ ││ │5.gitpush-uoriginmaster推送到遠程│ ││ └──────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────────────────────────────────────────────────────────┐│ Step4:自動部署(Vercel) ││ ┌──────────────────────────────────────────────────────────┐ ││ │1.vercel--token 登錄并關聯│ ││ │2.自動檢測項目類型(靜態網站)│ ││ │3.構建并上傳到VercelCDN│ ││ │ 4. 分配域名: https://myopencode.vercel.app │ ││ └──────────────────────────────────────────────────────────┘ │└──────────────────────────────────────────────────────────────────┘│▼┌──────────────┐│ 網站上線 │ 訪問鏈接，游戲可玩！└──────────────┘
? 詳細步驟 第一步：環境準備 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
第二步：創建項目目錄
# 創建項目目錄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 中輸入：
創建一個貪吃蛇游戲，使用 HTML5 Canvas，包含完整的游戲邏輯、得分系統和響應式設計方式二：使用 OpenCode 非交互模式
# 直接運行任務opencode run "Create a complete Snake game using HTML5 Canvas, CSS, and JavaScript"
方式三：手動創建（備用方案）
如果 OpenCode 運行有問題，可以直接創建文件：
「index. html:」
html>貪吃蛇游戲 title></code>head>貪吃蛇游戲 h1>得分: 0 span> div>最高分: 0 span> div>div>canvas>使用方向鍵 ↑↓←→ 控制蛇的移動 p>開始游戲 button>暫停 button>重新開始 button>div>游戲結束! 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 創建 GitHub 倉庫并推送
「方式一：使用 GitHub CLI」
# 登錄 GitHubecho "YOUR_GITHUB_TOKEN" | gh auth login --with-token# 創建倉庫gh repo create snake-game --public --description "A classic Snake game"# 推送git push -u origin master
「方式二：使用 API 直接創建」
# 通過 API 創建倉庫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}'# 添加遠程倉庫并推送git remote add origin https://username:token@github.com/username/snake-game.gitgit push -u origin master
第五步：部署到 Vercel 5.1 使用 Vercel CLI 部署
# 進入項目目錄cd ~/myopencode# 使用 token 部署vercel --token YOUR_VERCEL_TOKEN --yes --prod
部署成功后，會輸出類似：
Production: https://myopencode-xxx.vercel.app5.2 關聯 GitHub 倉庫（可選）
Vercel CLI 會自動檢測并關聯 GitHub 倉庫，實現自動部署：
每次 push 到 GitHub，Vercel 自動重新部署
支持預覽部署（Pull Request）
步驟
命令
「安裝工具」npm install -g opencode-ai vercel「創建目錄」mkdir myopencode && cd myopencode && git init「Agent 編程」opencode run "創建貪吃蛇游戲"「提交代碼」git add . && git commit -m "init"「創建倉庫」gh repo create snake-game --public「推送代碼」git push -u origin master「部署」vercel --token TOKEN --yes核心優勢 1.「全程自動化」
從需求到上線，無需手動編寫代碼
AI Agent 理解自然語言，自動生成完整項目
OpenClaw 作為中控，協調所有工具
GitHub 管理版本，Vercel 自動部署
幾分鐘內從想法到可訪問的網站
每次修改自動重新部署
可以輕松擴展到更復雜的項目
支持 React、Vue、Next. js 等框架
「解決」: 使用非交互模式或直接用 GPT/Claude 生成代碼后手動保存
Q 2: GitHub 推送失?。?/p>
「解決」: 檢查 token 權限，需要repo權限
Q 3: Vercel 部署失?。?/p>
「解決」: 確保項目結構正確，靜態網站不需要額外構建配置
進階玩法 自動評論到 PR
# OpenCode 審查代碼后自動評論gh pr comment --body "$(cat review.md)"
定時自動更新
# 使用 cron 定時讓 AI 更新網站內容cron action:add job:{"schedule": {"kind": "cron", "expr": "0 9 * * 1"},"payload": {"kind": "agentTurn", "message": "更新網站內容"}}
多 Agent 協作
# 同時運行多個 OpenCode 處理不同任務bash pty:true background:true command:"opencode '設計前端界面'"bash pty:true background:true command:"opencode '編寫后端 API'"
實際案例數據
本次貪吃蛇項目：
「開發時間」: ~5 分鐘（Agent 生成代碼）
「代碼行數」: ~400 行（HTML/CSS/JS）
「部署時間」: < 10 秒
「最終鏈接」: https://myopencode.vercel.app
通過「OpenClaw + OpenCode + GitHub + Vercel」的組合，我們實現了一個完整的 AI 驅動開發工作流：
「說」- 告訴 AI 你要什么
「寫」- AI 自動生成代碼
「存」- 自動提交到 GitHub
「上線」- 一鍵部署到 Vercel
這種工作流特別適合：
快速原型開發
個人項目
學習新技術
自動化重復任務
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」在開發過程中自動生成：
生成流程
「需求提出」- 用戶："幫我把整個過程寫成一篇文章"
「Agent 分析」- OpenClaw 分析剛才的操作歷史，提取關鍵步驟
「內容生成」- 自動編寫完整教程，包含流程圖、代碼示例、速查表
「自動推送」- Agent 直接將 README 提交到 GitHub 倉庫
21:49 - 用戶："幫我安裝 opencode"21:53 - 創建項目目錄 myopencode21:56 - 啟動 opencode（交互模式）21:57 - OpenCode 卡住，改用直接創建文件21:58 - 貪吃蛇游戲代碼生成完成22:05 - 用戶提供 GitHub 賬號 freestylefly22:10 - 創建 GitHub 倉庫并推送代碼22:13 - 用戶要求部署到 Vercel22:20 - Vercel 部署成功，游戲上線22:28 - 用戶："寫一篇文章記錄這個過程"22:31 - README 自動生成并推送到 GitHub
核心指令
整個開發過程只用了幾個簡單的自然語言指令：
時間
用戶指令
Agent 動作
21:49
"幫我安裝 opencode"
安裝 OpenCode CLI
21:53
"幫我新建一個目錄 myopencode"
創建目錄并初始化 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
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
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.
