即時頁面分析
掃描即時 DOM，擷取 CSS 自訂屬性、computed styles、字型、陰影、邊框圓角、動畫、間距與 UI 模式，然後將這些結果轉為可貼入 AI coding 工具的 prompt。
為 vibe coding prompt 進行設計擷取
VibeDesign 是 Chrome 擴充功能與網頁應用，可將網站的視覺設計轉為 AI coding 工具的結構化 prompt。它會分析即時頁面以擷取顏色、字體、陰影、邊框圓角、動畫、間距與偵測到的 UI 模式等設計 token，接著產出可貼入 Claude Design、Replit、Bolt、Lovable 或 Figma Make 等工具的內容。
這個產品適合想比起模糊提示更精準地重現或轉譯網站外觀的人使用。它可在沒有 API key 的情況下產生 prompt，也支援在你連接 Gemini、Claude 或 OpenAI 後，加入可選的 AI 增強方向，提供更完整的書面設計簡報。
VibeDesign 會擷取與產生的內容
可直接貼上的輸出
根據擷取到的設計 token 產生結構化 prompt，並可複製到剪貼簿，或下載 JSON 以便在 Claude Design、Replit、Bolt、Lovable 和 Figma Make 等工具中重複使用。
聚焦模式
可將分析範圍縮小到顏色、字體、陰影、動態、版面或元件，當你只需要設計系統的某一部分時特別有用。
依網站自動還原
按網域儲存分析結果，因此在同一網站重新開啟擴充功能時，會自動還原先前的 prompt。
歷史與同步
本機保留匿名使用的歷史紀錄，並提供免費帳號以便跨裝置同步，以及可查看、存取與刪除過去分析內容的儀表板。
可選的 AI 方向
可透過選用的 Gemini、Claude 或 OpenAI key 加入書面的 Design Direction 區塊，同時也能完全在沒有任何 AI key 的情況下運作。
VibeDesign 適合的使用情境
重現網站風格
擷取網站的視覺語言，然後把產生的 prompt 貼到 AI builder 中，以比純文字描述更具體的方向重現外觀。
擷取特定設計 token
只分析顏色、字體、陰影、動態、版面或元件，當你需要在設計前先理解系統某一部分時特別實用。
檢視並管理 prompt 歷史
在多個網站之間持續保留分析紀錄，之後可在儀表板中重新查看或刪除項目，用於蒐集靈感或參考資料。
在匿名與同步工作流程間切換
需要快速單次分析時可使用免費匿名模式；若想跨裝置同步並從儀表板存取過去工作，則可登入。
以 AI 方向補強 token
當你希望產生的 prompt 除了原始 token 擷取之外，還包含書面的設計方向簡報時，可加入 Gemini、Claude 或 OpenAI key。
Pros and Cons
Pros
- 核心 prompt 產生功能可在沒有帳號或 API key 的情況下使用。
- 能從即時頁面擷取廣泛的設計 token 與 UI 模式。
- 可將 prompt 歷史紀錄儲存在本機，或在登入後跨裝置同步。
- 提供針對特定設計區域的聚焦分析模式，不必每次都執行完整擷取。
- 除了複製 prompt 之外，也能下載 JSON，方便重複使用與審閱。
Cons
- 價格頁面未提供定價資訊；在提供的來源中，該頁目前回傳 404。
- 部分功能，例如 AI 增強方向，取決於你自行連接 Gemini、Claude 或 OpenAI key。
FAQ
使用 VibeDesign 需要 API key 嗎？
不需要。網站說明這個擴充功能可在不需要 API key 的情況下運作，而規則式引擎可自行擷取設計 token 並產生結構化 prompt。可選的 API key 會額外加入一段設計方向說明。
我可以不建立帳號就使用嗎？
可以。首頁說明匿名模式可在沒有帳號的情況下使用，並提供本機歷史紀錄與每月 5 則 prompt 的限制。登入後則可啟用跨裝置同步歷史紀錄，以及存取儀表板。
VibeDesign 可以搭配哪些工具使用？
設定指南列出 Gemini、Claude 和 OpenAI 為可支援的 AI 提供者，用於可選的方向功能。產生的 prompt 可複製到 Claude Design、Replit、Bolt、Lovable 和 Figma Make。
API keys 如何處理？
隱私政策說明 API keys 只會儲存在你瀏覽器的本機儲存空間中，不會傳送到 VibeDesign 的伺服器。當你使用 AI 提供者時，token 會透過你的瀏覽器，使用你自己的 key 直接傳送到你選擇的提供者。
它會分析頁面上的哪些內容？
擴充功能會分析即時 DOM 中的設計 token，例如顏色、字型、陰影、邊框圓角、動畫與 UI 模式。FAQ 和隱私政策都指出，它不會收集頁面文字、表單輸入內容，或你未選擇分析的網站之外的瀏覽紀錄。
Quick Facts
- 分類
- 設計工具／開發者工具
- 平台
- Chrome 擴充功能 + 網頁儀表板
- 主要用途
- 將網站設計轉為 AI coding prompt
- 支援的輸出工具
- Claude Design、Replit、Bolt、Lovable、Figma Make
- 帳號需求
- 核心功能可選；同步與儀表板歷史紀錄需登入
- 來源網域
- vibedesign.tech
VibeDesign 替代品
Refero MCP
Refero MCP for AI agents connects an MCP-compatible agent to Refero’s curated library of web and iOS product interfaces and user flows. It helps agents research real design patterns before generating UI, with access included in the Refero Pro plan.
Pixso
Pixso 是一款新一代的 AI 原生 UI 設計工具，允許用戶一鍵生成設計草稿和代碼，是 Figma 的國內替代品。
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Napkin AI
Napkin AI 將文字轉成可編輯視覺圖，適用於簡報、文件與可分享內容；支援以文字優先生成，並可協作後匯出為 PPT、PNG、SVG 或 PDF。
Wowable
Wowable 是一款 AI 網站建立工具，可將 Google Maps 名單、社群檔案、截圖與其他公開商家資訊快速轉成可預覽、可編輯並可發布的網站，另有免費預覽方案與付費自訂網域及成長功能。
okkslides
okkslides is an AI presentation maker that creates and edits business slide decks from prompts, documents, outlines, or existing PowerPoint files. It supports template-based generation, natural-language edits, and export to PowerPoint.