大模型时代的前端开发

大模型时代的前端开发

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

12 节课27 小时具备项目经验的前端工程师

AI-Native 技术栈全景图

样式层
Tailwind CSS v4
组件层
shadcn/ui
Radix UI
设计工具
Figma AI
v0.dev
架构层
Turborepo
pnpm
测试层
Playwright MCP
开发工具
Cursor
Claude Code
AI 集成
Vercel AI SDK
工程化
Biome
tRPC

课程目录

0

第 0 课：认知重构

2h

AI 友好性是新的选型维度

认知AI 友好性Token 化
1

第 1 课：Tailwind CSS v4

2.5h

样式方案革命

TailwindUtility-firstOxide 引擎
2

第 2 课：shadcn/ui

2.5h

组件库范式转移

shadcn/ui21st.devTweakCNmagic-ui
3

第 3 课：Radix UI

2.5h

无头组件的底层逻辑

RadixHeadlessComposition
4

第 4 课：Design to Code（上）

2.5h

设计工具的 AI 革命

Figma AISemi DesignDesign TokenPenpot
5

第 5 课：Design to Code（下）

2.5h

AI 代码生成工具

v0.devBolt.newLucideTabler Icons
6

第 6 课：Monorepo

2.5h

AI 友好的项目架构

TurborepopnpmAGENTS.md
7

第 7 课：MCP Tools

2.5h

浏览器自动化与测试

PlaywrightMCP自动化测试
8

第 8 课：AI 编程工具

2.5h

Memory 管理

CursorMemoryPrompt
9

第 9 课：Vercel AI SDK

2.5h

前端 AI 功能集成

useChat流式响应AI Agent
10

第 10 课：工程化与全栈化

2.5h

Biome + Server Actions

BiometRPCPrisma
11

第 11 课：全链路整合

2.5h

未来展望

全链路职业发展未来趋势

五大核心原则

✓
语义内联
Tailwind — 样式在 HTML 中，AI 无需跨文件推理
✓
源码可见
shadcn/ui — 代码在项目中，AI 可以直接修改
✓
组合优于继承
Radix UI — Composition 模式，AI 更易理解
✓
约定优于配置
Monorepo — 文件结构约定，AI 快速定位
✓
Memory 管理
AGENTS.md — 让 AI 越用越懂你和你的项目