存这篇，是为了保留把卡牌设计素材做成可玩网页 RPG 原型的完整步骤。
类型：自己产出
作者：箱子大魔王
关于案例，推荐去这里看，案例很多很全很强，是 WaytoAGI 发起的网友众测👉Gemini 3——WaytoAGI众测
关于各种体验渠道和用法，推荐 Jackywine 大佬的超级全👉谷歌 AI 全家桶，除了核弹级别的 Gemini3，还有什么？一文给你讲清楚（含多个免费体验渠道）
未来5天我会持续发教程，今天是第一弹，每个人都有自己的年度总结，自媒体也不另外！想必大家看了无数的Gemini3pro优秀案例，你或许会觉得大家都非常厉害，自己想参与又或者参加了感觉自己案例没那么优秀。我制作做了一个不错游戏案例，收到朋友们的反馈，还被知名AI博主藏师傅夸奖了说我一个人手搓一个杀戮尖塔。
Gemini3案例：惊天魔盗团风格-原创卡牌游戏设计
此视频需前往微信原文观看 · 前往原文观看
那么今天我来带大家逐层拆解复盘我的游戏网页设计优秀案例，给大家提供制作教程，让大家一个优秀案例背后包含怎么样的步骤，希望大家在我案例基础上继续做自己的创新。
前景提要：卡牌设计学习准备
用设计智能体完成18张卡牌设计，提示词已经准备好了复制执行即可，如果输入框受限制建议分批生成。如果想要卡片设计也可以在提示词框架基础上创新。（当然你不想设计，可以直接在推文下载我的卡牌，我的原创卡牌仅限个人学习参考，不用于商业用途）
设计智能体网站
（他们都有免费使用积分，我的生图模型选择是Banana）
你也可以选择：
即梦官网的设计agent模式
Lovart的设计agent模式
扣子空间的设计板块
用Gemini3pro从0到1制作「杀戮尖塔RPG」惊天魔盗团风格卡牌RPG游戏教程
我用到的渠道是：谷歌官方 AI Studio
一、对话关键节点盘点
提前说明下，AI生成是具有随机性，我的流程不是最优只能算相对完整。如果没还原出一样的，私密马噻（提前对不起）——还请你见谅和理解！
二、图文教程：用Gemini3pro从0到1制作「杀戮尖塔」卡牌RPG
以下教程按步骤+对话截图+操作说明+结果展示结构呈现，帮你复现整个流程。
步骤1：需求定义——明确游戏核心框架
用户对话：帮我做一个游戏，需求和提示词如下+用了我多轮迭代过的K2卡牌设计任务提示词（任务提示词太长放到最后）
Gemini回应：
结果：输出《游戏核心框架文档》，明确：卡牌分类（攻击/防御/功能）及对应编程概念；BOSS设计（如“内存泄漏巨虫”=持续掉血，“逻辑错误傀儡”=反弹伤害）；成长系统（卡牌升级→伤害提升，角色等级→解锁新卡槽）。
步骤2：原型开发——和genmini3pro对话迭代，确定游戏的基本雏形
看实现效果并提出你的网站反馈建议，你觉得卡片设计雏形有了就停止进入下一步包装
需求1：答题游戏太枯燥
需求2：我要卡牌类的对战游戏
步骤3：视觉升级——打造高科技暗黑风
这一步搞网页装修，大概意思就是把你的毛坯房变精装房，换了一套好莱坞级别的“皮肤"
用户对话：“我想要惊天魔盗团3的那种有趣游戏开场和游戏UI风格”
Gemini回应：修改CSS，添加：动态背景：旋转的“天眼”Logo（用@keyframes实现旋转动画）；粒子特效：背景中的代码雨粒子（用canvas绘制）；卡牌动画：hover时放大+霓虹边框（transform: scale(1.1)+box-shadow）。
操作说明：1.替换原型中的CSS代码（Gemini提供的game_v2.css）；2.调整配色：背景色改为#0a0a1a（深空蓝），卡牌边框用#7a28ff（霓虹紫）。
结果展示：视觉升级后的界面（动态“天眼”背景、粒子特效、卡牌hover动画）。
步骤4：角色卡牌整合——添加18张自定义卡牌
用户对话：在附件中上传18张自己的卡牌“我有18张角色卡牌图片，整合到游戏里”
Gemini回应：1.命名规则：按“N_序号_卡牌名称.png”命名（如N_01_SyntaxError.png=语法错误卡）；2.代码修改：将图片放入assets/cards文件夹，修改JS中的cardImages数组，指向图片路径；3.问题解决：若图片加载失败，检查文件名大小写（Windows系统区分大小写）。
用户操作说明：（这里需要自己跟着Gemini给的步骤来操作，不会就截图给Gemini让他教你）1.将18张图片按规则命名，放入assets/cards；2.修改JS中的const cardImages = ['assets/cards/N_01_SyntaxError.png', ...]；3.保存代码，刷新页面，卡牌将显示自定义图片。
结果展示：对战界面中的自定义卡牌（如“Syntax Error”卡显示红色怪物图片，“Debugger”卡显示蓝色机器人图片）。
步骤5：功能扩展——添加“主控台系统”
用户对话：“想要一个主控台系统，能选择角色、查看档案，还有BOSS挑战的目标选择。”
Gemini回应：设计主控台架构（Mainframe），包含3个核心界面：1.主菜单：“故事模式”“目标选择”“档案”；2.目标选择：显示可挑战的BOSS（如“内存泄漏巨虫”），点击进入对战；3.档案界面：显示角色属性（攻击力、防御力）、背景故事（如“Syntax Error”卡的故事：“来自代码深渊的怪物，擅长破坏逻辑”）。
操作说明：1.复制Gemini生成的mainframe.html代码，整合到原型中；2.修改JS中的mainMenu函数，添加“目标选择”“档案”按钮的点击事件；3.保存代码，刷新页面，即可进入主控台。
结果展示：主控台界面（主菜单→目标选择→BOSS详情→对战）。
步骤6：最终整合——合并所有功能，修复bug
用户对话：“把所有功能整合起来，修复图片加载和代码逻辑问题。”
Gemini回应：1.整合代码：将“天眼开场动画”“主控台”“角色卡牌”“对战逻辑”合并到game_final.html；2.修复bug：图片加载问题：检查文件名大小写，确保路径正确；代码逻辑问题：优化回合制逻辑（如BOSS攻击时的动画延迟）。
操作说明：1.复制最终代码game_final.html，保存到本地；2.用Chrome打开，体验完整游戏（开场动画→主控台→角色选择→对战→BOSS挑战）。
结果展示：最终游戏界面（开场“天眼”动画→主控台→角色选择→对战→BOSS挑战）。
三、教程总结
通过Google AI Studio（Gemini 3 Pro），我们完成了从需求定义→原型开发→视觉升级→功能扩展→最终整合的全流程游戏设计。
关键经验：
需求明确：先定义核心机制（如“代码共鸣”系统），再迭代细节；
原型迭代：用AI生成基础原型，再根据反馈修改（如视觉风格、功能扩展）；
问题解决：AI能快速定位问题（如图片加载、代码逻辑），并提供解决方案。
按照本教程，你可以快速复现一款硬核RPG+卡牌对战游戏，并根据自己的需求调整细节（如卡牌概念、视觉风格、BOSS设计）。
以上就是今天的内容，我是AI产品设计师箱子，带你发现好产品。
来源：小金鱼箱子 · 查看公众号原文
- 作者:罗旭清（箱子）
- 链接:http://43.142.82.174/article/wechat-gupwi9gew4tfluora6e77w
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
