企业官网建设流程全解析

Anatomy Atelier：一个开发者用 AI「手搓」的 3D 人体解剖网站，到底能怎么玩？

项目地址：https://github.com/thebuggeddev/anatomy
本文所有截图均为该项目实际运行效果（本地部署实测截取）。

最近 GitHub 上有个项目火得很快：Anatomy Atelier（解剖工作室）。2026 年 8 月 2 日才公开，一个多月就收获了 3300+ Star 和近 900 个 Fork，连 OpenAI 总裁 Greg Brockman 都转发评价它是「用于构建交互式教育工具的 ChatGPT」。

它最出圈的点不是「又一个医学网站」，而是它的出身：整个项目几乎由一名开发者（X 上的 @thebuggeddev）指挥 AI 工具链完成——设计图由 GPT Image 生成，器官 3D 模型由 TripoAI 从图片转换而来，代码则由 OpenAI Codex 编写和优化。所以这篇文章我分三部分讲清楚：它是什么、怎么用、能不能在它的基础上二次创作。

一、这是个什么项目？

Anatomy Atelier 是一个基于 Three.js 的交互式 3D 人体解剖学习网站，用浏览器打开就能用，不需要安装任何医学软件。

目前收录了9 个器官：心脏、大脑、肺、肝脏、肾脏、眼、肠、胰腺、皮肤。

界面布局很像一座「数字博物馆」：

• 中间是 3D 标本展台，器官缓慢自转，可以拖动旋转、滚轮缩放；
• 左侧是器官库（Organ Library），点一下就能切换器官，模型按需加载；
• 右侧是知识卡片，给出器官的大小、重量、位置、供血方式、主要功能，以及「医学意义」和「你知道吗」这类冷知识；
• 底部还有显微组织视图、器官对比、功能动画、常见疾病和人体系统位置图。

以心脏为例，模型上分布着可点击的热点圆点——主动脉、左/右心房、左/右心室、二尖瓣，点上去会显示该结构的名称和作用。

左侧工具栏还提供了一排「实验操作」：旋转、缩放、单独显示（Isolate）、剖面（Cross-section）、分层（Layers）、对比（Compare）、重置。下面是剖面功能的实际效果——心脏被沿矢状面切开，可以直接观察内部腔室：

对中文用户很友好的一点是：网站内置了包括中文在内的 12 种语言，右上角一键切换，界面和解剖内容都会跟着翻译。

顶部导航还有 Systems（系统）、Lessons（课程）、Library（资料库）、Notes（笔记）几个入口。课程模式是「引导式探索」——比如「心脏内部」这节课会带你跟随高亮结构旋转标本，把形态和功能联系起来学：

此外每个器官还配有部位识别小测验（Quiz），整体形态已经接近一个轻量级的数字解剖学习平台。

二、它是怎么做出来的？

这个项目的制作过程本身比成品更有启发性，几乎就是一条标准的「AI 原生开发流水线」：

1. GPT Image生成整体设计风格图，再逐个生成每个器官的参考图；
2. TripoAI把每张器官图片转换成 3D 网格模型，跳过了手工建模；
3. OpenAI Codex拿到设计图、主提示词和全部 3D 模型，搭建出 Three.js 应用的第一个可用版本；
4. 之后还是由 Codex 做「脏活累活」：把单个器官模型从 120–150MB 压缩到 2–5.5MB，总体积从约 900MB 降到 28.6MB，并实现了器官按需加载——帧率从没法看的 16fps 救回到可用水平。

技术栈上，这是一个Next.js + React + TypeScript的单页应用，Three.js 负责渲染，GLB 模型走 Draco 压缩，配合 Tailwind CSS 和 GSAP 动画，部署在 Vercel 上。

三、我们怎么使用？

方式一：在线体验（最省事）

官方演示站部署在 Vercel（仓库主页有链接）。需要提醒的是，截至本文测试时（2026 年 9 月底），官方 Vercel 演示站处于「Deployment Paused」暂停状态，暂时无法直接访问。如果你看到站点恢复了，直接打开即可，无需注册。

