Select Page

OpenCode 如何使用本地端模型

打開 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

2026 AI 專案上線該選誰?Vercel、Cloudflare、RepackAI 與 Esbuild 深度分析

本文將分析目前相當熱門的四套工具與平台:

  • Vercel
  • Cloudflare
  • RepackAI
  • Esbuild

雖然這四者常被一起提及,但實際上定位完全不同。

有些是部署平台,有些是 AI 開發工具,有些則是前端打包工具。

了解它們之間的差異,才能打造更具競爭力的 AI 產品。


四大平台定位比較

平台類型主要用途
Vercel雲端部署平台Next.js、React 專案部署
Cloudflare全球邊緣運算平台CDN、Workers、AI Gateway
RepackAIAI 內容轉換平台AI 自動產生跨平台內容
EsbuildJavaScript 打包工具前端建置與編譯

因此這四套工具其實並非完全競爭關係,而是可互補搭配使用。


一、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 內容工廠

使用者只需提供:

  • 網址
  • YouTube 影片

即可快速產生:

  • Facebook 貼文
  • Instagram 貼文
  • X(Twitter)內容
  • LinkedIn 內容
  • 部落格文章
  • 圖片素材
  • 短影音素材

大幅降低內容行銷成本。

適合誰?

  • AI SaaS 團隊
  • 自媒體
  • 行銷公司
  • 電商團隊

最大價值

當你使用 Vercel 或 Cloudflare 建立 AI 產品後,

RepackAI 可以協助你:

  • 宣傳產品
  • 建立 SEO 文章
  • 經營社群媒體

形成完整的流量成長循環。


四、Esbuild:極速打包工具

Esbuild 官方網站

Esbuild 是目前最受歡迎的新世代 JavaScript Bundler 之一。

其核心特色:

非常快。

Esbuild 採用 Go 語言開發,因此在編譯速度上遠超:

  • Webpack
  • Babel
  • Rollup

官方甚至表示許多情境下能快上數十倍。

功能

  • TypeScript 編譯
  • Tree Shaking
  • Minify
  • Code Splitting
  • ESM 轉換
  • CommonJS 轉換

適合

  • React
  • Vue
  • Svelte
  • Next.js
  • Node.js

為什麼重要?

AI 專案通常依賴大量套件:

LangChainOpenAI SDKSupabaseShadcn/UIReact

若建置速度太慢,

開發效率會大幅下降。

Esbuild 正是解決此問題的重要工具。


四大平台比較總表

項目VercelCloudflareRepackAIEsbuild
類型部署平台邊緣運算平台AI內容平台打包工具
AI功能★★★★★★★★★★★★★★☆★☆☆☆☆
部署速度★★★★★★★★★☆不適用不適用
全球CDN★★★★★★★★★★
成本控制★★★☆☆★★★★★★★★★☆免費
學習曲線中高
適合新創★★★★★★★★★☆★★★★☆★★★★★
適合大型產品★★★★☆★★★★★★★★☆☆★★★★★

RepackAI 則負責自動產生 SEO 與社群內容,建立持續流量來源。


能行銷才是王者

2026 年的 AI 開發已經不只是模型競賽,而是整個開發與部署生態系的競爭。

  • Vercel 適合快速開發與 AI SaaS
  • Cloudflare 適合大型流量與 AI Agent
  • RepackAI 適合內容行銷自動化
  • Esbuild 適合提升前端建置效率

透過開發、部署、行銷三者整合,才能在 AI 時代建立可持續成長的產品與流量體系。

Lumi AI 是什麼?用聊天就能完成網站的 AI 建站工具介紹

Lumi AI 是什麼?用聊天就能完成網站的 AI 建站工具介紹

以前建立一個網站往往代表著學寫程式、研究版型、反覆修改設計,對許多人來說門檻相當高。但現在,隨著 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

Cursor 2.2 全新登場:視覺化編輯器與瀏覽器除錯,重新定義 Vibe Coding

Cursor 2.2 全新登場:視覺化編輯器與瀏覽器除錯,重新定義 Vibe Coding

最新推出的 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

Google Stitch 教學:如何用 AI 從文字與圖片提示快速生成前端 UI + 程式碼

Google Stitch 教學:如何用 AI 從文字與圖片提示快速生成前端 UI + 程式碼

Google I/O 2025 上,Google 推出了名為 Stitch 的全新 AI 工具,目標是用文字或圖片提示(prompt / image prompt)快速生成網頁與 App 的 UI 設計與前端程式碼。Stitch 結合 Gemini 2.5 Pro 與 Flash 模型,並支持 Figma 匯出與 IDE 編輯,雖不是要取代專業設計工具如 Figma,但它能大幅簡化設計初期流程,是設計師與前端開發者的新利器。以下詳細介紹功能、優勢與使用心得。

google stitch

功能特色與技術細節

  1. 從文字或圖片提示產生 UI + 前端程式碼
    • 用戶可以用簡單的中英文描述(這真的是google模型的好處),例如「建立一個深色主題的行動 app 登入頁面,有按鈕和表單欄位」來生成設計。
    • 或者上傳草圖、線框圖(wireframe)或其他 UI 的範例圖片來作為參考。Stitch 會根據這些提示產生對應設計。
  2. 整合 Gemini 2.5 Pro/Flash 模型 + 主題與設計流程工具
    • Stitch 是由 Google Labs 實驗性專案(experimental tool)之一,背後運行的是 Gemini 2.5 Pro 模型,這使得生成的 UI 設計在色彩、佈局與細節上更乾淨與現代感。
    • 提供主題(theme)選擇、樣式(style)調整等交互功能;可視化設計流程內建 Canvas,可以看到完整頁面流程與介面切換模式。
  3. 輸出與匯出支持: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),可能在某些瀏覽器支援或功能穩定性上有差異。

使用流程簡易指南

  1. 前往 Stitch 官方網站(stitch.withgoogle.com)並登入 Google 帳號。
  2. 選擇撰寫 prompt 或上傳參考圖片/草圖/線框圖。描述顏色、風格、佈局等細節。
  3. 等待 Stitch 生成 UI 設計與初步程式碼(HTML/CSS)。
  4. 若要匯出至 Figma,可使用「Copy to Figma / Paste to Figma」功能以便進一步編輯。
  5. 若為開發者,可直接取出 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)或效能有些限制。

參考資料

Stagehand 教學|AI 驅動的瀏覽器自動化神器,TypeScript 與 Python 都支援!

想用 AI 控制網頁自動化,但程式碼又要精準可靠,同時享受自然語言,高效又方便?那你絕不能錯過由 Browserbase 團隊推出的 Stagehand —— 這款專為 AI 時代設計的瀏覽器自動化框架,不僅支援 TypeScript 與 Python、可本地或雲端部署,還比 Browser‑Use 更快、更耐變動!

Stagehand 兼具控制力與智慧的 AI 瀏覽器自動化框架

Stagehand 是以 Playwright 為核心構建的 AI-native 自動化工具,它加入了 LLM 判斷能力,結合程式精準控制與自然語言指令,令自動化腳本更穩定、更智慧也更高效

  • 自然語言 + 程式碼混合操作:你可以用程式寫明確動作,也能用「act(‘點擊第一個 Stagehand 元件’)」這樣類人語法完成UI操作 。
  • 接口完整,支援察看、執行與資料萃取:核心三大命令 actobserveextract,讓操作更透明、更可控
  • 容錯與自恢復能力: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())

驗證與測試

python main.py 

若要用本地端的瀏覽器的話,可以改成下面的程式碼

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