这次我们来看一个很特别的项目：用纯 HTML + CSS + JS 复原 2006 年新浪娱乐视频播放界面。没有后端、没有框架、没有打包工具，就是一个静态网页，却把差不多二十年前的门户网站播放器视觉和交互搬回了浏览器里。更有意思的是，这个项目是用 Vibe Coding 的方式做的，也就是通过自然语言描述需求，让 AI 辅助生成代码，再人工微调。整体来看，它不算复杂，但非常适合拿来练手，也能顺便把 HTML5 video 播放器、CSS 复古风格、JavaScript 交互串在一起过一遍。
这个项目最值得关注的地方有三点。第一，它选了一个非常经典的复古目标：2006 年的新浪娱乐视频播放页，那时候主流网页视频还依赖 Flash 播放器，整个页面的配色、布局、控件样式都很有年代感；第二，它没有使用任何在线媒体服务，而是用本地 video 标签模拟播放过程，直接绕开 Flash 插件不可用的问题，改造成本很低；第三，它完整跑了一遍 Vibe Coding 流程，从“我想要一个复古播放器页面”到“帮我调整按钮样式”，再到“给进度条加拖拽”，每一步都能看到 AI 参与代码生成和作者人工修正的过程。
本文会用项目复盘的方式，带大家完整走一遍：拆解 2006 年播放器页面的信息架构，用 HTML 重构页面骨架，用 CSS 复刻当年的配色和控件，用 JavaScript 把播放、进度条、音量、全屏这些交互补上，最后再聊聊用 Vibe Coding 写这类页面时怎么提需求、怎么验收 AI 生成的代码、怎么处理浏览器兼容问题。如果你对 HTML 网页制作感兴趣，或者想试试用 AI 辅助写前端代码，这篇可以直接收藏。
1. 核心能力速览
对于这类纯前端项目，很多人第一反应是“这也能算项目？”，但恰恰是这类小项目最适合做技术验证。先看规格：
| 能力项 | 说明 |
|---|---|
| 项目类型 | 纯静态 HTML 网页，复原 2006 年新浪娱乐视频播放器界面 |
| 技术栈 | HTML5 + CSS3 + 原生 JavaScript |
| 运行环境 | 任意现代浏览器，不需要安装依赖，不需要编译 |
| 启动方式 | 双击 HTML 文件，或通过本地静态服务器访问 |
| 后端依赖 | 无 |
| 构建工具 | 无，Vibe Coding 直接生成源码 |
| 视频播放 | 使用 HTML5 video 标签替代当年的 Flash 播放器 |
| 核心功能 | 视频播放/暂停、进度条、音量控制、全屏切换、复古皮肤 |
| 批量任务 | 不涉及；但页面可以同时管理多个视频源，采用类似播放列表的数据结构 |
| 适合场景 | 怀旧界面复刻、前端练手、Vibe Coding 工作流验证 |
从表里可以看到，这个项目对硬件没有任何特殊要求，普通办公电脑浏览器就能跑。相比那些动辄要求高显存、高配置的 AI 项目，这种复古网页复原项目门槛极低，重点全在代码结构和设计还原上。核心目录也很简单，通常就三个文件：index.html、style.css、script.js。任何能打开浏览器的人都可以直接上手。
这里要说明一点：标题里的“渣技术”并不是贬义，而是作者对“代码不一定优雅，但能用”这种状态的自我调侃。用 Chat 型 AI 工具生成一批代码，再把它们拼起来、修一修、跑通，对很多非典型前端开发者来说，就是 Vibe Coding 的日常。这个项目的代码本身也确实很朴素：没有复杂的封装，没有抽象工厂，就是直接了当的“页面 + 样式 + 脚本”三件套。这种朴素反而带来了一个好处：容易读、容易改、容易复刻。
2. 为什么选择 2006 年新浪娱乐播放器界面
先聊聊项目背景。2006 年前后的门户网站播放器页面，和今天的视频网站有非常明显的差异。那时主流的视频播放方式是 Flash 播放器嵌入网页，新浪娱乐、搜狐、网易等门户都有自己的视频频道。播放页通常由几部分组成：顶部是新闻/频道的导航条，中间是视频播放区域加标题和简介，右侧是相关视频或新闻列表，下方是评论区。页面整体信息密度很高，视觉上不如今天干净，但那个年代的用户已经习惯了这种“满满当当”的布局。
那个年代的设计语言也很有特点：页面宽度通常是固定居中，背景偏白或偏灰，蓝色和橙色按钮用得比较多，标题文字习惯用加粗、下划线配合跳转链接，整体风格偏“门户感”。字体方面，页面大量依赖系统中文字体，比如宋体、黑体，而不是后来的 Web 字体。播放器周边会有细边框、工具栏按钮，甚至带一点轻微的渐变效果。这些细节单独看都不起眼，组合起来就是强烈的时间识别度。
对这些视觉细节做逆向拆解，是复原项目的核心工作。做 Vibe Coding 时也一样：你首先得知道目标页面长什么样，才能把需求描述得足够具体。如果直接跟 AI 说“给我做一个 2006 年的播放器页面”，它大概率会生成一个四不像。只有把布局、配色、文字习惯、控件状态都拆出来，AI 生成的代码才可能接近预期。所以，这个项目表面上是在写前端，实际上是在练习“视觉需求拆解”和“提示词表达能力”，这两项能力在 AI 辅助开发时代越来越重要。
从版权和合规角度也要说一句：如果你是做历史界面复原实验，目标是学习前端技术或者做个人怀旧项目，这种思路没有问题。但如果你想把新浪、搜狐等页面原样复制用于商业用途，或者直接使用其中的商标、Logo、图片素材，就需要注意版权授权问题，尤其是素材和品牌标识的使用边界。个人学习演示时可以尽量用占位文字、自绘图标代替真实品牌元素，避免不必要的风险。
3. Vibe Coding 是一种什么样的工作方式
Vibe Coding 这个词最近在技术圈讨论很多，核心意思是用自然语言和 AI 模型对话，让 AI 生成代码，开发者负责描述需求、验收结果和修修补补。这个项目的开发过程就是典型样本：先描述页面整体结构，再让 AI 生成 HTML 骨架，接着提配色、控件、交互需求，不断迭代推进。
和传统开发方式相比，Vibe Coding 有几个显著区别。第一，代码更多是“对话出来的”而不是“敲出来的”，工程结构依赖 AI 对需求的理解，初始质量波动很大；第二，调试周期变短，很多小问题直接让 AI 帮忙看，省掉了大量搜索和阅读文档的时间；第三，对开发者读代码能力的要求反而提高了，因为你至少要能判断 AI 生成的东西对不对。换句话说，Vibe Coding 不会让前端基础变得不重要，反而会更看重开发者对布局、样式、事件流的基本判断力。
在这个项目里，作者给 AI 的需求大概分了三层。第一层是页面结构，比如“一个 2006 年风格的门户播放页面，顶部导航，左侧视频区，右侧列表区，底部评论区”；第二层是视觉细节，比如“主色调用蓝色和橙色，背景接近灰色，按钮要有渐变效果”；第三层是交互逻辑，比如“进度条可以点击跳转，播放/暂停按钮要切换状态，音量滑块是竖直的”。每一层都依赖 AI 对网页的理解，也都需要后续人工修正。
这种工作方式适合什么样的项目？从这次的实践看，适合 UI 复原、原型验证、小工具开发这类“需求明确、边界清晰”的任务。不适合特别复杂的业务系统，因为 AI 很难在一段对话里把握全局状态；也不适合对性能有极端要求的场景，因为 AI 生成的代码通常优先保证可用性，而不是性能。Vibe Coding 更接近“快速实现”而不是“架构设计”，搞清楚这一点，对 AI 生成代码的预期管理会很有帮助。
4. 界面拆解：2006 年播放器页面的信息架构
开始写代码之前，先把 2006 年新浪娱乐视频播放页的信息架构拆清楚。这里参考历史资料和普遍记忆中的页面形态，当年播放器页面大致包含以下模块。
第一个是顶部导航区。门户风格的页面上方通常有频道导航，比如新闻、娱乐、体育、财经等，下面可能还有子频道或者面包屑。这个区域在复原项目里可以简化，但不能没有，否则页面一眼就不会觉得“像当年”。导航的高度、背景色、链接排列方式决定了一整页的“门户基因”。
第二个是主体内容区，通常是一个居中的大块白色或浅色区域。里面左侧是视频播放器主体，播放器周围有边框、控制条、标题和播放/暂停按钮；右侧是一列视频推荐链接，标题通常带下划线，鼠标悬停有变色效果。左右两栏布局是复盘时的重点，很多复古感都来自这种分栏比例和间距关系。
第三个是视频信息区。播放器下方会有一行视频标题、发布时间、点击量、分享按钮等。2006 年的页面里，标题一般比较朴素，按钮可能是“复制链接”“收藏”这类带有明显时代感的文字按钮，和今天满屏图标按钮的交互方式不同。
第四个是评论区。那时候的评论区样式非常简单，基本是一行输入框外加“发表评论”按钮，下面列出用户评论。当前主流视频网站的高级回复、点赞、踩等功能都不用做，因为做了反而不像，这段历史的“简陋感”本身就是氛围的一部分。
把这些信息架构确定下来之后，再考虑配色和字体：主色拿蓝色和橙色做视觉焦点，背景用浅灰，文字用黑色、蓝色和灰色组合。整页宽度可以固定布局，例如 1000px 左右居中，保持老门户的观感。给 AI 描述需求时，按这个架构分段描述是最有效的：先描述顶部导航，再描述播放器区域，然后是右侧列表和评论区，AI 会按照你给的顺序逐步生成代码，比一次性让它生成整页更容易控制结果。
5. 用 HTML 搭建复古页面骨架
页面骨架是整个复原项目的基础。下面是一段接近实际项目的 HTML 结构示例，目录结构很简单：一个index.html、一个style.css、一个script.js。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新浪娱乐视频播放 - 2006 复古版</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 顶部导航 --> <div class="top-nav"> <div class="nav-inner"> <span class="logo">新浪娱乐</span> <a href="#">新闻</a> <a href="#">娱乐</a> <a href="#">体育</a> <a href="#">财经</a> <a href="#">博客</a> <a href="#">视频</a> </div> </div> <!-- 主体播放区 --> <div class="main-wrap"> <div class="player-panel"> <div class="player-header"> <h1>视频：某音乐盛典现场直击（2006）</h1> <span class="meta">2006-06-18 12:30:00</span> </div> <div class="player-box"> <video id="player" controls preload="metadata" poster="poster.jpg"> <source src="sample.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 视频。 </video> </div> <div class="player-tools"> <a href="#" class="btn">复制链接</a> <a href="#" class="btn">收藏视频</a> <a href="#" class="btn">分享给好友</a> </div> </div> <!-- 右侧推荐 --> <div class="side-list"> <h3>相关视频</h3> <ul> <li><a href="#">某歌手演唱会全程实录</a></li> <li><a href="#">娱乐现场：明星专访</a></li> <li><a href="#">影视剧开机发布会</a></li> <li><a href="#">周末综艺精彩片段集锦</a></li> </ul> </div> </div> <!-- 评论区 --> <div class="comment-area"> <h3>发表评论</h3> <textarea id="commentInput" rows="3" placeholder="说点什么吧"></textarea> <button id="commentBtn" class="btn">发表评论</button> <ul id="commentList"></ul> </div> <script src="script.js"></script> </body> </html>骨架里面有几个设计细节需要注意。第一，整个页面结构是从上到下、从左到右的传统门户布局，这种结构决定了页面的“身份认同”；第二，video 标签的controls属性可以先保留，等后续 CSS 定制完再隐藏默认控件，自己重画一套复古风格的控件；第三，右侧推荐列表和评论区都用ul/li组织，因为 2006 年页面里的推荐、评论基本都是链接列表。
用 Vibe Coding 生成这类骨架时，提示词可以这样写：“请用 HTML5 写一个 2006 年门户网站风格的视频播放页面，要求有顶部导航、左侧播放器、右侧推荐列表、底部评论区，播放器使用 video 标签，不需要 footer。” 这样 AI 会立即理解你要的是页面结构，而不是业务逻辑。骨架写完之后，下一步是 CSS。对于复古界面，CSS 的作用比 HTML 更重要，因为年代感主要由视觉细节体现。
6. 用 CSS 复刻复古配色和控件风格
2006 年新浪娱乐播放器页面的视觉风格可以归纳为几个关键词：固定宽度、浅灰背景、蓝色链接、橙色按钮、边框线。下面这段 CSS 集中处理这些特征。
/* 页面全局 */ body { margin: 0; background: #e8e8e8; font-family: "SimSun", "宋体", serif; color: #333; } .top-nav { background: #1a4f8b; height: 40px; border-bottom: 3px solid #ff7700; } .nav-inner { width: 1000px; margin: 0 auto; line-height: 40px; } .nav-inner a { color: #fff; text-decoration: none; margin-right: 22px; font-size: 14px; } .nav-inner a:hover { color: #ffff00; text-decoration: underline; } .logo { font-size: 21px; font-weight: bold; margin-right: 30px; color: #fff; } .main-wrap { width: 1000px; margin: 20px auto; overflow: hidden; } .player-panel { float: left; width: 700px; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .player-header h1 { font-size: 18px; margin: 0 0 6px 0; } .meta { font-size: 12px; color: #999; } .player-box video { width: 100%; background: #000; border: 1px solid #cccccc; } .player-tools { margin-top: 8px; } .btn { display: inline-block; background: linear-gradient(to bottom, #ff8c1a, #ff6600); border: 1px solid #cc5500; color: #fff; font-size: 13px; padding: 4px 12px; text-decoration: none; cursor: pointer; } .btn:hover { background: linear-gradient(to bottom, #ffa53b, #ff7700); } .side-list { float: right; width: 270px; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .side-list h3, .comment-area h3 { font-size: 16px; color: #1a4f8b; border-bottom: 1px solid #eeeeee; padding-bottom: 6px; } .side-list ul { list-style: none; margin: 0; padding: 0; } .side-list li { padding: 6px 0; border-bottom: 1px dashed #f0f0f0; } .side-list a { color: #1a4f8b; text-decoration: underline; font-size: 13px; } .side-list a:hover { color: #ff6600; } .comment-area { width: 1000px; margin: 20px auto; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .comment-area textarea { width: 98%; border: 1px solid #cccccc; font-family: "SimSun", "宋体", serif; font-size: 13px; } .comment-area .btn { margin-top: 8px; }CSS 复刻的重点不在代码复杂度，而在“关键词还原”。这一段样式基本还原了当年页面的几个典型特征：顶部深蓝导航条配橙色下边框、文字链接有下划线、按钮是橙红色渐变、页面是 1000px 左右的固定宽度、背景是浅灰色。这些视觉符号放在一起，年代感就出来了。
如果你想让 AI 继续优化这些样式，可以这样追加提示词：“顶部导航的字体再大一点，播放器标题改成 18px，按钮改为橙色渐变，右侧列表链接使用蓝色下划线。” 对 Vibe Coding 来说，这类微观调整需求非常适合迭代对话。不过也要注意，AI 对颜色值的理解需要你用具体色号来约束，不然它可能会给出偏现代风格的渐变和圆角。还有一点：默认的 video 控件并不符合复古风格，所以下一步要用 JavaScript 隐藏默认控件，绘制自定义控制条。
7. 用 JavaScript 实现播放交互
页面要“活”起来，离不开 JavaScript。这部分主要实现视频播放/暂停、进度条点击跳转、音量控制、全屏切换和评论发布。由于是演示项目，代码不做复杂封装，以清晰为主。
const video = document.getElementById('player'); const playBtn = document.getElementById('playBtn'); const progress = document.getElementById('progress'); const volume = document.getElementById('volume'); const fullscreenBtn = document.getElementById('fullscreenBtn'); video.removeAttribute('controls'); playBtn.addEventListener('click', () => { if (video.paused) { video.play(); playBtn.textContent = '暂停'; } else { video.pause(); playBtn.textContent = '播放'; } }); video.addEventListener('timeupdate', () => { if (video.duration) { progress.value = (video.currentTime / video.duration) * 100; } }); progress.addEventListener('input', () => { if (video.duration) { video.currentTime = (progress.value / 100) * video.duration; } }); volume.addEventListener('input', () => { video.volume = volume.value; }); fullscreenBtn.addEventListener('click', () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } }); // 评论发布 const commentBtn = document.getElementById('commentBtn'); const commentList = document.getElementById('commentList'); commentBtn.addEventListener('click', () => { const input = document.getElementById('commentInput'); const text = input.value.trim(); if (!text) return; const li = document.createElement('li'); li.textContent = text; commentList.appendChild(li); input.value = ''; });这段代码实现了最核心的播放控制逻辑。注意两个点：第一，video.removeAttribute('controls')用来隐藏浏览器默认控件，这是为了能在下方放一套自定义复古控制条；第二，timeupdate事件会高频触发，进度条的值会持续更新，这是进度同步的标准做法。代码里几个元素 ID 需要和 HTML 对应，比如播放按钮、进度条、音量滑块都要在页面里真实存在，否则事件绑定会直接报错。
Vibe Coding 在交互部分的价值在这里体现得比较明显。你可以直接说“我要一个视频播放器，带播放暂停按钮、进度条、音量控制、全屏键，点击播放时按钮文字要切换”，AI 会很快给出类似的实现。不过 AI 生成的事件绑定逻辑有时候会漏掉边界情况，比如视频没加载完时点击进度条、音量滑块的取值范围没有设置好，这些都需要自己检查。像progress.value在没有设置min和max属性时，默认取值范围是 0 到 100，这个行为要心里有数。
页面完整跑起来之后，还需要做一个“仿古控件层”。也就是在 video 元素下方放一排用 CSS 画好的按钮和滑块，布局上要像 2006 年 Flash 播放器的控制条：黑底、白字、细边框、按钮边缘带浅色描边。这一层不需要改 JavaScript 逻辑，主要靠绝对定位或 flex 布局完成。控制条做成区块后，整个页面的“播放器感”会明显增强。
8. Vibe Coding 实操：从需求到成品的迭代过程
这个项目最有参考价值的部分，其实是 Vibe Coding 的实操过程。下面把经验拆成可复用的五步，按顺序走下来基本能跑通。
第一步，写粗略需求。不要一上来就说“帮我写一个完整播放器”，而是先给一句话定位：“用纯 HTML/CSS/JS 做一个 2006 年新浪娱乐风格的视频播放页面。” 这会让 AI 先生成一个页面级框架，而不是眉毛胡子一把抓。
第二步，分段细化。页面框架出来以后，按“顶部导航 → 播放器 → 推荐列表 → 评论区”的顺序逐段提出修改要求。每一段都描述具体样式，比如“导航背景深蓝色、下方加橙色分割线”“播放器区域占左侧 700px，右侧列表占 270px”。这样 AI 能理解你期望的布局比例。
第三步，处理视觉细节。这步最耗时。AI 生成的默认样式通常比较现代，直接套用没有年代感。需要反复要求“把字体改成宋体”“按钮改成橙色渐变”“链接加下划线”“背景改成浅灰色”。如果 AI 给出的颜色不对，直接丢色号给它，比如#1a4f8b、#ff6600、#e8e8e8，它会按要求调整。
第四步，检查交互逻辑。AI 代码里常见的坑包括：play 按钮不切换文本、进度条没有设置max属性、音量初始值不是 1、评论为空时没有禁用提交。这些状态管理问题，AI 容易遗漏，人工补充最有效。检查时要按用户视角走一遍完整流程，而不是只看代码是否报错。
第五步，本地验收。在浏览器里过一遍完整流程，看有没有报错、布局有没有错位、播放器是否在窄屏下崩溃。如果发现问题，再把问题描述给 AI，让它生成补丁。比如“进度条拖拽时视频跳转不稳定，请加防抖”，AI 可能会给出节流方案，你再把它合并进现有代码。
五步走完之后，一个 Vibe Coding 复古页面项目就算完成。整个过程不要求手写每一行代码，但要求你具备读代码、改 Bug、验收效果的能力。这也是“渣技术但不妨碍能跑”的核心：代码不一定要多规范，但状态要可控、页面要可用。
9. 资源占用与性能观察
纯 HTML 页面对资源占用几乎可以忽略，但这不代表不需要关注性能。这个页面涉及几个性能点，值得单独拿出来说。
第一，页面体积。HTML、CSS、JS 三个文件加起来通常不到 20KB，对网络加载几乎没有压力，但视频文件本身可能很大。测试时建议使用小尺寸 MP4 文件，或者用poster封面图代替长时间播放，否则本地资源文件过大会拖慢页面响应。如果想把项目放到线上展示，建议把视频压缩成 720p 以内的短视频循环播放。
第二，Video 播放占用。视频解码会消耗 CPU 和内存，尤其在浏览器里播放高清视频时。作为演示，可以把视频分辨率控制在 720p 以内，并且不建议同时开多个播放器实例。Vibe Coding 项目经常出现“代码很简单但页面卡”的情况，排查时先看是不是视频源太大，而不是一上来就优化 JavaScript。
第三，样式和布局开销。这个页面用的是固定宽度布局，结构简单，没有 CSS 动画和复杂滤镜，浏览器渲染压力很小。进度条timeupdate更新频率默认较高，但不是性能瓶颈，如果发现鼠标拖动卡顿，可以给进度条加节流。现代浏览器对这类基础 DOM 操作的处理能力很强，真正要关注的是高频事件触发次数。
观察资源占用的方法很简单：浏览器按 F12，切到 Performance 或 Network 面板，看体积加载和帧率情况。对这个项目来说，通常不会有明显瓶颈，更多是视频源本身的问题。另外，如果你把这个页面放在本地双击打开，浏览器可能会因为file://协议限制某些功能，比如视频本地文件读取，这时用 VS Code Live Server 或 Python 起一个静态服务器会更稳。
10. 常见问题与排查方法
这个项目的排错重点集中在浏览器兼容、视频格式、布局错位和 AI 生成代码质量上。以下是实际开发中容易遇到的问题和排查思路。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 页面打开后无样式 | 控制台 403 或 CSS 路径错误 | 打开 Network 面板看 style.css 是否加载 | 确认 CSS 文件名和路径大小写一致 |
| video 标签不显示画面 | 视频文件格式不支持或文件路径错误 | 看控制台报错，确认 source src | 换用 MP4/H.264 编码文件，或检查相对路径 |
| 播放按钮点击无效 | JS 文件未加载或 video 元素 ID 不一致 | 看 Console 报错，检查 getElementById | 统一元素 ID，确认 script 标签在 body 底部 |
| 进度条无法点击跳转 | progress 没有设置 min/max 或 video.duration 为 NaN | 打印 video.duration 检查元数据 | 给 video 加 preload='metadata' |
| 评论按钮没反应 | 输入框 trim 为空时直接 return | 在按钮事件里加 console.log | 先输出输入内容再判断 |
| 页面在手机上变形 | 固定宽度 1000px 在小屏溢出 | 用浏览器设备模拟检查 | 加 meta viewport 或后续改响应式 |
| AI 生成代码有多个重复函数 | 多轮对话后 AI 容易重复堆代码 | 检查 script.js 末尾是否有重复定义 | 人工删除旧版本，保留最新实现 |
表格里这些问题，大多都能在本地快速复现和解决。用 Vibe Coding 做项目时，最常见的坑其实是“AI 在同一份文件里生成多个矛盾版本”，尤其是多轮对话后。解决办法是养成随手清理旧代码的习惯，不要让 AI 越改越乱。每完成一轮修改，就把确认有效的代码复制到本地文件保存，不要一直依赖对话窗口里的中间版本。
另一个容易忽略的问题是浏览器差异：Chrome、Edge、Firefox 对 video 标签、全屏 API、样式细节的兼容性有细微差异。比如全屏 API 在某些浏览器里需要前缀，进度条 input 样式也可能不同。发布前至少要在两三种浏览器里过一遍，尤其是你计划把页面分享给别人的时候。
11. 最佳实践与使用建议
结合这个复古网页项目，给读者几条可落地的建议。
第一，先搭骨架再谈样式。无论是不是 Vibe Coding，先让页面有正确的 HTML 结构，再往里面填视觉细节。结构错了，后面所有 CSS 都是白调。如果你发现 AI 生成的代码里结构混乱，第一件事不是改样式，而是把 HTML 层级重新理清楚。
第二，给 AI 的需求要“分段且具体”。不要只说“做复古一点”，要说“导航背景深蓝、按钮用橙色渐变、链接加下划线、宽度固定 1000px”。AI 对具体词汇的响应远好于抽象风格描述。色号、像素值、字体名这些硬参数可以帮助 AI 跳过试错过程。
第三，保留一份最小可用版本。项目过程中随时保存能跑的版本，改坏了随时回退。不要等到最后才提交，否则 AI 生成的几次版本混在一起很难收拾。可以用index_backup.html这种方式保留关键节点，也可以直接把稳定版本推到 Git 仓库。
第四，素材要合规。复原老页面时，建议不要直接使用新浪、搜狐等网站的现实商标、Logo 和高清截图。可以用占位文字、自绘图标、开源或无版权图片替代。个人学习演示问题不大，商用前一定要确认授权，尤其是涉及人物肖像、品牌 Logo、新闻素材的视频源文件。
第五，测试要在多浏览器过一遍。Chrome、Edge、Firefox 对 video 标签、全屏 API、样式细节的兼容性有细微差异，发布前至少各看一遍。如果页面是在本地双击打开的，建议再起一个静态服务器测试，避免file://协议带来的限制。
第六，如果后续想扩展，可以把页面改造成响应式布局，加入视频列表数据渲染，甚至写一个简单的播放器组件。这些都能在现有骨架上继续迭代。例如右侧列表的数据如果从 JSON 文件异步读取，整个页面就变成了一个“数据驱动”的静态站点，仍然不需要后端。
12. 总结与下一步
这个项目的价值不在于代码量，而在于把“复古界面复原”和“Vibe Coding 工作流”结合起来，让人看到纯前端项目也能有明确的学习路径。它最值得尝试的点是：用自然语言驱动 AI 生成一整页复古 UI，再通过人工修改把设计细节拉回 2006 年，整个过程能同时练到 HTML 结构、CSS 视觉和 JavaScript 交互三块基础。
最先应该验证的功能是视频播放控制：确认 video 能加载、进度条能拖动、按钮状态能切换。最容易踩的坑是 AI 生成代码里多版本冲突和浏览器对 video 元数据的加载时机，这两点直接影响页面是否“能玩”。
后续可以扩展的方向也很多：把右侧列表改成从 JSON 读取、给播放器增加“小窗播放”、把所有样式迁移到 CSS 变量，甚至用同一个思路去复原其他经典老页面。反向做一轮“现代页面复古化”也是一个不错的练手题目。如果你正好在学前端基础，或者想试试 Vibe Coding 的边界，用这个项目起步很合适。关注点在代码能不能跑、界面像不像、交互顺不顺，三项都能过，这个项目就算真正落地了。
