前端工程师失业倒数？当 AI 开始一句话生成网站，真正被重写的到底是什么

最近几年，关于“不会写代码也能做网站”的讨论越来越多。但如果把视角拉长，会发现这并不是一个突然发生的断裂时刻，而是网页制作方式连续演化后的自然结果。从早期网页制作，到 AI 时代的网站生成，变化的不只是工具，而是网站设计与交付的底层逻辑。

网站制作史，其实一直在朝“更低门槛、更高抽象”前进

1. 1995～2000：Table 排版与访客计数器时代

互联网最早的一批网站，不是“设计出来”的，更像是“拼出来”的。那时网页布局主要依赖 table，视觉表达极其有限，很多页面的重点甚至不是品牌、叙事或转化，而是“把信息摆上去”。

这个阶段的网站有几个鲜明特征：

  • 布局服务于可显示，而不是可体验
  • 视觉语言粗糙，交互极少
  • 访客计数器、跑马灯、闪烁文字，是那个年代最常见的“高级感”

如果今天回看，会觉得这些网页非常原始。但它们已经奠定了一个长期成立的事实：网站从来不是单纯的技术产品，它一直在承载“表达自己”的需求。

2. 2000～2005：Flash 开场动画的年代

进入 Flash 时代后，网页第一次拥有了强烈的“秀场感”。网站不再只是信息容器，而开始变成体验装置。开场动画、全屏交互、音乐和动态切换，构成了早期数字品牌体验的主流想象。

这一阶段的关键不在于“更好用”，而在于“更震撼”。

很多公司和设计师都在追求一种结果：让用户一打开页面就觉得“这个品牌很厉害”。这类思路今天并没有消失，只是它的实现方式，从 Flash 换成了 WebGL、Three.js、视频、滚动动画与 AI 生成素材。

3. 2005～2010：CSS float 排版革命

当网页逐渐从“展示实验”走向“日常产品”，前端技术也开始进入工程化阶段。CSS float 带来了更自由的布局方式，网页结构变得更清晰，页面可以摆脱对 table 的强依赖。

这一步的真正意义在于：网页制作开始从“能做出来”转向“可以维护、可以复用、可以协作”。

也就是说，前端开始成为一门独立职业，而不是单纯的页面拼装工作。

4. 2010～2014：响应式与 Bootstrap

移动互联网到来后，网站开发第一次被迫面对“同一套内容要适配多种屏幕”的问题。响应式设计成为主流，Bootstrap 这类框架快速普及，把大量标准化界面与布局模式打包给开发者使用。

这个阶段的重要变化是：

  • 网站开始大规模组件化
  • 设计开始接受“模板化效率”
  • 企业交付从手工制作转向工业化生产

换句话说，这一波不是在追求最独特，而是在追求最快交付。


AI 时代的变化，不是“会不会写代码”，而是“谁来决定设计”

视频中一个非常关键的切入点，是它没有停留在“AI 能不能生成网页”这种表层问题，而是转向了一个更本质的问题：当 AI 可以参与设计和开发时，网站风格到底是怎么被决定的？

这也是为什么视频会提到 Skill 对 AI 设计风格的影响。

因为 AI 生成网站并不只是把一段自然语言翻译成 HTML。真正影响结果的，是提示词、组件系统、设计范式、参考案例，以及你给 AI 提供的上下文。换句话说，AI 不是自动生成“正确答案”，而是在你给定的设计框架里生成“某一种答案”。

这也解释了为什么像 shadcn/ui 这样的体系会在 AI 时代格外重要。它不是传统意义上的黑盒组件库，而是一套开放代码、可定制、可扩展的组件体系，强调“拿到代码本身并继续改造”。官方描述中，它是一套“可自定义、可扩展、可作为基础继续构建”的组件系统。

这件事的意义非常大：

当 AI 参与生成 UI 时，越是开放、清晰、结构一致的组件体系，越容易被 AI 理解、组合和复用。于是，“设计风格”开始不只由设计师决定，也由你喂给 AI 的组件生态来决定。


从 2015～2018 到今天：SPA、组件化、再到 AI 拼装

SPA（单页应用）时代让前端彻底产品化。网站不再只是页面集合，而是状态驱动、组件组合、交互连续的应用系统。

在这个语境下，再看 AI 生成网站，就会发现它其实不是横空出世，而是踩在几层成熟基础设施之上：

  • 前端框架已经高度组件化
  • UI 系统已经模块化
  • 动画、3D、媒体素材都有成熟工具链
  • 生成式 AI 让“需求转界面”的步骤被压缩

