企业官网建设流程全解析

> 一个独立开发者 + 一个 AI 编程助手 = 一个支持多平台视频/音乐解析的个人工具站。本文完整复盘从想法到上线的全过程，以及我为什么选择 MonkeyCode 作为主力开发工具。

---

## 项目起源

作为一个经常刷抖音、听歌的人，我一直有个痛点：想把某个视频或某首歌保存下来，但每个平台的规则都不一样，操作起来很麻烦。

于是我想做一个自己的工具站——就叫"小吾"，把视频解析和音乐下载这两个高频需求整合到一起。域名用的 `xiaowu.live`。

## 技术选型：为什么是 MonkeyCode

动手之前，我在几个 AI 编程工具之间犹豫过：

| 工具 | 免费额度 | 我的感受 |
|------|---------|---------|
| Cursor | 2000次补全/月 | 补全爽，但项目级开发不够 |
| GitHub Copilot | 30天试用 | 行内提示很强，但干不了全流程 |
| **MonkeyCode** | 每天3000万Token | 免费额度多到用不完 |

选 MonkeyCode 的关键原因就一个：**它能从头到尾帮我搭一个完整项目**，不只是补全代码，而是需求分析、架构设计、写代码、部署一条龙。

## 项目架构

整体采用 **Node.js + Python 双语言后端 + 纯原生前端** 的轻量架构：

```
用户浏览器
│
▼
Nginx (SSL终端 + 静态文件)
│
├─ / → 首页（毛玻璃深色主题）
│
└─ /video/ → Express.js (端口 3006)
│
├─ /api/parse → Python 视频解析脚本
├─ /api/music/* → Python 音乐解析脚本
└─ /api/dl → 流式下载代理
```

没有用 React、Vue 这些框架，纯 HTML + CSS + 原生 JS，零构建步骤，极致轻量。

## MonkeyCode 帮我做了什么

### 1. 视频解析模块

最难搞的是**抖音**。它的视频链接是短链，需要先解析出真实地址，再提取视频直链。我自己研究了一个下午也没完全搞定，直接把需求丢给 MonkeyCode：

> "写一个 Python 脚本，支持抖音、快手、小红书、B站、微博的视频链接解析，提取视频直链和封面图"

几分钟后，`douyin_extract.py` 就出来了，支持 5 个平台，通过抓取页面中的 JavaScript 全局变量提取视频地址。后来还加了批量解析、URL 自动识别等功能。

踩过一个坑：部署到阿里云 ECS 后，发现抖音会屏蔽服务器 IP（返回 444）。MonkeyCode 帮我加了友好的前端提示——检测到抖音链接解析失败时，自动弹出"在新窗口打开原链接"的引导按钮。

### 2. 音乐搜索与下载

这个模块更复杂，涉及网易云、QQ音乐、酷狗、酷我 4 个平台：

- **搜索**：跨平台聚合搜索，返回歌名、歌手、专辑、封面
- **歌单解析**：支持网易云歌单全量抓取（含分页，253 首歌的歌单也能一次拉完）
- **下载**：多音质降级策略——优先高清，不可用时自动切换到标准音质
- **批量打包**：多选歌曲打包成 ZIP 下载

所有的多源降级逻辑、短链接解析、歌词 Base64 解码，都是 MonkeyCode 帮我写的。`music_extract.py` 最终有 739 行，结构清晰，按功能模块分区。

### 3. 前端 UI：从浅色到深色毛玻璃

最初做的是浅色主题，看着像十年前的网页。我把设计需求描述给 MonkeyCode：

> "改成深色主题，科技感强一点，用毛玻璃效果，配色以深蓝为主，强调色用 #4da8f0"

几分钟后拿到了完整的 CSS 改造方案——`backdrop-filter: blur(24px)` 的毛玻璃卡片，半透明背景 `rgba(18,28,48,.82)`，配合动态渐变的背景光晕动画。效果直接拉满。

### 4. 微信内置浏览器的坑

上线后发现一个严重问题：微信内置浏览器不支持 `<a download>` 属性，用户在微信里点下载完全没反应。

MonkeyCode 帮我加了 UA 检测逻辑：识别到 `MicroMessenger` 后，隐藏下载按钮，显示一个琥珀色的提示条，引导用户"复制链接到系统浏览器打开"。这个修复只用了不到 10 分钟。

### 5. 部署到线上

项目跑通后，我需要部署到阿里云 ECS。MonkeyCode 帮我写了完整的 Nginx 配置：

```nginx
# HTTP 自动跳转 HTTPS
# /video/ 反向代理到 Express 端口
# Let's Encrypt SSL 证书配置
# client_max_body_size 210M（批量下载 ZIP 包）
```

整个过程：写配置 → 传服务器 → Nginx reload，一气呵成。

## 最终成果

现在 `xiaowu.live` 上跑着：

- **首页**：个人品牌展示 + 工具入口
- **视频解析**：支持 5 个平台，批量解析 50 条链接
- **音乐工具**：4 平台搜索 + 歌单解析 + 批量下载 ZIP
- **AI 工作台**：对话式交互界面
- **二维码生成器**：独立工具页

## 真实体验总结

**MonkeyCode 好用在哪：**

1. **不只是代码补全**：它能理解你的项目上下文，从架构到细节都帮你考虑
2. **免费额度够大**：每天 3000 万 Token，我一个人开发根本用不完
3. **零环境配置**：浏览器打开就能用，不用折腾本地环境
4. **踩坑时有人兜底**：遇到微信下载失效、抖音 IP 屏蔽这种问题，直接问就能拿到解决方案

**不太适合的场景：**

- 需要实时行内代码补全的（这个 Cursor/Copilot 更强）
- 大型项目的深度本地调试

我的使用策略是：日常编码用 VS Code + Copilot，需要快速出原型、搭新模块、解决疑难问题时切到 MonkeyCode。两个工具互补，效率翻倍。

---

如果你也在用 AI 工具做开发，欢迎试试 MonkeyCode。注册即用，每天 3000 万 Token 免费额度，不用绑卡。

官网：[https://monkeycode-ai.com](https://monkeycode-ai.com)

开源地址：[https://github.com/chaitin/MonkeyCode](https://github.com/chaitin/MonkeyCode)