我用WorkBuddy vibe 了一个山海经异兽图集

缘起

我觉得中国古典神话《山海经》是一本非常有意思的书，我也非常想要去了解里面的奇花异草，山神怪兽。

微信读书每次打开，看到几章就看不下去了，因为太枯燥了，里面的异兽描述的，根本想象不出是什么样子。

所以我想着，能不能做一个山海经图集，把里面的异兽都用AI生成出来，然后对照着看，就比较有趣。

我一开始想做网站，但是确实不太方便，后面想到之前做过一个iBookstack 小程序。

里面收录的是我自己的知识库书籍笔记，就想着能不能试试让AI把这个图集放到这里，当作一个书籍展示

山海经一共 18 卷，每卷都有很多异兽，我的设想是，每个异兽做成一个卡片，正面是异兽的形状，用AI生成，背面是它的原文和译文，点击可以相互翻转。

我自己是做后端的，不懂前端的代码，更别说微信小程序了，所以这个项目就全交给AI来完成了。

我只做一个产品的体验，每次不对的时候，交给AI，它出活，我反复体验，最后有问题再交给AI。

18 卷山海经

我先把我的代码从github上面clone下来，打开 WorkBuddy，选择我的代码工作空间，先让AI读一下我的项目结构，以下是我的prompt

"这个项目是微信小程序的知识库。我要多加一个书籍，关于山海经奇珍异兽图集的，按照山海经的章节规划，每一章一个图集，图集正面是照片，反面是介绍。"

AI遵循了我的指令，先读了我现有的项目结构，输出了一个项目的结构，之前用cursor vibe出来的。

01_mysql_45/
├── pages/
│   └── index.{js,wxml,wxss,json}   # 页面模板
├── docs/
│   ├── menu.js                      # 目录树
│   ├── contents.js                   # 内容映射
│   └── contents/                     # 每章一个 .js 数据文件

然后根据现有代码的架构，以及山海经的整本书籍，创建了 09_shanhaijing 目录，里面囊括了山海经的 18 个章节文件。和现有代码结构一样，每个章节是一个结构化的 JS 对象：

module.exports = {
type: 'cards',
title: '大荒东经',
subtitle: '大荒东方神异',
beasts: [
    {
      name: '夔牛',
      image: '',              // 等我上传图床
      appearance: '状如牛，苍身无角一足，光如日月声如雷',
      original: '东海中有流波山……其上有兽，状如牛，苍身而无角，一足……其名曰夔。',
      translation: '独脚神牛，出入水时必有风雨，光芒如日月，声如雷。黄帝用其皮制鼓，声闻五百里。'
    }
  ]
};

这里每一个异兽的名字、原文、释义，都是 AI 按山海经原典整理的。 。AI总共整理了 80 多种异兽，我对比山海经原文看了下，应该是有遗漏的，后面我会补充进来，暂时先按照AI的输出来让他继续干活了。

交互反复鞭笞AI

AI做出来的第一版，完全参考了我的项目代码，数据以 Markdown 存放，然后通过towxml进行markdown渲染，这跟我的预期完全不符合，所以我就跟他进行反复沟通

我在workbuddy里面输入

"你不是用卡片的方式展示的，你只是把 markdown 转成了 html 展示，我要的是解析 markdown 之后，把它按照卡片方式展示的。"

这一次AI输出了正确的wxml的格式文件，它把数据转成了json格式，每一条对应一张卡片，包括了正面和反面，但它又不对了，它翻转到图片页面的时候，卡片会大一点，导致空间有挤压。我当时想，这真的是垃圾AI，但我又不想放弃，我就继续跟它沟通问题所在，最终它改对了，下面是主要的css动画代码

WXSS——3D 翻转动画的核心：

.card-inner {
transition: transform 0.6scubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.card-inner.flipped {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
backface-visibility: hidden;
box-sizing: border-box;  /* 这个坑后面说 */
}
.card-back {
transform: rotateY(180deg);
}

flipCard(e) {
  const { index } = e.currentTarget.dataset;
  this.setData({
    [`beasts[${index}].flipped`]: !this.data.beasts[index].flipped
  });
}

最终的效果是，点击一张卡片，旋转 180 度，其中正面是异兽图，但其实很多事没有图，没有图的时候，就让它展示山海经的原文和译文，反面翻过来就是山海经原文和译文。

尾声

以后我在上班通勤的路上，都会打开山海经，当我想象不出山海经异兽样子的时候，我就打开我的小程序，用AI来代替我的大脑想象这些异兽长什么样子。

看着看着，我就会有一个疑问。

如果山海经是真的，那古人是怎么找到那些山，那些还海，还有那些异兽的。

如果山海经是假的，那古人的想象力也太丰富了，

很多奇珍异兽，我是真的想象不出来它的样子。

以前读不进去的山海经，现在一口气翻完了八十多种异兽。

两千年前的中国人，用想象力构建了一个瑰丽奇特的神话世界。两千年后的今天，我让AI用几行代码把它装进了一个小程序。