所以，所谓“一句话生成网站”，并不是 AI 凭空创造，而是它调用了一整套已经标准化的前端工业能力。

两个关键发现：AI 真正改变的，不是编码，而是网站生产方式

视频里提到两个关键发现。结合整体内容，可以把它们归纳为下面两点。

发现一：AI 已经足够生成“能看、能用、能演示”的网站

这不是说 AI 现在就能无脑生成所有生产级项目，而是说它已经非常擅长完成以下工作：

  • 快速搭建页面骨架
  • 生成常见交互模块
  • 拼合成熟 UI 风格
  • 复刻已有站点的视觉节奏
  • 做出足以展示概念的 MVP 或提案页面

也就是说，在很多以“展示、提案、营销、验证想法”为目标的场景里，AI 已经从玩具跨过了实用门槛。

发现二：做网站的瓶颈正在从“开发能力”转向“设计判断”

当页面生成越来越容易，真正稀缺的能力就变成了：

  • 你到底想让网站完成什么任务
  • 你要把用户带进怎样的阅读路径
  • 你是要强调品牌感、故事感，还是转化效率
  • 你知道什么该放大，什么该删掉吗

换句话说，AI 并没有消灭设计与前端，而是在逼迫这两个角色从“执行工具人”升级为“结构与判断的负责人”。

用 shadcn/ui 做出 14 个网站，这件事说明了什么

视频中提到，借助 shadcn/ui 做出了 14 个网站。这个信息非常值得展开，因为它说明一个重要趋势：

未来网站生产，不再是从零开始，而是从系统开始。

shadcn/ui 之所以在这类工作流里好用，不只是因为它“好看”，而是因为它兼顾了这几件事：

  • 组件默认质感高
  • 结构清晰，便于 AI 继续修改
  • 可组合性强，适合快速拼装不同类型网站
  • 开放代码，适合反复迭代和二次创作

因此，它非常适合做以下事情：

  • 快速搭建不同行业落地页
  • 先产出高保真版本，再做定制修改
  • 让 AI 在统一设计语言下批量生成多个方向
  • 在短时间内完成大量风格探索

这其实揭示了 AI 时代的网站制作方法论：
不是“让 AI 直接做最终成品”，而是“给 AI 一个优秀的设计骨架，让它成为高效率变体生成器”。

真正有意思的部分：挑战复刻 Awwwards 获奖网站

Awwwards 一直代表着网页设计里最强的一批视觉实验、交互美学与品牌表达。选择去复刻这类网站，本质上是在检验一件事：

AI 到底能不能触碰高质量设计，而不只是生成模板页。

视频中展示的方向很明确：不是停留在普通企业官网，而是直接挑战那些具备强视觉语言的作品。这样做的意义在于，它把评判标准抬高了。

因为复刻高水准网站，难点从来不只是排版，而包括：

  • 动效节奏
  • 场景转换
  • 叙事顺序
  • 视觉层级
  • 3D 元素与页面结构的配合

所以，这一段真正想说明的不是“AI 无敌了”，而是：只要拆解方法正确，AI 已经能参与到过去只有高水平设计师和前端团队才能完成的工作流中。

自制 Extract 工具：为什么“拆解能力”比“生成能力”更重要

视频里的一个很关键动作，是作者自制了 Extract 工具去拆解动画网站。

这一点非常重要，因为很多人谈 AI 时，注意力都放在“生成”。但实际工作中，高质量产出往往建立在高质量拆解之上。

拆解一个复杂网站，通常要回答这些问题：

  • 页面分成几个内容段落
  • 每个段落承担什么叙事功能
  • 哪些动画是滚动触发，哪些是自动播放
  • 哪些元素是视觉装饰，哪些是信息主轴
  • 用户滚动时，情绪和注意力是怎样被引导的

只有先把这些东西拆开，AI 才能在后续步骤里协助重建。

所以这套方法论其实是：

  1. 先观察
  2. 再拆解
  3. 再结构化
  4. 最后才生成

这也是为什么很多 AI 生成网站看起来“像”，却依然“不对”。问题往往不在生成模型，而在于前面的分析层根本没有做好。

Three.js 复刻与 3D 模型替换：高难度网页开始被标准化

视频后半段开始进入更有挑战的层面：Three.js 网站复刻与 3D 模型替换。

