🃏 Holo Card Studio
实现教程来源(补上,感谢大佬的教程):小红书@乌托邦的香蕉🍌
一个 Codex Skill:对 Codex 说一句话,收获一张会随视角流光溢彩的 3D 全息闪卡。 能在浏览器里拖着转、翻到背面、拉滑块看它闪;还附赠一个可以随便改的 Blender 工程。
小时候在文具店门口舍不得买的那种闪卡,现在你想印谁就印谁。
✨ 三十秒看懂
你:「给我做一张赛博朋克风的机械猫闪卡,背景霓虹雨夜,编号 No.007」
Codex:
🎨 画好四层图(主体 / 背景 / 线稿 / 文字)
🧊 搭好 Blender 场景,视差、镭射、星光一次到位
🌐 组装成 Three.js 网页,本地跑起来
📦 递给你:网页链接 + card.blend + 渲染图
你只负责想,剩下的它来。
🎬 你可以拿它做什么
🐱 给自家毛孩子发一张"传说级"卡
上传一张猫主子的照片,加一句"传说稀有度、金色边框、名字叫布丁"。 主体保留它本猫的神态和构图,背景和线稿全新绘制。拖一拖,猫在卡里往前凸,背景往后退,镭射彩虹随角度流动——朋友圈晒图请自便。
🎮 给独立游戏做角色卡牌
一个角色一句描述,批量出一整套:战士、法师、盗贼、Boss。
每张卡自带 card-config.json,稀有度、编号、属性文字都在里面,改完重新跑一遍流水线就更新。发售前发一波"抽卡预告",玩家会疯。
🏢 团队周年纪念 / 新人入职卡
把同事做成卡牌:头像当主体、部门色当背景、Slogan 当文字层。 每人一张,网页链接一发,大家在浏览器里翻自己的卡翻一下午。比 PPT 里的"团队介绍"页好玩一百倍。
🎁 情人节 / 生日 / 纪念日
"复古胶片风、粉金配色、背面写一句话"。 做好之后发一个链接过去,对方在手机上转着看,翻到背面看到那句话。仪式感这东西,闪光效果拉满就有了。
🎤 演讲 / 发布会的"彩蛋物料"
产品发布做一张产品卡,讲到最后一页丢一个链接:"扫码看会闪的那种"。 响应式网页,手机横竖屏都能玩,观众当场就转起来了。
🖌️ 设计师的材质实验场
不只是网页,card.blend 是真正可编辑的 Blender 工程。
共享节点组里有中文命名的 缩放、深度、视差效果,镭射条纹、星光、线稿发光都是独立可调的材质节点。想研究全息卡是怎么"闪"起来的,打开它就是最好的教材。
🧱 一张闪卡是怎么叠出来的
四层图叠在同一块画布上,视差把它们在空间里"撑开":
👀 你的视线
│
┌─────┴──────┐
│ text.png │ 文字层 ─ 稳稳贴在表面
├────────────┤
│ lineart.png│ 线稿层 ─ 发光的轮廓
├────────────┤
│ subject.png│ 主体层 ─ 往前凸出来
├────────────┤
│ background │ 背景层 ─ 往后缩进去
└────────────┘
再铺上镭射彩虹(相位跟着视角走,转到哪闪到哪)、Voronoi 星光、金色卡边。 浏览器端用 Three.js 按同一套 UV 公式重建这四层合成,所以 Blender 里看到什么,网页里就是什么。
🚀 怎么用
安装
把这个目录放进 Codex 的 skills 目录即可:
~/.codex/skills/holo-card-studio/
环境
- Python 3 + Pillow
- Node.js + npm
- Blender 不用自己装 —— 流水线会自动把官方便携版放到
<project>/tools/,校验 SHA-256,项目自带、互不干扰
开口
然后在 Codex 里直接说人话:
"用 holo-card-studio 给我做一张水墨风的锦鲤闪卡,文字用书法体,编号 No.001"
或者上传参考图:
"照这张图做一张闪卡,保留人物和构图,背景换成星空"
Codex 会先把卡片规格和它推断的细节说给你听,然后开工:画图 → 生成文字层 → 写配置 → 跑流水线 → 起本地服务 → 真正打开页面测拖拽、翻面、滑块和手机布局 → 交付。
你会收到
| 东西 | 用来干嘛 |
|---|---|
| 本地网页链接 | 拖、转、翻、拉滑块 |
card.blend | 在 Blender 里继续调材质、换灯光、出渲染 |
assets/ 四层图 | 想换哪层换哪层,重跑流水线即可 |
card-config.json | 改名字、改编号、改稀有度 |
| 渲染图 | 直接发 |
🔧 可以调的旋钮
流水线出厂就是一套顺手的参数,也都留了口子:
- 视差强度:主体默认 scale 1.25 / depth 0.4,背景 depth -0.25,想更"跳"就往上加
- 镭射条纹:条纹密度、扭曲度、角度,以及粉-黄-蓝-白的渐变
- 线稿发光:强度和遮罩密度,可以从"淡淡勾边"到"霓虹描边"
- 星光:Voronoi 尺度 + 动画噪声,从零星几颗到满天星
- Blender 界面语言:默认简体中文,存在项目本地配置里,一句话可换
📁 目录一览
holo-card-studio/
├── SKILL.md # Codex 读的"操作手册"
├── references/
│ ├── art-direction.md # 分层画图的提示词写法、参考图处理
│ ├── config.example.json # 卡片配置示例
│ └── verification.md # 交付前的验收清单
├── scripts/
│ ├── ensure_blender.py # 自动获取官方 Blender 便携版
│ ├── build_card.py # 生成可编辑的 Blender 场景
│ ├── export_web.py # 导出卡片几何
│ ├── generate_typography.py # 精确的透明文字层
│ ├── validate_assets.py # 四层图体检
│ ├── run_pipeline.py # 一键流水线
│ └── package_skill.py # 纯文本打包成可分享的 ZIP
└── assets/
└── web-template/ # 响应式 Three.js 查看器
skill 本体只有代码和文字,轻得很。你生成的画作、.blend、模型都待在你自己的输出项目里。
🤝 分享这个 skill
想发给朋友或放进仓库?
python scripts/package_skill.py它按白名单只打包文本文件,打出来的 ZIP 干干净净,拿走就能用。
想好第一张卡画谁了吗? ✨