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

課程簡介

前端生成式 AI 簡介

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

基於提示詞的 UI 生成

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

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

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

元件化與重用性

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

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

  • 使用大型語言模型(LLMs)修復版面佈局錯誤與無障礙性問題
  • 最佳化 HTML/CSS/JS 程式碼效能
  • 透過 AI 提示詞解釋錯誤並建議修復方案

協作設計與內容生成

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

專案:建立 AI 輔助架構的網頁應用

  • 基於業務提示詞設計 UI
  • 使用 AI 建構元件與互動功能
  • 潤飾、測試並展示原型

總結與後續步驟

最低要求

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

目標受眾

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

人數


每位參與者的報價

客戶評論 (1)

即將到來的課程

課程分類