TRPG卡片制作神器：零基础打造专属自定义工具

2026-04-10 09:09:34作者：劳婵绚Shirley

跑团玩家的痛点：从手写卡片到专业制作的跨越

周六晚上七点，跑团游戏即将开始。你作为DM（地下城主），手忙脚乱地在笔记本上画着法术卡片，铅笔字迹潦草，关键数据被咖啡渍晕染。玩家们看着你递过来的自制卡片，虽然努力保持微笑，但你知道这些简陋的纸片与精心准备的冒险故事格格不入。这正是无数TRPG爱好者面临的共同困境：优质卡片制作耗时费力，风格难以统一，专业设计工具门槛太高。

更令人沮丧的是，当你终于花两小时制作完一套法术卡时，却发现尺寸不适合卡牌套，或者打印时颜色完全失真。这些细节问题不仅影响游戏体验，更让你精心设计的角色和道具失去应有的魅力。

解决方案：开源TRPG卡片生成器

幸运的是，有一款专为解决这些问题而生的开源工具——RPG卡片生成器。这不是一个需要安装复杂软件的重型应用，而是一个基于网页技术的轻量级解决方案，让你能在浏览器中轻松设计、预览和打印专业级TRPG卡片。

这款工具的核心优势在于：

纯静态网页应用：无需安装，打开浏览器即可使用
完全自定义：从颜色到图标，从尺寸到布局，一切尽在掌握
多规则兼容：支持D&D、Pathfinder、Shadowrun等多种TRPG系统
离线可用：下载后可在没有网络的情况下使用

为什么它能改变你的跑团体验

想象一下这样的场景：跑团前30分钟，你才想起需要为新 encounter 准备怪物卡片。打开RPG卡片生成器，选择预设的怪物模板，修改几个数值，点击生成，一套专业的怪物卡就已准备就绪。这不是科幻电影中的场景，而是这款工具带给TRPG玩家的真实体验提升。

效率提升：将原本需要2小时的卡片制作时间压缩到10分钟内 视觉统一：保持整个 campaign 中所有卡片的风格一致性 专业呈现：让你的自制内容达到商业模组的视觉水准 专注核心：从繁琐的卡片制作中解放出来，专注于游戏本身的创意和故事

5分钟快速启动流程

🛠️ 第一步：获取项目

git clone https://gitcode.com/gh_mirrors/rp/rpg-cards
cd rpg-cards

🛠️ 第二步：安装依赖

npm install

🛠️ 第三步：启动应用

npm start

🛠️ 第四步：访问应用 打开浏览器，访问 http://localhost:8080 即可看到卡片生成器界面

就是这么简单！没有复杂的配置，不需要专业的开发知识，5分钟内就能从零基础到启动应用。

卡片设计思维：从概念到JSON

设计一张TRPG卡片就像讲述一个微型故事。每个元素都应该服务于卡片的核心目的——清晰传达信息并增强游戏体验。让我们通过一个简单的法师法术卡，了解卡片设计的基本思维过程。

设计流程

确定卡片类型：是法术、物品还是怪物？不同类型有不同的信息架构
核心信息提炼：哪些是必须展示的关键数据？哪些是次要信息？
视觉层次规划：如何通过布局引导视线，突出重要内容
风格统一：颜色和图标如何反映卡片的属性和主题

JSON结构解析

卡片数据采用JSON格式存储，这听起来可能有点技术化，但实际上非常直观。以下是一个火球术卡片的简化示例：

{
  "count": 1,          // 生成数量
  "color": "crimson",  // 卡片颜色
  "title": "Fireball", // 法术名称
  "icon_front": "fireball", // 正面图标
  "contents": [        // 内容数组
    "subtitle | 3rd level evocation",
    "rule",            // 分隔线
    "property | Casting time | 1 action",
    "property | Range | 150 feet",
    "text | A bright streak flashes from your pointing finger to a point you choose within range..."
  ]
}

基础内容组件

🎨 文本元素

subtitle | 内容：小号标题文本，用于显示等级、类型等信息
text | 内容：常规段落文本，用于描述和说明
italic | 内容：斜体文本，用于强调或引用
center | 内容：居中对齐文本，适合重要数据

🎨 结构化元素

rule：水平线分隔，用于区分内容区块
fill | 数字：空白填充，调整内容间距
section | 标题：区块标题，创建内容分组
dndstats | 数值1 | 数值2 | ...：D&D属性值展示

实战指南：三种复杂度的入门案例

案例一：简易物品卡（新手级）

这是一个适合完全没有JSON经验的新手案例：制作一张治疗药水卡。

{
  "count": 5,          // 一次生成5张
  "color": "emerald",  // 绿色主题
  "title": "Potion of Healing",
  "icon_front": "potion-flask",
  "contents": [
    "subtitle | Common Magic Item",
    "rule",
    "text | When you drink this potion, you regain 2d4 + 2 hit points.",
    "center | ❤️❤️❤️"
  ]
}

