聯繫我們

課程簡介

生成式人工智慧在前端開發的介紹

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

提示詞驱动的 UI 生成

  • 編寫 HTML 結構與元件的提示詞。
  • 使用人工智慧生成與修改 CSS 樣式。
  • 利用人工智慧建構 JavaScript 互動元素的基礎框架。

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

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

元件化與重用性

  • 生成可重用的 UI 元件(按鈕、卡片、表單)。
  • 在人工智慧輔助下建立元件庫與設計系統。
  • 在熱門框架(React、Vue、Tailwind)中應用人工智慧。

AI 輔助程式碼審查與除錯

  • 使用大型語言模型修復版面配置錯誤與無障礙問題。
  • 最佳化 HTML/CSS/JS 的效能。
  • 透過人工智慧提示詞解釋錯誤並提供修復建議。

協作式設計與內容生成

  • 使用人工智慧生成模擬內容、文案與佔位符。
  • 與設計師合作共同建立線框圖與樣式。
  • 將人工智慧生成的概念匯出為可用的 HTML 模板。

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

  • 根據業務需求提示詞進行 UI 設計。
  • 使用人工智慧建立元件與互動功能。
  • 校準、測試並展示原型。

總結與後續步驟

最低要求

  • 具備 HTML、CSS 與 JavaScript 的基本概念
  • 熟悉前端框架或設計系統
  • 有興趣將人工智慧應用於加速 UI/UX 工作流程

受眾對象

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

客戶評論 (1)

課程分類