Openclaw + OpenCode 才是 vibe coding 的最棒組合！

作者：蒼何
日期：2026年2月3日 下午2:59
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

用 OpenClaw + OpenCode + GitHub + Vercel 實現全自動 Agent Coding，只需自然語言指令即可完成開發部署

整理版摘要

作者蒼何最近用 OpenClaw 做中控，配合 OpenCode、GitHub 同 Vercel，成功實現咗由需求到上線嘅全自動流程，佢稱之為 Agent Coding。佢全程只係用自然語言指揮 AI，冇寫過任何程式碼，冇操作過伺服器，仲公開曬所有聊天記錄嚟證明。

文章詳細記錄咗整個過程，包括安裝工具、用 OpenCode 生成貪吃蛇遊戲、自動推送 GitHub 同部署 Vercel。佢仲提供咗完整嘅教程同命令速查表，方便讀者自己試。呢個工作流嘅核心係 OpenClaw 負責協調，OpenCode 生成代碼，GitHub 管理版本，Vercel 自動部署。

作者認為 Agent Coding 好有想像空間，未來 coding 範式可能會轉變，人人都可以有專屬 AI agent。呢個唔單止係 vibe coding，而係一個更完整嘅自動化閉環。佢特別強調呢個流程對快速原型、個人項目、學習新技術同自動化重複任務都好啱用。

  • 結論：OpenClaw + OpenCode + GitHub + Vercel 可實現全自動開發部署，稱為 Agent Coding。
  • 方法：全程只使用自然語言指令，AI 自主完成編碼、版本管理、部署，人類無需寫任何代碼。
  • 差異：有別於 vibe coding 嘅單次 prompt 生成，呢次係 Agent 自主協調多個工具完成完整閉環，從需求到上線。
  • 啟發：Agent Coding 可能係未來 coding 嘅新範式，大幅降低編程門檻，令非技術人員都可以開發軟件。
  • 可行動點：安裝 opencode、gh、vercel 之後，用一句話指示 AI 開發 project，例如「創建一個貪吃蛇遊戲並部署上線」。
值得記低
Prompt

創建貪吃蛇遊戲嘅 prompt

創建一個貪吃蛇遊戲，使用 HTML5 Canvas，包含完整的遊戲邏輯、得分系統和響應式設計

留作參考
連結 github.com

貪吃蛇遊戲源碼

GitHub 倉庫

開啟
連結 myopencode.vercel.app

貪吃蛇線上試玩

Vercel 部署連結

開啟
整理重點

Agent Coding 嘅誕生：由瞓喺牀到自動上線

作者蒼何一直都好鍾意 vibe coding，但今次佢覺得真正炸裂咗：佢真係實現咗瞓喺牀指揮 AI Agent 嚟 Coding，仲自動發佈去 GitHub 同部署到 Vercel。佢用嘅組合係 OpenClaw + OpenCode + GitHub + Vercel，全程由 OpenClaw 喺佢嘅私人服務器完成。

呢個已經唔係 vibe coding，佢大膽創造咗一個新名詞——Agent Coding。

佢好興奮，為咗防止人話佢吹水，決定公開所有同 OpenClaw 嘅聊天記錄。佢強調自己冇用任何高深技術，亦冇操作過服務器，全程用最簡單嘅提示詞就搞掂。

整理重點

實現流程：OpenClaw 坐鎮中控，協調三大工具

成個流程分為幾個主要步驟，由 OpenClaw 做中控，依次調用 OpenCode、GitHub CLI 同 Vercel CLI。

  1. 1 環境準備：安裝 OpenCode、GitHub CLI 同 Vercel CLI。
  2. 2 創建項目目錄：mkdir myopencode && cd myopencode && git init。
  3. 3 Agent Coding：用 OpenCode 交互模式或非交互模式生成代碼，例如 `opencode run "創建一個貪吃蛇遊戲"`。
  4. 4 代碼管理：用 git add、commit，然後用 GitHub CLI 或 API 創建遠程倉庫並推送。
  5. 5 自動部署：用 vercel --token TOKEN --yes 一鍵部署到 Vercel。

