重新定义效率！5小时解锁《猫战志》50+角色卡牌UI系统

从角色到体系：我用 AIGC 打造了《猫战志》的 50+ 张角色卡牌 UI 系统
橙沐出品｜2025 UI 系列 AIGC ｜研究编号 AIUI 026 教学篇
AIGC 全域视觉研究者 × 策略顾问 × UI 创新实践者
 
一、从“空白”到生态系统的设计演化
这是一个由零开始的 UI 设计推演实验。
在不到一天内，我运用 AIGC 技术完成了超过 50 张《猫战志》角色卡牌的原型生成，建构出完整的剧情导引、角色分类、等级稀有度、职业逻辑等系统结构。更重要的是，它不仅是一套“美术图”，而是一次
关于人设 × 游戏机制 × UI 系统的整合式设计思考。
 
我想解答的问题是：
如果我们用 AI 来构建一款风格独特的卡牌策略游戏，它的角色架构与互动界面将会长成什么样子？
 
二、系统性设计结构：角色 × 稀有度 × UI 逻辑
为避免单张角色的重复堆叠与美术资源浪费，我将角色系统划分为以下模块：
S / SS / SSR 稀有度体系：对应卡牌能力、招募概率与成长机制
职业职能定位清晰：如将军、参谋、法师、王爷、道士、掌柜等，直接关联游戏战略
视觉风格统一：从配件、背景、字体、色阶到边框，均采用可延展的 UI 模块设计
 
每一张图都具备以下衍生潜力：
1.游戏卡牌界面
2.角色选择与互动动态页
3.战斗成长系统模拟
4.剧情任务交互系统构建
 
三、创作流程：5 小时完成 30 角色的高效原型方法
通过 Midjourney × UI 模板逻辑，我在 5 小时内完成了：
1.风格确立 × Prompt 模板制作
2.15+ 职业角色 × 多段进化样式搭建
3.剧情走向模拟（开场对白、NPC、字幕引导）
4.界面元素整合（按钮、边框、等级标识）
在这个阶段，AI 虽然在文字生成上无法 100% 还原设定，但结合后期人手精修，即可完成风格统一且富有深度的原画设定。
 
四、设计应用：不仅是图，更是一种「原型语言」
本项目所构建的，不只是视觉图像，更是一种可复用的设计原型语言：
1.适用于独立游戏原型提案
2.可作为卡牌策略类游戏的系统雏形设计包
3.对应课程教学或 UI × 插画教学案例
4.可支持后续 IP 延伸，如动画、漫画、衍生周边表情包等内容生产
 
五、我为什么用 AI 做这件事？
在实际开发环境中，我们往往面临时间紧、资源有限、创意受限的局面。而 AI 提供了一种 “结构+想象+效率” 三者并存的原型化思维工具。
 
我的实验目标不是“靠 AI 取代人”，而是：
1.借助 AI 快速建立世界观边界，释放团队更大的创意能量，进而推动后续设计协作效率最大化。
2.这对于快速试错、短期项目提案、跨部门沟通等现实需求，具有高度实用性。
 
六、延伸议题：设计师可以如何继续深化？
这个实验，进一步引发了几个值得探索的设计议题：
1.AIGC 在角色系统与卡牌分类逻辑中的模组化应用
2.UI 元件如何系统性组织构成游戏系统
3.世界观如何影响任务、NPC 与引导机制
4.从插画到 UI 的跨职能协作流程
5.小团队如何用 AIGC 快速原型化并做有效提案
 
这些议题不仅属于设计师，也属于游戏策划者、内容创作者、教育者、团队管理者共同的学习起点。
 
结语｜AIGC 是游戏设计的新武器，也是世界观构建的新语法
AIGC 的价值，不在于“画图”，而在于它解放了我们对构图、分类、命名、互动等一整套设计语法的束缚。
它不是压缩创意，而是放大想象力。
愿每一位设计师都能用自己的语言，创造出属于自己的幻想世界。
 
橙沐 Alfred Weng
AIGC 全域视觉研究者 × 设计策略顾问｜橙沐 AIGC & 橙锦创社
 
