RuiC-card-skill README

The project's README from github.com/HRuiCcc/RuiC-card-skill. As one markdown file: README.md.

✦ RuiC Card Skill

一个 Codex Skill:把小时候文具店门口那种会闪的全息卡复刻到浏览器里。 说一句话,就得到一张会随视角流光、带层次景深的 3D 闪卡网页,外加一个可以随便改的 Blender 工程。

小时候买不起的闪卡,现在你想印谁就印谁。这是你的私人卡牌工坊。

它是一台全自动闪卡生产线:你给一句话或一张参考图,剩下全交给 Codex——

  1. 画四层图:主体、背景、线稿、文字,画在同一块画布、同一套坐标里
  2. 搭 3D 场景:Blender 建卡牌几何,把四层图按景深在空间里"撑开"——主体前凸、背景后缩
  3. 铺全息材质:镭射彩虹的相位跟着视角走,转到哪闪到哪;烫金 / 银箔 / 珠光 / 原画四种质感
  4. 组装网页:Three.js 查看器打包成单文件,起本地服务,打开页面实测拖拽、翻面、滑块、手机布局
  5. 交付:网页链接 + card.blend 源工程 + 四层透明 PNG + card-config.json 配置 + 渲染图

技术栈就三样:Blender(官方便携版自动安装,不碰系统环境)+ Three.js(按同一套 UV 公式重建材质)+ Python 流水线(画完图之后一步到位)。skill 本体只有代码和文字,装上就能用;你生成的画作、工程、模型全部待在你自己的项目目录里。


🎬 演示

调整前 · 图层分散

初版层距:主体、特效、文字隔得较开,转动时明显"散开":

调整前效果

▶ 观看调整前完整视频

调整后 · 层距收紧(现默认)

调整后:各层收近一档,卡片整体更紧凑,仍保留层次景深——这是当前出厂默认效果:

调整后效果

▶ 观看调整后完整视频


✨ 特性


🚀 快速开始

安装

把这个目录放进 Codex 的 skills 目录(目录名即 skill 名):

~/.codex/skills/RuiC-card-skill/

环境

开口

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

或者上传参考图:

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

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

你会收到

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

🎬 可以拿它做什么


⚙️ 工作原理

一句话进去,一张会闪的卡出来,中间是一条全自动流水线:

flowchart LR
    A[一句话 / 参考图] -->|"分层提示词<br>art-direction"| B[四层图<br>subject·background·lineart·text]
    B --> C[card-config.json<br>卡片规格]
    C --> D[run_pipeline.py<br>一键流水线]
    D -->|"validate_assets<br>透明/对齐体检"| E{体检通过?}
    E -->|"否,重新生成"| B
    E -->|是| F[Blender 便携版<br>自动安装 + SHA-256 校验]
    F --> G[card.blend<br>可编辑视差场景]
    G --> H[card.glb<br>几何 + 材质名契约]
    H --> I[web-template<br>Three.js 查看器单文件打包]
    I --> J[本地网页 4173<br>拖转/翻面/滑块/手机布局]

核心链路要点:


🔧 可以调的旋钮

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


📁 目录一览

RuiC-card-skill/
├── 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      # 四层图体检(棋盘格假透明图自动转真 alpha)
│   ├── checkerboard_to_alpha.py # 棋盘格底确定性抠透明(附回归测试)
│   ├── run_pipeline.py         # 一键流水线
│   └── package_skill.py        # 纯文本打包成可分享的 ZIP
└── assets/
    └── web-template/           # 响应式 Three.js 查看器

skill 本体只有代码和文字,轻得很。你生成的画作、.blend、模型都待在你自己的输出项目里。


📦 打包分享

想发给朋友或放进仓库:

python scripts/package_skill.py RuiC-card-skill --out ~/Desktop/RuiC-card-skill.zip

按白名单只打包文本文件,打出来的 ZIP 干干净净,拿走就能用。


赞赏支持

微信赞赏码

微信扫码赞赏

RuiC-card-skill (HRuiCcc/RuiC-card-skill)

blender
Searching Database…

What is this?RuiC Card Skill is a Codex Agent Skill that turns a one-sentence description (or a reference image) into an interactive 3D holographic trading-card webpage with layered parallax depth, delivered together with an editable Blender project.
Is this a standalone app, or something I load into an agent?It is a skill package you drop into an AI coding agent's skills folder, not a standalone app; the host agent (e.g. Codex) reads it and runs the whole image, Blender, and web pipeline for you.
How do I install and use it?Copy the project folder into Codex's skills directory (the folder name becomes the skill name), then just tell the agent what card you want, e.g. a koi-fish holographic card with calligraphy text; it generates the layers, builds the scene, and serves a local webpage.
What do I need installed to run the pipeline?You need Python 3 with Pillow and Node.js with npm; Blender itself does not need to be installed manually, since the pipeline auto-downloads an official portable build into a /tools/ folder and verifies it with SHA-256.
Any install pitfalls or runtime limitations?The skill ships only code and text with no binaries, credentials, or cache, and the finished viewer is packed into a single self-contained file with no external requests, so ad-blockers can't break it and it still renders (via CSS-3D fallback) even with hardware acceleration disabled.
Does it only work with Codex, or other agents and models too?It is described as host-agnostic and works with any multimodal model/agent capable of running the skill, not just Codex, though the README's examples are written for Codex.
Is the 3D effect real depth, or just a texture overlay?It's real layered depth: the subject, background, line-art, and text layers sit at different depths in a shared coordinate system, so they visibly separate as you change the viewing angle instead of behaving like a flat printed texture.
What exactly do I get after the pipeline finishes?You get a local webpage link to drag, flip, and tweak via sliders, the editable card.blend Blender project, the four transparent PNG layers, a card-config.json file for names/rarity, and a rendered still image.
Can I change the card's look after it's generated?Yes — parallax strength, rainbow stripe density/twist, line-art glow intensity, and starlight density are all adjustable, and you can swap out any individual PNG layer and rerun the pipeline.
How do I share a finished card skill or project with someone else?A whitelist-based packer bundles only the text files into a clean ZIP, which you can hand off directly or commit to a repository without dragging along binaries or caches.
Creator
HRuiCcc
Size
4.6 MB
Stars
556
Updated
CommitSep 30
Age
1mo
Commits · 90 Days