開源版 Claude Design！完全免費的 Open Design 強大功能實測：網站、簡報、Dashboard 靠 AI 一鍵生成，連 SVG 動畫都能做

過去不論是建置網站原型、互動式 Dashboard 設計或製作簡報排版，往往需要在多種工具之間來回切換，不只得花時間處理版面細節，還需要一定的設計與前端基礎。近年隨著生成式 AI 快速發展，像是 Claude Design、Google Stitch 等 AI 設計工具，也開始透過提示詞生成網站與介面設計，大幅簡化過往繁瑣流程，不過，這兩項工具仍存在收費限制，或只能綁定特定模型與平台使用。

文章目錄

1. 什麼是 Open Design？
2. 跨模型設定連接 Gemini CLI
3. 下載安裝、中文介面設定一次完成
4. 透過對話快速生成可編輯的專業簡報
5. 利用自然語言建立高質感網站雛形
6. 無痛打造專屬的互動式 Dashboard
7. 不會寫程式，也能設計 SVG 動畫效果

對此，本次特企將介紹近日在社群中相當受到矚目的免費開源設計平台－ Open Design，透過實際操作，帶大家一步步體驗 Open Design 的安裝設定、多模型串接，以及網站、簡報與 Dashboard 等不同情境應用。

什麼是 Open Design？

近年 AI 設計工具快速進化，從單純的圖片生成、版型排版，到如今已經開始進入「AI 代理」時代，而 Open Design 正是近期討論度相當高的新型態 AI 設計平台。它本質上並不是單一 AI 模型，而是一套開源的 AI 設計工作流系統，能將 Claude、Gemini、Codex 等不同大型語言模型整合進同一套設計環境中，讓 AI 正式參與整個設計與前端開發流程。

可以做到哪些事？

Open Design 最大的特色在於，它不只是單純幫你畫圖，而是試圖讓 AI 參與整個數位設計流程，舉例來說，當使用者輸入「幫我設計一個科技感產品發表頁面」，系統不只會生成視覺稿，還可能同步建立版型架構、互動元件、Hero Banner、色彩系統，甚至直接輸出對應的 React 前端程式碼。它背後的運作邏輯，其實很接近近年相當熱門的「Agentic Workflow（代理式工作流）」概念，也就是 AI 不再只是單一步驟回應，而是能拆解任務、串接工具，再一步步完成整體工作流程。

得利於 Open Design 內建大量可重複使用的 Skills與Design Systems，使用者可以快速套用不同風格的設計語言，例如極簡科技風、Apple 風格、SaaS 產品頁、現代 Dashboard 等，並透過自然語言快速修改細節，對於不熟 Figma、CSS，或沒有完整設計背景的人來說，能大幅降低製作門檻。此外，它也支援跨模型工作模式，例如可以使用 Gemini CLI 作為推理核心，再搭配 Claude 處理長文脈絡，甚至透過 Codex 生成程式碼，這種模型混搭能力，也是目前不少封閉式 AI 工具較難做到的地方。

▲ 平台內建大量 Design System 範本，可快速套用不同品牌與網站風格，大幅縮短 UI 設計時間。

相較 Claude Design 有何不同？

簡單來說，Claude Design 是由 Anthropic 官方打造的 AI 設計工作平台，而 Open Design 則主打「開源架構」與「多模型整合」的 Claude Design 替代方案。前者最大的優勢，在於整合體驗相當完整，由於它直接建立在 Claude 生態系之上，因此在上下文理解、長篇推理，以及 Skill 工作流整合方面相當成熟，整體穩定性與完成度也比較高，尤其 Claude 近期推出的 Skills 功能，讓AI 開始具備「記住工作流程」與「自動套用規則」的能力，只不過，Claude Design 目前仍偏向封閉式平台，模型與系統控制權主要掌握在官方手上，能自訂的範圍有限。

相對地，Open Design 則完全走不同方向，它更強調開源、模組化與自由擴充，使用者可以自行選擇 AI 模型、建立自己的設計系統，甚至串接本機 CLI 與外部 MCP 工具，對進階使用者與開發者來說，自由度明顯更高，也更容易建立符合自己需求的工作流，不過也因為需要自行設定環境、安裝 CLI、理解 AI 工作流概念，因此初期操作相對複雜一些。

▲ Open Design 支援 CLI 與 BYOK 兩種模型連線方式，使用者可自由切換 Gemini、Claude Code、Codex 等不同 AI 代理工具。

跨模型設定連接 Gemini CLI

如前文所述，Open Design 最大的特色之一，在於能串接不同 AI 模型作為背後的生成引擎，目前支援兩種 AI 模型連線方式，分別是「CLI」與「BYOK（Bring Your Own Keys）」，前者是透過本機命令列（又稱終端機）工具直接串接 AI 模型，後者則是自行輸入 API Key 進行連線。由於 BYOK 設定流程相對複雜，也較容易遇到權限、額度或 API 設定問題，因此更建議先從 CLI 方式開始上手。本篇將以 Mac 電腦作為安裝範例，一步步完成 Gemini CLI 環境建置，包含安裝 Homebrew、Node.js，以及 Gemini CLI 本體，最後再登入 Google 帳號完成授權。若是 Windows 用戶可參考敝社 YT 頻道連結的影片教學。

