独立游戏开发经验分享-使用Agent生成卡牌游戏的卡面——手绘线框 + AIGC,怎么做成稳定的卡牌 UI?
咕啦咕啦摔杯
2026年09月04日 23:01

原帖:求助:有大佬懂怎么设计卡牌UI吗​

看到@冬天暖阳君​ 这张「黑金太极」卡面草图,很有共鸣。

手稿里的信息层级其实已经很清楚了:主卡、副卡、八相、点数和四属都有固定位置;提示词里还特意要求不生成文字、数字和字母。

这一步已经避开了一个大坑。

我前段时间也刚给无尽深渊​ 做完一轮全量卡面工程。

上次的更新日志:不用下载,点击即玩!《无尽深渊》更新|124 张卡牌,终于都有自己的脸了 - v0.4.0-r11「百牌新装」​

第一轮完整重做了 124 张牌,后来随内容扩展到 181 张正式牌,再加 11 张战斗衍生 / 状态牌。

一路做下来,最重要的经验只有一句:

不要让 AI 生成整张卡。

让 AI 画素材,让模板负责排版。

图中是最初的 124 张里程碑,当前已经扩展到 181 张正式牌。

一张卡最好拆成三层:

  1. 模板层:卡框、太极 S 曲线、八相徽章、点数位、四属格、稀有度和各种装饰。它们应该固定下来,用 Figma / PS 组件、SVG、CSS 或 Canvas 绘制。

  2. 插画层:每张牌真正不同的部分。AI 只生成主卡插画和副卡插画,不负责卡名、数字、徽章和边框。

  3. 内容层:卡名、点数、属性、规则文字和状态变化。静态卡可以批量套版;游戏里的卡最好直接读数据渲染。

放到这张太极卡面上,可以这样拆:

  • 太极 S 曲线是一张固定遮罩,不要每张牌重新生成;

  • 左侧阳面和右侧阴面分别生成插画,再由模板控制一大一小的比例;

  • 左上八相、右下点数、底部四属都做成独立矢量组件;

  • 主副卡发生变化时,只换插画和数据,不换整张底图。

角色底纹、圆环、资源槽、类型牌和文字面板等结构只制作一次,每张卡只替换独立插画与数据。

这样做的好处是,第一张卡可能多花一点时间,但第 20 张、第 100 张会越来越便宜,而且不会出现边框忽粗忽细、徽章到处乱跑、卡名变成伪文字的问题。

提示词不要写成小作文,要写成「视觉合同」

我们批量做卡图时,会给每张图固定几个字段:

代码块
PlainText
自动换行
复制代码
用途:卡面插画层,不生成整张卡
主体:画面里最重要的一个东西
轮廓:缩小后仍能一眼认出的形状
动势:向上 / 下坠 / 横切 / 回旋 / 对峙
主色:只给 1 个主色和 1 个辅助色
层级:普通 / 强力 / 史诗,对应不同光效复杂度
安全区:主体放在中央,不贴边,不被裁切
禁止:文字、数字、字母、卡框、UI、Logo、水印、伪文字
复制成功

比如不是写「一位高手运转阴阳之力,场面神秘而宏大」,而是写:

代码块
PlainText
自动换行
复制代码
单一主体:一尾实心金色阳鱼,从左下向右上回旋;
粗轮廓、两到三个高对比色块、黑漆与旧金材质;
缩到手机卡牌大小仍能认出鱼首、鱼尾和运动方向;
不生成卡框、文字、数字、徽章或其他 UI。
复制成功

对批量卡牌来说,可识别的轮廓比丰富的故事描述更重要。

先做矩阵,不要第一天就跑全量

建议先只做 6 张样卡:

  • 主卡 / 副卡各 3 张;

  • 各自覆盖普通、强力、史诗三个层级;

  • 刻意选择「人物、兵器、异兽」三种差异很大的主体。

这 6 张放在同一张联系表里看。确认黑金比例、线宽、亮度、主体大小和留白都统一之后,再冻结模板和提示词,开始跑全量。

单张放大好看不代表能用。我们最后真正看的是三种场景:

  • 一屏同时出现几十张时,能不能快速区分;

  • 缩到手牌大小时,主体还认不认得;

  • 放进真实战斗界面后,费用、牌名和规则文字会不会被插画抢掉。

不能只看单张高清原图,必须回到玩家真正看到的手牌尺寸与战斗背景中检查。

我踩过的几个坑

一是画面太暗。 暗黑风格在原图里很有气氛,缩到手机上容易变成一团黑。一定要用最终显示尺寸验收,不能只看大图。

二是细节太多。 卡面插画不是海报。主体最好只有一个,轮廓要粗,颜色控制在两三个高对比块;普通牌尤其不要堆粒子、光环和小装饰。

三是把小图标当作大插画缩小。 32px 的八相徽章、点数标和属性图标,很多时候需要单独画一版粗轮廓构图,不能简单把大图压小。

四是没有资产名册。 我们为每张牌固定稳定 ID,记录它对应的图片、提示词和运行时文件,再自动检查缺图、重复图和错配。否则做到几十张后,很容易出现「图有了,但接错牌」的情况。

五是把动态信息烘焙进图片。 卡名、点数、属性和规则以后都会改。一旦写死在图里,每次平衡调整都要重新出图。把它们留成活字,后面会省很多命。

我当前的做法是:每张牌保留独立插画,统一转成 384×384 WebP;192 张正式 / 衍生卡图合计约 3.1 MiB,卡框等共用部件再放进一张图集里。文字、数值和状态全部由程序动态拼装。这个规格不一定适合所有项目,但「插画独立、结构共用、文字活着」非常值得复用。

如果卡牌数量不多,用 Figma 组件 + 变量就够了;如果牌池会长期扩展,就值得做成「一份卡牌数据 + 一套模板渲染器」。

最后的判断标准也很简单:

好的 AIGC 卡面方案,不是终于抽出了一张完美卡,而是下一百张卡已经知道该怎么做。

如果站友需要,我也可以再单独整理一份「太极主副卡」的分层清单和批量提示词模板。

#Toy开发#​ #AIGC美术#​ #独立游戏#​ #卡牌UI#​