Select Page
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

GibberLink 教學:實現 AI 助理之間的加密音頻對話

GibberLink 教學:實現 AI 助理之間的加密音頻對話

GibberLink 是一項創新的開源專案,讓 AI 助理之間以更高效的方式進行音頻對話。​這項技術於 2025 年的 ElevenLabs 倫敦黑客馬拉松中脫穎而出,獲得了全球首獎。

🔍 GibberLink 是什麼?

GibberLink 是由 Boris Starkov 和 Anton Pidkuiko 兩位開發者在黑客馬拉松期間開發的開源專案。​其核心理念是讓 AI 助理在識別到對方也是 AI 時,切換到一種更高效的通訊協議,使用聲波傳輸結構化數據,而非傳統的人類語言。​這種方式不僅提高了通訊效率,還減少了計算資源的消耗。

⚙️ GibberLink 的運作原理

  1. 初始對話:​兩個 AI 助理以人類語言開始對話。
  2. 身份識別:​當其中一方識別到對方也是 AI 助理時,提出切換到 GibberLink 模式。
  3. 協議切換:​雙方同意後,切換到使用聲波傳輸數據的通訊協議。
  4. 數據傳輸:​利用開源的 ggwave 庫,將結構化數據編碼為聲波信號,進行高效的數據交換。

這種方式類似於早期撥號調製解調器的數據傳輸,但經過現代化的優化,更適合當前的 AI 通訊需求。​

🔐 AI 加密對話的實現

GibberLink 不僅提高了通訊效率,還注重數據的安全性。​在進行聲波數據交換時,AI 助理會使用非對稱加密技術(如 P-256 密鑰對)進行加密,確保通訊內容的保密性和完整性。​這種端對端的加密方式,即使通訊被攔截,也無法解密其中的內容。

🌐 如何體驗 GibberLink?

  • 線上體驗:​訪問 gbrl.ai,在兩個設備上打開該網站,即可觀察 AI 助理之間的音頻對話。
  • 開源代碼:​GibberLink 的完整代碼已在 GitHub 上開源,地址為 github.com/PennyroyalTea/gibberlink。​

🏆 為何值得關注?

  • 高效通訊:​GibberLink 模式下的 AI 對話比傳統語音通訊快約 80%,大幅提升了通訊效率。
  • 資源節省:​減少了語音生成和語音識別的計算資源消耗,降低了運營成本。
  • 安全保障:​採用先進的加密技術,確保通訊內容的安全性。
  • 開源共享:​開源的特性使得開發者可以自由使用、修改和擴展該技術。

🔧 GibberLink 安裝與本地部署教學

GibberLink 是一個開源專案,您可以在本地環境中部署並體驗 AI 之間的聲音通訊。​

1. 安裝 Node.js(建議版本:v20)

GibberLink 需要 Node.js 環境,建議使用 v18.18.0 或更高版本。以下是使用 NVM 安裝 Node.js 的步驟:

curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20
nvm alias default 20  # 可選,將 Node.js 20 設為預設版本

2.下載並設定 GibberLink 專案

git clone https://github.com/PennyroyalTea/gibberlink.git
cd gibberlink
mv example.env .env

並且編輯 .env 檔案,填入您的 ElevenLabs 和 LLM 提供者的 API 金鑰。​

3.安裝相依套件並啟動專案

npm install
npm run dev

啟動後,您可以透過瀏覽器訪問 http://localhost:3003 來使用 GibberLink。​

參考資料

Cherry Studio:多模型 AI 助手,提升工作效率的全能桌面客戶端

Cherry Studio:多模型 AI 助手,提升工作效率的全能桌面客戶端

Cherry Studio 是一款功能強大的桌面客戶端,可以為使用者提供多模型對話、知識庫管理、AI 繪圖、翻譯等全方位的 AI 助手服務,其高度自訂的設計、強大的擴充能力和友善的使用者體驗,使其成為專業使用者和 AI 愛好者的理想選擇。

核心功能與特色

  1. 多模型對話支援:Cherry Studio 集成了多種大型語言模型(LLM)服務商,如 OpenAI、Gemini、Anthropic、Azure 等,使用者可以在同一平台上調用不同模型,滿足多樣化需求。
  2. 豐富的 AI 助手與對話功能
    • 預配置助手:內建超過 300 個行業專用助手,涵蓋翻譯、程式設計、寫作等領域,使用者也可自訂助手。
    • 多模型同時對話:支援同一問題通過多個模型同時生成回覆,方便使用者比較不同模型的表現。
    • 對話管理:自動分組管理對話記錄,支援對話匯出為多種格式(如 Markdown、PDF 等),便於儲存與分享。
  3. 文件與資料處理
    • 多格式支援:支援匯入 PDF、DOCX、PPTX、XLSX、TXT、MD 等多種檔案格式,方便使用者建構和查詢專屬知識庫。
    • 資料來源多樣性:支援本機檔案、網址、網站地圖甚至手動輸入內容作為知識庫來源。
    • 知識庫匯出:處理後的知識庫可匯出並分享給他人使用。
  4. 實用工具整合
    • AI 繪圖:提供專用繪圖面板,使用者可通過自然語言描述生成高品質圖像。
    • 翻譯功能:支援專用翻譯面板、對話翻譯、提示詞翻譯等多種翻譯場景。
    • 全域搜尋:快速定位歷史記錄和知識庫內容,提升工作效率。
  5. 使用者體驗提升
    • 跨平台支援:相容 Windows、macOS 和 Linux 系統,滿足不同使用者的需求。
    • 即裝即用:無需複雜的環境配置,下載後即可使用。
    • 介面自訂:支援自訂 CSS、對話佈局、頭像和側邊欄選單,打造個性化的使用體驗。

適用場景

  • 知識管理與查詢:通過本機知識庫功能,快速建構和查詢專屬知識庫,適用於研究、教育等領域。
  • 多模型對話與創作:支援多模型同時對話,幫助使用者快速獲取資訊或生成內容。
  • 翻譯與辦公自動化:內建翻譯助手和檔案處理功能,適合需要跨語言交流或文件處理的使用者。
  • AI 繪圖與設計:通過自然語言描述生成圖像,滿足創意設計需求。

公開原始碼