一个能把照片变成可翻页 3D 画册的 Skill！

Codex Skill「照片 → 可翻页 3D 画册」拆解复刻教程

来源：抖音 @fffffff（抖音号 74002514875，IP 属地 美国）｜作品《一个能把照片变成可翻页 3D 画册的 Skill！》｜视频 15.83 秒、768×720、30fps｜拆解与核验日期 2026-09-28

证据与复刻声明

本文严格区分四层证据，读者可据此判断哪些是画面里真实发生的、哪些是创作者自己说的、哪些是官方口径、哪些是我们的整理：

• 来源画面事实：原视频画面中可直接观察到的界面、命令、文件路径、按钮与页码。

• 创作者披露：作品文案（抖音配文）、话题标签，以及创作者在画面中主动展示的信息。

• 官方资料：该 Skill 的 GitHub 仓库、项目官网与 OpenAI 官方发布信息，逐条标注核验日期。

• 复刻方案：本文给出的可执行步骤、命令与提示词模板，属于我们的整理结果。复刻方案不等于创作者的原始完整流程，也不代表创作者使用的全部参数与隐藏操作。

补充说明：原作品配文与视频画面均已核验；视频中创作者展示的是该 Skill 在 Codex 中的实际运行过程，本文的步骤 1、2 条命令为仓库 README 公开文本，其余操作路径部分属于我们的复刻整理。

一、这条作品讲了什么（来源画面事实）

全片 15.83 秒，是一段 Codex 界面的屏幕录制，没有口播、没有字幕。节奏非常紧凑，完整走完了「装技能 → 喂照片 → 出成品」三步。

图 1：Codex 对话中执行 Skill Installer 安装技能，输入框内容为「Install this skill: https://github.com/HaichaoLi/cs/tree/v0.2.0/skills/create-photo-flipbook-ui」。来源：原视频画面。

图 2：同一步的另一帧，可见附件栏已挂载 9 张照片缩略图，输入模式为 Full access、模型为 5.6 Sol Medium。来源：原视频画面。

图 3：安装完成回执——Installed and verified create-photo-flipbook-ui from tag v0.2.0，本地路径 /Users/haichaoli/.codex/skills/create-photo-flipbook-ui，并提示「It will be available starting with your next turn.」。来源：原视频画面。

二、作品披露的工具与版本（创作者披露 + 来源画面事实）

三、这个 Skill 是什么（官方资料，核验日期 2026-09-28）

画面中的仓库地址在录制时可能被视觉缩略，我们按技能名称检索并核验了真实仓库，全部信息如下：

该技能内置三种能力：一为语义照片搜索与接触印样（contact sheet），二为封面与内页的版式设计（默认样式自带 Source Serif 4 字体、纸张与布纹材质），三为内置的 2D HTML 翻页运行时（runtime）。

另外，仓库还单独提供了 8 套可选的界面模板（ui-collections/），不随技能一起安装：Library（书架）、2D Book（2D 书）、3D Book 1（React + WebGL 曲面翻页）、3D Book 2（Three.js + Quick FlipBook）、Card Gallery（卡片环廊）、Image Atlas（空间档案）、Photo Ring（照片环）、Film Negative Flipbook（胶片负片）。想要视频里那种 3D 翻页效果，可优先看 3D Book 1 与 3D Book 2。

图 12：项目官方仓库 HaichaoLihc/create-photo-flipbook-ui，可见 MIT 协议、416 Star、3 个版本标签与目录结构。来源：项目 GitHub 页面，核验日期 2026-09-28。

图 13：项目官网中文版首页——「把你的照片，做成一本翻页相册」，并提供「安装技能」「体验演示」入口。来源：项目官网，核验日期 2026-09-28。

四、逐步复刻（复刻方案）

前置条件：已安装并登录 Codex，本机有 Python 3 环境；准备一个放照片的本地文件夹（建议 8～15 张，风格统一效果更好）。

第 1 步 从 GitHub 安装这个 Skill

在 Codex 会话里直接说「Install this skill」并给出仓库地址，或改用一条命令安装（推荐，可控性更强）：

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
--repo HaichaoLihc/create-photo-flipbook-ui \
--path skills/create-photo-flipbook-ui \
--ref main

• 参数含义：--repo 指定仓库；--path 指定技能在仓库中的位置；--ref 指定分支或标签（默认 main，也可写 v0.3.0 装指定版本）。

• Windows 用户把路径换成 %USERPROFILE%\.codex\skills\.system\skill-installer\scripts\install-skill-from-github.py，并用 python 而非 python3。

• 安装位置默认为 $CODEX_HOME/skills/（未设置该变量时即 ~/.codex/skills）。若要改名，加 --name 参数。

• 预期结果：终端输出安装成功，与图 3 的 Installed and verified 回执一致。

• 失败排查：① 装完必须重启 Codex 或开新会话才会加载，画面中的 It will be available starting with your next turn 说的就是这件事；② 目标目录已存在会直接中止（防止覆盖），先删除旧目录或改用 --dest 换位置；③ 网络下载失败时加 --method git，改用 git 稀疏检出更稳。

第 2 步 准备照片并在 Codex 中调用技能

• 把照片放进一个文件夹。图 2 的附件栏挂了 9 张，最终画册页码为 01/09，说明照片数与页数是直接对应的。

• 在 Codex 中显式点名技能，句式照抄即可：

