《大模型时代的前端开发》课程设计文档

版本: v1.0 日期: 2026-03-26 作者: 科大讯飞前端训练营

一、课程定位

核心命题

不是教"如何用 AI 写代码"，而是教"如何构建 AI-Native 的前端技术栈和工作流"

在大模型时代，前端技术选型需要增加新的评估维度：AI 友好性。本课程帮助具备项目经验的前端工程师理解：

为什么某些技术栈天然适配 AI 工具
如何选择和构建 AI-Native 的前端架构
如何建立从设计到部署的 AI 驱动工作流

受众画像

经验水平: 具备项目与工程化经验的前端工程师
技术背景: 熟悉 Vue/React，有架构设计和工程化经验
学习目标: 实战提效为主，理解 AI 友好技术栈的底层逻辑

课程规格

时长: 8-10 次课，每次 2-3 小时，共 20-25 小时
形式: 讲解 + 演示为主
深度: 实现层（原理 + 技术细节）
特色: 对比驱动式教学 + "深讲一个，横向对比多个"

二、教学方法论

对比驱动式教学

每个主题都采用"传统做法 vs AI-Native 做法"的对比结构：

展示传统方案的痛点
演示 AI-Native 方案的优势
深入讲解一个主流方案的技术细节
横向对比多个同类工具的特点

"深讲一个，横向对比多个"

深讲: 选择最具代表性的工具，讲透原理和实现细节
横向对比: 介绍 3-5 个同类工具，对比优劣势、适用场景
目标: 既有深度又有广度，帮助学员建立完整的技术地图

三、课程大纲

第 0 课：认知重构 - AI 友好性是新的选型维度

课时: 2 小时

核心目标: 建立"AI 友好性"的认知框架，理解为什么传统技术选型标准需要升级

内容大纲:

传统技术选型的三大维度
- 开发体验（DX）
- 性能（Performance）
- 生态（Ecosystem）
为什么需要第四个维度：AI 友好性
- LLM 如何理解代码：Token 化、上下文窗口、代码可读性
- 什么样的代码对 AI "可读"、"可写"、"可维护"
- 案例：同样的功能，AI 处理不同技术栈的效率对比
AI 友好技术栈的特征
- 语义内联（Semantic Inline）
- 源码可见（Source Visible）
- 约定优于配置（Convention over Configuration）
- 组合优于继承（Composition over Inheritance）
本课程的技术地图预览
- 样式层：Tailwind CSS v4
- 组件层：shadcn/ui + Radix UI
- 工具层：Figma AI、v0.dev、Bolt.new 等
- 测试层：Playwright MCP
- 架构层：Monorepo + AI 友好的代码组织

演示案例:

用 AI 工具分别处理传统 CSS 和 Tailwind 代码，对比生成质量和速度

第 1 课：样式方案革命 - Tailwind CSS v4 深度解析

课时: 2.5 小时

核心目标: 理解为什么 utility-first CSS 是 AI 最佳拍档，掌握 Tailwind v4 的核心变化

深讲: Tailwind CSS v4

横向对比: BEM、CSS Modules、styled-components、CSS-in-JS (Emotion)、UnoCSS

内容大纲:

传统 CSS 方案的 AI 盲区
- BEM：语义分散，AI 难以理解类名与样式的关系
- CSS Modules：作用域隔离，AI 无法跨文件推理
- styled-components：运行时开销，AI 生成的代码性能差
- 对比演示：让 AI 修改一个 BEM 组件 vs Tailwind 组件
Tailwind CSS v4 深度解析
- CSS-first 配置: 从 JS 配置迁移到原生 CSS
  - @theme 指令定义设计系统
  - @plugin 指令扩展功能
  - 为什么这对 AI 更友好
- Oxide 引擎: 性能革命
  - 用 Rust 重写的新引擎
  - 10x 编译速度提升
  - 更小的 bundle size
- 新特性（v4.2+）
  - 新增颜色系统
  - 改进的容器查询
  - 原生 CSS 变量支持
- 为什么 utility-first 是 AI 最佳拍档
  - 语义在 HTML 中内联，AI 一眼看懂
  - 原子化类名，AI 可以精确组合
  - 无需跨文件推理，降低 AI 的上下文负担

横向对比：其他 CSS 方案

方案	AI 友好度	性能	学习曲线	适用场景
Tailwind v4	⭐⭐⭐⭐⭐	优秀	中等	AI-Native 项目首选
UnoCSS	⭐⭐⭐⭐	优秀	中等	需要高度定制的项目
CSS Modules	⭐⭐	良好	低	传统项目维护
styled-components	⭐⭐	一般	中等	React 重度用户
BEM	⭐	良好	低	不推荐新项目

实战演示
- 从零搭建 Tailwind v4 项目
- 用 AI 工具（Cursor/Claude）生成复杂布局
- 迁移案例：从 CSS Modules 迁移到 Tailwind v4

参考资料:

第 2 课：组件库范式转移 - shadcn/ui 的 Copy-Paste 哲学

课时: 2.5 小时

