by Rain Chu | 6 月 10, 2026 | AI , 程式開發
打開 opencode 設定檔 :
macOS / Linux: ~/.config/opencode/opencode.json
Windows: %USERPROFILE%\.config\opencode\opencode.json
加入下面的設定(是標準的 json)
json{
"$schema": "https://opencode.ai/config.json",
"provider": {
"ollama": {
"npm": "@ai-sdk/openai-compatible",
"name": "Ollama (local)",
"options": {
"baseURL": "http://localhost:11434/v1"
},
"models": {
"qwen2.5-coder-16k": {
"name": "Qwen Coder Local (16k)",
"tools": true
}
}
}
}
}
Opencode config 說明
https://opencode.ai/docs/config
by Rain Chu | 6 月 9, 2026 | AI , 程式開發
本文將分析目前相當熱門的四套工具與平台:
Vercel
Cloudflare
RepackAI
Esbuild
雖然這四者常被一起提及,但實際上定位完全不同。
有些是部署平台,有些是 AI 開發工具,有些則是前端打包工具。
了解它們之間的差異,才能打造更具競爭力的 AI 產品。
四大平台定位比較
平台 類型 主要用途 Vercel 雲端部署平台 Next.js、React 專案部署 Cloudflare 全球邊緣運算平台 CDN、Workers、AI Gateway RepackAI AI 內容轉換平台 AI 自動產生跨平台內容 Esbuild JavaScript 打包工具 前端建置與編譯
因此這四套工具其實並非完全競爭關係,而是可互補搭配使用。
一、Vercel:AI 時代最熱門的前端部署平台
Vercel 官方網站
Vercel 是由 Next.js 團隊打造的雲端平台,主打:
Git 自動部署
Preview Environment
Serverless Functions
AI SDK
全球 CDN
AI Cloud
目前許多 AI SaaS 產品都直接部署在 Vercel 上。Vercel 提供 Git Push 即部署能力,能自動建立測試環境與正式環境,大幅降低 DevOps 門檻。
Vercel 優點
開發速度快
連接 GitHub 後即可自動部署。
Next.js 最佳化
與 Next.js 深度整合。
AI 生態完整
提供:
AI SDK
AI Gateway
V0
AI Agent Framework
逐步朝 AI Cloud 發展。
缺點
流量大時成本上升較快
Vendor Lock-in 較高
後端功能不如 Cloudflare 彈性
二、Cloudflare:AI Agent 時代的新霸主?
Cloudflare 官方網站
Cloudflare 原本是 CDN 廠商,但近年快速轉型成:
Serverless Platform
Edge Computing Platform
AI Inference Platform
目前已提供:
Workers
Pages
Durable Objects
R2 Storage
Vectorize
AI Gateway
MCP 支援
Cloudflare 的最大優勢是將 AI、儲存、運算、安全性整合在同一平台。
Cloudflare 優點
全球邊緣節點
超過 300 個以上節點。
成本極低
許多開發者由 Vercel 轉向 Cloudflare 的原因之一就是成本。
AI Agent 友善
Cloudflare 正積極投入:
MCP
AI Gateway
Agent Hosting
未來 AI Agent 部署極具潛力。
缺點
學習曲線較高
Next.js 支援仍不如 Vercel 完整
除錯較複雜
三、RepackAI:AI 行銷內容生成神器
RepackAI 官方網站
RepackAI 並不是部署平台。
它的定位比較像:
AI 內容工廠
使用者只需提供:
即可快速產生:
Facebook 貼文
Instagram 貼文
X(Twitter)內容
LinkedIn 內容
部落格文章
圖片素材
短影音素材
大幅降低內容行銷成本。
適合誰?
最大價值
當你使用 Vercel 或 Cloudflare 建立 AI 產品後,
RepackAI 可以協助你:
形成完整的流量成長循環。
四、Esbuild:極速打包工具
Esbuild 官方網站
Esbuild 是目前最受歡迎的新世代 JavaScript Bundler 之一。
其核心特色:
快
非常快。
Esbuild 採用 Go 語言開發,因此在編譯速度上遠超:
官方甚至表示許多情境下能快上數十倍。
功能
TypeScript 編譯
Tree Shaking
Minify
Code Splitting
ESM 轉換
CommonJS 轉換
適合
React
Vue
Svelte
Next.js
Node.js
為什麼重要?
AI 專案通常依賴大量套件:
LangChainOpenAI SDKSupabaseShadcn/UIReact
若建置速度太慢,
開發效率會大幅下降。
Esbuild 正是解決此問題的重要工具。
四大平台比較總表
項目 Vercel Cloudflare RepackAI Esbuild 類型 部署平台 邊緣運算平台 AI內容平台 打包工具 AI功能 ★★★★★ ★★★★★ ★★★★☆ ★☆☆☆☆ 部署速度 ★★★★★ ★★★★☆ 不適用 不適用 全球CDN ★★★★★ ★★★★★ 無 無 成本控制 ★★★☆☆ ★★★★★ ★★★★☆ 免費 學習曲線 低 中高 低 中 適合新創 ★★★★★ ★★★★☆ ★★★★☆ ★★★★★ 適合大型產品 ★★★★☆ ★★★★★ ★★★☆☆ ★★★★★
RepackAI 則負責自動產生 SEO 與社群內容,建立持續流量來源。
能行銷才是王者
2026 年的 AI 開發已經不只是模型競賽,而是整個開發與部署生態系的競爭。
Vercel 適合快速開發與 AI SaaS
Cloudflare 適合大型流量與 AI Agent
RepackAI 適合內容行銷自動化
Esbuild 適合提升前端建置效率
透過開發、部署、行銷三者整合,才能在 AI 時代建立可持續成長的產品與流量體系。
by Rain Chu | 12 月 25, 2025 | AI , Chat , 程式開發
以前建立一個網站往往代表著學寫程式、研究版型、反覆修改設計 ,對許多人來說門檻相當高。但現在,隨著 AI 技術成熟,網站製作正快速走向「對話化」。 Lumi AI 主打一個簡單卻強大的理念:你只需要與 AI 聊天,就能將腦中的想法,變成一個優雅且可行的網站。
什麼是 Lumi AI?
Lumi AI 是一款 AI 驅動的網站建立工具,使用者不需要任何設計或程式背景,只要透過對話方式,描述你的想法,例如:
「我想要一個新創公司形象網站」
「幫我做一個產品介紹頁,有現代感與科技風」
「我需要一個個人作品集網站」
Lumi 會根據你的描述,即時產生網站結構、版型與內容,讓「想法 → 網站」的距離縮短到幾分鐘。
Lumi AI 的核心特色
1️⃣ 與 AI 聊天,就能建立網站
Lumi 最大的特色在於對話式體驗 。你不需要面對複雜的後台設定,只要像聊天一樣說出需求,AI 就會一步步幫你完成網站雛形。
2️⃣ 將創意快速轉化為可行網站
從概念、版型到內容呈現,Lumi AI 會自動整合設計與結構,產生一個真正可以使用的網站 ,而不是只有概念草稿。
3️⃣ 優雅、現代的視覺設計
Lumi 預設產出的網站風格簡潔、現代,特別適合新創團隊、產品頁面、個人品牌與展示型網站。
4️⃣ No-Code,任何人都能上手
不論你是設計師、創業者、行銷人員,甚至是 Data Analyst,只要能清楚描述需求,就能用 Lumi AI 建立網站,完全不需要寫程式。
Lumi AI 與 Data AI、Data Analyst 的關聯
你可能會好奇,Lumi AI 和 Data AI、Data Analyst 有什麼關係?
實際上,Lumi AI 非常適合用來:
建立 資料分析成果展示網站
製作 Data Analyst 個人作品集(Portfolio)
快速生成 數據產品或 AI 專案的介紹頁
對 Data Analyst 而言,Lumi AI 能大幅降低「展示分析成果」的門檻,讓重點回到資料洞察本身,而非網站技術細節 。
Lumi AI 適合哪些人使用?
🚀 新創團隊 :快速驗證想法,建立產品或服務頁
🎨 設計與行銷人員 :用對話完成網站初稿
📊 Data Analyst / Data AI 專案負責人 :展示分析成果與案例
🧑💻 個人品牌經營者 :建立個人網站或作品集
官方網站
👉 https://lumi.new/zh-TW
by rainchu | 12 月 16, 2025 | AI , 程式開發
最新推出的 Cursor 2.2 ,不僅加入了備受期待的 視覺化編輯器(Visual Editor) ,更讓 Agent 能夠直接使用瀏覽器進行除錯 ,大幅提升前端與全端開發的效率與準確度。
這次更新不只是功能疊加,而是從「Agent 如何理解你的專案」出發,重新設計了日誌處理、視覺回饋與開發環境感知能力,讓 AI 不再只是聊天式輔助,而是真正融入你的開發流程。
視覺化編輯器:讓 Agent「看得見」你的畫面
過去,AI 在除錯前端問題時,往往只能依賴文字描述或程式碼推測 UI 狀態;在 Cursor 2.2 中,這個限制被徹底打破。
以圖片提供視覺回饋
Cursor 2.2 將 瀏覽器螢幕截圖 直接整合進檔案讀取工具中,Agent 能夠「實際看到」當前的瀏覽器狀態,而不是依靠抽象的文字敘述。
這項能力帶來的好處包括:
更精準理解版面配置與 UI 元件位置
更容易發現 CSS、RWD、遮擋或互動錯誤
大幅降低人為描述與 AI 理解之間的落差
對前端工程師而言,這代表 UI 除錯不再是猜測,而是視覺對齊 。
高效的日誌處理:Token 使用量大幅下降
在大型專案中,瀏覽器日誌往往又多又雜,過去 AI 必須讀取並總結大量輸出,既耗時又耗 token。
瀏覽器日誌寫入檔案,Agent 精準讀取
Cursor 2.2 將瀏覽器日誌直接寫入檔案,Agent 可以:
使用 grep 搜尋特定錯誤或關鍵字
只讀取「需要的行數」,而非整段輸出
在保留完整上下文的同時,將 token 使用量降到最低
這讓 Agent 的行為更像一位資深工程師,而不是一次看完所有 log 的新手。
智慧提示:更聰明地理解日誌內容
除了能選擇性讀取,Cursor 2.2 還進一步強化 Agent 的判斷能力 。
額外上下文資訊輔助決策
Agent 在讀取日誌前,會先取得:
這讓 Agent 能夠更聰明地決定:
是否需要深入檢查
應該查看哪一段
哪些資訊其實可以忽略
結果就是:更少無意義讀取,更快定位問題 。
開發伺服器感知能力:避免重複啟動與連接錯誤
在本地開發時,最常見的問題之一就是:
「伺服器其實已經在跑,但工具又幫你開了一個新的。」
Cursor 2.2 對此給出了解法。
自動偵測正在執行的開發伺服器
Agent 會被提示去偵測目前系統中:
因此它能:
直接連線到正確的服務
避免啟動重複的伺服器
不再「猜測」port
這對使用 Vite、Next.js、React、Vue 或後端 API 專案的開發者來說,體驗提升非常明顯。
為什麼 Cursor 2.2 是 Vibe Coding 的關鍵里程碑?
Cursor 2.2 的核心價值不只是「功能更多」,而是:
Agent 能 看懂畫面
Agent 能 精準讀 log
Agent 能 理解你的開發環境
Agent 更像一位真正參與專案的工程夥伴
你只要專注在設計與邏輯,AI 負責觀察、分析與除錯。
如果你正在尋找一個能真正提升開發節奏的 AI 編輯器,Cursor 2.2 絕對值得親自體驗。
👉 官方網站:https://cursor.com/zh-Hant/home 👉 功能說明:https://cursor.com/zh-Hant/docs/agent/browser#browser
by Rain Chu | 9 月 21, 2025 | AI , Prompt , 程式開發 , 繪圖
Google I/O 2025 上,Google 推出了名為 Stitch 的全新 AI 工具,目標是用文字或圖片提示(prompt / image prompt)快速生成網頁與 App 的 UI 設計與前端程式碼。Stitch 結合 Gemini 2.5 Pro 與 Flash 模型,並支持 Figma 匯出與 IDE 編輯,雖不是要取代專業設計工具如 Figma,但它能大幅簡化設計初期流程,是設計師與前端開發者的新利器。以下詳細介紹功能、優勢與使用心得。
功能特色與技術細節
從文字或圖片提示產生 UI + 前端程式碼
用戶可以用簡單的中英文描述(這真的是google模型的好處),例如「建立一個深色主題的行動 app 登入頁面,有按鈕和表單欄位」來生成設計。
或者上傳草圖、線框圖(wireframe)或其他 UI 的範例圖片來作為參考。Stitch 會根據這些提示產生對應設計。
整合 Gemini 2.5 Pro/Flash 模型 + 主題與設計流程工具
Stitch 是由 Google Labs 實驗性專案(experimental tool)之一,背後運行的是 Gemini 2.5 Pro 模型,這使得生成的 UI 設計在色彩、佈局與細節上更乾淨與現代感。
提供主題(theme)選擇、樣式(style)調整等交互功能;可視化設計流程內建 Canvas,可以看到完整頁面流程與介面切換模式。
輸出與匯出支持:HTML/CSS/Figma 等
Stitch 可以匯出為 HTML / CSS 程式碼,讓開發者能夠「拿來就用」於前端專案當中。
同時有「Paste to Figma」或「Copy to Figma」功能,可將設計匯入 Figma 進行進一步編輯。
Stitch 的定位與比較優勢
輔助工具,而非全面取代設計平台 :Stitch 的設計是為了縮短「從構思到原型 UI +程式碼」之間的落差,而不是完全取代專業設計師在 Figma、Sketch、Adobe XD 等工具中的工作。設計師仍可用這些工具做精細調整。
速度與效率 :使用 Stitch 生成 UI 設計/前端程式碼所需時間比從零開始設計加寫碼快很多,對於初期原型與快速驗證需求特別有用。
可訪問性 :Stitch 在 Google Labs 平台上可用,用戶界面相對友好,降低新手與非設計背景者的進入門檻。
限制與要注意的地方
雖然 Stitch 支持匯出至 Figma,但某些情況(如從上傳圖片/草圖的模式)之下,Figma 匯出功能尚未全功能完善。
設計細節(例如文字對齊、某些複雜元件組件化)有時候不完美,需要人工修正。
現階段仍為實驗性/預覽模式(experimental / Labs),可能在某些瀏覽器支援或功能穩定性上有差異。
使用流程簡易指南
前往 Stitch 官方網站 (stitch.withgoogle.com)並登入 Google 帳號。
選擇撰寫 prompt 或上傳參考圖片/草圖/線框圖。描述顏色、風格、佈局等細節。
等待 Stitch 生成 UI 設計與初步程式碼(HTML/CSS)。
若要匯出至 Figma,可使用「Copy to Figma / Paste to Figma」功能以便進一步編輯。
若為開發者,可直接取出 HTML/CSS 並嵌入 IDE 或網頁專案中。
Google Stitch 的收費/使用限額情況
從目前公開資訊來看,Google Stitch 屬於 Google Labs 的實驗性工具(beta 或公測階段),目前是免費使用 ,但有一些使用次數與模式上的限額/差異。下面是具體情況:
模式 免費與否 每月生成次數限額 Standard Mode(Flash 模式) 免費 每帳號每月約 350 次生成 │ 適合一般快速原型與草圖生成,可匯出 Figma 或 Code。 Experimental Mode(實驗/Pro 模式) 免費 每帳號每月約 50 次生成 │ 使用更強的 Gemini 2.5 Pro 模型;目前部分功能(如匯出 Figma)或效能有些限制。
參考資料
VIDEO
by Rain Chu | 8 月 8, 2025 | Agent , AI , Javascript , Python , RPA , 瀏覽器 , 程式開發
想用 AI 控制網頁自動化,但程式碼又要精準可靠,同時享受自然語言,高效又方便?那你絕不能錯過由 Browserbase 團隊推出的 Stagehand —— 這款專為 AI 時代設計的瀏覽器自動化框架,不僅支援 TypeScript 與 Python、可本地或雲端部署,還比 Browser‑Use 更快、更耐變動!
Stagehand 兼具控制力與智慧的 AI 瀏覽器自動化框架
Stagehand 是以 Playwright 為核心構建的 AI-native 自動化工具,它加入了 LLM 判斷能力,結合程式精準控制與自然語言指令,令自動化腳本更穩定、更智慧也更高效
自然語言 + 程式碼混合操作 :你可以用程式寫明確動作,也能用「act(‘點擊第一個 Stagehand 元件’)」這樣類人語法完成UI操作 。
接口完整,支援察看、執行與資料萃取 :核心三大命令 act、observe、extract,讓操作更透明、更可控
容錯與自恢復能力 :UI 略有變動也不怕,Stagehand 的 observe + 快取策略讓腳本更具彈性
完美整合 Playwright :所有 Playwright 腳本都能無縫升級 Stagehand,省心又高效
核心玩法!TypeScript/JavaScript 快速上手範例
// Use Playwright functions on the page object
const page = stagehand.page;
await page.goto("https://github.com/browserbase");
// Use act() to execute individual actions
await page.act("click on the stagehand repo");
// Use Computer Use agents for larger actions
const agent = stagehand.agent({
provider: "openai",
model: "computer-use-preview",
});
await agent.execute("Get to the latest PR");
// Use extract() to read data from the page
const { author, title } = await page.extract({
instruction: "extract the author and title of the PR",
schema: z.object({
author: z.string().describe("The username of the PR author"),
title: z.string().describe("The title of the PR"),
}),
});
這段程式完整示範了初始化、導航、AI 驅動操作到資料萃取的流程,不僅省事,也大幅提升開發效率。
Stagehand 與 Browser-Use 比較
功能面 Stagehand(此文主角) Browser-Use 控制精準度 Token 級動作掌控 + 自然語言指令混合 攻擊角度偏自然語言,程式控制較弱 容錯能力 observe + 快取策略,對 DOM 變化更耐受缺少自恢復機制 雲端支援 原生整合 Browserbase,輕鬆雲端部署 需額外集成,無預設雲平台支援 語言支援 TypeScript / Python 主要依賴 Python AI 整合 天生結合 LLM,支援複雜任務拆解 依賴外部 LLM,不那麼一體化
只要先學四個指令,快速上手
指定去那一個網頁
goto():
# 初始化
page = stagehand.page
# 指定去那一個頁面
await page.goto("https://rain.tips/")
使用自然語言操作
act():
await page.act("點選確定按鈕");
抓取數據資料
extract():
post = await page.extract("取得標題")
預覽功能
observe():
links = await page.observe("找到頁面中的所有連結")
實戰快速導覽
安裝
# 用 pip
pip install stagehand python-dotenv
# 安裝playwright
python -m playwright install
# 裝 chromium 瀏覽器
python -m playwright install chromium
建立 .env
export BROWSERBASE_API_KEY="your_browserbase_api_key"
export BROWSERBASE_PROJECT_ID="your_browserbase_project_id"
export MODEL_API_KEY="your_model_api_key" # OpenAI, Anthropic, etc.
建立程式碼 main.py
import asyncio
import os
from stagehand import Stagehand, StagehandConfig
from dotenv import load_dotenv
load_dotenv()
async def main():
config = StagehandConfig(
env="BROWSERBASE",
api_key=os.getenv("BROWSERBASE_API_KEY"),
project_id=os.getenv("BROWSERBASE_PROJECT_ID"),
model_name="gpt-4o",
model_api_key=os.getenv("MODEL_API_KEY")
)
stagehand = Stagehand(config)
try:
await stagehand.init()
page = stagehand.page
await page.goto("https://docs.stagehand.dev/")
await page.act("click the quickstart link")
result = await page.extract("extract the main heading of the page")
print(f"Extracted: {result}")
finally:
await stagehand.close()
if __name__ == "__main__":
asyncio.run(main())
驗證與測試
若要用本地端的瀏覽器的話,可以改成下面的程式碼
import asyncio
import os
from dotenv import load_dotenv
from stagehand import StagehandConfig, Stagehand
load_dotenv()
async def main():
# 检查API密钥是否设置
api_key = os.getenv("OPENAI_API_KEY")
config = StagehandConfig(
env="LOCAL", # 本地运行
# AI模型配置 - 使用环境变量
model_name="gpt-4o-mini", # 使用更便宜的模型
model_api_key=api_key, # 从环境变量读取
# 本地运行配置
headless=False, # 显示浏览器窗口
verbose=3, # 详细日志
debug_dom=True, # DOM调试
)
# 使用配置创建Stagehand实例
stagehand = Stagehand(config)
# 初始化Stagehand(启动浏览器会话)
await stagehand.init()
# 获取页面对象,用于后续的页面操作
page = stagehand.page
await page.goto("https://rain.tips/")
# # 使用observe()取得文章的連結
blog_links = await page.observe("取得文章中的所有連結)
print(f"✅ Page link: {blog_links}")
await page.act(blog_links[0])
data_post_1 = await page.extract("取得文章的標題和內文")
print(f"✅ 文章資訊如下: {data_post_1}")
if __name__ == "__main__":
asyncio.run(main())
總結:為什麼 Stagehand 是下一代自動化框架?
語言直覺更自然,人類可理解
對 UI 變化具彈性、不易失效
結合 LLM,自動拆解任務,效率提升數倍
支援本地與雲端,開發與生產環境都得心應手
Stagehand 正重新定義瀏覽器自動化,不再只是死板指令,而是一場「程式控+AI 智能」的完美結合,無論對開發者或 AI 自動化愛好者,都是一大利器。快一起駕馭它,打造更強、更智慧的自動化流程!
參考資料
BrowserBase
GitHub Stagehand
Demo
開發說明文件
https://www.aivi.fyi/aiagents/introduce-stagehand
近期留言