作者介绍
我是橙沐，一位专注于 AIGC 全视觉研究与商业落地 × 策略结构推演的设计顾问。（橙沐AIGC）
长期关注 AI 图像生成在构图、叙事、界面系统与品牌体验中的融合实践，致力于构建“视觉为骨、逻辑为脉、情绪为感”的原型研究框架。
 
本期关键词分享（仅限优设）：
Three Front-Facing App Screens for a Pixel UI/UX Interface Featuring C4D-Styled Animal Generals in a Whimsical Romance of the Three Kingdoms Pet Simulation This interface reimagines the Romance of the Three Kingdoms through a lighthearted animal lens--where cats, dogs, and foxes embody legendary generals, and every strategy is powered by food, friendship, and fuzzy charisma. Players take on the role of a Village Marshal, leading a growing animal kingdom through diplomacy, training, and battles--all by playing beautifully illustrated pixel cards and caring for your pet-commanders. Visual Style and General-Pet Interaction Design The visual world blends ornate Chinese village aesthetics with whimsical scale--red-lacquered pavilions, waving silk banners, paper lanterns drifting across tea gardens. Pixel UI panels are decorated with ink-wash borders and brushstroke fonts, while characters--fully rendered in soft C4D style--stand proudly in animated idle poses. Your "Generals" are anthropomorphized animals: A ginger Shiba Inu in red armor styled after Guan Yu, wielding a bone-shaped halberd A long-eared white rabbit strategist in robes inspired by Zhuge Liang A striped tabby cat in tiger-striped battle armor channeling Zhang Fei’s rage Each general blinks, yawns, swings their tail, or sharpens weapons in idle animation. Their clothing ripples softly, with C4D shader glints on jade clasps and silk textures. Tapping them brings up status, skill cards, and emotion panels. UI Layout, Card-Based Tactics, and Daily Village Gameplay 1. Command Pavilion Screen Central general pet stands in the hall Bottom action ring displays 5 core interactive cards: Issue Tactical Order Host Strategy Tea Session Train in Bamboo Forest Distribute Rations Expand Village Map Each card has a traditional scroll design but animates with bright pixel FX when used. For example: Host Strategy Tea Session shows pets sipping tea while plum petals fall Train in Bamboo Forest triggers rhythmic mini-games with timed taps Tap-hold reveals each card’s class type: Wisdom (blue glow) Courage (red burst) Kindness (green bloom) 2. Deck & Strategy Board Screen View, sort, and enhance all cards from each animal general Drag to create formations (e.g. 3-Wisdom × 2-Courage deck) Use "Scroll Fusion" to combine Call of Loyalty + Plum Blossom Rage = Soul Bond Attack Deck synergy is key--certain generals unlock passive effects when fielded together (e.g., "Three Brothers" buff when Shiba-Guan Yu, Tabby-Zhang Fei, and Golden Retriever-Liu Bei are together). 3. Battle & Exploration Screen A horizontal map of stylized mini-wars: Peach Blossom Pass, Red Cliff, Tiger Hollow Each node has interaction: Engage Duel (play 3 cards in sequence) Treat Wounded Friend Uncover Hidden Story Scroll Battles use lightweight strategy: Turn-based card play Combo meters build from good timing Emotional stats influence outcomes (Trust = stronger combos) Companion Systems, Growth, and Long-Term Bonding Every general can be groomed, gifted, or invited to spend time with the player. Emotion stats include: Loyalty (shown as rising incense rings) Fury (visible sparks behind eyes) Wisdom (shifting constellations on their cloak) Players collect "Three Kingdom Relics" to equip: Jade Feather Fan (boosts Wisdom cards) Red Scarf of Sworn Brotherhood (unlocks special events) Mooncake of Unity (restores morale instantly) Mini-games include: Tactical Brush Calligraphy Dumpling Toss Festival Heroic Pet Rescue Under Siege This Three Kingdoms pet game celebrates affection and strategy in equal measure. Each general is not just a warrior--but a companion, a leader, and a story you grow with. Every tap is a bond. Every card is a choice. Every village, a kingdom of its own. --v 6.1 --ar 128:71