核心目标: 理解为什么"源码可见"比"npm 黑盒"更 AI 友好，掌握 shadcn/ui 的工作原理

深讲: shadcn/ui

横向对比: Ant Design、Material-UI、Chakra UI、Headless UI、Park UI

内容大纲:

传统组件库的 AI 困境
- npm 黑盒依赖：AI 看不到源码，无法理解内部实现
- 过度封装：AI 难以定制和修改
- 版本锁定：升级困难，AI 无法跨版本推理
- 对比演示：让 AI 修改 Ant Design 组件 vs shadcn/ui 组件
shadcn/ui 深度解析
- Copy-Paste 哲学
  - 不是 npm 包，而是代码片段
  - 组件源码直接复制到项目中
  - 完全的所有权和可定制性
- CLI 工作流
```
npx shadcn@latest init
npx shadcn@latest add button
npx shadcn@latest add dialog
```
  - CLI 如何工作：从 Registry 拉取代码
  - 代码生成逻辑：模板 + 配置 + 依赖注入
- Registry 系统
  - 官方 Registry 结构
  - 如何创建自定义 Registry
  - 企业级组件库的 Registry 实践
- 为什么 AI 能读、能改、能理解
  - 源码在项目中，AI 可以直接分析
  - 基于 Radix UI，语义清晰
  - Tailwind 样式，AI 一眼看懂
shadcn/ui 生态工具
- magic-ui: 动画组件库
- aceternity-ui: 高级 UI 组件
- shadcn-ui-expansions: 社区扩展
- v0.dev: 官方 AI 生成工具（下节课详讲）

shadcn/ui 资源网站

网站	功能	特色
TweakCN	可视化主题编辑器	AI 生成主题、实时预览、Tailwind v4 支持
ui.shadcn.com	官方组件库	最权威的组件源
shadcn-ui.com	社区组件集合	大量第三方组件
magicui.design	动画组件	高质量动画效果
ui.aceternity.com	现代 UI 组件	创意交互组件

TweakCN 亮点:
- 20,000+ GitHub stars
- AI 驱动的主题生成（文字/图片 prompt）
- 实时预览和代码导出
- 可访问性对比度检查器
- 开源免费

横向对比：其他组件库

组件库	AI 友好度	定制性	学习曲线	适用场景
shadcn/ui	⭐⭐⭐⭐⭐	极高	中等	AI-Native 项目首选
Park UI	⭐⭐⭐⭐	高	中等	多框架支持（React/Vue/Solid）
Headless UI	⭐⭐⭐⭐	极高	高	需要完全自定义样式
Chakra UI	⭐⭐⭐	中	低	快速原型开发
Ant Design	⭐⭐	低	低	企业后台（传统项目）
Material-UI	⭐⭐	中	中	Material Design 风格项目

实战演示
- 初始化 shadcn/ui 项目
- 用 AI 工具定制组件样式
- 创建自定义组件并添加到 Registry

参考资料:

第 3 课：无头组件的底层逻辑 - Radix UI 深度剖析

课时: 2.5 小时

核心目标: 理解 Headless UI 的设计哲学，掌握 Radix UI 的 Composition 模式

深讲: Radix UI

横向对比: Headless UI、React Aria、Ark UI、Kobalte

内容大纲:

什么是 Headless UI
- 分离逻辑与样式
- 只提供行为和可访问性，不提供样式
- 为什么这对 AI 更友好：关注点分离，AI 可以专注于样式生成
Radix UI 深度解析
- Composition 模式
```
<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```
  - 为什么用组合而不是单一组件
  - AI 如何理解这种结构
- 可访问性原语（Accessibility Primitives）
  - ARIA 属性自动注入
  - 键盘导航
  - 焦点管理
  - 屏幕阅读器支持
- 状态管理
  - 内部状态机
  - 受控 vs 非受控模式
  - 如何与外部状态库集成
shadcn/ui 如何基于 Radix 构建
- shadcn/ui 的组件 = Radix 原语 + Tailwind 样式
- 代码走读：Button、Dialog、Select 组件
- 如何自己基于 Radix 创建组件

横向对比：其他 Headless UI 库

库	框架支持	AI 友好度	可访问性	适用场景
Radix UI	React	⭐⭐⭐⭐⭐	优秀	shadcn/ui 的基础
Headless UI	React/Vue	⭐⭐⭐⭐	优秀	Tailwind 官方推荐
React Aria	React	⭐⭐⭐⭐	优秀	Adobe 出品，企业级
Ark UI	React/Vue/Solid	⭐⭐⭐⭐	优秀	多框架支持
Kobalte	Solid	⭐⭐⭐	优秀	Solid 生态

实战演示
- 用 Radix 原语从零构建一个 Dropdown 组件
- 用 AI 工具生成 Radix 组件的样式
- 可访问性测试

参考资料:

第 4 课：Design to Code（上）- 设计工具的 AI 革命

课时: 2.5 小时

核心目标: 理解设计到代码的完整管线，掌握 Figma 与 Pencil.dev 两类主流 D2C 工作流的差异与适用边界

深讲: Figma AI 生态（重点对照 Pencil.dev）

