從角色到體系：我用 AIGC 打造了《貓戰(zhàn)志》的 50+ 張角色卡牌 UI 系統(tǒng)
橙沐出品｜2025 UI 系列 AIGC ｜研究編號(hào) AIUI 026 教學(xué)篇
AIGC 全域視覺(jué)研究者 × 策略顧問(wèn) × UI 創(chuàng)新實(shí)踐者
 
一、從“空白”到生態(tài)系統(tǒng)的設(shè)計(jì)演化
這是一個(gè)由零開(kāi)始的 UI 設(shè)計(jì)推演實(shí)驗(yàn)。
在不到一天內(nèi)，我運(yùn)用 AIGC 技術(shù)完成了超過(guò) 50 張《貓戰(zhàn)志》角色卡牌的原型生成，建構(gòu)出完整的劇情導(dǎo)引、角色分類、等級(jí)稀有度、職業(yè)邏輯等系統(tǒng)結(jié)構(gòu)。更重要的是，它不僅是一套“美術(shù)圖”，而是一次
關(guān)于人設(shè) × 游戲機(jī)制 × UI 系統(tǒng)的整合式設(shè)計(jì)思考。
 
我想解答的問(wèn)題是：
如果我們用 AI 來(lái)構(gòu)建一款風(fēng)格獨(dú)特的卡牌策略游戲，它的角色架構(gòu)與互動(dòng)界面將會(huì)長(zhǎng)成什么樣子？
 
二、系統(tǒng)性設(shè)計(jì)結(jié)構(gòu)：角色 × 稀有度 × UI 邏輯
為避免單張角色的重復(fù)堆疊與美術(shù)資源浪費(fèi)，我將角色系統(tǒng)劃分為以下模塊：
S / SS / SSR 稀有度體系：對(duì)應(yīng)卡牌能力、招募概率與成長(zhǎng)機(jī)制
職業(yè)職能定位清晰：如將軍、參謀、法師、王爺、道士、掌柜等，直接關(guān)聯(lián)游戲戰(zhàn)略
視覺(jué)風(fēng)格統(tǒng)一：從配件、背景、字體、色階到邊框，均采用可延展的 UI 模塊設(shè)計(jì)
 
每一張圖都具備以下衍生潛力：
1.游戲卡牌界面
2.角色選擇與互動(dòng)動(dòng)態(tài)頁(yè)
3.戰(zhàn)斗成長(zhǎng)系統(tǒng)模擬
4.劇情任務(wù)交互系統(tǒng)構(gòu)建
 
三、創(chuàng)作流程：5 小時(shí)完成 30 角色的高效原型方法
通過(guò) Midjourney × UI 模板邏輯，我在 5 小時(shí)內(nèi)完成了：
1.風(fēng)格確立 × Prompt 模板制作
2.15+ 職業(yè)角色 × 多段進(jìn)化樣式搭建
3.劇情走向模擬（開(kāi)場(chǎng)對(duì)白、NPC、字幕引導(dǎo)）
4.界面元素整合（按鈕、邊框、等級(jí)標(biāo)識(shí)）
在這個(gè)階段，AI 雖然在文字生成上無(wú)法 100% 還原設(shè)定，但結(jié)合后期人手精修，即可完成風(fēng)格統(tǒng)一且富有深度的原畫(huà)設(shè)定。
 
四、設(shè)計(jì)應(yīng)用：不僅是圖，更是一種「原型語(yǔ)言」
本項(xiàng)目所構(gòu)建的，不只是視覺(jué)圖像，更是一種可復(fù)用的設(shè)計(jì)原型語(yǔ)言：
1.適用于獨(dú)立游戲原型提案
2.可作為卡牌策略類游戲的系統(tǒng)雛形設(shè)計(jì)包
3.對(duì)應(yīng)課程教學(xué)或 UI × 插畫(huà)教學(xué)案例
4.可支持后續(xù) IP 延伸，如動(dòng)畫(huà)、漫畫(huà)、衍生周邊表情包等內(nèi)容生產(chǎn)
 
五、我為什么用 AI 做這件事？
在實(shí)際開(kāi)發(fā)環(huán)境中，我們往往面臨時(shí)間緊、資源有限、創(chuàng)意受限的局面。而 AI 提供了一種 “結(jié)構(gòu)+想象+效率” 三者并存的原型化思維工具。
 
我的實(shí)驗(yàn)?zāi)繕?biāo)不是“靠 AI 取代人”，而是：
1.借助 AI 快速建立世界觀邊界，釋放團(tuán)隊(duì)更大的創(chuàng)意能量，進(jìn)而推動(dòng)后續(xù)設(shè)計(jì)協(xié)作效率最大化。
2.這對(duì)于快速試錯(cuò)、短期項(xiàng)目提案、跨部門(mén)溝通等現(xiàn)實(shí)需求，具有高度實(shí)用性。
 
六、延伸議題：設(shè)計(jì)師可以如何繼續(xù)深化？
這個(gè)實(shí)驗(yàn)，進(jìn)一步引發(fā)了幾個(gè)值得探索的設(shè)計(jì)議題：
1.AIGC 在角色系統(tǒng)與卡牌分類邏輯中的模組化應(yīng)用
2.UI 元件如何系統(tǒng)性組織構(gòu)成游戲系統(tǒng)
3.世界觀如何影響任務(wù)、NPC 與引導(dǎo)機(jī)制
4.從插畫(huà)到 UI 的跨職能協(xié)作流程
5.小團(tuán)隊(duì)如何用 AIGC 快速原型化并做有效提案
 
這些議題不僅屬于設(shè)計(jì)師，也屬于游戲策劃者、內(nèi)容創(chuàng)作者、教育者、團(tuán)隊(duì)管理者共同的學(xué)習(xí)起點(diǎn)。
 
結(jié)語(yǔ)｜AIGC 是游戲設(shè)計(jì)的新武器，也是世界觀構(gòu)建的新語(yǔ)法
AIGC 的價(jià)值，不在于“畫(huà)圖”，而在于它解放了我們對(duì)構(gòu)圖、分類、命名、互動(dòng)等一整套設(shè)計(jì)語(yǔ)法的束縛。
它不是壓縮創(chuàng)意，而是放大想象力。
愿每一位設(shè)計(jì)師都能用自己的語(yǔ)言，創(chuàng)造出屬于自己的幻想世界。
 
橙沐 Alfred Weng
AIGC 全域視覺(jué)研究者 × 設(shè)計(jì)策略顧問(wèn)｜橙沐 AIGC & 橙錦創(chuàng)社
 
作者介紹
我是橙沐，一位專注于 AIGC 全視覺(jué)研究與商業(yè)落地 × 策略結(jié)構(gòu)推演的設(shè)計(jì)顧問(wèn)。（橙沐AIGC）
長(zhǎng)期關(guān)注 AI 圖像生成在構(gòu)圖、敘事、界面系統(tǒng)與品牌體驗(yàn)中的融合實(shí)踐，致力于構(gòu)建“視覺(jué)為骨、邏輯為脈、情緒為感”的原型研究框架。
 
本期關(guān)鍵詞分享（僅限優(yōu)設(shè)）：
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