皮肤品鉴与抽卡概率：用数据模拟理性评估200抽活动
2026/8/31 4:26:57
把 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 还是 HTML+CSS+JS 分离。
- 页面结构：有哪些区块，每个区块放什么内容。
- 风格约束：颜色、字体、布局方式、是否响应式。
- 禁止项：不要用什么框架、不要做什么效果、不要自动跳转。
这些要素不需要一次写全，但能写就尽量写。特别是禁止项，能省掉后面大量返工。
我见过很多失败的 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 lang="zh-CN"> <head> <meta charset="UTF-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 class="page"> <div class="player"> 播放器占位：Flash 已退役，这里可以放视频或图片 </div> <div class="side-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 charset="UTF-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，还有你对问题边界的理解方式。