横向对比: Penpot、Pencil.dev、Google Stitch、Framer

内容大纲:

传统设计交付的痛点
- 设计稿 → 切图 → 手写还原 → 反复对稿
- 设计师和开发者的语言鸿沟
- 还原度问题：像素级还原的成本
Figma AI 生态深度解析
- Figma AI Agents（2026 新能力）
  - AI Agent 直接在画布上操作
  - 外部 AI 模型接入 Figma 平台
  - Agent Skills：将设计稿直接转为 shadcn/ui 代码
- Figma Make Designs
  - AI 辅助设计生成
  - 从文字描述到设计稿
- Figma Dev Mode
  - 开发者视角的设计稿查看
  - 自动生成 CSS/Tailwind 代码
  - 组件属性映射
- Figma → shadcn/ui 完整管线
  - 设计 Token 映射
  - 组件结构对应
  - 样式自动转换
重点补充：Pencil.dev 为什么最近火
- 不只是“另一个设计工具”，而是“把设计器嵌进 IDE”
- 双向同步：设计改动直接映射到代码，代码改动实时反映回画布
- 与 Cursor / Claude Code / shadcn/ui / Tailwind 的协同
- Git 版本管理设计变更，适合前端主导和设计资源有限的团队
Pencil.dev vs Figma 直接案例对照
- 案例 A：定价页
  - Figma：更适合高保真视觉探索、多人评审、品牌调性要求高的场景
  - Pencil.dev：更适合快速原型、开发主导、需要快速上线投放的场景
- 案例 B：AI SaaS 设置页
  - Figma：适合复杂信息架构的统一设计系统沉淀
  - Pencil.dev：适合表单化、结构化、中后台页面的快速搭建与组件抽象

横向对比：其他设计工具

工具	AI 能力	D2C 质量	开源	特色
Figma	⭐⭐⭐⭐⭐	优秀	否	AI Agents + 最大生态
Penpot	⭐⭐⭐⭐	良好	是	原生 Web 标准（CSS/SVG/HTML），MCP 集成
Pencil.dev	⭐⭐⭐⭐	优秀	否	IDE 内设计，直接生成 React/Tailwind/shadcn
Google Stitch	⭐⭐⭐	良好	否	可视化探索 + Figma 导出
Framer	⭐⭐⭐	良好	否	设计即发布，适合营销页

Penpot 亮点: 开源、基于 Web 标准、MCP 集成支持 AI 工作流
Pencil.dev 亮点: 在 VS Code/Cursor 中直接设计，双向同步（设计↔代码），Git 版本控制
Google Stitch 亮点: Google 出品，AI 驱动的可视化设计探索

实战演示
- Figma 设计稿 → AI Agent → shadcn/ui 代码
- Pencil.dev 在 IDE 中的设计到代码流程
- 同题双解：同一个“团队设置页”分别用 Figma 和 Pencil.dev 演示
- 新案例池：Agent 运行看板、团队权限页、Webinar 报名页、新产品发布落地页

参考资料:

第 5 课：Design to Code（下）- AI 代码生成工具实战

课时: 2.5 小时

核心目标: 掌握 AI 代码生成工具的使用方法和最佳实践

深讲: v0.dev

横向对比: Bolt.new、Lovable、Screenshot to Code、Builder.io Visual Copilot

内容大纲:

AI 代码生成工具的定位
- 不是替代开发者，而是加速原型到生产的过程
- 从"写代码"到"审代码"的角色转变
- 生成代码的质量评估标准
v0.dev 深度解析
- 核心能力
  - 从自然语言 prompt 生成 React + Tailwind + shadcn/ui 代码
  - 支持图片输入（截图转代码）
  - 迭代式修改：对话式调整生成结果
- 最佳实践
  - Prompt 技巧：如何写出高质量的生成指令
  - 分步生成 vs 一次性生成
  - 生成后的代码审查和优化
- 与 shadcn/ui 的深度集成
  - 生成的代码直接使用 shadcn/ui 组件
  - 样式一致性保证
  - 组件复用

横向对比：其他 AI 生成工具

工具	技术栈	代码质量	交互方式	适用场景
v0.dev	React + Tailwind + shadcn	⭐⭐⭐⭐⭐	对话式	组件/页面生成
Bolt.new	多框架	⭐⭐⭐⭐	对话式 + 在线 IDE	全栈应用原型
Lovable	React	⭐⭐⭐⭐	对话式	全栈应用快速搭建
Screenshot to Code	React/Vue/HTML	⭐⭐⭐	截图输入	快速还原设计稿
Builder.io Visual Copilot	多框架	⭐⭐⭐⭐	Figma 插件	Figma → 生产代码

Bolt.new 亮点: 在线 IDE 环境，支持全栈开发，实时预览
Lovable 亮点: 端到端应用生成，包含后端和数据库
Builder.io 亮点: Figma 插件形式，与设计工作流无缝集成

实战演示
- v0.dev 从 prompt 到生产级组件
- Bolt.new 快速搭建全栈原型
- 对比不同工具生成同一设计稿的代码质量

