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)

Searching Database…

Что это?RuiC Card Skill — это Codex Agent Skill, превращающий описание в одно предложение (или референсное изображение) в интерактивную веб-страницу с 3D-голограммной коллекционной карточкой и многослойной параллакс-глубиной, вместе с редактируемым проектом Blender.
Это отдельное приложение или то, что я загружаю в агента?Это пакет навыка, который вы кладёте в папку навыков AI-кодинг-агента, а не отдельное приложение: хост-агент (например, Codex) читает его и прогоняет за вас весь конвейер изображений, Blender и веба.
Как его установить и использовать?Скопируйте папку проекта в каталог навыков Codex (имя папки станет именем навыка), затем просто скажите агенту, какую карточку хотите, например голографическую карточку с карпом кои и каллиграфическим текстом; он сгенерирует слои, соберёт сцену и поднимет локальную веб-страницу.
Что должно быть установлено для запуска конвейера?Нужны Python 3 с Pillow и Node.js с npm; сам Blender вручную ставить не нужно — конвейер сам скачивает официальную портативную сборку в папку /tools/ и проверяет её по SHA-256.
Есть ли подводные камни установки или ограничения при работе?Навык содержит только код и текст — без бинарников, учётных данных или кеша, а готовый вьюер упакован в один самодостаточный файл без внешних запросов, поэтому блокировщики рекламы ему не страшны, и он рендерится (через запасной CSS-3D) даже с выключенным аппаратным ускорением.
Он работает только с Codex или с другими агентами и моделями тоже?Он описан как не привязанный к хосту и работает с любой мультимодальной моделью/агентом, способной запустить навык, не только с Codex, хотя примеры в README написаны для Codex.
3D-эффект — это настоящая глубина или просто наложенная текстура?Это настоящая многослойная глубина: слои объекта, фона, линейного рисунка и текста лежат на разной глубине в общей системе координат, поэтому при изменении угла взгляда они заметно разделяются, а не ведут себя как плоская печатная текстура.
Что именно я получаю после завершения конвейера?Вы получаете ссылку на локальную веб-страницу, где карточку можно таскать, переворачивать и настраивать ползунками, редактируемый Blender-проект card.blend, четыре прозрачных PNG-слоя, файл card-config.json для имён/редкости и отрендеренный статичный кадр.
Можно ли изменить вид карточки после генерации?Да — сила параллакса, плотность/закрутка радужных полос, интенсивность свечения линейного рисунка и плотность звёздного света регулируются, а любой отдельный PNG-слой можно заменить и перезапустить конвейер.
Как поделиться готовым навыком карточек или проектом с другими?Упаковщик на основе белого списка собирает только текстовые файлы в чистый ZIP, который можно передать напрямую или закоммитить в репозиторий, не таская за собой бинарников и кешей.
Creator
HRuiCcc
Size
4.6 MB
Stars
555
Updated
CommitSep 30
Age
1mo
Commits · 90 Days