案例二：标准法术卡（进阶级）

这个案例包含更多结构化元素，适合有基础了解的用户：

{
  "count": 1,
  "color": "indigo",
  "title": "Mage Armor",
  "icon_front": "shield",
  "contents": [
    "subtitle | 1st level abjuration",
    "rule",
    "property | Casting time | 1 action",
    "property | Range | Touch",
    "property | Components | V, S, M (a piece of cured leather)",
    "property | Duration | 8 hours",
    "rule",
    "text | You touch a willing creature who isn't wearing armor, and a protective magical force surrounds it..."
  ]
}

案例三：复杂怪物卡（专家级）

这个案例展示了如何组织复杂信息，适合希望充分利用工具功能的用户：

{
  "title": "Goblin",
  "color": "slate",
  "icon_front": "imp-laugh",
  "contents": [
    "subtitle | Small humanoid (goblinoid), neutral evil",
    "rule",
    "property | Armor Class | 15 (leather armor, shield)",
    "property | Hit Points | 7 (2d6)",
    "property | Speed | 30 ft.",
    "rule",
    "dndstats | 8 | 14 | 10 | 10 | 8 | 8",
    "rule",
    "section | Actions",
    "text | **Scimitar:** Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 5 (1d6 + 2) slashing damage.",
    "text | **Shortbow:** Ranged Weapon Attack: +4 to hit, range 80/320 ft., one target. Hit: 5 (1d6 + 2) piercing damage."
  ]
}

进阶技巧：让你的卡片脱颖而出

颜色系统应用

卡片的颜色不仅是视觉装饰，更是信息传达的重要工具。内置的颜色系统定义在 generator/css/style.css 中，你可以直接使用这些预定义颜色名称：

crimson（深红）：适合伤害性法术
emerald（翡翠绿）：适合治疗和生命相关物品
indigo（靛蓝）：适合奥术和魔法相关内容
slate（石板灰）：适合怪物和非魔法物品

你也可以使用自定义颜色代码：

{
  "color": "#FFA500", // 橙色
  "title": "火焰抗性药水"
}

图标选择策略

图标是卡片的视觉焦点，能快速传达卡片类型和主题。项目集成了丰富的游戏图标库，定义在 generator/fonts/game-icons.css 中。选择图标时遵循以下原则：

直观性：选择能直接反映卡片内容的图标
一致性：同类型卡片使用同一系列图标
对比度：确保图标在卡片背景上清晰可见

常用图标类别：

武器类：sword, bow, axe
法术类：magic-wand, spell-book, fireball
物品类：potion-flask, treasure-chest, shield
怪物类：imp-laugh, dragon-head, zombie-arm

打印与材料选择指南

📤 打印设置

纸张尺寸：A4横向最适合标准卡牌
缩放比例：90-95%可避免边缘裁剪
背景图形：必须勾选"打印背景图像"选项
页眉页脚：设置为"无"以获得干净的卡片边缘

📤 材料选择

普通打印纸（100-120g）：适合临时使用或练习
卡片纸（200-250g）：最佳选择，厚度适中且经济
照片纸（200g+）：适合需要精美呈现的重要卡片
透明保护套：延长卡片使用寿命，尤其适合频繁使用的卡牌

📤 切割工具

裁纸刀+直尺：适合少量卡片的精确切割
圆形切角器：为卡片添加专业的圆角效果
裁纸机：大量制作时提高效率的理想选择

常见卡牌类型设计模板

法术卡模板

法术卡应突出法术等级、 components、持续时间和效果描述：

{
  "color": "indigo",
  "title": "[法术名称]",
  "icon_front": "[法术相关图标]",
  "contents": [
    "subtitle | [等级] level [学派]",
    "rule",
    "property | Casting time | [时间]",
    "property | Range | [距离]",
    "property | Components | [组件]",
    "property | Duration | [持续时间]",
    "rule",
    "text | [法术描述]"
  ]
}

物品卡模板

物品卡应强调物品类型、稀有度和特殊能力：

{
  "color": "[适合物品的颜色]",
  "title": "[物品名称]",
  "icon_front": "[物品相关图标]",
  "contents": [
    "subtitle | [稀有度] [类型]",
    "rule",
    "property | Weight | [重量]",
    "property | Value | [价值]",
    "rule",
    "text | [物品描述和效果]"
  ]
}

怪物卡模板

怪物卡需要展示战斗相关数据和能力：

{
  "color": "slate",
  "title": "[怪物名称]",
  "icon_front": "[怪物相关图标]",
  "contents": [
    "subtitle | [体型] [类型], [阵营]",
    "rule",
    "property | Armor Class | [AC值]",
    "property | Hit Points | [HP值]",
    "property | Speed | [速度]",
    "rule",
    "dndstats | [力量] | [敏捷] | [体质] | [智力] | [感知] | [魅力]",
    "rule",
    "section | Actions",
    "[攻击动作描述]",
    "rule",
    "section | Special Abilities",
    "[特殊能力描述]"
  ]
}