Three.js 是当前 Web 端 3D 表达的重要基础之一，常用于品牌官网、产品展示、沉浸式叙事与交互场景。它的难点并不只是“把模型放上去”，而是：

  • 摄像机如何运动
  • 模型与页面滚动如何绑定
  • 光照、材质、场景层次如何控制
  • 3D 内容如何与文案节奏配合

过去这类项目通常需要设计、动效、前端、3D 多角色协作。现在 AI 的加入，让它的部分流程开始被压缩：

  • 布局与内容骨架可由 AI 先生成
  • 参考站点可通过拆解工具建立结构
  • 3D 模型可以在现有工程里替换
  • 局部参数调整变成“试错式优化”

这并不意味着复杂网站会被一键生成，而是意味着复杂网站的试错成本大幅下降。

不做 3D，也能做高级动效：图片生视频工作流的出现

并不是所有项目都需要真 3D。视频很清楚地指出了另一条更轻、更快的路径：不用 3D，也能通过图片生视频动画，做出足够有质感的动态页面。

这条工作流的价值在于，它解决了很多团队的现实问题：

  • 没有 3D 设计师
  • 没有模型资源
  • 没有前端写复杂 WebGL 的时间
  • 但依然想要“高级感”和“动态感”

于是，工作流变成：

  1. 先有静态图或视觉稿
  2. 用生成式工具把图像转成运动素材
  3. 再把这些素材嵌入网页叙事
  4. 通过滚动控制节奏与切换

在这个体系里，网站的高级感不再完全依赖真实 3D，而是依赖视觉节奏与叙事组织。

ScrollTrigger 逐帧动画：网站正在变成“可滚动的影片”

视频里提到 ScrollTrigger 逐帧动画成果，这说明最终呈现方式不是简单的视频嵌入，而是更接近“滚动驱动叙事”。

这类做法的核心优势有三点：

第一，它让用户不是被动观看，而是通过滚动参与节奏控制。

第二，它把页面浏览变成一段连续体验，而不是零散阅读。

第三，它可以把复杂信息拆成镜头式递进，显著提升理解效率。

这类技术的重点，从来不是炫，而是“引导”。

一旦用得好，它不是在堆特效，而是在做下面这件事：

让用户顺着你安排的顺序，看见你最想让他看见的东西。

动画不是重点，重点是网站到底要完成什么任务

视频最值得拿出来单独强调的一段，是它最后把注意力从“动效很酷”拉回到“网站的本质”。

这是整支视频最成熟的地方。

因为很多人在看到 AI、Three.js、逐帧动画、Awwwards 风格时，会自然把重心放在“怎么做得更酷”。但视频给出的结论更接近现实商业世界：

动画只是手段，网站本身承担的任务才是核心。

围绕这一点，视频拆出了三种设计策略。可以把它们理解成三种不同的网站目标模型。

设计策略一：说服漏斗——让客户主动找你合作

这是第一版设计的核心逻辑。

所谓“说服漏斗”，本质上是一种转化导向的组织方式。页面不是为了展示设计师自己，而是为了让潜在客户在最短时间内完成一轮心理判断：

  • 你是谁
  • 你擅长什么
  • 你做过什么
  • 你为什么值得信任
  • 我为什么应该联系你

在这种模式下，页面的每一段都应该围绕“降低决策阻力”来安排。典型结构可能是：

  • 首屏：一句话说清价值
  • 第二屏：展示能力范围
  • 第三屏：作品或案例证明
  • 第四屏：信任背书
  • 结尾：明确行动入口

这类网站不是最艺术的，但往往最有效。

因为它直接服务一个商业目的：让对的人尽快做出合作决策。

设计策略二：叙事式——让人真正看懂你在做什么

第二版更偏向叙事型表达。

有些项目并不适合用传统漏斗，因为它卖的不是单一服务，而是一种理念、方法、产品世界观，或者比较复杂的能力结构。这时，用户需要的不是立刻被说服，而是先被带入。

叙事式网站的核心不是罗列信息，而是安排阅读体验。

它更像电影分镜，而不是 PPT 大纲。

这类设计通常更适合：

  • 创意工作室
  • 品牌官网
  • 新产品发布页
  • 需要解释复杂概念的项目
  • 想建立调性而不只是收集线索的页面

叙事式的难点在于节奏。

节奏太慢，用户会失去耐心；节奏太快，信息又来不及沉淀。

