
![9.png](https://developer.qcloudimg.com/http-save/yehe-10809644/2bb38a5819185ae63ee7738ced1507e8.png)
## 一、起因：几百只神兽，躺在没人读的文言文里

《山海经》大概是中国最早的"怪物图鉴"——九尾狐、烛龙、帝江、凤凰都出自这里。但它是文言文，还夹着一堆郭璞的注释，普通人根本读不进去。
我一直想把它做成一个"上古神兽宝可梦图鉴"：每只异兽一张卡片，有图、有原文、有白话翻译、能筛选能搜索。搁以前，这是一个"数据整理一周、写代码一周、画图想都别想"的工程。这次我把整件事全程交给了 CodeBuddy，结果2个小时不到就把网站送上了公网。
下面是完整过程，所有 prompt 和数据都可复现。
## 二、整体方案
![db434589-723f-47ab-ad81-4290117806b5.png](https://developer.qcloudimg.com/http-save/yehe-10809644/72b32fadac911e9bfedae4f933dfef29.png)
四步全部在 CodeBuddy IDE 里完成，我没有离开过这一个窗口。
## 三、让 AI 啃古文——数据提取

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

![1.png](https://developer.qcloudimg.com/http-save/yehe-10809644/7ac193216bb0311299957f3b4cca69c0.png)
**1 分 46 秒后**，`nanshan-creatures.json` 写好了：南山经三篇共提取 23 种异兽，还附了一张统计表和几条处理说明——rawText 严格照抄原文、拼音参考了原文里的音注（"鯥音六"→ lù）、九尾狐原文未直接命名所以按郭璞注单独收录。
![2.png](https://developer.qcloudimg.com/http-save/yehe-10809644/d8ff8f18a950ad8db5f1a9f79e58acaa.png)
提取出来的数据长这样（真实条目）：
```
{
  "name": "鹿蜀",
  "pinyin": "lù shǔ",
  "chapter": "南山经之首",
  "mountain": "杻陽之山",
  "rawText": "有獸焉，其狀如馬而白首，其文如虎而赤尾，其音如謠，其名曰鹿蜀，佩之宜子孫。",
  "translation": "马身白脑袋，虎纹赤尾巴，叫起来像人在唱歌。把它的皮毛带在身上，包你子孙满堂——古代送子神兽，比送子观音还直接。",
  "category": "兽",
  "parts": ["马身", "白首", "虎纹", "赤尾", "音如谣"],
  "effect": "佩之宜子孫"
}
```
白话翻译这块是我最惊喜的：它把"佩之不聾，可以為底"的旋龟翻成"**古代多功能理疗仪**"，把"食之善走"的狌狌翻成"**古代马拉松兴奋剂**"——这种带梗又不失准确的译文，拿来直接当详情页文案。
![5.png](https://developer.qcloudimg.com/http-save/yehe-10809644/129efcc6f3f9df704992bf36cec40f9d.png)

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

数据有了，开始建站。我给 CodeBuddy 的完整 prompt（可直接抄）：
```
帮我从零创建一个《山海经》异兽图鉴网站，纯前端静态项目：
【技术栈】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 真的会先输出一份实现计划等我确认，而不是闷头开写——这个"对齐再动工"的交互对复杂项目太重要了，方向错了可以在写码之前就纠偏。

![3.png](https://developer.qcloudimg.com/http-save/yehe-10809644/13c9990b7ddb0188d4e2792affa37ced.png)
确认计划后它开始干活：建项目、装依赖、写组件，全程在任务列表里打勾推进。交付时给了一份带注释的项目结构：
![4.png](https://developer.qcloudimg.com/http-save/yehe-10809644/60b57d50a1f3db958459f14cb3ce0e75.png)

```
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 打磨完了。

![6.png](https://developer.qcloudimg.com/http-save/yehe-10809644/75eaa36c3853f0b4d8869ed08d461ebb.png)
## 六、一键上线 EdgeOne Pages

本地跑通了，最后一步是让所有人都能访问。我在对话框里说"一键部署到 EdgeOne Pages，拿到公网链接"，CodeBuddy 发现还没连接 EdgeOne Pages，自动唤起了授权连接：
![7.png](https://developer.qcloudimg.com/http-save/yehe-10809644/2b9912295eb9a6933fb612adbbb001c2.png)
连接后一个"部署"按钮，所有构建产物推了上去：
![8.png](https://developer.qcloudimg.com/http-save/yehe-10809644/cee4612551431788c0c99e1706d5aab8.png)
**部署成功。山海经图鉴，正式在公网"复活"。**
## 七、成品导览

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


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

回头看这个项目，最不可思议的是时间账：**从贴入第一段文言文，到 316 个角色（205 山经 + 111 海经）带着 300 多张工笔水墨插图在公网上线，前后不到两个小时。**这里面我真正动手做的，只有三件事：贴原文、写 prompt、点确认。
剩下的 90% 都是 CodeBuddy 完成的。最打动我的四个瞬间：
1. **任务拆解是真的在"思考"**：海经 13 篇解析 + 316 条数据合并 + UI 改造 + 批量生图这种复合任务，它自己列成六步清单逐项打勾推进；
2. **先出计划再动工**：prompt 里加一句"先给我整体实现计划"，它就真的等我确认才开始写码——复杂项目最怕方向跑偏，这个交互把纠错成本压到了写码之前；
3. **生态闭环**：写代码、跑终端、调 hunyuan-image-v3.0 生图、EdgeOne Pages 一键部署，我从头到尾没有离开过一个 IDE 窗口；
4. **听得懂人话**："加入到网页里面呀"这种口语化指令，它能准确理解成"合并新数据 + 适配 UI 类别 + 重新构建"，增量迭代毫无沟通成本。


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

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

不到两小时，用 CodeBuddy 把《山海经》316 个角色做成公网图鉴网站：古文提取、建站、AI 工笔插图、一键部署，全程一个 IDE 搞定。

全栈开发

编程语言

前端

开发工具

《山海经》神兽图鉴网站2小时极速上线！AI自动解析文言文，生成300+工笔水墨插画，实现React+Vite静态网站。支持神兽筛选、搜索、详情查看，完美复刻上古异兽世界。CodeBuddy全流程自动化，从数据提取到部署一气呵成，让古籍焕发新生。

数据结构

代码解释

路由

React

JSON

ES特惠专场，新客首购5.5折起！


CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 CodeBuddy "复活"《山海经》：异兽图鉴网站的诞生-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