聯繫我們
 課程時長 14 時間:

課程簡介

前端生成式AI簡介

  • 軟體開發中的生成式AI是什麼?
  • 工具概覽:ChatGPT、GitHub Copilot、Codeium等。
  • AI在UI開發中的優勢與限制

基於提示詞的UI生成

  • 為HTML結構及元件撰寫提示詞
  • 使用AI生成及修改CSS樣式
  • 利用AI在JavaScript中搭建互動元素

使用生成式工具進行版面原型設計

  • 建立著陸頁及多區塊版面
  • 響應式設計提示詞(Flexbox、Grid)
  • 在CodePen或類似工具中預覽及測試

元件化與重用性

  • 生成可重用的UI元件(按鈕、卡片、表單)
  • 在AI輔助下建立元件庫及設計系統
  • 在流行框架(React、Vue、Tailwind)中應用AI

AI輔助的程式碼審查與除錯

  • 利用大型語言模型修復版面錯誤及可訪問性問題
  • 優化HTML/CSS/JS程式碼效能
  • 透過AI提示詞解釋錯誤並建議修復方案

協作設計與內容生成

  • 使用AI生成佔位內容、文案及佔位符
  • 與設計師合作共同創作線框圖及樣式
  • 將AI生成的創意轉化為可用的HTML模板

專案:建構AI輔助的網頁應用程式

  • 根據商業需求提示詞設計UI
  • 使用AI建構元件及互動
  • 打磨、測試並展示原型

總結與後續步驟

最低要求

  • 對HTML、CSS及JavaScript具備基本理解
  • 熟悉前端框架或設計系統
  • 有意願應用AI以加速UI/UX工作流程

目標學員

  • 前端開發人員
  • UX工程師
  • 網頁設計師及創意技術人員

客戶評論 (1)

課程分類