作者特別提醒，喺連接 GitHub 時要建立 token 並畀倉庫權限，唔好畀佢太多權限防止亂搞。Vercel 部署時亦要畀 token。

全程只需要三個 token：GitHub token、Vercel token，同埋 OpenCode 嘅 API key（如有）。

  • OpenClaw 作為中控，負責協調所有工具嘅執行順序同參數傳遞。
  • OpenCode 理解自然語言並生成完整項目文件。
  • GitHub 用嚟託管代碼同版本管理。
  • Vercel 自動檢測項目類型並部署到 CDN。
整理重點

貪吃蛇實戰：5 分鐘由零到上線

作者用貪吃蛇遊戲做 demo，整個過程由需求到上線唔使 5 分鐘。AI Agent 自動生成咗約 400 行代碼（HTML/CSS/JS），然後自動提交到 GitHub，再部署到 Vercel。

開發時間：~5 分鐘，部署時間：<10 秒，最終連結：https://myopencode.vercel.app

以下係完整嘅命令速查表，可以直接用嚟部署自己嘅 project：

命令速查表 bash 
# 安裝工具
npm install -g opencode-ai vercel

# 創建目錄並初始化 git
mkdir myopencode && cd myopencode && git init

# Agent 編程（非交互模式）
opencode run "創建一個貪吃蛇遊戲，使用 HTML5 Canvas，包含完整的遊戲邏輯、得分系統和響應式設計"

# 提交代碼
git add . && git commit -m "Initial commit"

# 用 GitHub CLI 創建倉庫並推送
gh repo create snake-game --public --description "A classic Snake game"
git push -u origin master

# 部署到 Vercel
vercel --token YOUR_VERCEL_TOKEN --yes --prod

呢個命令速查表濃縮咗成個流程，係最值得保存嘅資源。

整理重點

未來想像：人人都可以有 AI Agent

作者認為 Agent Coding 嘅想像空間無限。未來 coding 嘅範式可能會變成：每個人都有專屬 agent，幫我哋 coding 或者做任何我哋希望做嘅事。

  • 全程自動化：由需求到上線，唔使手動編寫代碼，AI Agent 理解自然語言後自動生成完整項目。
  • 無縫集成：OpenClaw 作為中控，協調 OpenCode、GitHub、Vercel 等工具。
  • 即時反饋：幾分鐘內由想法變成可訪問嘅網站，每次修改自動重新部署。
  • 可擴展性：可以輕鬆擴展到 React、Vue、Next.js 等框架，支援複雜項目。

佢仲示範咗<a>進階玩法：自動評論到 PR、定時自動更新、多 Agent 協作。呢啲玩法令 Agent Coding 更加強大。

呢篇係蒼何嘅第 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<TOKEN>登錄並關聯│ │
│  │2.自動檢測項目類型(靜態網站)│ │
│  │3.構建並上傳到VercelCDN│ │
│  │  4. 分配域名: https://myopencode.vercel.app  │ │
│  └──────────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────────┘
          │
          ▼
     ┌──────────────┐
     │   網站上線    │  🎉 訪問連結，遊戲可玩！
     └──────────────┘

🛠️ 詳細步驟

第一步：環境準備

1.1 安裝 OpenCode（AI 編程助手）

# 安裝 OpenCode
npm 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 /tmp
cp /tmp/gh_2.63.2_linux_amd64/bin/gh /usr/local/bin/

# 驗證
gh --version

1.3 安裝 Vercel CLI（自動部署）

# 安裝 Vercel CLI
npm install -g vercel

# 驗證
vercel --version

第二步：創建項目目錄

