Open Design AI開源設計課程

上門AI教學課程內容

Open Design AI開源設計課程：兩小時精華班

 

課程簡介
本課程專為AI內容創作者、程式設計教師與數位行銷從業者設計，透過2小時實戰教學，讓學員快速掌握Open Design AI開源設計平台，從零部署到生成品牌級原型。Open Design是Claude Design的免費本地替代方案，支援Claude Code、Codex、Cursor等13+ CLI智能體，內建110種技能與141套設計系統，輸出HTML、PPTX、影片等格式，完全自託管保障隱私。學員將親手建置環境、實作landing page與儀表板原型，適用於課程設計、SEO工具demo與AI教學內容創作，無需雲端訂閱，立即提升設計自動化效率。

 

課程目標

• 理解Open Design架構與本地優勢，取代付費設計AI。

• 掌握5分鐘部署流程，自動偵測本地AI CLI。

• 實戰生成3類原型：網頁、簡報、互動儀表板。

• 自訂技能組合，應用於香港市場的品牌行銷與程式課程。

 

課程對象

• AI課程設計師與程式教師。

• 數位行銷專員與內容創作者。

• 初學Node.js開發者，具基本終端機操作經驗。

 

先修要求

• 安裝Node.js v24+與Git。

• 本地有Claude Code或Codex等AI CLI。

• 基本HTML/CSS概念。

 

詳細大綱

第一模組：平台介紹與環境準備

• 開場與Open Design生態
  講解開源起源（GitHub 3.4萬星）、Claude Design比較、本地優先理念、71套品牌系統與19-110種技能概覽。

• 環境檢查與安裝
  驗證Node/pnpm版本、git clone專案、pnpm install、corepack啟用，一鍵啟動web介面。
  示範自動偵測Cursor/Gemini CLI，BYOK金鑰設定。

• Q&A與常見錯誤排除
  處理pnpm版本衝突、防火牆阻擋、macOS/Windows差異。

第二模組：介面導覽與技能系統

• 核心UI操作
  探索React介面：技能清單、設計系統選擇（Neutral Modern/Apple風格）、沙箱預覽、HyperFrames互動。

• 模型整合實測
  切換Claude Code生成提示、Codex迭代程式碼，比較輸出品質。

• 技能組合入門
  示範單技能（web-prototype）與多技能（圖像+影片）串聯。

第三模組：實戰原型生成

• 實作1：科技公司Landing Page
  提示「使用Apple設計系統生成SaaS landing page，含英雄區、功能卡片、CTA按鈕」，即時預覽響應式HTML，導出PDF/PPTX。
  學員跟做，調整配色與元件。

• 實作2：行銷儀表板Dashboard
  輸入「Neutral Modern風格KPI儀表板，含折線圖、圓餅圖、資料表」，添加互動HyperFrames，測試行動端適配。

• 實作3：AI課程簡報原型
  生成「Python AI教學pitch deck，10頁幻燈片含程式碼範例」，導出MP4動態版本。

第四模組：進階應用與香港市場案例

• 自訂工作流
  整合SEO工具demo（如AEO優化頁面）、數位行銷landing page、多媒體課程原型（影像+動畫）。

• 企業部署技巧
  Vercel一鍵分享、SQLite資料庫管理、技能擴充。

• 成本優化與隱私
  比較雲端方案，強調零API費與本地安全。

第五模組：總結與延伸資源

• 學習收穫回顧與挑戰作業
  作業：自建香港品牌landing page，社群分享GitHub。

• 資源包與Q&A
  提供docs連結、Discord社群、進階影片（如Cursor整合）。

 

預期成果

學員結束後能獨立部署Open Design，2分鐘內生成專業原型，應用於AI課程大綱、行銷內容與程式教學，提升生產力3倍。歡迎報名體驗開源設計革命！