Tempo Labs AI編程課程

上門編程教學課程內容

課程簡介

本課程專注於 Tempo Labs 這款 AI 驅動 React 應用開發平台，讓設計師與開發者能在三小時內透過拖放視覺編輯器，直接操作 React 程式碼，快速構建前端介面並與 GitHub 同步。Tempo 提供 Figma 般的視覺化編輯體驗，同時保留完整的程式碼控制權，支援 Storybook 元件匯入、AI 錯誤修復與即時 VS Code 編輯。課程強調實作導向，學員將從現有程式碼庫或空白專案開始，透過視覺調整與 AI 輔助，完成一個具商業價值的儀表板或登陸頁，體驗「設計 × 開發無縫協作」的未來工作流。

課程目標

1. 掌握 Tempo 的視覺編輯器與 React 程式碼同步操作。

2. 能匯入 Storybook 元件庫並建立自訂設計系統。

3. 學習 AI 自動錯誤修復、GitHub 整合與 VS Code 雙向編輯。

4. 完成具響應式設計與動態互動的前端專案。

5. 建立「設計師 × 開發者協作」的工作模式，提升團隊效率。

適合對象

• 前端開發者、UI/UX 設計師或產品經理。

• React 開發者，希望提升視覺化編輯與協作效率。

• 設計轉開發或開發轉設計的混合角色人員。

• 企業前端團隊，欲導入視覺化程式碼工具與設計系統管理。

課程時長與授課方式

• 全長 3 小時。

• 理論講解約 25%，實作操作約 75%。

• 使用 Tempo Labs 網頁平台（支援 GitHub 認證，無需本地安裝）。

• 教學形式：環境設定、講師示範、個人實作與成果分享。

課程大綱

第一部分：Tempo Labs 平台導覽與環境設定（約 40 分鐘）

• Tempo 核心特色：視覺化 React 編輯 + AI 輔助 + GitHub 整合。

• 介面導覽：拖放編輯器、程式碼面板、元件庫、AI 聊天視窗與部署入口。

• 環境設定：GitHub 授權、Storybook 元件匯入、VS Code 連結。

• 實作練習：

  • 建立空白專案或匯入現有 GitHub 儲存庫，體驗視覺編輯器與即時程式碼同步。

第二部分：視覺化 React 編程實戰（約 70 分鐘）

• 拖放編輯：直接操作元件位置、大小、間距，AI 自動生成 Tailwind CSS。

• 屬性面板：視覺化調整配色、陰影、動畫、響應式斷點。

• AI 輔助：錯誤自動修復、樣式最佳化、元件重構建議。

• 實作練習（個人任務）：

  • 從模板建立「SaaS 儀表板」，包含卡片、圖表、導覽列與響應式布局。

第三部分：設計系統與進階協作（約 50 分鐘）

• 元件庫管理：匯入 Storybook 或生成自訂元件庫，建立品牌設計系統。

• 多人協作：即時同步變更、版本比較、GitHub PR 自動化。

• VS Code 整合：視覺編輯後一鍵開啟本地開發環境進行精細調整。

• 實作練習：

  • 建立自訂按鈕元件庫，並在儀表板中應用，完成 GitHub 推送與部署。

第四部分：部署與商業應用（約 20 分鐘）

• 一鍵部署：GitHub Actions 自動建置，支援自訂域名與環境變數。

• 成果展示：學員分享專案，對比視覺編輯與手寫程式碼的效率。

• 商業應用討論：快速原型驗證、A/B 測試、設計系統維護。

• 延伸學習方向：

  • Agent+ 服務（AI + 人類工程師協作）。

  • 後端 API 整合與全端部署。

課程特色

• 設計師友善：Figma 式拖放操作，無需懂 CSS 即可編輯 React 元件。

• 開發者控制：100% 程式碼擁有權，支援 VS Code 本地編輯與 GitHub 工作流。

• AI 智能輔助：自動錯誤修復、樣式最佳化、元件重構建議。

• 三小時內完成生產級前端專案，可直接用於客戶展示或內部審核。