参考资料:

第 6 课：AI 友好的项目架构 - Monorepo 与代码组织

课时: 2.5 小时

核心目标: 理解为什么 Monorepo + 功能切片是 AI 友好的架构，掌握 Turborepo 实践

深讲: Turborepo + pnpm workspace

横向对比: Nx、Lerna、Rush、Bun workspace

内容大纲:

传统项目结构的 AI 困境
- 按技术分层（components/utils/hooks）：AI 需要跨多个目录理解一个功能
- 单仓巨石应用：上下文过大，AI 无法有效推理
- 多仓分散：AI 无法跨仓库理解依赖关系
Monorepo + 功能切片深度解析
- 为什么 Monorepo 更 AI 友好
  - 所有代码在一个仓库，AI 可以全局搜索和理解
  - 共享配置和工具链，减少重复
  - 依赖关系显式声明，AI 可以追踪
- 功能切片（Feature Slicing）
```
packages/
  ui/           # shadcn/ui 组件库
  utils/        # 共享工具函数
  config/       # 共享配置
apps/
  web/          # 主应用
  admin/        # 管理后台
  docs/         # 文档站点
```
  - 每个 package 职责单一
  - AI 只需要局部上下文就能理解模块
- Turborepo 深度解析
  - 任务编排和缓存机制
  - Remote Caching：团队共享构建缓存
  - 增量构建：只构建变更的包
  - turbo.json 配置详解
- pnpm workspace
  - 为什么 pnpm 而不是 npm/yarn
  - 硬链接和内容寻址存储
  - workspace 协议：workspace:*
AI 友好的文件结构约定
- 命名约定：让 AI 从文件名推断功能
- 目录结构约定：让 AI 快速定位代码
- README 和 CLAUDE.md：给 AI 的项目说明书

横向对比：其他 Monorepo 工具

工具	性能	学习曲线	生态	适用场景
Turborepo	⭐⭐⭐⭐⭐	低	Vercel 生态	中小型 Monorepo 首选
Nx	⭐⭐⭐⭐⭐	高	独立生态	大型企业级 Monorepo
Bun workspace	⭐⭐⭐⭐	低	Bun 生态	Bun 用户
Lerna	⭐⭐⭐	中	npm 生态	传统项目（不推荐新项目）
Rush	⭐⭐⭐	高	微软生态	超大型 Monorepo

实战演示
- 从零搭建 Turborepo + pnpm + shadcn/ui 项目
- 配置共享组件库和应用
- 演示 AI 工具在 Monorepo 中的工作效率

参考资料:

补充内容：AI 项目规范文件

除了代码组织，AI-Native 项目还需要规范文件来指导 AI 工具的行为：

AGENTS.md / CLAUDE.md: 项目级 AI 指令
- 项目架构说明
- 技术栈约定
- 代码风格规范
- 常见任务的执行模板
.cursorrules: Cursor 专用规则文件
- 代码生成偏好
- 文件命名约定
- 导入路径规范

示例 AGENTS.md 结构:

# 项目 AI 指令

## 技术栈
- React 19 + Next.js 15
- Tailwind CSS v4
- shadcn/ui + Radix UI
- Turborepo + pnpm

## 代码规范
- 使用 TypeScript 严格模式
- 组件使用函数式 + hooks
- 样式使用 Tailwind utility classes
- 状态管理使用 Zustand

## 文件组织
- 组件放在 `components/ui/` (shadcn/ui)
- 业务组件放在 `components/features/`
- 工具函数放在 `lib/`

参考资料:

第 7 课：MCP Tools - AI 驱动的浏览器自动化与测试

课时: 2.5 小时

核心目标: 理解 MCP 协议，掌握 Playwright MCP 等前端相关 MCP 工具的使用

深讲: Playwright MCP

横向对比: Puppeteer MCP、Selenium MCP、Browserbase MCP、Stagehand

内容大纲:

MCP（Model Context Protocol）简介
- 什么是 MCP：AI 模型与外部工具的标准协议
- MCP 的架构：Client → Server → Tool
- 为什么前端开发者需要了解 MCP
Playwright MCP 深度解析
- 核心能力
  - AI 驱动的浏览器自动化
  - E2E 测试生成和执行
  - 截图对比和视觉回归测试
  - 页面交互录制和回放
