課程簡介

Generative 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 時間:

人數


每位參與者的報價

Upcoming Courses

課程分類