AI 代码生成、Agent 自动写前端已经不再是 Demo 玩具，已经进入工程落地阶段。 过去我们选型前端技术栈，关注点是：性能、生态、团队学习成本。
AI 时代，我们必须新增一个核心评估维度：大模型生成代码的成功率、可修复性、幻觉概率、构建部署复杂度。
很多人陷入两极误区：
- 觉得原生 H5+CSS 最简单，AI 写出来直接就能打开，是 AI 首选；
- 觉得所有项目都必须上 React/Vue，原生已经过时，只能做静态页面。
本文抛开传统前端老观点，从 AI 辅助开发视角，横向对比纯 H5 + 原生 CSS、React、Vue3，拆解底层差异、适用边界、坑点，最后给出清晰选型决策树，适合做 AI 网页、Agent 自动生成页面、H5 活动页、SaaS 后台等场景。
核心前提：本文的「纯 H5+CSS」指 Vanilla HTML + CSS + 原生 JS，不含任何框架、打包工具；React 指 React18+TSX；Vue 指 Vue3 SFC 单文件组件。
一、基础概念与核心底层差异
纯 H5+CSS
直接浏览器原生标准，无编译、无虚拟 DOM、无框架运行时。 单 HTML 文件，双击即可打开，不需要 npm、vite、webpack，零构建。 DOM 操作直接，状态靠原生 JS 维护，没有组件隔离机制。
React
JSX 语法，JS 和标签写在一起，虚拟 DOM，单向数据流，Hooks 管理状态。 需要构建工具（Vite/Webpack），产物打包后才能部署；组件化天然，生态庞大。
Vue3
SFC 三段式结构 <template> / <script> / <style scoped>，编译时优化，响应式系统。 模板指令v-if/v-for/@click，API 存在 Options API 与 Composition API 两套写法。
二、多维度横向对比（重点加入 AI 生成能力维度）
表格
| 评估维度 | 纯 H5+CSS | React(TSX) | Vue3 |
|---|---|---|---|
| AI 初次生成成功率 | ⭐⭐⭐⭐⭐单文件，无构建、无框架语法，LLM 可以一次性输出完整可打开页面，适合 Agent 一键产出页面 | ⭐⭐⭐⭐训练样本极多，v0、Cursor、Claude Code 优先支持；但容易出现 Hooks 规则幻觉、组件导入错误 | ⭐⭐⭐SFC 三段式对大模型负担重，AI 容易混用 Options/Composition API，模板指令容易写错 |
| 代码修复能力（迭代修改） | ⭐⭐⭐小修改很强；大型单 HTML 文件，结构扁平，AI 很难精准定位局部组件，改一处容易连带污染全局样式 | ⭐⭐⭐⭐⭐组件边界清晰，Agent 可以单独修改单个组件，错误隔离，适合持续迭代大型应用 | ⭐⭐⭐⭐组件隔离优秀，但模板 / 脚本 / 样式跨块联动，AI 修改时容易出现变量不同步 |
| 构建 & 部署门槛 | ⭐⭐⭐⭐⭐零打包，直接丢 Nginx、对象存储、Vercel 静态托管，AI 不需要处理工程配置 | ⭐⭐⭐需要 Vite、依赖安装、环境变量，AI 经常写出错误的 package.json，工程配置幻觉高发 | ⭐⭐⭐同样需要构建，SFC 编译，AI 容易混淆 vue2/vue3 写法 |
| 样式隔离 | ⭐⭐原生 CSS 全局污染，AI 写样式极易出现类名冲突、样式覆盖 | ⭐⭐⭐⭐搭配 CSS Module / Tailwind，天然隔离，AI 写样式不容易全局污染 | ⭐⭐⭐⭐⭐scoped CSS 原生支持，样式隔离开箱即用 |
| 组件复用 | ⭐原生无组件，只能复制粘贴，AI 做复用逻辑成本极高 | ⭐⭐⭐⭐⭐函数组件天然复用，shadcn/ui 等组件库 AI 友好 | ⭐⭐⭐⭐组件复用能力强，但模板语法增加 AI 理解成本 |
| 复杂状态 / 表单联动 | ⭐原生 JS 状态管理麻烦，AI 写复杂联动逻辑容易混乱 | ⭐⭐⭐⭐⭐状态库生态成熟，AI 很擅长写受控表单、异步逻辑 | ⭐⭐⭐⭐v-model 双向绑定简化表单，但 AI 容易 ref/reactive 混用 |
| 包体积 & 首屏 | ⭐⭐⭐⭐⭐无运行时开销，最小体积 | ⭐⭐⭐React 运行时约 40KB gzip | ⭐⭐⭐⭐Vue3 运行时约 20KB gzip |
| 生态与 AI 工具支持 | ⭐⭐生态就是浏览器原生 API，没有 AI 专属组件库 | ⭐⭐⭐⭐⭐v0、shadcn/ui、Vercel AI SDK 全部优先适配 React | ⭐⭐⭐生态正在追赶，但是 AI 工具支持弱于 React |
| 适合 Agent 自动流水线 | ⭐⭐⭐⭐ 简单页面、一次性页面 | ⭐⭐⭐⭐⭐ 长期迭代 AI 应用、后台产品 | ⭐⭐⭐ 中小型应用，团队熟悉 Vue 场景 |
三、分方案深度剖析，AI 视角优缺点
3.1 纯 H5+CSS（Vanilla）
✅ 优势
- 零构建，对 Agent 流水线极度友好。HyperFrames 这类 HTML 转视频引擎，直接读取 HTML 文件渲染，不需要编译打包，大模型输出 HTML 即可直接运行。适合一次性生成活动页、封面、演示页面、短视频画面素材。
- 语法是浏览器原生标准，不存在框架专属 DSL。大模型不会出现 Hooks、v-if 这类框架专属语法幻觉。只要 HTML/CSS 语法正确，浏览器就可以直接渲染。
- 上手门槛最低，不需要管理依赖、package.json、版本冲突。很多 AI 短视频项目、页面生成工具底层都是输出原生 HTML。
- 极致轻量，首屏加载速度最优，适合移动端 H5、公众号头图页面、静态展示页。
❌ 短板（AI 时代最致命）
- 没有组件边界，大型页面变成 "面条代码"。当页面代码超过 1000 行，AI 很难精准修改局部模块。改一个卡片，很容易连带破坏其他 DOM 结构与 CSS。
- CSS 全局污染是老大难，AI 生成 CSS 时经常出现样式互相覆盖，越迭代越难维护。
- 复杂交互、多组件状态共享，原生 JS 需要手写大量状态维护代码，AI 写复杂状态逻辑出错率很高。
- 无法模块化拆分，项目变大之后，无法做代码拆分、按需加载。
最佳场景：一次性页面、AI 自动生成的演示页面、H5 宣传页、HyperFrames 视频合成工程、简单静态可视化页面。 不适合：长期迭代、多页面后台系统、大量表单联动的复杂应用。
3.2 React + TSX
✅ 优势
- AI 训练数据最多，互联网大量开源项目、AI 产品前端都是 React。Cursor、Claude Code、v0 等 AI 编程工具原生优先适配 React，生成代码质量最高。
- JSX 将模板、逻辑写在同一个上下文，对 LLM 友好。不像 Vue SFC，需要同时维护 template/script/style 三块内容，跨块变量同步容易出错。
- 组件边界清晰，Agent 迭代修改的核心优势。当需求持续迭代，AI 可以定位到单个组件，单独修改，不会污染全局。适合长期持续开发的 AI 应用。
- 生态天花板最高，shadcn/ui、Radix、Vercel AI SDK，流式输出、SSE、RAG 交互、AI 对话界面都有成熟方案。
❌ 短板
- 引入运行时开销，还有构建工程。AI 很容易写出错误的依赖、错误的 Hooks 写法（违反 Hook 规则）。
- 学习概念多：虚拟 DOM、Hooks、单向数据流，AI 会产生框架专属幻觉。
- 工程复杂度高，需要管理 npm 依赖，Agent 流水线需要额外处理构建、打包报错。
最佳场景：AI 对话后台、SaaS 产品、复杂表单、多页面 Web 应用、需要长期迭代的前端项目。 不适合：一次性临时页面、不想维护工程依赖、轻量静态展示页。
3.3 Vue3
✅ 优势
- 编译时优化，运行时体积更小，响应式开箱即用，表单开发效率高。
- SFC scoped CSS 原生解决样式污染问题，国内开发者基数庞大。
- 模板语法贴近 HTML，新手可读性好。
❌ 短板（AI 场景痛点）
- SFC 三段式结构是最大短板。LLM 需要同时维护 template、script、style 三个区块，变量、方法、样式需要跨文件同步，出错概率显著高于 React。
- 两套 API（Options API / Composition API），AI 经常混用两种写法，生成新旧混合的混乱代码。
- AI 生态落后 React，大部分 AI 代码生成工具优先 React，Vue 组件库、AI 示例样本偏少。
最佳场景：团队原有 Vue 技术栈，中小型管理后台，国内企业内部系统。 不适合：完全交给 AI Agent 从零自动生成、持续迭代的新项目。
四、AI 时代选型决策树（硬核工程建议）
- 如果你的项目满足下面任意一条，优先纯 H5+CSS
- 页面是一次性生成，用完即弃，不需要长期迭代维护
- 需要接入 Agent 流水线，例如 HyperFrames，HTML 直接作为渲染输入
- 静态展示页面、活动 H5、可视化封面，交互简单
- 不想维护 npm 依赖、打包工程，追求开箱即用，双击直接运行
- 如果你的项目需要持续迭代、复杂交互、AI 对话产品，优先React
- 项目需要多组件、表单联动、异步流式 AI 交互
- 使用 AI 编程 Agent（Cursor、Claude Code、WorkBuddy+Code Skill）长期迭代开发
- 需要复用成熟 AI 组件库 shadcn/ui，Vercel AI SDK
- 只有团队本身精通 Vue，存量项目维护，才选Vue3
- 团队熟悉 Vue，历史项目迁移
- 中小型后台管理系统，人工为主，AI 辅助开发，不是完全交给 Agent 自动生成
五、AI 开发场景常见踩坑总结
- 不要迷信 "原生 H5 AI 写出来就一定完美" 原生 HTML 适合单次生成；一旦反复修改迭代，单文件体量膨胀，AI 定位代码片段的能力会断崖式下跌，样式冲突、DOM 冗余会越来越严重。
- React 虽然 AI 生成质量高，但工程幻觉是重灾区 大模型很容易虚构不存在的包、错误的 Hook 调用，Agent 流水线必须增加 lint 校验、错误捕获、自动修复的闭环。
- Vue SFC 对 Agent 不友好 尽量不要让 AI 从零新建 Vue 项目，更适合人工搭建基础骨架，AI 只负责写单个组件。
- 一个推荐混合方案（很多 AI 项目在用） 一次性素材、视频渲染页面用原生 H5+Tailwind CSS；产品主应用、后台管理系统用 React。兼顾 AI 单次生成的便捷性，和长期迭代的可维护性。
六、总结
AI 并没有淘汰任何一种技术栈，只是改变了选型的核心权重 。 在传统前端时代，我们优先考虑团队人力、运行性能；AI 时代，大模型生成准确率、代码可修复性、工程复杂度成为不可忽略的指标。
- 纯 H5+CSS：一次性生成场景之王，零构建，适合 Agent 产出临时页面、可视化素材；短板是大型项目不可维护。
- React：AI 长期迭代项目首选，组件隔离、训练样本充足，AI Agent 持续修改稳定性最强；代价是需要维护前端工程。
- Vue3：人工开发体验优秀，但三段式 SFC 增加大模型理解负担，AI 全自动从零开发场景不占优势，适合存量 Vue 团队。
选型一句话：一次性页面选原生 H5；AI 持续迭代产品优先 React；团队存量 Vue 项目继续用 Vue。