课程大纲

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 小时

即将举行的公开课程

课程分类