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
by Rain Chu | 4 月 21, 2025 | AI , Chat , 程式開發 , 語音辨識
GibberLink 是一項創新的開源專案,讓 AI 助理之間以更高效的方式進行音頻對話。這項技術於 2025 年的 ElevenLabs 倫敦黑客馬拉松中脫穎而出,獲得了全球首獎。
🔍 GibberLink 是什麼?
GibberLink 是由 Boris Starkov 和 Anton Pidkuiko 兩位開發者在黑客馬拉松期間開發的開源專案。其核心理念是讓 AI 助理在識別到對方也是 AI 時,切換到一種更高效的通訊協議,使用聲波傳輸結構化數據,而非傳統的人類語言。這種方式不僅提高了通訊效率,還減少了計算資源的消耗。
⚙️ GibberLink 的運作原理
初始對話 :兩個 AI 助理以人類語言開始對話。
身份識別 :當其中一方識別到對方也是 AI 助理時,提出切換到 GibberLink 模式。
協議切換 :雙方同意後,切換到使用聲波傳輸數據的通訊協議。
數據傳輸 :利用開源的 ggwave 庫,將結構化數據編碼為聲波信號,進行高效的數據交換。
這種方式類似於早期撥號調製解調器的數據傳輸,但經過現代化的優化,更適合當前的 AI 通訊需求。
🔐 AI 加密對話的實現
GibberLink 不僅提高了通訊效率,還注重數據的安全性。在進行聲波數據交換時,AI 助理會使用非對稱加密技術(如 P-256 密鑰對)進行加密,確保通訊內容的保密性和完整性。這種端對端的加密方式,即使通訊被攔截,也無法解密其中的內容。
🌐 如何體驗 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.安裝相依套件並啟動專案
啟動後,您可以透過瀏覽器訪問 http://localhost:3003 來使用 GibberLink。
參考資料
by Rain Chu | 2 月 23, 2025 | AI , Chat , 模型 , 程式開發
Cherry Studio 是一款功能強大的桌面客戶端,可以為使用者提供多模型對話、知識庫管理、AI 繪圖、翻譯等全方位的 AI 助手服務,其高度自訂的設計、強大的擴充能力和友善的使用者體驗,使其成為專業使用者和 AI 愛好者的理想選擇。
核心功能與特色
多模型對話支援 :Cherry Studio 集成了多種大型語言模型(LLM)服務商,如 OpenAI、Gemini、Anthropic、Azure 等,使用者可以在同一平台上調用不同模型,滿足多樣化需求。
豐富的 AI 助手與對話功能 :
預配置助手 :內建超過 300 個行業專用助手,涵蓋翻譯、程式設計、寫作等領域,使用者也可自訂助手。
多模型同時對話 :支援同一問題通過多個模型同時生成回覆,方便使用者比較不同模型的表現。
對話管理 :自動分組管理對話記錄,支援對話匯出為多種格式(如 Markdown、PDF 等),便於儲存與分享。
文件與資料處理 :
多格式支援 :支援匯入 PDF、DOCX、PPTX、XLSX、TXT、MD 等多種檔案格式,方便使用者建構和查詢專屬知識庫。
資料來源多樣性 :支援本機檔案、網址、網站地圖甚至手動輸入內容作為知識庫來源。
知識庫匯出 :處理後的知識庫可匯出並分享給他人使用。
實用工具整合 :
AI 繪圖 :提供專用繪圖面板,使用者可通過自然語言描述生成高品質圖像。
翻譯功能 :支援專用翻譯面板、對話翻譯、提示詞翻譯等多種翻譯場景。
全域搜尋 :快速定位歷史記錄和知識庫內容,提升工作效率。
使用者體驗提升 :
跨平台支援 :相容 Windows、macOS 和 Linux 系統,滿足不同使用者的需求。
即裝即用 :無需複雜的環境配置,下載後即可使用。
介面自訂 :支援自訂 CSS、對話佈局、頭像和側邊欄選單,打造個性化的使用體驗。
適用場景
知識管理與查詢 :通過本機知識庫功能,快速建構和查詢專屬知識庫,適用於研究、教育等領域。
多模型對話與創作 :支援多模型同時對話,幫助使用者快速獲取資訊或生成內容。
翻譯與辦公自動化 :內建翻譯助手和檔案處理功能,適合需要跨語言交流或文件處理的使用者。
AI 繪圖與設計 :通過自然語言描述生成圖像,滿足創意設計需求。
公開原始碼
近期留言