# 創建項目目錄
mkdir -p ~/myopencode
cd ~/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:」

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>貪吃蛇遊戲</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🐍 貪吃蛇遊戲</h1>
        <div class="game-info">
            <div class="score">得分: <span id="score">0</span></div>
            <div class="high-score">最高分: <span id="highScore">0</span></div>
        </div>
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="controls">
            <p>使用方向鍵 ↑↓←→ 控制蛇的移動</p>
            <button id="startBtn">開始遊戲</button>
            <button id="pauseBtn">暫停</button>
            <button id="restartBtn">重新開始</button>
        </div>
        <div id="gameOver" class="game-over hidden">
            <h2>遊戲結束!</h2>
            <p>最終得分: <span id="finalScore">0</span></p>
            <button id="playAgainBtn">再玩一次</button>
        </div>
    </div>
    <script src="game.js"></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」

# 登錄 GitHub
echo "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.git
git push -u origin master

第五步：部署到 Vercel

5.1 用 Vercel CLI 部署

# 進入項目目錄
cd ~/myopencode

# 使用 token 部署
vercel --token YOUR_VERCEL_TOKEN --yes --prod

部署成功後，會輸出類似：

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

5.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 理解自然語言，自動生成完整項目

2. 「無縫整合」

  • OpenClaw 作為中控，協調所有工具
  • GitHub 管理版本，Vercel 自動部署

3. 「即時反饋」

  • 幾分鐘內由諗法變成可以訪問嘅網站
  • 每次修改都會自動重新部署

4. 「可擴展性」

  • 可以輕鬆擴展到更複雜嘅項目
  • 支援 React、Vue、Next. js 等框架

🔧 常見問題

Q 1: OpenCode 卡住冇反應？

「解決」: 用非互動模式或者直接叫 GPT/Claude 生成代碼之後手動保存

Q 2: GitHub 推送失敗？

「解決」: 檢查 token 權限，需要 repo 權限

Q 3: Vercel 部署失敗？

「解決」: 確保項目結構正確，靜態網站唔需要額外構建配置

🚀 進階玩法

自動評論到 PR

# OpenCode 審查代碼後自動評論
gh pr comment <PR_NUMBER> --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 驅動開發工作流程：

  1. 「說」 - 話畀 AI 你想要乜
  2. 「寫」 - AI 自動生成代碼
  3. 「存」 - 自動提交到 GitHub
  4. 「上線」 - 一鍵部署到 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 生成過程實錄

呢份文件唔係人手寫嘅，而係由 「OpenClaw AI Agent」 喺開發過程中自動生成：

生成流程

  1. 「需求提出」 - 用戶："幫我將成個過程寫成一篇文章"
  2. 「Agent 分析」 - OpenClaw 分析啱先嘅操作歷史，提取關鍵步驟
  3. 「內容生成」 - 自動編寫完整教學，包含流程圖、代碼示例、速查表
  4. 「自動推送」 - Agent 直接將 README 提交到 GitHub 倉庫

真實嘅開發時間線

21:49 - 用戶："幫我安裝 opencode"
21:53 - 創建項目目錄 myopencode
21:56 - 啓動 opencode（交互模式）
21:57 - OpenCode 卡住，改用直接創建文件
21:58 - 貪吃蛇遊戲代碼生成完成
22:05 - 用戶提供 GitHub 賬號 freestylefly
22:10 - 創建 GitHub 倉庫並推送代碼
22:13 - 用戶要求部署到 Vercel
22: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

這是蒼何的第 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<TOKEN>登錄並關聯│ │
│  │2.自動檢測項目類型(靜態網站)│ │
│  │3.構建並上傳到VercelCDN│ │
│  │  4. 分配域名: https://myopencode.vercel.app  │ │
│  └──────────────────────────────────────────────────────────┘    │
└──────────────────────────────────────────────────────────────────┘
          │
          ▼
     ┌──────────────┐
     │   網站上線    │  🎉 訪問連結，遊戲可玩！
     └──────────────┘