● Homebrew 下載連結：https://brew.sh/

● Node.js 下載連結：https://nodejs.org/en/download

● Gemini CLI 下載連結：https://github.com/google-gemini/gemini-cli

● Windows 用戶 Gemini CLI 教學影片：https://reurl.cc/Q2gQNb

步驟 1：安裝 Gemini CLI 前，第一步需先進入 Homebrew 官網，複製對應的安裝指令。

步驟 2：Mac 可按下「Cmd + 空格鍵」叫出 Spotlight，鍵入並搜尋「Terminal」，開啟終端機準備執行安裝指令。

步驟 3：接著將 Homebrew 官網提供的安裝指令貼到終端機後，按下 Enter 開始安裝。

步驟 4：再來進入 Node.js 頁面，確認上方選項為最新的 LTS 版本，並選擇「macOS」，透過「Brew」且包含「npm」架構，下載後開啟檔案，依指示完成安裝。

步驟 5：進入 Gemini CLI 的 GitHub 頁面，找到 Quick Install，複製 Homebrew 欄位的「brew install gemini-cli」指令，回到終端機貼上和按下 Enter。

步驟 6：跑完安裝流程後，下一步在終端機命令列輸入「Gemini」、按下 Enter，便能進入 Gemini CLI 的主畫面。

步驟 7：首次執行 Gemini CLI 時，macOS 可能會跳出權限要求，點選「允許」即可，若出現資料夾信任提示，選擇「Trust folder」即可繼續執行 Gemini CLI。

步驟 8：進入 Gemini CLI 介面後，直接選擇「Sign in with Google」進行登入授權。

步驟 9：接著會跳出瀏覽器授權的詢問畫面，選擇「Yes」並按下 Enter 即可。

步驟 10：選擇欲登入的 Google 帳號後，即可開始進行 Gemini CLI 驗證流程。

步驟 11：當畫面出現「驗證成功」後，即代表 Gemini CLI 已完成授權與帳號連線。

下載安裝、中文介面設定一次完成

接下來便要安裝 Open Design，相較過去需要透過 GitHub 手動部署專案與安裝相應套件的繁瑣流程，如今 Open Design 已提供官方桌面版，整體安裝門檻降低不少，即便沒有程式背景也能快速上手。本次將以 Mac 版作為示範，Windows 的安裝流程其實也大同小異，只要下載對應系統版本的安裝檔即可。要留意的是，由於 Open Design 目前仍屬新興 AI 設計平台，在首次安裝時，可能會跳出「無法驗證開發者」或安全性警告，這屬於系統正常保護機制，並不代表程式有問題，只需到系統設定中的「隱私權與安全性」允許開啟即可。

● Open Design 官網連結：https://open-design.ai/

步驟 1：首先，進入 Open Design 官網後，點選「Download desktop」即可下載對應系統版本的桌面安裝程式。

步驟 2：接著下拉畫面找到 macOS 與 Windows 版本的下載連結，Mac 用戶要注意需依照晶片型號選擇對應的 DMG 檔案。

步驟 3：下載完成後開啟檔案，將 Open Design 拖曳至 Applications 資料夾即可完成安裝。

步驟 4：再來開啟 Open Design，首次進入可先從左下角切換介面語言，選擇繁體中文顯示。

步驟 5：另外，點擊右上角「齒輪圖示」，並開啟設定頁面中的「介面語言」，選擇繁體中文後，整體操作介面會立即完成切換。

透過對話快速生成可編輯的專業簡報

過去在製作簡報時，許多人最花時間的往往不是內容本身，而是反覆調整版面、配色、字體與圖片位置等細節。如今隨著 Open Design 等 AI 設計平台問世，除了能幫我們生成網站原型之外，也能直接利用自然語言快速產出高質感簡報，使用前只要先準備好簡報主題與相關素材，再透過提示詞描述簡報用途、頁面架構、重點內容與目標受眾，便能自動生成具備完整視覺風格的簡報版型。後續若想修改配色、字型大小或調整圖片位置，也不需要重新生成整份簡報，只需以對話方式下指令即可即時微調，操作上就像是在與設計師來回溝通，大幅降低簡報製作所需的時間成本。

步驟 1：首先回到主頁後，在左方選擇「投影片」模式，並輸入簡報主題名稱、設計系統後，選擇建立新專案。

步驟 2：接著匯入 PDF 素材後輸入提示詞，讓系統自動整理簡報內容架構。

步驟 3：過程中系統同樣會詢問播放的平台與對應的簡報比例、受眾與色彩風格，強化整體簡報方向。

