Stille hjerte上篇聊完那个用AI半小时搞定的小工具之后，不少朋友私信问我：你一边说AI在抢前端饭碗，一边又用AI把活干了，这不是打自己脸吗？
这篇正好把整个过程完整拆给你看——我让AI从零生成一个原生页面，纯HTML/CSS/JS、不碰任何框架，从提需求到能上线，前后大概30分钟。过程中我会逐段检查AI输出的代码，告诉你哪些能用、哪些必须改、哪些是坑。最后再聊聊“前端落寞”这件事，到底是真的行业危机，还是一次技术栈的大洗牌。
如果你正在焦虑AI是不是要替代前端，或者想搞明白AI生成的原生页面到底靠不靠谱，这篇应该能给你一个相对冷静的答案。
1. 这次到底做了什么——一个原生页面从0到上线的全流程
1.1 页面需求是怎么定的
先说清楚这次要做一个什么东西。我平时会写一些产品介绍类内容，经常需要一个展示页来放演示链接和说明，以前都是套用公司现成的模板，这次我特意要求AI从零写一个独立的展示落地页。页面形态参考了比较常见的SaaS产品落地页：顶部导航、Hero区、特性卡片、价格表、FAQ折叠区、页脚，基本覆盖了营销页的常见模块。
为什么选展示页？因为它够典型。一个落地页几乎包含了原生前端最常碰到的场景：固定导航、滚动变色、响应式栅格、折叠面板、按钮交互、表单校验。把这类页面用AI跑通，比单纯做一个“Hello World”或者动画Demo更有参考价值，因为它直接对标日常业务里最常见的那类前端需求。
另外我特意把目标定成“能上线”而不是“能打开”，这两个标准差距很大。页面上线要考虑的细节比"本地跑起来"多得多：图片资源能不能稳定访问、字体加载会不会闪烁、移动端按钮够不够大、导航在小屏下会不会换行、页面滚动时动画卡不卡。所有这些问题，都是我在实际验收AI产出时一条一条过出来的。
1.2 为什么坚持用“原生页面”而不是上框架
现在的常规做法是用Vue或React搭页面，组件化、工程化、热更新，开发体验确实好。但我这次故意不用框架，让AI纯手写HTML、CSS、JavaScript。原因有三层。
第一层是为了测试AI的真实能力边界。用框架时，AI可以偷懒，比如用一套现成的UI组件库配几个属性，效果好看但暴露不了它“从零理解需求”的能力。原生页面没有组件库可依赖，所有样式、交互逻辑都要AI自己设计，这才是硬功夫。
第二层是为了控制运行成本和使用门槛。一个展示页面而已，引入Vue全家桶加UI库，光JS就几百KB，用户打开速度被拖慢，维护时还得跟着框架版本升级。原生三件套没有依赖、没有构建步骤，一个HTML文件直接双击就能打开，用最简单的方式解决最实际的问题，这才是工程上的合理判断。
第三层也是我的私心——原生页面对AI来说其实是“最难的考试”。框架有大量封装好的API，AI只要调用就行，但原生CSS要处理Flex布局、Grid对齐、层级关系、响应式断点，所有细节都要自己写，写错了就立竿见影。用原生页面检验AI的水平，比用框架更能看出问题。
1.3 工具链与整体工作流
工具用的是现成的AI编程对话工具，不限具体哪家，各家大模型生成静态页面的能力都已经很成熟。我个人习惯先用大模型把整体框架搭出来，再用它迭代修问题，整个流程分成三段：
第一段是需求转译：把脑子里的页面形态，用结构化文字描述给AI，越具体越好。这个阶段通常花5分钟。
第二段是生成与渲染：让AI直接输出完整的HTML源码，保存成文件，用浏览器打开看实际效果。这个阶段大概10分钟，中间可能需要根据效果做1到2轮调整。
第三段是人工验收与修补：逐项检查功能、样式、性能、兼容性，发现不对的地方让AI给修改建议，或者自己手动改。这个阶段最花时间，大概15分钟。
30分钟就是按这个节奏走下来的。后面我会把每一步的细节都展开讲。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 30分钟怎么花——提示词、生成、调优的实操记录
2.1 需求如何“翻译”成AI能听懂的描述
很多人用AI生成页面失败，问题往往不在AI，而在描述太模糊。你说“做一个好看的落地页”，AI只能给你一个模板感很强的大路货。想让AI输出接近你脑子的效果，提示词必须具备几个要素：页面模块结构、每个模块的内容要点、交互行为、视觉风格。
我这次给出的提示词大致是这样：
code复制请生成一个完整的原生HTML页面