課程簡介

生成式AI用於前端開發簡介

  • 什麼是生成式AI在軟件開發中的應用?
  • 工具概述:ChatGPT、GitHub Copilot、Codeium等。
  • AI在UI開發中的優勢與侷限。

基於提示的UI生成

  • 爲HTML結構和組件編寫提示。
  • 使用AI生成和修改CSS樣式。
  • 使用AI搭建JavaScript中的交互元素。

使用生成工具進行佈局原型設計

  • 構建着陸頁和多部分佈局。
  • 響應式設計提示(Flexbox、Grid)。
  • 在CodePen或類似工具中預覽和測試。

組件化與可重用性

  • 生成可重用的UI組件(按鈕、卡片、表單)。
  • 在AI幫助下創建組件庫和設計系統。
  • 在流行框架中使用AI(React、Vue、Tailwind)。

AI輔助的代碼審查與調試

  • 使用LLM修復佈局錯誤和可訪問性問題。
  • 優化HTML/CSS/JS代碼性能。
  • 通過AI提示解釋錯誤並建議修復。

協作設計與內容生成

  • 使用AI生成虛擬內容、文案和佔位符。
  • 與設計師合作共同創建線框圖和樣式。
  • 將AI生成的想法導出爲可用的HTML模板。

項目:構建AI搭建的Web應用

  • 基於業務提示設計UI。
  • 使用AI構建組件和交互。
  • 完善、測試並展示原型。

總結與下一步

最低要求

  • 對HTML、CSS和JavaScript有基本瞭解。
  • 熟悉前端框架或設計系統。
  • 對應用AI加速UI/UX工作流程感興趣。

受衆

  • 前端開發人員。
  • UX工程師。
  • 網頁設計師和創意技術人員。
 14 時間:

客戶評論 (1)

課程分類