0成本做小游戏：原型_设计_出图_抠图全白嫖（附链接）

百事可口

234人浏览 · 2026-07-10 17:43:23

百事可口 · 2026-07-10 17:43:23 发布

从0到上线：用AI免费做小游戏（附全部工具）

在当前的 AI 时代，开发一款产品的门槛已被无限拉低。一个人、依靠纯 AI 工具链，就能在几天内完成从创意到上线的全流程。

最近看好多人想做属于自己的独立产品，但卡在不会设计、不会切图、不会实现代码。别慌！这套我刚跑通的“全AI闭环流程”，从原型、出设计稿、切图到最后的代码调试，全是用免费或者低成本的 AI 工具堆出来的。废话不多说，直接上实操步骤，看完你也能做！

在这里插入图片描述

原型图阶段：确定 90% 的产品骨架

有想法后的第一步，是使用 AI 工具快速输出原型，明确业务逻辑。

推荐工具：Stitch with Google（免费网站）
**网站：**https://stitch.withgoogle.com
使用方法：直接对 Stitch 输入你的核心想法，它会自动生成产品原型图。
核心目标：

⚠️ 注意：此阶段生成的只是原型图，仅用于确认功能，切勿纠结视觉设计。

确定全部页面。

确定 80% 的功能。

确定 90% 以上的交互逻辑。

在这里插入图片描述

设计稿阶段：从骨架到视觉皮肤

设计稿是在原型基本确定了后再去生成，移动端设计稿比例一般是9:16

出图的时候不用在意尺寸只关系比例就好了，在代码中实现都可以自适应

尺寸与比例

移动端设计稿比例一般固定为 9:16。出图时无需在意绝对分辨率，只需锁定比例，在代码实现时均可做到自适应。

生成工具：Leonardo.ai

白嫖攻略：每天免费赠送 150 积分。使用 gpt-image-2 模型输出最低分辨率的图，每张消耗 8 积分。每天可免费生成约 18 张图。
快捷链接：https://app.leonardo.ai

生成工具：StarFusion

这个也是生图网站，但是免费的额度相对少，可以基于上面已经出好的图，可以用这网站继续出高清图，将白嫖进行到底。

快捷链接：https://www.starfusion.cn/invite?code=ZFBZVP73

描述技巧

设计稿描述需要基于原型内容去说，如果你不会说，你可以基于一张图，让任意一个可以识别图片的AI去描述这个图都有什么内容。

文案参考：描述下这张图都有什么内容都有什么模块注意不用说太细

在这里插入图片描述

真实场景需求案例

下面是几个真实场景中，我给AI提的需求，供参考

新图生成提示词：

设计一个移动端竖屏版小游戏页面 风格整体中国风 禅意方向  
好友对战 - 等待页
顶栏：← 返回 + 「好友对战」标题

主体：

房间号（大号数字，点击可复制）
左右两个头像区，中间「战」字
左：房主头像 + 「房主」徽标 + 昵称
右：对手头像 + 昵称（无人时显示虚线框 +「等待加入」）
三个按钮：「邀请好友」（红底）、「输入房间号加入」（白底红边）、「取消约战」（纯文字）
底部：「虚席以待，静候佳音」+ 三个动态圆点

弹窗：输入房间号弹窗（数字键盘，6位自动提交）

在这里插入图片描述

增量提示

也可以基于一张图的风格，选中他，让他去基于这个风格去实现你新的图。
文案举例：

基于这个风格 设计一个个人信息页面
需要有这些元素：
顶部导航 — 返回按钮（iconBack）+ 标题"个人信息"
头像 — 圆形头像
段位徽章 
昵称 
个性签名 
统计卡片 — 三张卡片：总场次、胜率、当前段位
账号信息 ： 用户ID + 注册时间

如何拆解成可以用的ui图

AI 生成的设计稿是“一张完整的截图”，无法直接用于代码开发，必须拆解成独立的 UI 元素

背景与元素拆解提示词

“基于这个图进行拆解，我需要做游戏 UI。记住：不要任何文字，只要每个元素对应的背景图。”

在这里插入图片描述

然后就可以进行切图了

如何切图

免费抠图+裁剪：https://picwish.cn/creat（抠 Icon 利器，切记勾选【裁剪到边缘】）

在这里插入图片描述

代码实现

前端选型

在写第一行代码前，务必明确发布平台（wx小游戏、抖音小游戏、还是纯HTML5），这决定了底层运行环境和依赖库。我这里选择的是【wx开发者工具】，原生开发，主要是五子棋涉及到好友联机，不太适用于其他平台。

开始做页面

等你选型好了之后，基于你项目已经搭建ok的情况，你开始做页面

将切好的图与设计稿喂给写代码的 AI，大概需要和AI这么说：

看下【xxx图】这个设计稿基于这个设计稿去1：1还原如果有不确认的可以问我

返回按钮用现在点就行其余能canvas画就用他画实在画不出来找我要图要图的时候需要命名文件名

注意比例要一比一还原多检查少返工

在这里插入图片描述

开发者介入

然后你基于他要的图片，你自己去分析，哪张是不用的，哪张是必须的，就像和人沟通一样，与他交谈。

确定方案之后，把刚刚切好的图按照AI给的命名规则，放在对应目录下即可。

在这里插入图片描述

然后需要各种调试，这里调试需要花很多时间去磨合细节：

在这里插入图片描述

代码方面技巧：AI交叉验证

再好的AI，一直用也会产生幻觉。哪怕是强如：Claude系列，也会犯错

所以基于这个缺点，我们可以开两个AI工具去运行：

A: 牛犇的AI负责梳理需求 +验证代码
B: 其余国产AI写代码+反驳方案

工具推荐

关于AI工具软件目前有很多选择，这里我推荐3个可以白嫖的：

**🤖 **QoderWork CN（宝藏级 Agent 编程平台）

👉 链接： https://qoder.com.cn/referral?referral_code=i4h2DQsJghVYXM0vOSXKNhMKNtEQpZVk
💡 点评： 下载送一个月pro会员，每天签到送100积分，搭配千问3.7-max模型。夯爆了！最推荐这个

🔥 Trae（字节出品）

👉 链接： https://work.trae.cn/
💡 点评：除了免费，都是缺点，总排队，速度不快，但是免费无罪。

**🚀 **CodeBuddy（腾讯出品）

👉 **链接：**https://www.codebuddy.cn/events/invite?inviteCode=ynxppo73t6
💡 点评： 对比前2个，花活最多，模型只要不选他们自家的Hy3 preview,都非常不错。目前也是下载送2000积分

**🚀 **codex、claude、配合cc switch
这些也可以，但是需要花钱买token

实战对话举例

**在（AI-A）中碰撞想法、敲定方案，**日常沟通举例：

“我想给通用组件 drawConfirmModal、带倒计时的 drawConfirmModal、以及场景自定义 shop.drawModal 都变成房间号弹窗的背景图。然后确定按钮用‘邀请好友’同样背景的按钮，取消按钮用‘进入人机对战’的背景按钮。你觉得咋样？不用你改代码，你的作用就是和我讨论、出方案以及验证代码。”

在这里插入图片描述