🛠️ 詳細步驟

第一步：環境準備

1.1 安裝 OpenCode（AI 編程助手）

# 安裝 OpenCode
npm 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 /tmp
cp /tmp/gh_2.63.2_linux_amd64/bin/gh /usr/local/bin/

# 驗證
gh --version

1.3 安裝 Vercel CLI（自動部署）

# 安裝 Vercel CLI
npm install -g vercel

# 驗證
vercel --version

第二步：創建項目目錄

# 創建項目目錄
mkdir -p ~/myopencode
cd ~/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:」

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>貪吃蛇遊戲</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🐍 貪吃蛇遊戲</h1>
        <div class="game-info">
            <div class="score">得分: <span id="score">0</span></div>
            <div class="high-score">最高分: <span id="highScore">0</span></div>
        </div>
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="controls">
            <p>使用方向鍵 ↑↓←→ 控制蛇的移動</p>
            <button id="startBtn">開始遊戲</button>
            <button id="pauseBtn">暫停</button>
            <button id="restartBtn">重新開始</button>
        </div>
        <div id="gameOver" class="game-over hidden">
            <h2>遊戲結束!</h2>
            <p>最終得分: <span id="finalScore">0</span></p>
            <button id="playAgainBtn">再玩一次</button>
        </div>
    </div>
    <script src="game.js"></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」

# 登錄 GitHub
echo "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.git
git push -u origin master

第五步：部署到 Vercel

5.1 使用 Vercel CLI 部署

# 進入項目目錄
cd ~/myopencode

# 使用 token 部署
vercel --token YOUR_VERCEL_TOKEN --yes --prod

部署成功後，會輸出類似：

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

5.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 理解自然語言，自動生成完整項目

2. 「無縫集成」

  • OpenClaw 作為中控，協調所有工具
  • GitHub 管理版本，Vercel 自動部署

3. 「即時反饋」

  • 幾分鐘內從想法到可訪問的網站
  • 每次修改自動重新部署

4. 「可擴展性」

  • 可以輕鬆擴展到更復雜的項目
  • 支持 React、Vue、Next. js 等框架

🔧 常見問題

Q 1: OpenCode 卡住不響應？

「解決」: 使用非交互模式或直接用 GPT/Claude 生成代碼後手動保存

Q 2: GitHub 推送失敗？

「解決」: 檢查 token 權限，需要 repo 權限

Q 3: Vercel 部署失敗？

「解決」: 確保項目結構正確，靜態網站不需要額外構建配置

🚀 進階玩法

自動評論到 PR

# OpenCode 審查代碼後自動評論
gh pr comment <PR_NUMBER> --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 驅動開發工作流：

  1. 「說」 - 告訴 AI 你要什麼
  2. 「寫」 - AI 自動生成代碼
  3. 「存」 - 自動提交到 GitHub
  4. 「上線」 - 一鍵部署到 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 生成過程實錄

本文檔並非人工編寫，而是由 「OpenClaw AI Agent」 在開發過程中自動生成：

生成流程

  1. 「需求提出」 - 用戶："幫我把整個過程寫成一篇文章"
  2. 「Agent 分析」 - OpenClaw 分析剛才的操作歷史，提取關鍵步驟
  3. 「內容生成」 - 自動編寫完整教程，包含流程圖、代碼示例、速查表
  4. 「自動推送」 - Agent 直接將 README 提交到 GitHub 倉庫

真實的開發時間線

21:49 - 用戶："幫我安裝 opencode"
21:53 - 創建項目目錄 myopencode
21:56 - 啓動 opencode（交互模式）
21:57 - OpenCode 卡住，改用直接創建文件
21:58 - 貪吃蛇遊戲代碼生成完成
22:05 - 用戶提供 GitHub 賬號 freestylefly
22:10 - 創建 GitHub 倉庫並推送代碼
22:13 - 用戶要求部署到 Vercel
22: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