- 安装和配置
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic/mcp-playwright"]
    }
  }
}
```
- 实战场景
  - 用自然语言描述测试用例，AI 自动生成 Playwright 脚本
  - AI 自动执行浏览器操作并验证结果
  - 视觉回归测试：截图对比检测 UI 变化
- 与 Claude Code 的集成
  - 在 Claude Code 中直接使用 Playwright MCP
  - AI 辅助调试：自动定位和修复测试失败

横向对比：其他浏览器自动化 MCP

MCP 工具	核心能力	性能	适用场景
Playwright MCP	E2E 测试 + 浏览器自动化	⭐⭐⭐⭐⭐	前端测试首选
Puppeteer MCP	浏览器自动化	⭐⭐⭐⭐	Chrome 专属场景
Browserbase MCP	云端浏览器	⭐⭐⭐⭐	大规模自动化
Stagehand	AI 原生浏览器操作	⭐⭐⭐⭐	AI Agent 场景
Selenium MCP	传统自动化	⭐⭐⭐	兼容性测试

其他前端相关 MCP 工具速览
- Firecrawl MCP: 网页抓取和数据提取
- GitHub MCP: 代码仓库操作
- Context7 MCP: 文档查询（本课程使用的工具）
实战演示
- 配置 Playwright MCP
- 用 AI 生成 E2E 测试用例
- 视觉回归测试演示
- 自动化测试流程集成

参考资料:

第 8 课：AI 编程工具与开发环境

课时: 2.5 小时

核心目标: 掌握 AI 编程工具的选择和使用，理解它们如何与 AI-Native 技术栈配合

深讲: Cursor

横向对比: Windsurf、GitHub Copilot、Claude Code、Zed、Replit Agent

内容大纲:

AI 编程工具的定位
- 不只是"代码补全"，而是"AI 结对编程"
- 与 AI-Native 技术栈的协同效应
- 为什么 Tailwind + shadcn/ui 让 AI 编程工具更强大
Cursor 深度解析
- 核心能力
  - Composer：多文件编辑
  - Chat：上下文感知对话
  - Cmd+K：行内快速编辑
  - Tab 补全：智能代码补全
- 与 AI-Native 技术栈的配合
  - 如何让 Cursor 理解你的 Monorepo 结构
  - 使用 .cursorrules 定义项目规范
  - 与 shadcn/ui 的完美配合

横向对比：其他 AI 编程工具

工具	核心特色	AI 模型	适用场景
Cursor	⭐⭐⭐⭐⭐ Composer 多文件编辑	Claude/GPT-4	全能型首选
Windsurf	⭐⭐⭐⭐⭐ Flow 模式（AI 主动规划）	多模型	复杂重构任务
GitHub Copilot	⭐⭐⭐⭐ 代码补全	GPT-4	GitHub 深度用户
Claude Code	⭐⭐⭐⭐ 终端集成	Claude	命令行重度用户
Zed	⭐⭐⭐ 性能极致	多模型	追求速度
Replit Agent	⭐⭐⭐⭐ 全栈应用生成	多模型	快速原型

Prompt Engineering 实战
- 如何写出高质量的 AI 指令
- 针对 Tailwind + shadcn/ui 的 Prompt 技巧
- 常见错误和优化方法

AI Memory 管理：让 AI 越用越懂你

为什么需要 Memory 管理

AI 每次对话都是"失忆"的，需要主动管理记忆
好的 Memory 让 AI 理解项目上下文、团队规范、历史决策
减少重复解释，提高开发效率

Memory 的类型

类型	存储位置	用途	示例
项目级	AGENTS.md / CLAUDE.md	项目规范、技术栈	"使用 shadcn/ui，不用 Ant Design"
会话级	.claude/memory/	当前开发任务的上下文	"正在重构用户认证模块"
个人级	~/.claude/memory/	个人偏好和习惯	"我喜欢用函数式组件"

如何管理 Memory

a. 项目级 Memory（AGENTS.md）

# 项目记忆

## 技术决策
- 2026-03-15: 选择 Tailwind v4 而非 UnoCSS，因为生态更成熟
- 2026-03-10: 使用 Zustand 而非 Redux，因为更轻量

## 已知问题
- UserProfile 组件的性能问题已在 PR #123 修复
- 不要使用 react-query v3，必须用 v5

## 团队约定
- 所有 API 请求必须有错误处理
- 表单必须使用 React Hook Form + Zod

b. 会话级 Memory（主动告诉 AI）

# 在对话开始时告诉 AI
"我正在重构用户认证模块，已经完成了登录页面，
现在要做注册页面。请保持与登录页面一致的风格。"

# 在任务完成后总结
"记住：注册页面使用了 Zod schema 验证，
密码强度检查逻辑在 lib/password.ts"

c. 个人级 Memory（~/.claude/memory/）

创建 preferences.md 记录个人偏好
创建 shortcuts.md 记录常用命令
AI 会自动读取这些文件

Memory 最佳实践

✅ DO

记录重要的技术决策和原因
记录已知问题和解决方案
记录团队约定和规范
定期更新过时的 Memory

❌ DON'T

不要记录代码细节（AI 可以读代码）
不要记录临时信息
不要记录显而易见的事情

实战演示
- 用 Cursor 从零搭建一个 AI-Native 项目
- Composer 多文件重构演示
- 对比不同工具处理同一任务的效率

参考资料:

第 9 课：前端 AI 功能集成 - Vercel AI SDK

课时: 2.5 小时

核心目标: 学会在前端应用中集成 AI 能力（聊天、搜索、内容生成）

深讲: Vercel AI SDK

横向对比: LangChain.js、OpenAI SDK、Anthropic SDK

内容大纲:

前端 AI 功能的常见场景
- AI 聊天机器人
- 智能搜索
- 内容生成（文案、图片描述）
- 表单智能填充
Vercel AI SDK 深度解析
- 核心能力（v6）
  - 统一的 AI 接口（支持 OpenAI、Anthropic、Google 等）
  - 流式响应（Streaming）
  - AI Agents 和工具调用
  - RSC（React Server Components）集成
- 与 Next.js + shadcn/ui 的集成
```
import { useChat } from 'ai/react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  // shadcn/ui 组件 + Vercel AI SDK
}
```
- AI Agents 实战
  - 如何定义工具（Tools）
  - 多轮对话管理
  - 上下文窗口优化

横向对比：其他 AI SDK

SDK	易用性	框架支持	流式支持	适用场景
Vercel AI SDK	⭐⭐⭐⭐⭐	React/Next.js	优秀	Next.js 项目首选
LangChain.js	⭐⭐⭐	框架无关	良好	复杂 AI 工作流
OpenAI SDK	⭐⭐⭐⭐	框架无关	优秀	OpenAI 专属
Anthropic SDK	⭐⭐⭐⭐	框架无关	优秀	Claude 专属

实战演示
- 用 Vercel AI SDK + shadcn/ui 构建 AI 聊天界面
- 实现流式响应和打字机效果
- AI Agent 调用外部工具

参考资料:

第 10 课：工程化实践与技术选型决策框架

课时: 2.5 小时

核心目标: 建立系统化的 AI 友好技术选型决策框架，掌握工程化最佳实践

内容大纲:

AI 驱动的 CI/CD
- AI 辅助构建优化
- 智能测试选择：只运行受影响的测试
- 自动化发布流程
- AI Code Review 集成

代码质量工具的 AI 友好性

Biome vs ESLint + Prettier

工具	速度	AI 友好度	功能	适用场景
Biome	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Lint + Format	新项目首选
ESLint (Flat Config)	⭐⭐⭐	⭐⭐⭐⭐	Lint	传统项目
Prettier	⭐⭐⭐⭐	⭐⭐⭐	Format	配合 ESLint

为什么 Biome 更 AI 友好
- 用 Rust 编写，速度极快（100x faster）
- 统一的配置文件（biome.json）
- 错误信息更清晰，AI 更容易理解和修复
- 零配置开箱即用
TypeScript 严格模式
- 帮助 AI 理解类型约束
- 减少 AI 生成代码的类型错误
- tsconfig.json 配置最佳实践
常用 Skills 和 MCP 工具
- GitHub MCP: 代码仓库操作
- Linear MCP: 任务管理集成
- Sentry MCP: 错误监控
- Datadog MCP: 性能监控

前端全栈化趋势

Next.js Server Actions + Server Components
- 前端工程师可以直接写后端逻辑
- 无需单独的 API 层
- 与 AI 工具的配合：AI 可以同时生成前后端代码
tRPC: 类型安全的全栈开发
- 端到端类型安全
- 无需手写 API 文档
- AI 可以理解完整的数据流
Prisma: AI 友好的 ORM
- Schema 即文档
- AI 可以直接生成数据库查询
- 类型自动生成
Supabase: AI 友好的 BaaS（99K+ Stars）
- 开源的 Firebase 替代方案
- PostgreSQL 数据库 + 自动生成 API
- 内置 Auth（认证 + Row Level Security）
- 内置 Realtime（实时数据订阅）
- 内置 Storage（文件存储）
- 内置 Vector（pgvector，AI 语义搜索）
- 内置 MCP Server（AI 辅助数据库操作）
- 与 Next.js 深度集成

Supabase vs Prisma 选型指南

特性	Supabase	Prisma
定位	BaaS（完整后端服务）	ORM（数据库抽象层）
API	自动生成	需要手写
认证	内置 Auth	需要自己实现
实时	内置 Realtime	不支持
Vector	内置 pgvector	需要自己集成
适用	快速原型/AI 应用	企业级/复杂业务

全栈技术栈示例

方案 A：Supabase 全栈（快速原型/AI 应用）

Next.js 15 (App Router)
  → Server Actions / Supabase Client
  → Supabase (数据库 + Auth + Realtime + Vector)
  → shadcn/ui + Tailwind (前端 UI)
  → Vercel AI SDK + Supabase Vector (AI 功能)

方案 B：Prisma 全栈（企业级项目）

Next.js 15 (App Router)
  → Server Actions (后端逻辑)
  → Prisma (数据库)
  → shadcn/ui + Tailwind (前端 UI)
  → Vercel AI SDK (AI 功能)

为什么全栈化对 AI 友好
- 减少上下文切换，AI 可以看到完整的数据流
- 类型安全贯穿前后端，AI 生成代码更准确
- 单一代码库，AI 可以全局推理
- Supabase 自动生成 API，AI 不需要手写接口

技术选型决策框架

AI 友好性评估矩阵

评估维度	权重	评估标准
代码可读性	高	AI 能否一眼理解代码意图
源码可见性	高	AI 能否直接访问和修改源码
语义内联度	中	样式/逻辑是否与结构内联
组合性	中	是否支持灵活组合
生态 AI 工具	中	是否有配套的 AI 工具
文档质量	低	AI 训练数据中的覆盖度

决策流程
1. 列出候选技术
2. 用评估矩阵打分
3. 结合团队现状和项目需求
4. 制定迁移计划

团队协作与推广
- 如何在团队中推广 AI-Native 技术栈
- 渐进式迁移策略
- 团队规范和最佳实践
- .cursorrules / CLAUDE.md 等项目规范文件
前端技术栈演进趋势
- AI-Native 框架的崛起
- 设计与开发的边界模糊化
- 前端工程师角色的转变：从"写代码"到"设计 + 审查代码"

第 11 课：全链路整合与未来展望

课时: 2.5 小时

核心目标: 串联所有知识点，展示完整的 AI-Native 开发工作流

内容大纲:

全链路 AI-Native 工作流演示

设计（Figma AI / Pencil.dev）
  → D2C（v0.dev / Figma Agent Skills）
    → 开发环境（Cursor + .cursorrules）
      → 组件开发（shadcn/ui + Radix + Tailwind v4）
        → AI 功能集成（Vercel AI SDK）
          → 测试（Playwright MCP）
            → 代码审查（AI 辅助 Review）
              → CI/CD（AI 驱动的质量门禁）
                → 部署

完整项目实战演示
- 从 Figma 设计稿到部署上线的全流程
- 每个环节的 AI 工具使用
- 效率对比：传统流程 vs AI-Native 流程
职业发展与持续学习
- AI 时代前端工程师的核心竞争力
- 如何持续跟进 AI 工具的演进
- 学习路径和资源推荐
Q&A 与总结
- 回答学员问题
- 课程总结
- 后续学习建议

课时: 2.5 小时

核心目标: 建立系统化的 AI 友好技术选型决策框架

内容大纲:

AI 驱动的 CI/CD
- AI 辅助构建优化
- 智能测试选择：只运行受影响的测试
- 自动化发布流程

技术选型决策框架

AI 友好性评估矩阵

评估维度	权重	评估标准
代码可读性	高	AI 能否一眼理解代码意图
源码可见性	高	AI 能否直接访问和修改源码
语义内联度	中	样式/逻辑是否与结构内联
组合性	中	是否支持灵活组合
生态 AI 工具	中	是否有配套的 AI 工具
文档质量	低	AI 训练数据中的覆盖度

决策流程
1. 列出候选技术
2. 用评估矩阵打分
3. 结合团队现状和项目需求
4. 制定迁移计划

前端技术栈演进趋势
- AI-Native 框架的崛起
- 设计与开发的边界模糊化
- 前端工程师角色的转变
职业发展
- 从"写代码"到"设计 + 审查代码"
- AI 时代前端工程师的核心竞争力
- 持续学习路径

四、课程技术地图总览

┌─────────────────────────────────────────────────────────────────────────┐
│                        AI-Native 前端技术栈全景图                          │
├─────────────┬───────────────┬───────────────┬───────────────┬───────────┤
│   样式层     │    组件层      │   设计工具层   │    架构层      │  开发工具层 │
├─────────────┼───────────────┼───────────────┼───────────────┼───────────┤
│ 深讲:        │ 深讲:          │ 深讲:          │ 深讲:          │ 深讲:      │
│ Tailwind v4  │ shadcn/ui     │ Figma AI      │ Turborepo     │ Cursor    │
│              │ Radix UI      │ v0.dev        │ pnpm          │           │
├─────────────┼───────────────┼───────────────┼───────────────┼───────────┤
│ 对比:        │ 对比:          │ 对比:          │ 对比:          │ 对比:      │
│ UnoCSS       │ Ant Design    │ Penpot        │ Nx            │ Windsurf  │
│ CSS Modules  │ MUI           │ Pencil.dev    │ Bun workspace │ Copilot   │
│ styled-comp  │ Chakra UI     │ Bolt.new      │ Lerna         │ Claude    │
│              │ Park UI       │ Lovable       │ Rush          │ Zed       │
│              │ Headless UI   │ Builder.io    │               │ Replit    │
│              │ React Aria    │ Stitch        │               │           │
│              │ Ark UI        │ Screenshot2C  │               │           │
├─────────────┴───────────────┴───────────────┴───────────────┴───────────┤
│                           MCP 工具层                                      │
├─────────────┬───────────────┬───────────────┬───────────────────────────┤
│ 深讲:        │ 对比:          │               │                           │
│ Playwright   │ Puppeteer     │ Browserbase   │ Stagehand                 │
│ MCP          │ MCP           │ MCP           │                           │
├─────────────┴───────────────┴───────────────┴───────────────────────────┤
│                         AI 功能集成层                                     │
├─────────────┬───────────────┬───────────────┬───────────────────────────┤
│ 深讲:        │ 对比:          │               │                           │
│ Vercel AI    │ LangChain.js  │ OpenAI SDK    │ Anthropic SDK             │
│ SDK          │               │               │                           │
└─────────────┴───────────────┴───────────────┴───────────────────────────┘

技术栈选择的核心原则

语义内联: Tailwind（样式在 HTML 中）、Radix（行为在组件中）
源码可见: shadcn/ui（代码在项目中）、Monorepo（依赖显式）
组合优于继承: Radix 的 Composition 模式
约定优于配置: Turborepo、pnpm workspace
AI 工具生态: Figma AI、v0.dev、Cursor 等配套工具

五、每节课的标准结构

每节课遵循统一的教学结构：

开场（10 min）: 回顾上节课内容，引出本节主题
痛点展示（15 min）: 演示传统方案的问题
深讲主角（40 min）: 深入讲解一个主流方案的原理和技术细节
横向对比（30 min）: 介绍 3-5 个同类工具，对比优劣
实战演示（30 min）: 现场演示核心工具的使用
总结与 Q&A（15 min）: 总结要点，回答问题

六、参考资料汇总

Tailwind CSS v4

shadcn/ui & Radix UI

Design to Code

AI 生成工具

MCP Tools

Monorepo

AI 编程工具

AI 功能集成

AI 项目规范

七、补充说明

课程更新后的完整结构（11 节课）

课程	主题	深讲	时长
第 0 课	认知重构	AI 友好性框架	2h
第 1 课	样式方案	Tailwind CSS v4	2.5h
第 2 课	组件库	shadcn/ui	2.5h
第 3 课	无头组件	Radix UI	2.5h
第 4 课	设计工具	Figma AI	2.5h
第 5 课	AI 生成	v0.dev	2.5h
第 6 课	项目架构	Turborepo + pnpm	2.5h
第 7 课	MCP 工具	Playwright MCP	2.5h
第 8 课	编程工具	Cursor	2.5h
第 9 课	AI 集成	Vercel AI SDK	2.5h
第 10 课	工程化	决策框架	2.5h
第 11 课	全链路	整合演示	2.5h
总计			27h

新增内容说明

相比初版，补充了以下重要内容：

第 8 课（AI 编程工具）:
- 深讲 Cursor，对比 Windsurf、Copilot、Claude Code 等
- Prompt Engineering 实战
- 与 AI-Native 技术栈的协同
第 9 课（AI 功能集成）:
- 深讲 Vercel AI SDK
- 如何在前端应用中集成 AI 能力
- 聊天、搜索、内容生成等场景
第 6 课补充（项目规范文件）:
- AGENTS.md / CLAUDE.md 规范
- .cursorrules 配置
- 如何用规范文件指导 AI 行为
第 10 课补充（代码质量与全栈化）:
- Biome vs ESLint + Prettier 对比
- TypeScript 严格模式最佳实践
- 前端全栈化趋势（Next.js Server Actions、tRPC、Prisma）
- 常用 Skills 和 MCP 工具（GitHub、Linear、Sentry 等）
技术地图扩展:
- 增加"开发工具层"和"AI 功能集成层"
- 更完整的技术栈全景图

为什么要补充这些内容

AI 编程工具是学员的日常工具: 他们每天都在用 Cursor/Copilot，必须讲透
前端 AI 功能集成是实际需求: 很多项目需要集成聊天、搜索等 AI 功能
项目规范文件是 AI 工作流的关键: AGENTS.md 等文件直接影响 AI 的输出质量
代码质量工具影响 AI 效率: Biome 等工具让 AI 生成的代码更规范
前端全栈化是趋势: Next.js Server Actions 让前端工程师可以写全栈代码
形成完整闭环: 从技术选型 → 开发工具 → AI 功能 → 工程化，全链路覆盖

FilesExpand file tree

课程设计文档.md

Latest commit

History

课程设计文档.md

File metadata and controls

《大模型时代的前端开发》课程设计文档

一、课程定位

核心命题

受众画像

课程规格

二、教学方法论

对比驱动式教学

"深讲一个，横向对比多个"

三、课程大纲

第 0 课：认知重构 - AI 友好性是新的选型维度

第 1 课：样式方案革命 - Tailwind CSS v4 深度解析

第 2 课：组件库范式转移 - shadcn/ui 的 Copy-Paste 哲学

第 3 课：无头组件的底层逻辑 - Radix UI 深度剖析

第 4 课：Design to Code（上）- 设计工具的 AI 革命

第 5 课：Design to Code（下）- AI 代码生成工具实战

第 6 课：AI 友好的项目架构 - Monorepo 与代码组织

第 7 课：MCP Tools - AI 驱动的浏览器自动化与测试

第 8 课：AI 编程工具与开发环境

第 9 课：前端 AI 功能集成 - Vercel AI SDK

第 10 课：工程化实践与技术选型决策框架

第 10 课：工程化实践与技术选型决策框架

第 11 课：全链路整合与未来展望

四、课程技术地图总览

技术栈选择的核心原则

五、每节课的标准结构

六、参考资料汇总

Tailwind CSS v4

shadcn/ui & Radix UI

Design to Code

AI 生成工具

MCP Tools

Monorepo

AI 编程工具

AI 功能集成

AI 项目规范

七、补充说明

课程更新后的完整结构（11 节课）

新增内容说明

为什么要补充这些内容