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)

creative-tools
Searching Database…

What is this?Holo Card Studio is a Codex Skill that turns a plain-language description or an uploaded reference image into a finished, editable Blender holographic trading card plus an interactive Three.js web page you can drag, flip and tilt to see the foil effect.
Is this a standalone app or something I add to Codex?It is not an app you launch yourself — it is a Codex Skill folder you drop into Codex's skills directory, then you just describe the card you want in chat and Codex runs the whole pipeline for you.
How do I actually get a card made?Place the skill in Codex's skills folder, then tell Codex in natural language what card you want (optionally attaching a reference photo); Codex draws the art, writes the text layer, generates the config, runs the pipeline, starts a local server and opens the page to test dragging, flipping, the slider and mobile layout.
What do I need installed before using it?You need Python 3 with Pillow and Node.js with npm. Blender itself doesn't need manual installation — the pipeline automatically downloads the official portable build into /tools/ and verifies it with SHA-256.
Does the artwork I generate end up stored inside this skill's own repo?No — the skill folder ships only code and text; any Blender file, renders or images you create are written into your own output project, not into the skill itself.
What's the difference between the holographic mode and the new dual-image grating mode?Holographic mode layers one image with parallax, laser rainbow, Voronoi star glow and a gold border. The new grating mode uses two full card faces (A and B) that swap entirely as you tilt the card, with B generated from A to keep the same face shape, proportions and outfit; it exports a real GLB model instead of flat layers.
What do I get once the pipeline finishes?A local webpage link to drag/flip/tilt, a card.blend file for further editing in Blender, the four source image layers in assets/, a card-config.json for tweaking name/number/rarity, and a rendered image you can share directly.
Can I generate and manage a whole set of cards, not just one?Yes — each card's output can be archived into its own folder and summarized by a manifest generator into a gallery page, with cards browsable by character, style, theme and rarity and each keeping a permanent URL.
Is the Blender project actually reusable after it's generated?Yes, card.blend is a real editable Blender scene with Chinese-named shared node groups for scale, depth and parallax, plus independently adjustable materials for the laser stripes, star glow and line-art glow — useful even as a teaching reference for how foil cards work.
Size
0.1 MB
Stars
2K
Updated
CommitSep 22
Age
1mo
Commits · 90 Days