用 CodeBuddy “复活“《山海经》：异兽图鉴网站的诞生

一、起因：几百只神兽，躺在没人读的文言文里

《山海经》大概是中国最早的"怪物图鉴"------九尾狐、烛龙、帝江、凤凰都出自这里。但它是文言文，还夹着一堆郭璞的注释，普通人根本读不进去。我一直想把它做成一个"上古神兽宝可梦图鉴"：每只异兽一张卡片，有图、有原文、有白话翻译、能筛选能搜索。搁以前，这是一个"数据整理一周、写代码一周、画图想都别想"的工程。这次我把整件事全程交给了 CodeBuddy，结果2个小时不到就把网站送上了公网。下面是完整过程，所有 prompt 和数据都可复现。

二、整体方案

四步全部在 CodeBuddy IDE 里完成，我没有离开过这一个窗口。

三、让 AI 啃古文------数据提取

把《南山经》全文直接粘进 CodeBuddy，prompt 是这样的：

css 复制代码

这是《山海经·南山经》全文。提取其中所有有名字的异兽/异鸟/异鱼，输出 JSON 数组，
字段：name、pinyin、chapter（篇目）、mountain（所在山）、rawText（严格照抄原文
正文，不含郭璞注）、translation（你写白话译文，通俗有趣）、category（兽/鸟/鱼）、
parts（外形部件标签，如["马身","白首","虎纹","赤尾"]）、effect（功效或预兆）。
山神祭祀和植物跳过。

1 分 46 秒后 ，nanshan-creatures.json 写好了：南山经三篇共提取 23 种异兽，还附了一张统计表和几条处理说明------rawText 严格照抄原文、拼音参考了原文里的音注（"鯥音六"→ lù）、九尾狐原文未直接命名所以按郭璞注单独收录。提取出来的数据长这样（真实条目）：

json 复制代码

{
  "name": "鹿蜀",
  "pinyin": "lù shǔ",
  "chapter": "南山经之首",
  "mountain": "杻陽之山",
  "rawText": "有獸焉，其狀如馬而白首，其文如虎而赤尾，其音如謠，其名曰鹿蜀，佩之宜子孫。",
  "translation": "马身白脑袋，虎纹赤尾巴，叫起来像人在唱歌。把它的皮毛带在身上，包你子孙满堂------古代送子神兽，比送子观音还直接。",
  "category": "兽",
  "parts": ["马身", "白首", "虎纹", "赤尾", "音如谣"],
  "effect": "佩之宜子孫"
}

白话翻译这块是我最惊喜的：它把"佩之不聾，可以為底"的旋龟翻成"古代多功能理疗仪 "，把"食之善走"的狌狌翻成"古代马拉松兴奋剂 "------这种带梗又不失准确的译文，拿来直接当详情页文案。

四、一段 PRD，让 CodeBuddy 把网站搭出来

数据有了，开始建站。我给 CodeBuddy 的完整 prompt（可直接抄）：

bash 复制代码

帮我从零创建一个《山海经》异兽图鉴网站，纯前端静态项目：
【技术栈】React + Vite + Tailwind CSS，数据放 src/data/beasts.json，无后端。
【数据结构】字段：id、name、pinyin、chapter、mountain、rawText、translation、
category、parts、effect、image。先造 6 条示例数据占位。
【页面】
1. 首页图鉴墙：响应式卡片网格，古籍风配色（宣纸底 #F5F0E6、朱砂红点缀、墨色文字），
 &nbsp; 卡片含配图、名称、出处、功效标签；
2. 顶部筛选栏：按篇目、按类型筛选 + 名称/原文全文搜索；
3. 详情页：大图 + 原文仿古排版 + 白话翻译 + 外形部件标签 + 所在山；
4. "今日异兽"：按日期随机推荐一只，放首页横幅。
【风格】衬线字体（霞鹜文楷/思源宋体）、宣纸纹理卡片、hover 轻浮起，移动端单列。
先给我整体实现计划，确认后再动手写代码。具体的图片我稍后自己放进去。

