Vibe Coding一个静态网站项目，要耗费多少Token

原创王练水滴新途

我是王练，一个爱折腾工具的工程师。在这里，让 AI 从概念变成你手里的工具。

一、起因

上周二，阳台忽然迎来斑鸠筑巢安家，斑鸠夫妇轮流孵蛋、守护巢穴的日常十分治愈。

我决定搭建一个专属静态网站，记录斑鸠一家的生活日常，作为一个纪念。

同时测算一下，用 Vibe Coding 开发一个简单的静态网站，全流程到底消耗多少Token，看看真实成本到底划不划算。

网站核心需求：

• 日常记录：支持文字、照片、视频内容记录

• 时间线功能：展示从见到斑鸠迄今的全过程

• 开发要求：纯静态网页，足够简单

二、环境配置

1、开发工具

Claude Code（命令行版）+ Claude Code Switch（模型切换工具），不会配置的同学可以参考这篇文章Claude Code太贵？龙虾三太子一句话帮我装上ccr，国产模型随便切

2、模型

由于Token Plan没额度了，本次全程薅阿里羊毛，一个用完就用另一个，前后用了3个模型

• qwen3.6-plus

• qwen3.7-max

• qwen3.7-max-*开通会员可解锁*

三、全流程开发实操

1. 需求澄清阶段

为避免AI开发偏差，需要把需求澄清。

这个阶段，可以通过和 DeepSeek 多轮对话完成，这样可以节省确认需求的Token开销，所以这步开销是零。

我家阳台住进来斑鸠一家，有斑鸠爸爸、斑鸠妈妈，现在还有两颗蛋。当前的情况是正在孵蛋。为了在儿童节给我女儿一个礼物，我准备把记录斑鸠一家的信息整理为一个网站送给她上面是前提，现在需要你帮我把对网站的需求整理清楚，我把spec发给claude code，由他完成。1、静态网站就可以，不用后端2、体现斑鸠当前状态3、后续后更新它们的情况（孵蛋是否完成、我是否成功的喂到他们、小斑鸠的成长），直到他们飞走4、我每天会拍一段10秒左右的视频，1~2张照片，放在飞书的多维表格，如何进行动态更新5、如果需求间有矛盾，你也指出来，我们一起讨论清楚

经过多次沟通，最终生成的需求如下

# 阳台上的客人-斑鸠一家 - 网站需求规格说明书## 项目概述为女儿的儿童节礼物，创建一个记录“阳台斑鸠一家”的静态网站。要求使用 `frontend-design` 技能实现，注重美观、温馨、童趣。## 技术栈- 纯静态 HTML/CSS/JS- 数据存储：`data.json`- 媒体文件：`assets/日期/` 目录下- 无构建步骤，无外部依赖（CDN可选但推荐系统默认字体）- 托管推荐：Gitee Pages（国内友好）## 核心功能### 1. 当天状态展示- 显示最新一天的照片、视频（如果有）以及状态文字。- 若无视频或图片，仅显示文字和图标。### 2. “我们的故事”时间线- 按日期倒序展示所有历史记录。- 每条记录支持三种类型： - 仅文字 - 文字 + 图片（1张或多张） - 文字 + 图片 + 视频- 图片缩略图网格，点击在新标签页打开原图。- 视频使用原生 `<video>` 控件，内嵌播放。### 3. 底部二维码区- 固定展示公众号二维码（`assets/qrcode.png`）- 引导文字：“扫码关注公众号，见证斑鸠宝宝成长”## 数据结构（data.json）示例内容（注意：JSON 格式，字段说明见后）：{ "currentStatus": "incubating", "story": [ { "date": "*开通会员可解锁*", "statusText": "今天发现斑鸠在阳台花盆里筑巢，好惊喜！", "photoUrls": [], "videoUrl": "" }, { "date": "*开通会员可解锁*", "statusText": "斑鸠妈妈下了第一颗蛋，圆润洁白。", "photoUrls": ["assets/*开通会员可解锁*/egg1.jpg"], "videoUrl": "" }, { "date": "*开通会员可解锁*", "statusText": "两颗蛋，斑鸠妈妈正在认真孵蛋。拍到了它们换班的过程。", "photoUrls": ["assets/*开通会员可解锁*/incubate1.jpg", "assets/*开通会员可解锁*/incubate2.jpg"], "videoUrl": "assets/*开通会员可解锁*/video.mp4" } ]}说明：- `story` 数组按时间顺序追加新记录，前端会按日期倒序渲染。- 字段可为空数组或空字符串。- `currentStatus` 可选值：`incubating`(孵蛋中), `hatched`(已孵化), `feeding`(喂食中), `growing`(成长中), `flew_away`(已飞走)。## 媒体文件组织（用户手动维护约定）assets/├── qrcode.png├── *开通会员可解锁*/│ └── egg1.jpg├── *开通会员可解锁*/│ ├── incubate1.jpg│ ├── incubate2.jpg│ └── video.mp4└── 后续日期同理- 视频命名建议：`video.mp4`（H.264编码，≤5MB）- 图片命名建议：`photo1.jpg`, `photo2.jpg` 等（≤500KB）## 设计要求（frontend-design）- **风格**：温馨、自然、童趣，适合儿童节礼物。- **主色调**：柔和的米色/浅棕色 + 淡绿色，搭配斑鸠的灰色/粉色元素。- **布局**：卡片式设计，圆角，充足留白，响应式（手机/平板/桌面）。- **字体**：无衬线字体（system-ui, 可选Poppins），标题可带手写感。- **当天状态区**：突出最新媒体，柔和阴影或光效。- **时间线卡片**：日期醒目，文字清晰。图片网格自动响应，视频小巧可播放。- **底部二维码**：居中，圆角矩形，下方引导语。- **动效**：卡片hover上浮，图片淡入，不影响性能。- **状态指示器**：页面顶部动态显示当前状态（孵蛋中/育雏中/已飞走），从 `currentStatus` 映射中文和图标。## 文件输出清单- `index.html`- `css/style.css`- `js/main.js`- `data.json`（包含上述示例数据）- `README.md`（用户维护手册，含Gitee Pages使用说明）- `update_helper.py`（交互式脚本，帮助生成新JSON片段）## 用户维护简易流程（写入README）1. 在 `assets/` 下新建日期文件夹，如 `*开通会员可解锁*`。2. 放入视频（`video.mp4`）和图片（`photo1.jpg`, `photo2.jpg` ...）。3. 编辑 `data.json`，在 `story` 数组末尾追加新记录（日期、状态文字、图片路径列表、视频路径）。4. 若整体状态变化，修改 `currentStatus` 字段。5. 将更新后的文件上传到 Gitee 仓库，Gitee Pages 自动更新网站。## 技术约束与注意事项- 纯静态，无后端。- 所有路径相对。- 避免外部CDN（系统字体即可）。- 兼容现代浏览器。- 文件名和路径不含空格或中文。- 若某天无视频或图片，前端优雅降级（仅显示已有内容）。- 视频推荐 H.264 编码的 .mp4，大小 ≤5MB；图片 ≤500KB。## 交付要求请 Claude Code 以上述 spec 为基础，使用 `frontend-design` 技能生成完整代码，完成后简要告知结果。