holo-card-studio README

The project's README from github.com/EverettFish/holo-card-studio. As one markdown file: README.md.

🃏 Holo Card Studio

English

实现教程来源(感谢大佬!):小红书@乌托邦的香蕉🍌

一个 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/

环境

开口

然后在 Codex 里直接说人话:

"用 holo-card-studio 给我做一张水墨风的锦鲤闪卡,文字用书法体,编号 No.001"

或者上传参考图:

"照这张图做一张闪卡,保留人物和构图,背景换成星空"

Codex 会先把卡片规格和它推断的细节说给你听,然后开工:画图 → 生成文字层 → 写配置 → 跑流水线 → 起本地服务 → 真正打开页面测拖拽、翻面、滑块和手机布局 → 交付。

你会收到

东西 用来干嘛
本地网页链接 拖、转、翻、拉滑块
card.blend 在 Blender 里继续调材质、换灯光、出渲染
assets/ 四层图 想换哪层换哪层,重跑流水线即可
card-config.json 改名字、改编号、改稀有度
渲染图 直接发

多张卡:自动分类展厅

需要持续生成和分发多张卡时,可以把每张流水线产物归档为独立目录,再由清单生成器汇总成瀑布流展厅。每张卡保留永久 URL,主页则按人物、风格、主题和稀有度自动生成筛选项。


🔧 可以调的旋钮

流水线出厂就是一套顺手的参数,也都留了口子:


📁 目录一览

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 干干净净,拿走就能用。

🔀 新功能:双图光栅卡

现在除了原有的单图全息镭射卡,还可以制作光栅卡、翻转卡、双形态卡和一念神魔。

这条路线使用两张完整卡面:A 图与 B 图会随观看角度切换整张画面,不是把一张图切成左右两半。无参考图时默认采用全彩日式浮世绘构成与水墨动漫勾线;有参考图时先生成 A,再以 A 为身份锚点编辑出 B,锁定脸型、比例、服装锚点、镜头与主体尺度。

Blender 工程包含实体卡基、图像层、柱镜光栅、镭射膜、轮廓光、闪钻粒子等独立层。网页加载 Blender 导出的 GLB,用同一套视角公式驱动整卡切换,并支持鼠标与触控倾斜。

python scripts/run_pipeline.py --project <project-dir> --mode lenticular

光栅项目使用:

assets/image_a.png
assets/image_b.png
assets/text.png
card-config.json

流水线会交付 card.blend、正视/倾斜渲染、web/assets/card.glb、白底 Three.js 查看器和验证报告。原有全息路线继续使用 --mode holographic,也可以通过 card-config.json 的 mode 自动选择。


想好第一张卡画谁了吗? ✨

holo-card-studio (EverettFish/holo-card-studio)

Searching Database…

这是什么?Holo Card Studio 是一个 Codex Skill,它把自然语言描述或上传的参考图片变成一张成品、可编辑的 Blender 全息集换式卡牌,外加一个交互式 Three.js 网页,你可以拖动、翻转和倾斜它来观看镭射效果。
这是独立应用,还是添加到 Codex 里的东西?它不是你自己启动的应用——它是一个放进 Codex skills 目录的 Codex Skill 文件夹,之后你只需在聊天里描述想要的卡牌,Codex 就会为你运行整条流水线。
我具体怎么做出一张卡牌?把 skill 放进 Codex 的 skills 文件夹,然后用自然语言告诉 Codex 你想要什么卡牌(可选附上一张参考照片);Codex 会绘制卡面、编写文字层、生成配置、运行流水线、启动本地服务器并打开页面,以测试拖动、翻转、滑块和移动端布局。
使用之前我需要装好什么?你需要带 Pillow 的 Python 3 和带 npm 的 Node.js。Blender 本身不需要手动安装——流水线会自动把官方便携版下载到 /tools/ 并用 SHA-256 校验。
我生成的美术素材最终会存进这个 skill 自己的仓库吗?不会——skill 文件夹只附带代码和文本;你创建的任何 Blender 文件、渲染图或图片都会写入你自己的输出项目,而不是 skill 本身。
全息模式和新的双图光栅模式有什么区别?全息模式为一张图像叠加视差、激光彩虹、Voronoi 星光和金色边框。新的光栅模式使用两张完整卡面(A 和 B),当你倾斜卡牌时整体切换,B 由 A 生成以保持相同的脸型、比例和着装;它导出的是真正的 GLB 模型,而不是平面图层。
流水线跑完之后我能得到什么?一个可以拖动/翻转/倾斜的本地网页链接、一个可在 Blender 中继续编辑的 card.blend 文件、assets/ 中的四层源图、一个用于调整名称/编号/稀有度的 card-config.json,以及一张可以直接分享的渲染图。
我能生成和管理一整套卡牌,而不只是一张吗?可以——每张卡牌的输出都可以归档到各自的文件夹,并由清单生成器汇总成一个图库页面,卡牌可按角色、风格、主题和稀有度浏览,且每张都保留一个永久 URL。
生成的 Blender 工程之后真的可以复用吗?可以,card.blend 是一个真正可编辑的 Blender 场景,带有以中文命名的共享节点组,用于缩放、深度和视差,还有可独立调节的激光条纹、星光和线稿发光材质——甚至可以用作讲解镭射卡原理的教学参考。
Size
0.1 MB
Stars
2K
Updated
CommitSep 22
Age
1mo
Commits · 90 Days