聯繫我們

課程簡介

生成式 AI 在前端開發中的介紹

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

基於提示的 UI 產生

  • 撰寫 HTML 結構與元件的提示
  • 使用 AI 產生與修改 CSS 樣式
  • 利用 AI 搭建 JavaScript 互動元素

使用生成式工具構建版面配置原型

  • 建立落地頁與多區塊版面配置
  • 響應式設計提示(Flexbox、Grid)
  • 在 CodePen 或類似工具中預覽與測試

元件化與可重用性

  • 產生可重複使用的 UI 元件(按鈕、卡片、表單)
  • 借助 AI 建立元件庫與設計系統
  • 在主流框架(React、Vue、Tailwind)中使用 AI

AI 輔助程式碼審查與除錯

  • 使用 LLM 修復版面配置錯誤與無障礙問題
  • 優化 HTML/CSS/JS 效能
  • 透過 AI 提示解釋錯誤並建議修復方案

協同設計與內容產生

  • 使用 AI 產生模擬內容、文案與佔位符
  • 與設計師合作共同創作線框圖與樣式
  • 將 AI 產生的構想匯出為可用的 HTML 範本

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

  • 根據商業需求設計 UI
  • 使用 AI 構建元件與互動功能
  • 完善、測試並展示原型

總結與後續步驟

最低要求

  • 具備 HTML、CSS 和 JavaScript 的基本知識
  • 熟悉前端框架或設計系統
  • 對應用 AI 加速 UI/UX 工作流程有興趣

受眾對象

  • 前端開發人員
  • UX 工程師
  • 網頁設計師與創意技術專家
 14 小時

人數


每位參與者的報價

客戶評論 (1)

即將到來的課程

課程分類