所以，AI 能帮助生成结构和素材，但“讲故事的顺序”依然需要人来判断。

设计策略三：极简——让人最快看懂重点

第三版是极简路径。

极简不是少放东西，而是只保留真正必要的东西。

它是一种非常克制的能力：把复杂性留在内部，把清晰感交给用户。

极简型网站通常有这些特点：

  • 文案极短
  • 视觉层级明确
  • 页面很少解释“全部”，只强调“最重要”
  • 用户几乎不需要学习成本，就能知道下一步干什么

这种方式往往是最快建立有效沟通的方法。

尤其是在用户注意力极度稀缺的今天，很多网站最大的问题不是内容不够，而是内容太多、层次太乱、重点不清。

所以，视频把第三版落到“最快看懂重点”，实际上是在提醒一个常被忽略的事实：

真正成熟的网站，不一定最复杂，但一定最清楚。

这套工作流背后的工具栈，意味着什么

视频说明区列出的工具非常有代表性，包括 Claude Code、shadcn-ui、Lottie、Three.js、Hyper3D、Google Whisk、Google Flow、Gemini、ezgif 等。其中，shadcn/ui 的核心价值在于开放且可定制的组件系统；LottieFiles 提供可在网页中使用的轻量动画资产与播放器生态；Gemini 是 Google 的生成式 AI 助手；ezgif 则常用于 GIF、WebP 与动图的转换、压缩、拆分等轻量处理。

把这些工具放在一起看，会发现它们不是零散堆砌，而是覆盖了一个完整的网站生成链条：

  • 生成层：Claude Code、Gemini 负责理解需求、生成代码、改写结构、补全文案
  • UI 层：shadcn-ui 负责快速搭建高质量界面骨架
  • 动效层：Lottie、ScrollTrigger、逐帧动画 负责把静态页面变成有节奏的体验
  • 3D 层：Three.js、Hyper3D 负责沉浸感与空间表达
  • 素材层：Google Whisk、Google Flow 负责图像与视频生成、补足视觉材料
  • 后处理层：ezgif 负责格式转换、动图压缩、逐帧素材整理

这意味着今天做网站，已经不再是“会前端”这一项能力的竞争，而是“会不会把这些能力串成工作流”的竞争。

AI 不是在替代前端，而是在淘汰低判断力的网页生产

这支视频最容易被误读成“前端要失业了”，但更准确的理解应该是：

低层重复性工作会被压缩，高层判断性工作会被放大。

被压缩的部分包括：

  • 基础布局搭建
  • 常见组件拼装
  • 一般性动效实现
  • 简单页面复刻
  • 常规营销页初稿

被放大的部分包括：

  • 目标定义
  • 信息架构
  • 设计判断
  • 叙事顺序
  • 品牌感把控
  • 最终体验取舍

所以，未来最有价值的前端和设计师，不是写代码最快的人，而是最能把“商业目标、内容结构、视觉表达、技术实现”整合起来的人。

回到网站的本质：不是更炫，而是更准确

视频最后回归到一个非常朴素、但也最重要的结论：网站的本质并没有变。

无论是 table、Flash、Bootstrap、SPA，还是今天的 AI、Three.js、逐帧动画，网站始终在回答同一组问题：

  • 你是谁
  • 你要表达什么
  • 你想让用户做什么
  • 你凭什么值得被记住

技术在持续升级，但网站最核心的任务，从来不是堆砌技术，而是完成沟通。

真正好的网站，不一定最复杂，也不一定最像 Awwwards。

它可能只是最适合当前目标、最清楚传达重点、最能推动用户行动的那一个。

结语：不会写代码的人能做网站了，但这只是起点

AI 让“做一个网站”这件事的门槛大幅下降了。

这是事实。

但门槛下降，不代表价值消失。

它只是把竞争从“谁会做”推向“谁做得更对”。

未来的网站制作会越来越像这样：

  • 用 AI 快速生成雏形
  • 用组件系统建立稳定骨架
  • 用动效和视觉增强表达力
  • 用拆解能力复刻优秀案例
  • 最后用人的判断完成取舍

因此，真正值得关注的问题不是“前端会不会失业”，而是：

当人人都能做网站时，谁还能做出真正有效的网站？

答案不会只属于会写代码的人，也不会只属于会提提示词的人。
它属于那些能够理解用户、理解叙事、理解设计、也理解工具的人。

这，才是 AI 时代网页创作最真实的变化。