Use $create-photo-flipbook-ui to turn these photographs into photobooks.

• 中文写法：用 $create-photo-flipbook-ui 把这些照片制作成一本画册。（对应图 4 的输入框内容）

• 建议同时说清三件事：照片文件夹路径、想要的照片风格、期望的页面数量，Agent 会据此决定处理方式。

• 预期结果：Codex 依次完成「理解照片（语义检索 + 接触印样）→ 定义版式 → 生成翻页书」，并在结束时给出本地访问地址。

• 失败排查：① 若技能没被触发，检查技能是否装在 ~/.codex/skills 下、以及是否重启过 Codex；② 照片过多时先做人工筛选，语义检索解决不了「哪张更好看」；③ 想要特定风格而模型直接沿用原图，明确说「参考某个风格，重新设计每一页的版式」。

第 3 步 打开成品并发布

图 4：附件栏挂着 9 张照片缩略图，输入框内容为「Photo Flipbook UI 把这些照片制作成一本画册」，随后显示 Thinking。来源：原视频画面。

图 5：成品第 1 页。浏览器地址为 localhost:5175，顶部三处导航为 GATHERED SCENES / STILL REACHING / OPEN SPREAD，正文为整页拼贴插画配小字标题「STILL REACHING」，底部页码 01/09。来源：原视频画面。

图 6：第 2 页。左右对页的撕裂纸张拼贴效果，左页为湖面树林，右页为雪山与人物，页码 02/09。来源：原视频画面。

图 7：第 4 页。三张照片以撕裂边缘倾斜叠放，空白处排有手写体小字，页码 04/09。来源：原视频画面。

图 8：第 6 页。左侧为海滨远景整页图配小字，右侧为书店内景与速写、明信片的拼贴，页码 06/09。来源：原视频画面。

图 9：第 9 页（末页）。左页为黄昏海岸拍摄者剪影，右页为蓝色时刻的斑马线街景，翻页已到最后一页。来源：原视频画面。

图 10：第 8 页。左右对页分别为主色调统一的正片与蓝调夜景照片，可见同一画册内版式会随内容变化。来源：原视频画面。

图 11：成品整体视图，确认页面为可交互的翻页网站而非静态图，浏览器为 Chrome 系。来源：原视频画面。

• 交互方式：按底部提示用鼠标拖拽、触摸滑动或方向键翻页（DRAG, SWIPE, OR USE ARROW KEYS）。

• 发布：技能产出的是一份本地网站，确认无误后把它传到自己的静态托管平台即可对外分享。

• 失败排查：① 端口被占用时换端口；② 页面图片不显示，检查照片是否被正确引用、路径是否含中文或空格；③ 想要 3D 曲面翻页效果，改用仓库 ui-collections/3d-book-1（React + WebGL）或 3d-book-2（Three.js）。

五、三种常见风格路线（复刻方案）

六、可直接套用的提示词模板（复刻方案）

七、成本与门槛（复刻方案 + 官方资料）

官方链接：项目仓库 https://github.com/HaichaoLihc/create-photo-flipbook-ui

官方链接：项目官网（含在线演示）https://haichaolihc.github.io/create-photo-flipbook-ui/

来源链接：原作者抖音主页 https://www.douyin.com/user/MS4wLjABAAAAZEBZx3Qt49b5mDHR_86niyFhvUdB2ENaqCIeW919Aew

八、复刻检查清单

• 装完技能务必重启 Codex 或开新会话，否则技能不会被加载。

• 照片先人工挑一遍，数量控制在 8～15 张，风格越统一成册效果越好。

• 调用时显式点名 $create-photo-flipbook-ui，不要只说「做个画册」。

• 指令里写清照片路径、页数与风格，产出稳定性明显高于一句话需求。

• 生成后逐页翻一遍，重点看文字有没有压到照片主体上。

• 想要 3D 曲面翻页，装完再去仓库 ui-collections/ 里挑阅读器模板。

• 浏览器不正常显示时先换端口，再检查图片路径是否含中文或空格。

• 想公开发布前，先确认照片版权与人物肖像授权，别直接传原图。

九、来源、授权与版本说明

• 来源：抖音 @fffffff 发布的作品（抖音号 74002514875），视频时长 15.83 秒、分辨率 768×720、30fps。

• 技能作者：GitHub 用户 HaichaoLihc（与画面中的本地用户名 haichaoli 一致）；项目代码与技能为 MIT 协议，第三方组件沿用各自协议。

• 插图说明：图 1–图 11 取自原视频画面截帧，未重绘、未伪造界面；图 12、图 13 为项目仓库页与项目官网的公开页面截图。

• 用途：本文为学习与研究目的的结构化拆解；如需转载原视频内容或商用其中的照片素材，请自行获得原作者授权。

• 复刻方案不等于创作者的原始完整流程，文中命令与提示词为仓库公开文本与我们的整理结果。

• 版本提示：技能版本与 Codex 界面持续更新，本文官方信息核验日期为 2026-09-28，实际以官方页面为准。

发布于 2026-08-25

原片地址：https://www.douyin.com/video/7677775651118152866

关于作者：fffffff（抖音号 74002514875）

作者主页：https://www.douyin.com/user/MS4wLjABAAAAZEBZx3Qt49b5mDHR_86niyFhvUdB2ENaqCIeW919Aew