把 Vibe Coding 和“渣技术”放在一起起因是一个有点莫名其妙的项目用 HTML 复原新浪娱乐 2006 年的视频播放界面。说起来不是多复杂的事情但真正动手之后我发现它比我预想的更像一次软件工程演习——需要收集素材、拆解布局、定义验收标准还要和 AI 一轮轮沟通。整个过程写出来既是一次复古网页还原的记录也是一次对“AI 辅助编程”这个概念的实地测试。我先把结论放在前面这个项目真正的价值不在于像素级还原一个十五年前的页面而在于它让我把“模糊的怀旧记忆”变成了一段可运行、可修改、可继续迭代的 HTML 代码。而所谓“渣技术”在这个语境里并不是贬义而是对一个重要事实的诚实描述——用最小成本解决具体问题时代码不需要完美但边界必须清楚。1. 别急着写代码先把这个15年前的页面拆成能描述的组件1.1 为什么我不直接用 HTML 硬写一开始我也想过既然只是一个页面为什么不用 HTML 加 CSS 直接手写毕竟结构不算复杂。但真正开始回忆那个页面时我发现自己的记忆是块状的我记得左边有个播放器右边有个视频列表上面有一排导航整体颜色偏浅。但如果你问我“导航高度是多少”“列表和播放器之间留多少间距”“底部那排文字链用的是几号字”我完全答不上来。这就是复古页面项目最尴尬的地方。它不是没有需求而是需求全藏在“我好像记得”里面。手写代码时每一个像素都要由自己做决定而我根本不知道当年设计者为什么那样排版。与其硬着头皮猜不如先把页面拆成清晰的组件让 AI 在每一个组件上帮我生成候选方案我再根据印象做取舍。这个过程给了一个很重要的教训很多“无从下手”的编码任务问题不是不会写代码而是没有把任务描述到“可以写代码”的颗粒度。1.2 页面拆解清单把“感觉”变成“结构”我按常见门户网站的布局习惯把这个页面拆成了六个区块。拆解时没有参考任何真实源代码只是基于我对那个年代门户页面的普遍印象区块内容风格关键词备注顶部导航新浪娱乐、新闻、图片、视频等入口小字、浅色底、分隔线重点是营造门户感搜索条站内搜索输入框和按钮简洁、偏功能可做静态占位主播放区左侧大块视频播放区域黑色背景、视频画面或占位图Flash 播放器已退役这里用占位元素右侧相关列表相关视频标题列表小图、竖排、文字链可用简单链接模拟底部文字区热点、专题、子频道入口极小字号、多列分布2006 年门户页的典型元素页面背景与整体宽度居中布局宽度多设为 960px 左右白底、浅灰边、固定宽度不要做响应式这个表格就是给 AI 的第一份规格说明。你不需要把每个细节都写到位但至少要让它知道页面分几块、每块大概放什么、整体气质是什么。1.3 给 AI 的第一份规格说明长什么样在 Vibe Coding 的流程里第一段提示词决定了大方向。我的做法是先给整体目标再给拆解后的模块清单最后强调限制条件。一段很典型的初始提示词是这样的请用单个 HTML 文件实现一个 2006 年门户网站风格的视频播放页面。整体宽度 960px居中显示顶部是浅色导航条包含娱乐、视频、图片等入口左侧是 16:9 的播放器占位区域黑底右侧是相关视频列表底部有一行小字号文字链。使用原生 HTML 和 CSS不要引入 Bootstrap不要做响应式配色以白、灰、浅蓝为主字体优先用宋体。这里没有写任何具体代码但 AI 能开始工作了。关键在于“不要什么”比“要什么”更重要。如果没有明确禁止现代框架和响应式设计AI 大概率会生成一个移动优先、带 Flexbox 栅格、还配一个汉堡菜单的“复古页面”那就完全跑偏了。2. Vibe Coding 的核心不是“让AI写代码”而是“持续把模糊需求翻译成明确规格”2.1 一段好的初始提示词包含什么很多人把 Vibe Coding 理解成“对着 AI 说一句我要什么然后等它输出”。实际用下来会发现这句话只说对了一小部分。AI 确实能直接生成代码但生成质量很大程度上取决于你给它输入的上下文。我总结的初始提示词四要素是任务类型要输出什么文件单 HTML 还是 HTMLCSSJS 分离。页面结构有哪些区块每个区块放什么内容。风格约束颜色、字体、布局方式、是否响应式。禁止项不要用什么框架、不要做什么效果、不要自动跳转。这些要素不需要一次写全但能写就尽量写。特别是禁止项能省掉后面大量返工。我见过很多失败的 Vibe Coding 示例问题都出在“需求太开放”。你让 AI 做一个播放页面它会自动加上进度条、播放按钮、评论列表、暗黑模式切换甚至给你一个自动轮播图。这些功能单看都没有问题但合在一起就不是 2006 年的新浪娱乐了。2.2 对话式迭代从整体布局到播放器占位AI 产出第一版后我通常不会让它一次性完成所有细节而是分几步迭代。第一步只确认整体布局是否对。打开生成好的 HTML如果左侧播放器、右侧列表、顶部导航三块结构已经出现就算过了第一关。第二步逐块提出修改意见。比如我会说“右侧列表太宽了压缩到 280px播放器区域不要用圆角底部文字链的字号改成 12px。”这些意见不需要严格格式化只要是普通中文描述AI 基本都能听懂。第三步处理“年代细节”。这一步我一般会提几个老门户页面常见的特征表格布局感、细边框、灰色分隔线、蓝色文字链、页面底部居中的版权信息。AI 不一定会全部保留但每次提一个它就能逐步逼近。这个过程中我越来越确定一个判断Vibe Coding 真正锻炼的不是“让 AI 写代码”的能力而是“把模糊需求翻译成明确规格”的能力。如果你自己都不知道自己要什么AI 只会给你一个平均化的、看起来像模板的东西。2.3 约束 AI 不“超纲”的小技巧AI 在生成复古页面时最容易出现两个“超纲”问题偷偷引入现代布局方式比如 Flex、Grid、CSS 变量。自动加交互效果比如鼠标悬停放大、渐变背景、平滑滚动。我处理这些问题的方式是在提示词里加入固定的“技术护栏”只用table、float、普通div和行内样式完成布局不要写 JavaScript 动画不要使用 CSS 变量不要引入任何外部字体和图标库保持代码是单个 HTML 文件双击可以直接打开。这些要求写起来有点“渣技术”的味道但效果非常好。因为 2006 年的页面本来就不需要现代布局技术用这些老方法反而更容易接近那个时代的视觉气质。另外如果 AI 给出的代码里有外部链接比如https://cdn.example.com/...我会直接让它改成本地占位或内联样式。原因很简单单文件页面应该不依赖网络资源否则拿到没有网的机器上就直接失效了。3. 从“能显示”到“像那么回事”验收比生成更重要3.1 单页验收清单布局、配色、字体、行为AI 生成只是第一步真正花时间的是验收和微调。我给自己定了一张验收清单每次拿到新版本都按顺序过一遍[ ] 页面能不能双击打开不依赖本地服务器和网络[ ] 整体宽度是不是固定居中而不是自适应拉伸[ ] 顶部导航、播放器、右侧列表、底部文字链四个区块是否齐全[ ] 播放器区域有没有设置高度而不是因为内容为空直接塌掉[ ] 文字是否清晰可读有没有因为字体缺失变成乱码[ ] 页面是否保持白色和浅灰色为主的整体色调[ ] 有没有出现现代风格的元素比如圆角按钮、卡片阴影、渐变背景这个清单看起来很基础但每一条都踩过坑。特别是播放器区域的高度问题AI 经常只放一个div不写高度结果里面没有内容时整个区域就消失了。这不是 AI 能力不行而是需要人告诉它“播放器占位区域必须有明确的宽度和高度”。3.2 一个最小 HTML 骨架长什么样下面这段代码是这类项目常见的最小结构。它不是一个完整的 2006 年新浪娱乐页面只是用来展示“播放器占位区域 右侧列表”的基本骨架你可以在此基础上继续补样式!DOCTYPE html html langzh-CN head meta charsetUTF-8 title怀旧视频播放页示意/title style body { margin: 0; background: #f0f0f0; font-family: SimSun, 宋体, serif; } .page { width: 960px; margin: 0 auto; background: #ffffff; border: 1px solid #d9d9d9; overflow: hidden; } .player { width: 640px; height: 360px; background: #000000; float: left; color: #999999; display: flex; align-items: center; justify-content: center; } .side-list { width: 300px; float: right; padding: 10px; } .side-list h3 { font-size: 14px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; } .side-list li { font-size: 12px; list-style: none; line-height: 24px; } /style /head body div classpage div classplayer 播放器占位Flash 已退役这里可以放视频或图片 /div div classside-list h3相关视频/h3 ul li娱乐资讯某活动现场画面/li li电影片花某片预告/li li音乐榜单本周新歌/li li综艺片段后台花絮/li /ul /div /div /body /html这段代码里既用了float来做左右分栏又用了display: flex来做播放器占位文字居中严格来说并不“复古”。但这也符合我这次项目的态度不是为了复刻技术而是为了复刻视觉气质。能用 2006 年的方式就用老方式老方式不方便表达的时候就用最笨的新方式补上。3.3 为什么“能打开”和“能交付”是两件事AI 生成的第一版通常都能在浏览器里正常打开。这很容易给人造成一种“已经做完了”的错觉。但只要你多看几眼就会发现很多细节不对文字颜色看不清、列表间距不一致、底部内容顶到屏幕边缘、播放器区域比例失真。这些都是“能打开”和“能交付”的区别。所谓交付不是说页面没有语法错误而是它达到了你最初对它的预期。在这个项目里我的预期不是重建一个真正的视频网站而是看到一个页面时能产生“对就是这个味”的怀旧感。所以每次改完代码我都会退后一步把浏览器窗口缩放一下再看看整体感觉。这一步靠 AI 帮不了太多因为“感觉”不是技术指标它需要人来判断。4. 复原旧页面最容易踩的四个坑以及我的排查顺序4.1 旧式布局的坑float、宽度、居中方式老门户页面最常用的布局方式是表格和float。表格布局在实际复原时很容易写得啰嗦所以我主要用float。float布局最经典的坑是浮动塌陷父容器没有显式高度子元素全部浮动后父容器高度会变成 0导致下面的背景和边框全部错乱。解决方法也很老派在父容器上加overflow: hidden或者用clearfix清除浮动。另一个容易忽略的是宽度计算。早期页面往往用固定宽度比如 960px但如果播放器、列表、边框和 padding 加起来超过了父容器宽度右侧列表就会被挤到下一行。排查这种问题最简单的办法是临时给每个区块加不同颜色的边框看谁把谁挤出去了。这也是我常用的调试手段。4.2 字符编码和图片路径最容易被忽略的两层问题很多老网页当年用的是 GB2312 或 GBK 编码。如果你在本地新建 HTML 文件默认字符集很可能是 UTF-8。如果页面里没有声明meta charsetUTF-8或者声明和实际编码不一致中文文字就会变成乱码。处理方式并不复杂统一使用 UTF-8并在head里写清楚。这个项目毕竟只是“复原”不是“复刻当年的乱码”所以编码规范要优先于历史准确性。图片路径则是另一个容易出问题的地方。AI 生成的 HTML 里经常会出现类似images/video1.jpg的相对路径但本地目录里根本没有这个图片。我用的是最直接的占位方案要么把图片文件放到 HTML 同级的images目录里要么直接用一个纯色块或文字占位。没有图片资源的时候不要硬放一个img标签否则会出现难看的破图图标。4.3 排查链路先结构、再样式、再资源、最后行为如果页面最终效果不对我一般不会直接去问 AI而是自己先按下面这个顺序排查排查层看什么典型原因处理方式结构层HTML 元素是否存在、嵌套是否正确某个区块缺失、标签没闭合打开浏览器开发者工具检查 DOM样式层元素尺寸、颜色、字体是否生效样式冲突、选择器写错、浮动塌陷临时加 border 或背景色定位问题元素资源层图片、字体、外部链接是否加载成功路径错误、本地无文件换成占位图或删掉外部引用行为层点击、悬停、播放器占位是否正常JS 报错、事件绑定失败查看控制台报错优先修复 TypeError这个顺序看起来很基础但非常实用。绝大多数复古页面复原问题都不是 AI 写不出代码而是写完之后人没有按顺序检查。注意如果页面在 Chrome 里正常、在某个老浏览器里不正常不要花太多时间做兼容。这个项目的目标不是兼容 IE6而是用现代浏览器打开一个看起来像 2006 年的页面。4.4 Flash 播放器退役后的占位处理2006 年的视频播放页面核心区域基本是 Flash。现在 Flash 已经退出浏览器环境再去嵌入object标签没有任何意义。比较好的做法是把播放器区域做成一个静态占位块里面放一个提示文字或封面图。如果你希望这个区域看起来更像“有视频在播”还可以在里面放一张稍微压暗的图片再叠一个假的播放按钮。但注意这些交互都是视觉模拟不要真的去写一套播放逻辑。否则就偏离了“复原页面”的目标变成一个视频播放器开发项目。5. 当“渣技术”碰上新范式这种项目到底值不值得做5.1 “渣技术”不是消极而是对边界的诚实用 Vibe Coding 做这种复古页面很容易被嘲笑为“渣技术”。代码不算优雅没有用现代前端框架也没有做响应式甚至有些布局方式在今天的开发规范里是反面教材。但我的体感恰恰相反。正因为用了“渣技术”这个项目才能在一个晚上完成。它不需要安装依赖不需要配置构建工具不需要考虑浏览器兼容矩阵只需要一个 HTML 文件和一份足够清晰的描述。这种最小化技术栈本身就是对项目边界的诚实我是在做一个个人怀旧项目不是在做一个要支撑千万并发的内容平台。所以“渣技术”在这里并不是贬义词。它是一个人知道项目要解决什么问题、知道哪些技术可以省掉之后主动做出的选择。这种选择在真实的软件工程里非常常见原型阶段、个人项目、内部工具、短期活动页都不需要刻意使用重型工程体系。5.2 这种项目适合谁不适合谁如果一个朋友问我“我也想试一下 Vibe Coding可不可以从这个项目开始”我会说可以但建议先理解清楚它适合什么场景。适合这样做的场景想快速做一个原型或 Demo不追求代码规范。想测试 AI 辅助编程的工作流看看自己能否把需求讲清楚。想学习 HTML/CSS通过小项目积累手感。想做一个有个人纪念价值的页面不需要长期维护。不适合这样做的场景要进入生产环境的正式业务页面。需要大量用户交互和数据管理的应用。多人长期协作、需要保证代码质量和可测试性的项目。对性能、安全、可访问性有明确要求的产品页面。一旦越过这条线Vibe Coding 就会从“效率工具”变成“技术债加速器”。AI 可以帮你快速生成不熟悉领域的代码但它不会主动考虑并发、安全、维护成本和团队协作。这些是需要你作为项目负责人补上的判断。5.3 把一次怀旧变成可复用的 Vibe Coding 流程这个项目结束后我沉淀了一套可以复用到其他小项目的流程。它不一定适用于所有场景但至少能帮你在类似“我想做一个复古页面/简单工具页/个人作品页”的需求里少走弯路定义目标先想清楚这个页面是给谁看、解决什么问题、要不要长期维护。收集参考不用追求准确你可以凭记忆描述也可以找几张旧截图、旧海报当参考。拆分模块把页面拆成导航、主体、侧栏、底部等几块每一块写清楚内容和风格。提示词迭代用拆好的清单和 AI 对话先定整体布局再逐块修改细节。人工验收不要跳过验收按布局、配色、字体、资源、行为五个方向检查。记录边界做完后记下哪些地方是自己补充的、哪些地方是 AI 生成的、哪些问题下次可以提前避免。这套流程足够“渣”但很实用。它本质上不是“AI 写代码流程”而是“人与 AI 协作完成一个小型软件项目”的流程。在这个过程中AI 是执行者你才是决策者。如果你也想尝试类似的项目我建议从复原一个你记忆里的旧网页开始。它不需要服务器不需要框架不需要学习复杂的工程化工具只需要一个浏览器、一个编辑器和一段愿意反复把需求讲清楚的耐心。做完之后你会发现真正被“渣技术”修好的不只是那段 HTML还有你对问题边界的理解方式。 
长河君 · 2026/8/31 3:48:48 · 阅读 1.2k 用Vibe Coding复原2006年新浪视频页：AI辅助编程实战记录
把 Vibe Coding 和“渣技术”放在一起起因是一个有点莫名其妙的项目用 HTML 复原新浪娱乐 2006 年的视频播放界面。说起来不是多复杂的事情但真正动手之后我发现它比我预想的更像一次软件工程演习——需要收集素材、拆解布局、定义验收标准还要和 AI 一轮轮沟通。整个过程写出来既是一次复古网页还原的记录也是一次对“AI 辅助编程”这个概念的实地测试。我先把结论放在前面这个项目真正的价值不在于像素级还原一个十五年前的页面而在于它让我把“模糊的怀旧记忆”变成了一段可运行、可修改、可继续迭代的 HTML 代码。而所谓“渣技术”在这个语境里并不是贬义而是对一个重要事实的诚实描述——用最小成本解决具体问题时代码不需要完美但边界必须清楚。1. 别急着写代码先把这个15年前的页面拆成能描述的组件1.1 为什么我不直接用 HTML 硬写一开始我也想过既然只是一个页面为什么不用 HTML 加 CSS 直接手写毕竟结构不算复杂。但真正开始回忆那个页面时我发现自己的记忆是块状的我记得左边有个播放器右边有个视频列表上面有一排导航整体颜色偏浅。但如果你问我“导航高度是多少”“列表和播放器之间留多少间距”“底部那排文字链用的是几号字”我完全答不上来。这就是复古页面项目最尴尬的地方。它不是没有需求而是需求全藏在“我好像记得”里面。手写代码时每一个像素都要由自己做决定而我根本不知道当年设计者为什么那样排版。与其硬着头皮猜不如先把页面拆成清晰的组件让 AI 在每一个组件上帮我生成候选方案我再根据印象做取舍。这个过程给了一个很重要的教训很多“无从下手”的编码任务问题不是不会写代码而是没有把任务描述到“可以写代码”的颗粒度。1.2 页面拆解清单把“感觉”变成“结构”我按常见门户网站的布局习惯把这个页面拆成了六个区块。拆解时没有参考任何真实源代码只是基于我对那个年代门户页面的普遍印象区块内容风格关键词备注顶部导航新浪娱乐、新闻、图片、视频等入口小字、浅色底、分隔线重点是营造门户感搜索条站内搜索输入框和按钮简洁、偏功能可做静态占位主播放区左侧大块视频播放区域黑色背景、视频画面或占位图Flash 播放器已退役这里用占位元素右侧相关列表相关视频标题列表小图、竖排、文字链可用简单链接模拟底部文字区热点、专题、子频道入口极小字号、多列分布2006 年门户页的典型元素页面背景与整体宽度居中布局宽度多设为 960px 左右白底、浅灰边、固定宽度不要做响应式这个表格就是给 AI 的第一份规格说明。你不需要把每个细节都写到位但至少要让它知道页面分几块、每块大概放什么、整体气质是什么。1.3 给 AI 的第一份规格说明长什么样在 Vibe Coding 的流程里第一段提示词决定了大方向。我的做法是先给整体目标再给拆解后的模块清单最后强调限制条件。一段很典型的初始提示词是这样的请用单个 HTML 文件实现一个 2006 年门户网站风格的视频播放页面。整体宽度 960px居中显示顶部是浅色导航条包含娱乐、视频、图片等入口左侧是 16:9 的播放器占位区域黑底右侧是相关视频列表底部有一行小字号文字链。使用原生 HTML 和 CSS不要引入 Bootstrap不要做响应式配色以白、灰、浅蓝为主字体优先用宋体。这里没有写任何具体代码但 AI 能开始工作了。关键在于“不要什么”比“要什么”更重要。如果没有明确禁止现代框架和响应式设计AI 大概率会生成一个移动优先、带 Flexbox 栅格、还配一个汉堡菜单的“复古页面”那就完全跑偏了。2. Vibe Coding 的核心不是“让AI写代码”而是“持续把模糊需求翻译成明确规格”2.1 一段好的初始提示词包含什么很多人把 Vibe Coding 理解成“对着 AI 说一句我要什么然后等它输出”。实际用下来会发现这句话只说对了一小部分。AI 确实能直接生成代码但生成质量很大程度上取决于你给它输入的上下文。我总结的初始提示词四要素是任务类型要输出什么文件单 HTML 还是 HTMLCSSJS 分离。页面结构有哪些区块每个区块放什么内容。风格约束颜色、字体、布局方式、是否响应式。禁止项不要用什么框架、不要做什么效果、不要自动跳转。这些要素不需要一次写全但能写就尽量写。特别是禁止项能省掉后面大量返工。我见过很多失败的 Vibe Coding 示例问题都出在“需求太开放”。你让 AI 做一个播放页面它会自动加上进度条、播放按钮、评论列表、暗黑模式切换甚至给你一个自动轮播图。这些功能单看都没有问题但合在一起就不是 2006 年的新浪娱乐了。2.2 对话式迭代从整体布局到播放器占位AI 产出第一版后我通常不会让它一次性完成所有细节而是分几步迭代。第一步只确认整体布局是否对。打开生成好的 HTML如果左侧播放器、右侧列表、顶部导航三块结构已经出现就算过了第一关。第二步逐块提出修改意见。比如我会说“右侧列表太宽了压缩到 280px播放器区域不要用圆角底部文字链的字号改成 12px。”这些意见不需要严格格式化只要是普通中文描述AI 基本都能听懂。第三步处理“年代细节”。这一步我一般会提几个老门户页面常见的特征表格布局感、细边框、灰色分隔线、蓝色文字链、页面底部居中的版权信息。AI 不一定会全部保留但每次提一个它就能逐步逼近。这个过程中我越来越确定一个判断Vibe Coding 真正锻炼的不是“让 AI 写代码”的能力而是“把模糊需求翻译成明确规格”的能力。如果你自己都不知道自己要什么AI 只会给你一个平均化的、看起来像模板的东西。2.3 约束 AI 不“超纲”的小技巧AI 在生成复古页面时最容易出现两个“超纲”问题偷偷引入现代布局方式比如 Flex、Grid、CSS 变量。自动加交互效果比如鼠标悬停放大、渐变背景、平滑滚动。我处理这些问题的方式是在提示词里加入固定的“技术护栏”只用table、float、普通div和行内样式完成布局不要写 JavaScript 动画不要使用 CSS 变量不要引入任何外部字体和图标库保持代码是单个 HTML 文件双击可以直接打开。这些要求写起来有点“渣技术”的味道但效果非常好。因为 2006 年的页面本来就不需要现代布局技术用这些老方法反而更容易接近那个时代的视觉气质。另外如果 AI 给出的代码里有外部链接比如https://cdn.example.com/...我会直接让它改成本地占位或内联样式。原因很简单单文件页面应该不依赖网络资源否则拿到没有网的机器上就直接失效了。3. 从“能显示”到“像那么回事”验收比生成更重要3.1 单页验收清单布局、配色、字体、行为AI 生成只是第一步真正花时间的是验收和微调。我给自己定了一张验收清单每次拿到新版本都按顺序过一遍[ ] 页面能不能双击打开不依赖本地服务器和网络[ ] 整体宽度是不是固定居中而不是自适应拉伸[ ] 顶部导航、播放器、右侧列表、底部文字链四个区块是否齐全[ ] 播放器区域有没有设置高度而不是因为内容为空直接塌掉[ ] 文字是否清晰可读有没有因为字体缺失变成乱码[ ] 页面是否保持白色和浅灰色为主的整体色调[ ] 有没有出现现代风格的元素比如圆角按钮、卡片阴影、渐变背景这个清单看起来很基础但每一条都踩过坑。特别是播放器区域的高度问题AI 经常只放一个div不写高度结果里面没有内容时整个区域就消失了。这不是 AI 能力不行而是需要人告诉它“播放器占位区域必须有明确的宽度和高度”。3.2 一个最小 HTML 骨架长什么样下面这段代码是这类项目常见的最小结构。它不是一个完整的 2006 年新浪娱乐页面只是用来展示“播放器占位区域 右侧列表”的基本骨架你可以在此基础上继续补样式!DOCTYPE html html langzh-CN head meta charsetUTF-8 title怀旧视频播放页示意/title style body { margin: 0; background: #f0f0f0; font-family: SimSun, 宋体, serif; } .page { width: 960px; margin: 0 auto; background: #ffffff; border: 1px solid #d9d9d9; overflow: hidden; } .player { width: 640px; height: 360px; background: #000000; float: left; color: #999999; display: flex; align-items: center; justify-content: center; } .side-list { width: 300px; float: right; padding: 10px; } .side-list h3 { font-size: 14px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; } .side-list li { font-size: 12px; list-style: none; line-height: 24px; } /style /head body div classpage div classplayer 播放器占位Flash 已退役这里可以放视频或图片 /div div classside-list h3相关视频/h3 ul li娱乐资讯某活动现场画面/li li电影片花某片预告/li li音乐榜单本周新歌/li li综艺片段后台花絮/li /ul /div /div /body /html这段代码里既用了float来做左右分栏又用了display: flex来做播放器占位文字居中严格来说并不“复古”。但这也符合我这次项目的态度不是为了复刻技术而是为了复刻视觉气质。能用 2006 年的方式就用老方式老方式不方便表达的时候就用最笨的新方式补上。3.3 为什么“能打开”和“能交付”是两件事AI 生成的第一版通常都能在浏览器里正常打开。这很容易给人造成一种“已经做完了”的错觉。但只要你多看几眼就会发现很多细节不对文字颜色看不清、列表间距不一致、底部内容顶到屏幕边缘、播放器区域比例失真。这些都是“能打开”和“能交付”的区别。所谓交付不是说页面没有语法错误而是它达到了你最初对它的预期。在这个项目里我的预期不是重建一个真正的视频网站而是看到一个页面时能产生“对就是这个味”的怀旧感。所以每次改完代码我都会退后一步把浏览器窗口缩放一下再看看整体感觉。这一步靠 AI 帮不了太多因为“感觉”不是技术指标它需要人来判断。4. 复原旧页面最容易踩的四个坑以及我的排查顺序4.1 旧式布局的坑float、宽度、居中方式老门户页面最常用的布局方式是表格和float。表格布局在实际复原时很容易写得啰嗦所以我主要用float。float布局最经典的坑是浮动塌陷父容器没有显式高度子元素全部浮动后父容器高度会变成 0导致下面的背景和边框全部错乱。解决方法也很老派在父容器上加overflow: hidden或者用clearfix清除浮动。另一个容易忽略的是宽度计算。早期页面往往用固定宽度比如 960px但如果播放器、列表、边框和 padding 加起来超过了父容器宽度右侧列表就会被挤到下一行。排查这种问题最简单的办法是临时给每个区块加不同颜色的边框看谁把谁挤出去了。这也是我常用的调试手段。4.2 字符编码和图片路径最容易被忽略的两层问题很多老网页当年用的是 GB2312 或 GBK 编码。如果你在本地新建 HTML 文件默认字符集很可能是 UTF-8。如果页面里没有声明meta charsetUTF-8或者声明和实际编码不一致中文文字就会变成乱码。处理方式并不复杂统一使用 UTF-8并在head里写清楚。这个项目毕竟只是“复原”不是“复刻当年的乱码”所以编码规范要优先于历史准确性。图片路径则是另一个容易出问题的地方。AI 生成的 HTML 里经常会出现类似images/video1.jpg的相对路径但本地目录里根本没有这个图片。我用的是最直接的占位方案要么把图片文件放到 HTML 同级的images目录里要么直接用一个纯色块或文字占位。没有图片资源的时候不要硬放一个img标签否则会出现难看的破图图标。4.3 排查链路先结构、再样式、再资源、最后行为如果页面最终效果不对我一般不会直接去问 AI而是自己先按下面这个顺序排查排查层看什么典型原因处理方式结构层HTML 元素是否存在、嵌套是否正确某个区块缺失、标签没闭合打开浏览器开发者工具检查 DOM样式层元素尺寸、颜色、字体是否生效样式冲突、选择器写错、浮动塌陷临时加 border 或背景色定位问题元素资源层图片、字体、外部链接是否加载成功路径错误、本地无文件换成占位图或删掉外部引用行为层点击、悬停、播放器占位是否正常JS 报错、事件绑定失败查看控制台报错优先修复 TypeError这个顺序看起来很基础但非常实用。绝大多数复古页面复原问题都不是 AI 写不出代码而是写完之后人没有按顺序检查。注意如果页面在 Chrome 里正常、在某个老浏览器里不正常不要花太多时间做兼容。这个项目的目标不是兼容 IE6而是用现代浏览器打开一个看起来像 2006 年的页面。4.4 Flash 播放器退役后的占位处理2006 年的视频播放页面核心区域基本是 Flash。现在 Flash 已经退出浏览器环境再去嵌入object标签没有任何意义。比较好的做法是把播放器区域做成一个静态占位块里面放一个提示文字或封面图。如果你希望这个区域看起来更像“有视频在播”还可以在里面放一张稍微压暗的图片再叠一个假的播放按钮。但注意这些交互都是视觉模拟不要真的去写一套播放逻辑。否则就偏离了“复原页面”的目标变成一个视频播放器开发项目。5. 当“渣技术”碰上新范式这种项目到底值不值得做5.1 “渣技术”不是消极而是对边界的诚实用 Vibe Coding 做这种复古页面很容易被嘲笑为“渣技术”。代码不算优雅没有用现代前端框架也没有做响应式甚至有些布局方式在今天的开发规范里是反面教材。但我的体感恰恰相反。正因为用了“渣技术”这个项目才能在一个晚上完成。它不需要安装依赖不需要配置构建工具不需要考虑浏览器兼容矩阵只需要一个 HTML 文件和一份足够清晰的描述。这种最小化技术栈本身就是对项目边界的诚实我是在做一个个人怀旧项目不是在做一个要支撑千万并发的内容平台。所以“渣技术”在这里并不是贬义词。它是一个人知道项目要解决什么问题、知道哪些技术可以省掉之后主动做出的选择。这种选择在真实的软件工程里非常常见原型阶段、个人项目、内部工具、短期活动页都不需要刻意使用重型工程体系。5.2 这种项目适合谁不适合谁如果一个朋友问我“我也想试一下 Vibe Coding可不可以从这个项目开始”我会说可以但建议先理解清楚它适合什么场景。适合这样做的场景想快速做一个原型或 Demo不追求代码规范。想测试 AI 辅助编程的工作流看看自己能否把需求讲清楚。想学习 HTML/CSS通过小项目积累手感。想做一个有个人纪念价值的页面不需要长期维护。不适合这样做的场景要进入生产环境的正式业务页面。需要大量用户交互和数据管理的应用。多人长期协作、需要保证代码质量和可测试性的项目。对性能、安全、可访问性有明确要求的产品页面。一旦越过这条线Vibe Coding 就会从“效率工具”变成“技术债加速器”。AI 可以帮你快速生成不熟悉领域的代码但它不会主动考虑并发、安全、维护成本和团队协作。这些是需要你作为项目负责人补上的判断。5.3 把一次怀旧变成可复用的 Vibe Coding 流程这个项目结束后我沉淀了一套可以复用到其他小项目的流程。它不一定适用于所有场景但至少能帮你在类似“我想做一个复古页面/简单工具页/个人作品页”的需求里少走弯路定义目标先想清楚这个页面是给谁看、解决什么问题、要不要长期维护。收集参考不用追求准确你可以凭记忆描述也可以找几张旧截图、旧海报当参考。拆分模块把页面拆成导航、主体、侧栏、底部等几块每一块写清楚内容和风格。提示词迭代用拆好的清单和 AI 对话先定整体布局再逐块修改细节。人工验收不要跳过验收按布局、配色、字体、资源、行为五个方向检查。记录边界做完后记下哪些地方是自己补充的、哪些地方是 AI 生成的、哪些问题下次可以提前避免。这套流程足够“渣”但很实用。它本质上不是“AI 写代码流程”而是“人与 AI 协作完成一个小型软件项目”的流程。在这个过程中AI 是执行者你才是决策者。如果你也想尝试类似的项目我建议从复原一个你记忆里的旧网页开始。它不需要服务器不需要框架不需要学习复杂的工程化工具只需要一个浏览器、一个编辑器和一段愿意反复把需求讲清楚的耐心。做完之后你会发现真正被“渣技术”修好的不只是那段 HTML还有你对问题边界的理解方式。