注意最后一句"先给我整体实现计划，确认后再动手写代码"。CodeBuddy 真的会先输出一份实现计划等我确认，而不是闷头开写------这个"对齐再动工"的交互对复杂项目太重要了，方向错了可以在写码之前就纠偏。

确认计划后它开始干活：建项目、装依赖、写组件，全程在任务列表里打勾推进。交付时给了一份带注释的项目结构：

bash 复制代码

shanhaijing-books/
├── index.html          # 思源宋体 CDN 引入
├── vite.config.js      # Vite + React + Tailwind CSS
└── src/
    ├── App.jsx         # 路由 + Navbar + Footer
    ├── index.css       # 宣纸纹理 / 配色 / 滚动条
    ├── data/beasts.json
    └── components/
        ├── FilterBar.jsx    # 篇目/类型筛选 + 搜索
        ├── BeastCard.jsx    # 卡片（hover 浮起 + 功效标签）
        ├── BeastGrid.jsx    # 响应式网格（1/2/3 列）
        └── DailyBeast.jsx   # 今日异兽横幅

技术栈落地是 React 19 + Vite 8 + Tailwind CSS 4 + react-router-dom 7，npm run dev 直接在 localhost:5173 跑起来了。

五、插图：原文就是最好的生图提示词

图鉴的灵魂是图。300 多张插图全部由 CodeBuddy调用hunyuan-image-v3.0生成，风格锁定"中国古代工笔水墨插画"。诀窍是：《山海经》的原文本身就是现成的提示词------"其状如马而白首，其文如虎而赤尾"，颜色、形态、部件全都写好了，两千年前的作者早就把 prompt 打磨完了。

六、一键上线 EdgeOne Pages

本地跑通了，最后一步是让所有人都能访问。我在对话框里说"一键部署到 EdgeOne Pages，拿到公网链接"，CodeBuddy 发现还没连接 EdgeOne Pages，自动唤起了授权连接：连接后一个"部署"按钮，所有构建产物推了上去： 部署成功。山海经图鉴，正式在公网"复活"。

七、成品导览

首页：顶部是"今日异兽"，按日期每天换一只。今天抽到的是大鹗------"钦䲹化为大鹗......见则有大兵"，天神冤魂化身的不祥之鸟，配文案"一出现就有大战"。下面是图鉴墙：山经/海经、篇目、类型三重筛选，外加名称/原文全文搜索。 海经部分 ：切到海经，画风从"单只神兽特写"变成"山水叙事"------比翼鸟成对起舞、羽民国的鸟人绕着茅屋盘旋。 详情页 ：大图 + 外形标签 + 功效/预兆 + 竖排仿古原文 + 白话译文对照。比如结匈国："这个国家的人胸骨向前突出、隆起如结。上古异人国之一------也许是人类对远方异族的想象。"

八、写在最后：两小时，"复活"一部上古图鉴

回头看这个项目，最不可思议的是时间账：**从贴入第一段文言文，到 316 个角色（205 山经 + 111 海经）带着 300 多张工笔水墨插图在公网上线，前后不到两个小时。**这里面我真正动手做的，只有三件事：贴原文、写 prompt、点确认。剩下的 90% 都是 CodeBuddy 完成的。最打动我的四个瞬间：

任务拆解是真的在"思考"：海经 13 篇解析 + 316 条数据合并 + UI 改造 + 批量生图这种复合任务，它自己列成六步清单逐项打勾推进；
先出计划再动工：prompt 里加一句"先给我整体实现计划"，它就真的等我确认才开始写码------复杂项目最怕方向跑偏，这个交互把纠错成本压到了写码之前；
生态闭环：写代码、跑终端、调 hunyuan-image-v3.0 生图、EdgeOne Pages 一键部署，我从头到尾没有离开过一个 IDE 窗口；
听得懂人话："加入到网页里面呀"这种口语化指令，它能准确理解成"合并新数据 + 适配 UI 类别 + 重新构建"，增量迭代毫无沟通成本。