步驟 4：另也提供多種視覺設計方向，能快速設立簡報的整體調性。

步驟 5：生成完成後，同樣可點擊預覽，並且能直接編輯標題等文字內容，也能以對話方式調整版面設計。

利用自然語言建立高質感網站雛形

接下來進入 Open Design 最核心的應用階段：直接透過自然語言生成網站原型。這次我們以「甜點／烘焙品牌網站」作為實作範例，示範如何從設計系統選擇、頁面規劃到提示詞撰寫，一步步建立完整網站架構，其中要注意的是，Open Design 提供「線框圖」與「高擬真」兩種生成模式，前者偏向網站架構與版面配置草稿，適合前期規劃流程與功能動線；後者則能直接產出接近真實網站的視覺效果，而提示詞內容越完整，生成成果通常也會越貼近需求，操作時系統還會主動詢問設計風格、版型偏好與互動需求，協助使用者釐清想法，整個過程相當接近與真正設計師來回溝通的體驗。

步驟 1：首先在 Open Design 的本機 CLI 介面，會看到安裝完成的 Gemini CLI 工具亮起來，使用前需先點選並測試檢查連通性，若測試失敗代表要更新到最新版本。

步驟 2：在實作前，為確保提示詞內容完整度，可先透過 ChatGPT 或 Gemini 等工具整理網站需求，並複製生成出的 Prompt 結果。

步驟 3：建立專案前，可先於 Open Design 左側「原型」區域選擇設計系統風格、平台類型與高擬真輸出模式，並按下「建立」。

步驟 4：接著將網站需求貼入輸入欄後送出，系統便會開始分析整體網站架構。

步驟 5：過程中，系統會詢問品牌風格、互動效果與視覺方向，細化網站設計需求。

步驟 6：再者也可針對品牌特色補充需求，像是強調季節限定商品或精品甜點氛圍，並選擇「傳送答案」。

步驟 7：同時還會針對視覺設計方向進一步詢問喜好，目前提供不同視覺風格參考，協助快速選擇網站整體設計語言。

步驟 8：網站生成完成後，系統會自動建立首頁、商品頁與品牌故事等 HTML 檔案，點擊後檔案即可於右方預覽區塊選擇「開啟」。

步驟 9：針對不符合需求的地方直接在對話框中，請 AI 重新替換修正，例如下圖範例直接上傳圖片並要求更換。

步驟 10：Open Design 會依照新圖片重新更新商品卡片與頁面內容，大幅提升修改效率。

步驟 11：除了可下指令讓 AI 協助修改外，也能進入編輯模式手動修改文字、版面與商品資訊內容。

無痛打造專屬的互動式 Dashboard

現在不少人會把數位儀表板拿來整理工作進度、追蹤專案數據，甚至當成個人的資訊中控台，但過去想做出一個兼具視覺感與互動性的 Dashboard，往往得熟悉前端開發、圖表工具與資料串接流程。然而，現如今也能利用 Open Design 搭配自然語言描述需求，快速生成具有互動效果的數位儀表板原型，使用者除了能指定版面配置與視覺風格，也能加入即時數據卡片、側邊選單、KPI 統計區塊等元素。後續若想調整配色、修改資訊排列，甚至調整圖表內容，也能直接透過對話或編輯器完成，大幅降低製作互動式 Dashboard 的門檻與時間成本。

步驟 1：在主頁面左方選擇「原型」，接著輸入 Dashboard 名稱，並選擇適合的設計系統與高擬真輸出後，建立新專案。

步驟 2：下一步匯入所需的分析資料 PDF 檔案後，可透過對話描述需求或直接點擊內建的「SaaS 分析儀表板」Skills，讓系統自動生成 Dashboard 架構。

步驟 3：再來可於跳出的問題中，點選法和需求的介面風格、資料內容來源、介面語言與導覽列佈局等選項。

步驟 4：等待約 3-5 分鐘，系統便依據上傳的財報內容生成對應的互動式 Dashboard 介面。

步驟 5：完成後可直接預覽，並手動修改數據卡片文字描述或透過指令調整版面配置。

不會寫程式，也能設計 SVG 動畫效果

除了網站、簡報與 Dashboard 設計外，Open Design 也能進一步應用在 SVG 動畫製作，一般來說，若想打造具互動感的動畫效果，往往需要具備 SVG、CSS Animation 甚至前端程式基礎，對一般使用者來說門檻相對較高。不過由於 Open Design 內建 Motion Frame 等 Skill 功能，因此基本上只要透過自然語言描述動畫需求，就能快速生成具備動態效果的 SVG 動畫內容，而且所有動畫與視覺元素本質上皆由程式碼繪製而成，因此後續修改方便，也很適合應用在網站互動效果，甚至是影片 B-roll 畫面與動態展示場景中，大幅提升內容的視覺互動感。