方式二：本地跑起来（本文截图就是这么来的）

项目结构很标准，本地部署只要几步：

gitclone https://github.com/thebuggeddev/anatomy.gitcdanatomynpminstallnpmrun dev# 官方脚本（vinext），要求 Node.js >= 22.13

几个实测注意事项：

• package.json要求Node.js ≥ 22.13。我的测试环境只有 Node 20，npm run dev的 vinext 脚手架跑不起来，但改用npx next dev（项目内置了完整的 Next.js 配置）可以正常启动，本文所有截图均来自这种运行方式；
• 首次编译需要十几秒，每个器官的 GLB 模型按需加载，切换器官时会有一两秒的「正在准备 xx」进度提示；
• 桌面端 Chrome/Edge 体验最佳；手机浏览器能开，但 3D 交互还是大屏幕舒服。

适合谁用？

• 医学生/生物学习者：建立器官的空间结构概念，课前预习、课后复习；
• 艺术生、插画师：项目名称 Atelier（画室）就是点题——像对着石膏像写生一样观察人体结构；
• 科普内容创作者：直观的人体结构演示素材；
• 前端/3D 开发者：一个现成的 Three.js + AI 工作流学习样本。

不适合的场景也要说清楚：模型和知识内容未经过医学专业审校公示，不能替代专业解剖图谱，更不能用于临床诊断参考；纯网页应用，离线不可用。

四、能不能在它的基础上二次创作？

这是很多人关心的问题，答案需要分两面说：

技术上：完全可以，而且很好改

• 代码全部公开，结构是标准的 Next.js + Three.js，模型文件就放在public/models/目录（9 个 GLB，总共约 34MB），想替换器官、换皮肤、加新器官都有明确的入口；
• 多语言文案集中在app/i18n/目录，改文案、加语言都很方便；
• 项目本身就是「一个人 + AI 工具链」的产物，代码里没有黑盒，二次开发门槛低。895 个 Fork 也说明不少人已经在这么干了。

法律上：有一个重要前提要注意

截至本文写作时，该仓库没有添加任何开源许可证（GitHub API 的 license 字段为空，仓库内也没有 LICENSE 文件），README 也还是脚手架模板的默认内容，未做项目化维护。

这意味着：

• 在 GitHub 上查看、Fork、本地运行、学习研究，属于平台服务条款允许的范围，没有问题；
• 但「没有许可证」在法律上等同于作者保留所有权利——把代码复制到自己的产品里、二次发布、尤其是商用，都存在法律模糊地带，稳妥做法是先通过 GitHub Issue 或 X 联系作者 @thebuggeddev 获得明确授权；
• 同样地，器官模型是 AI 生成的美术资产，用于出版、课程售卖等场景前也建议确认授权。

另外两个小提醒：一是项目非常年轻（2026 年 8 月创建），迭代持续性有待观察；二是 AI 生成代码占比高，二次开发前建议自己过一遍代码质量。

五、小结

Anatomy Atelier 的价值有两层：

对学习者来说，它是一个免费、免安装、支持中文的 3D 人体解剖探索器，把课本上的平面剖面图变成了可以旋转、剖切、点击的立体标本。

对开发者来说，它更有象征意义——一个solo开发者用「GPT Image 出图 → TripoAI 转 3D → Codex 写代码并优化」的流水线，做出了教具级的产品。AI 负责快速成型，而真正把 demo 变成可用产品的，是后面那一轮把 900MB 压到 28.6MB 的「不性感」的优化工作。这大概就是 2026 年个人开发者的新常态。

相关链接

• GitHub 仓库：https://github.com/thebuggeddev/anatomy
• 官方演示站：https://anatomyatelier.vercel.app（测试时暂停服务，可收藏后等待恢复）
• 作者 X 账号：https://x.com/thebuggeddev

本文基于 2026 年 9 月对仓库 main 分支的本地实测撰写，截图来自本地运行环境的真实渲染效果。