4 步制作线上展览馆
想把自己的照片或作品做成能滚动、拖拽、穿梭浏览的线上展览，又不会写代码？找团队做可能要上千元，其实用公开的 GitHub 项目加上 AI Agent，半小时左右就能做好。我整理了 5 个可以直接套用的展示效果和每一步的提示词，做完你会得到一个能分享给朋友的链接。
画中画模式播放中
1. 完整流程
- 打开 GitHub 项目的演示页面，选择适合自己作品的展示方式。
- 让 AI Agent 下载项目并运行原版。
- 把自己的图片和文字替换进去，再调整颜色、速度和其他细节。
- 让 AI Agent 发布网站，生成一个可以分享的链接。
2. 需要准备的工具和素材
| 工具或素材 | 用途 | 可以替换成 |
|---|---|---|
| GitHub | 查找公开的展览项目和代码 | 其他提供公开网页项目的平台 |
| Codex、WorkBuddy 等 AI Agent | 下载项目、替换素材、修改网页和发布网站 | 其他能够写代码并操作电脑的 Agent |
| 作品图片文件夹 | 存放需要展示的照片或作品 | 一个整理好的本地文件夹 |
这里需要使用能够读取本地文件、运行代码和操作电脑的 AI Agent。普通的聊天 AI 不能直接完成下载项目和修改网页的工作。
开始前，把需要展示的图片放进同一个文件夹。文件名尽量简单清楚，例如：
可复制内容
01-春天.jpg
02-海边.png
03-猫猫画像.webp3. 参考项目链接
4. 选择适合的 GitHub 项目
打开一个 GitHub 项目后，先找到 Demo、Live Demo 。打开演示页面，实际滚动和拖拽几次，再判断这个项目是否适合自己的作品。
5. 下载并运行原版
打开 Codex、WorkBuddy 或其他能够操作电脑的 AI Agent，把 GitHub 地址和下面的提示词一起发给它：
提示词
把这个 GitHub 项目下载到我的电脑并运行起来，先不要修改内容。AI Agent 完成后会打开本地预览。先把本地版本和项目的 Demo 对比一下，确认图片、文字和动画都能正常显示。
6. 替换成自己的作品
把整理好的作品文件夹发送给 AI Agent。如果准备了图片标题和说明文字，也一起发送，然后输入：
提示词
请保留原来的图片展示方式，把示例图片和文字替换成我这个文件夹里的内容。暂时不要改动核心动画，先生成一个可以预览的版本。预览生成后，先检查所有图片和文字是否已经正确替换，再继续修改样式和功能。
如果结果不满意，可以在同一个对话里继续告诉 AI Agent 需要调整的地方，例如：
- 修改标题、说明文字和字体大小。
- 调整背景色、文字颜色和页面留白。
- 加快或减慢滚动和切换速度。
- 保持图片原始比例，不要裁切或拉伸。
- 增加点击图片后放大的功能。
- 调整手机上的图片大小和操作方式。
7. 发布线上展览馆
确认电脑和手机上的预览都没有问题后，告诉 AI Agent：
提示词
帮我把网站发布成一个别人可以直接打开的链接AI Agent 可能会选择 Vercel、Cloudflare Pages 或其他网页发布平台。第一次发布时，按照它的提示完成登录或授权。
8. 常见问题
- 本地页面和 Demo 不一样： 先让 AI Agent 检查项目依赖和启动方式，原版正常后再替换内容。
- 图片被裁切或拉伸： 告诉 AI Agent 保留图片原始比例，并使用完整显示的方式处理图片。
- 异形图片出现矩形底色： 先确认图片带透明背景，再让 AI Agent 保留透明通道，不要增加固定的矩形背景。
- 换图后动画坏了： 让 AI Agent 恢复原项目的核心动画，只保留图片和文字替换。
- 页面加载很慢： 先压缩图片尺寸和文件体积，再减少同一页面同时加载的图片数量。
- 手机上不好操作： 让 AI Agent 单独检查手机尺寸，并增加触摸拖动和滑动支持。
- 发布后图片不显示： 把线上页面和报错信息发给 AI Agent，让它检查图片路径和文件名大小写。
这套方法也可以用来制作作品集、摄影展、毕业展、旅行相册或个人收藏页。更换 GitHub 项目和图片内容，就能得到不同的展示方式。