跳到主要內容

Vibe Coding 協作到自建 Dev Agent?從 Claude / Codex 到 OpenHands

過去一年,越來越多工程師開始把 AI 真正帶進工作流程。從一開始用 ChatGPT、Claude 來問語法問題,到後來很多人愛上 Cursor,直接在編輯器裡讓 AI 幫忙改 code、補 test case、甚至自動整理 PR。這樣的開發體驗,已經大大改變了我們寫程式的方式。

更現實的是,在很多企業內部、政府單位、或涉及機密資料的專案裡,其實根本不能直接用 Cursor 或雲端 LLM 工具。 

畢竟這些服務通常會把資料傳到雲端模型做處理,萬一專案裡有未公開的技術、敏感客戶資料,或是受限於法規(像金融、醫療、政府標案),直接用雲端 AI 工具就會踩紅線。 

因此,許多團隊反而更希望「自己架一套 Dev Agent」,可以在內網執行,資料完全掌握在自己手上,該整合的內部工具、該讀的私有 repo、該串的 CI/CD pipeline,全部客製化、安全可控。

這時候,像 OpenHands 這樣的開源 Dev Agent 框架就特別有價值。它的出發點不是單純的 AI 助手,而是讓你能夠打造出一個真的可以跑在自己環境裡、可以理解整個開發流程的 AI 工程師。從建置到部署,從 CLI 操作到瀏覽器查詢,從多檔案編輯到自動測試,全部都能自己完成,甚至還能針對不同專案調整專屬的工作流。

對很多開始探索 AI 協作開發的團隊來說,這是一條 從「AI 幫你寫一段程式」,走向「AI 幫你解決一整個任務」的進化路徑。而且,還是在可控、可自定義、安全的環境裡完成的。

🧩 主要概述

OpenHands 是由 All‑Hands AI 開發的開源「軟體開發代理人平台」,能模仿人類工程師從建立程式、修改程式碼、執行指令,到瀏覽網頁、呼叫 API……等一整套開發流程

它提供雲端(OpenHands Cloud)與本地 Docker 運行版本,用戶能配置 LLM(如 Claude、OpenAI、Gemini…)

📚 核心特性與怎麼使用

代理人的工具能力

支援代碼編輯、命令行、執行環境、網頁瀏覽、API 呼叫—接近人類開發者完整技能。其中 OpenHands Cloud 版本提供 $50 試用額度讓大家方便使用,又或者如果自己本機有 docker 的話,可以自己Local 版本透過 Docker 自架環境。

使用流程

快速上手:啟動 Cloud 或 Docker 映像後,選擇 LLM、輸入 API Key Hello World 教學:打個 Hello Script、調整語法、執行跑測試由簡入繁掌握 agent 運作 。 

https://docs.all-hands.dev/usage/installation

Web 應用建立:從無到有建構完整功能(例如 React 前端 TODO 應用),官方有一系列說明,讓使用者可以快速入門,讓 AI Agent 快速打造出來應用。

整合於現有專案:可新增 route、Action、Component、重構 function 等 ,當然同時也具備了除錯與 TDD 測試驅動:支援生成測試 Testing、診斷 bug 問題、透過迭代過程改進 。 

https://docs.all-hands.dev/usage/getting-started

高度可視化 UI

這部分是我自己覺得最特別的地方,提供的 web ui 介面,包含 chat 對話視窗、檔案異動視圖、終端、VS Code、Jupyter Notebook、Web app 及瀏覽記錄等模組 。

支援多種大型語言模型

可以支援自己建立的大型語言模型端點,同時也支援常見 LLM 模型(推薦使用 Claude-sonnet-4 及 o4-mini、Gemini、OpenHands LM) 

https://docs.all-hands.dev/usage/llms/llms

質化 prompt 精準、範疇限定、提供具體檔案與行號等建議使用法

https://docs.all-hands.dev/usage/prompting/prompting-best-practices

📈 成果與效能

Benchmark:在 SWE‑Bench 等程式開發基準測試中,OpenHands 解決率達 50% 以上 。同時新一代 Versa Agent:最新研究(2025/06/03)指出其多模式瀏覽與檔案操作能力,在三項 benchmark 中平均比同級專用型 agent 高出 9% 成功率 。

在討論技術社群的討論中其實也持續獲得肯定,Reddit 分享 CodeAct 2.1 版本突破 SWE‑Bench 50% 門檻,具里程碑意義 。

實際案例

教學案例:網路上實際有示範用 Docker 啟動、結合 LLM 建立 FastAPI + Jinja 應用,agent 支援編寫、測試與推 Git的流程可提供查看 。

德國大型團隊實測:Senior Developer 實測 Docker + OpenHands + Ollama/OpenAI,協助升級微服務依賴與生成沙盒,但是測試修復與 PR 評論處理上仍有侷限,需人為介入 prompt 調整與回饋。

這段官方影片大家也可以快速了解一下應用的方式,

後記

目前大部分的 coding agent 多屬於封閉的模式,除了深入查看程式碼之外,很難知道在伺服器端或者參數端做了什麼調整,也很難用於較為私密的環境中。

OpenHands 是一個完全開源且正在快速進展的開源 AI 開發代理平台,具高度的工具整合能力與 benchmark 實力,尤其適合需要 自動化程式碼生成、CI/CD 任務與小規模專案初期開發 的使用者。目前仍建議配合人類協作使用,並透過精準 prompt 與逐步迭代強化效果。

🔥 工商服務時間 🔥

本月份將有一場 Vibe Coding 台中實體活動,

歡迎對 AI 工具、Coding Flow 有興趣的朋友們一起來 vibe 一下 🎧💻!

📅 活動資訊 👉 https://codingbear.kktix.cc/events/ai-vibe-coding-2025-06-taichung

這次我們會分享最新 AI 開發模式、實戰 Demo、現場互動 Q&A —— 一起交流、一起玩,現場 vibe 爆棚 🕺!

有興趣的夥伴趕快手刀報名 💥,名額有限!


Vibe Coding 是近來開發圈很火紅的 AI 協作開發模式,結合我們自家 Cympack AI 製造平台,幫助了不少客戶「從想法 → 打樣 → 量產 → 上市」整個新產品流程 🚀。

如果你也有: 

✅ 想開發新產品 

✅ 想做新產品開發、小量客製、快速打樣 

✅ 想了解 AI 協作 + 製造流程怎麼整合

都歡迎來聊聊,我們團隊很樂意協助! 

可以聯絡我,或者來信 

📩 聯絡信箱 👉 service@cympotekc.om 

https://www.cympotek.com/

✨ 讓 AI 幫你加速產品落地。

留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。