前几天刷短视频看到一堆“AI手办生图”的成图效果说实话有点心动。跑去应用商店搜了一圈要么排队要么订阅要么生出来的图带一层厚厚的“平台滤镜”。我想着自己好歹折腾过几年开发手里又正好有个叫 Qoder 的AI编程助手干脆动手搭一个自己的生图App。整套组合拳打下来就三样东西Qoder 负责写前后端代码、Supabase 负责做后端和图片存储、ADB 负责把安卓手机连到电脑做真机调试。从打开 Qoder 到手机屏幕上出图实测5分钟能跑通一个最小可用的Demo。这篇文章把完整思路、关键步骤和踩过的坑都记下来想自己搞一个的朋友可以直接照着抄。这个项目一点都不玄乎适合三类人一是想快速验证AI应用想法的开发者二是被各种生图App会员费劝退的折腾党三是刚接触 AI编程助手、想看看它能干多少活的新手。我尽量少说废话直接给你能落地的东西。1. 项目不神秘它就是一个“三件套”组合1.1 拆解一下生图App到底由哪几块组成先别管“手办生图”这个听起来很玄的词往白了说它就是一个典型的“输入描述 → 调AI接口 → 展示图片 → 存历史”的流程型应用。不管外面包装成什么样子骨架都逃不过这四块前端页面用户输入描述文字选择宽高比、风格、种子等参数点“生成”按钮然后把返回的图片展示出来。移动端优先的H5页面就能满足需求不需要一上来就写原生Android/iOS。后端接口生图API的密钥不能直接裸露在前端代码里否则别人一抓包就能白嫖你的额度。所以需要一个小后端做转发前端把参数传过去后端拿着真正的 API Key 去请求生图服务拿到图片再返回给前端。存储和状态生成过的图片、用户的历史记录得有个地方放。用 Supabase 的 Storage 存图片、Postgres 表存记录比自己在服务器上搭一套快得多而且免费额度足够个人玩。联调通道做完的东西怎么在手机上看真实效果总不能每次都打包成 APK 再装效率太低。ADB 就是干这个的一条命令把手机和电脑连起来本地开发服务器直接推到手机浏览器里预览。这套拆解方式适用于绝大多数“AI 工具类”的小应用不只是手办生图以后你想做AI头像、AI壁纸、AI商品图都可以套同一个框架。1.2 为什么是 Qoder、Supabase、ADB 这三个家伙先说 Qoder。它是一个AI编程助手跟你在编辑器里装的各种 Copilot 插件是同类东西但有一点很关键它不只会在你写代码的时候补全还能直接根据你的自然语言需求从头生成一整个项目的前后端代码。更实用的是它支持“以图生码”——你丢一张参考截图或者UI设计图过去它能照着把页面写出来。我这次就是先截了一张手办生图App的效果图丢给它然后让它照着生成页面比自己从零敲快太多。再说 Supabase。它是后端即服务BaaS给一个 Postgres 数据库外加 Storage 存储、Auth 登录、Edge Functions 云函数不用自己买服务器、配环境、处理鉴权。个人项目直接白嫖免费档等用户多了再升级也不迟。对于这种“一个生图工具”的体量Supabase 是性价比极高的选择。最后是 ADB。Android Debug Bridge安卓调试桥是Google官方提供的调试工具。理论上你也可以用扫码预览或者局域网IP访问来替代但ADB有一个杀手级用法adb reverse可以把手机上的 localhost 映射到电脑的本地端口这样手机访问localhost:8080就能打开你电脑上正在跑的开发服务器不用管局域网IP、防火墙这些破事。一次配好后面全程顺畅。这套组合的核心理念是“最快路径出结果”Qoder负责生产效率Supabase负责后端基建ADB负责设备联调。每个工具都恰好补上另一个的短板没有一个多余的。2. 动手前先把“三件套”装齐2.1 Qoder安装和环境配置国际版和国内版怎么选Qoder 有桌面版也有 IDE 插件版。如果你平时用的是 JetBrains 系的 IDEA、PyCharm直接在插件市场搜“Qoder”装上就行如果你不想离开浏览器也可以装桌面版独立使用。两种方式登录同一个账号代码生成能力基本没有差别。这里有一个很多人纠结的点国际版和国内版到底怎么选。简单说区别主要在默认连接的模型服务国内版Qoder CN默认连的是国内可访问的模型云服务开箱即用响应速度通常更快适合在国内网络环境下日常使用。国际版Qoder Desktop v1.18.0可以配置更多的开源模型也能接你自己部署的本地模型自由度更高。如果你在局域网环境或者内网开发国际版配合 Ollama 本地模型是很顺的搭配。我的建议是普通场景直接用国内版省心如果你有本地部署的 Ollama 模型比如想用某个开源大模型来生成代码、不想把代码发给云端那就用国际版在设置里把模型源切到http://localhost:11434之类的地址就好。Qoder CN 连接 Ollama 的配置也不复杂本质上就是加一个兼容 OpenAI 协议的 base URL。不过要注意Qoder 的版本会影响配置项的位置如果你的版本比较老找不到对应选项升级到 v1.18.0 以上再看。装好之后在 Qoder 的设置里把要用的大模型选中然后随便发一句“你好介绍一下你自己”能正常回复就说明环境OK。这一步一定要做后面让它生成代码全指望这个对话通道。2.2 ADB环境搭建以及手机连电脑的两种姿势ADB 不是一个需要安装的大软件它藏在 Android SDK 的 platform-tools 目录里。你可以去 Android 开发者官网下载 platform-tools 压缩包解压到任意目录比如D:\platform-tools然后把目录加进系统 PATH。在终端里输入adb version能看到版本号就算安装完成。接下来是手机连接。真机调试一共有两种常用姿势我都试过姿势一USB线连接最稳安卓手机打开 “设置 → 关于手机”连续点“版本号”7次开启开发者模式。回到设置找到“开发者选项”打开“USB调试”。用数据线把手机连电脑手机会弹一个“是否允许USB调试”的对话框点允许。终端执行adb devices如果看到device状态说明连接成功。姿势二无线ADB适合后面反复调试USB线插来插去很麻烦我更推荐无线。手机先 USB 连一次电脑然后执行adb tcpip 5555 adb connect 192.168.1.100:5555把192.168.1.100换成你手机在局域网里的IP。看到connected to 192.168.1.100:5555后就可以拔线了之后只要手机和电脑在同一个WiFi下都可以无线连接调试。注意手机IP可能会变固定IP或者每次查一下都行。2.3 Supabase项目创建、拿到URL和KeySupabase 的官网注册一个账号点 “New Project”填个名字选一个离你近的数据库区域选新加坡或者东京这类亚太区域延迟会低一些设置数据库密码等两三分钟项目就创建好了。创建完成后你需要拿到三个核心配置Project URL形如https://xxxxxxxx.supabase.co这就是 API 的根地址。anon public key前端可以公开使用的密钥配合 RLS行级安全策略限制数据访问。service_role key服务端用的高权限密钥绝对不能放在前端。后面写 Edge Function 时会用它绕开 RLS 限制往 Storage 写文件。在后台的 “Storage” 里新建一个 bucket我给它取名叫figures访问权限设为 public这样生成的图片可以直接用公开 URL 访问前端不用做鉴权也能展示。到这里三件套已经全部就绪。接下来就是最核心的部分让 Qoder 帮你把这套东西写出来。3. 实操心法让Qoder从0到1生成你的App3.1 给Qoder的“一句话需求”以及让它照着参考图写UI很多人用 AI 编程助手写不出好东西不是因为工具不行而是 prompt 太笼统。你说“帮我写一个生图App”它只能给你一个镶了金边的PPT式框架但如果你说出具体页面结构、交互动作、接口约定它写出来的东西基本可以直接跑。我实际给 Qoder 的prompt大概是这样的帮我写一个移动端优先的HTML页面文件名叫 index.html功能是一个AI手办生图工具。页面结构从上到下依次是顶部标题“AI手办工坊”一个文本框placeholder是“描述你想生成的手办角色比如银发猫耳少女机械铠甲未来城市背景”一个参数面板包含尺寸选择1:1、3:4、9:16、风格选择原画、Q版、写实、机械风、迭代步数滑块默认25范围10-40、随机种子输入框默认-1表示随机一个“开始生成”按钮按钮下方是一个loading区生成中显示旋转动画和文字再往下是结果区用卡片形式展示已生成的图片最下方是历史记录区从接口拉取最近20条记录。所有样式用现代CSS深色背景卡片圆角适配手机端。你可以看到这个prompt把页面区块、前后顺序、控件类型、默认值、接口用途全讲清楚了。Qoder 一次性就能生成一个完整的单页应用HTML、CSS、JavaScript 都在里面不用你自己拼。如果你想让它参考某个真实App的布局可以直接截图丢给 Qoder用“以图生码”功能。它会先识别图片里的布局结构然后生成代码。这一步对UI还原特别有用我给手办生图页面做的第一版就是照着某款二次元工具App截图改的。3.2 用Qoder生成前端代码以及怎么修改成你自己的样式Qoder 生成的前端代码通常是一个单文件或者一个小型项目。我这次让它生成的是标准的三件套结构index.html页面骨架和控件结构style.css深色主题、卡片布局、移动端适配app.js表单读取、参数组装、fetch 调用后端接口、渲染图片卡片生成之后你要重点检查两处一是接口调用地址。Qoder 会默认生成它认为合理的地址比如http://localhost:8080/generate你需要改成你自己的 Edge Function 地址。我通常把接口地址抽成一个常量放在脚本开头方便后面切换环境。二是参数结构。前端传给后端的 JSON 要跟后端 Edge Function 里解析的字段完全对齐否则会出现“前端明明把参数传了后端却收不到”的诡异问题。推荐格式{ prompt: 银发猫耳少女机械铠甲未来城市背景, negative_prompt: 低清晰度畸形多余手指, width: 768, height: 1024, steps: 30, cfg_scale: 7.5, seed: -1, style: anime }字段名尽量用这种英文下划线风格前后端保持一致别一会儿用cfgScale一会儿用cfg_scaleAI写的代码里最容易出现这种前后不一致。3.3 用Qoder生成Supabase Edge Function实现生图接口后端这块我用的是 Supabase Edge Functions它本质上是跑在 Deno 运行时上的云函数。好处是免运维、部署一条命令而且它跟 Supabase 的 Storage 和数据库天然打通拿到 service_role key 就能直接操作。同样在 Qoder 里发需求帮我写一个 Supabase Edge Function文件名叫 generate用 TypeScript 实现。接收 POST 请求body 里包含 prompt、negative_prompt、width、height、steps、cfg_scale、seed 这些字段。读取环境变量 IMAGE_API_URL 和 IMAGE_API_KEY然后向后端生图API发请求把收到的图片数据保存到 Supabase Storage 的 figures 桶里文件名用时间戳加随机数。保存成功后把该图片记录插入到名为 generations 的数据库表里字段包括 prompt、image_url、created_at。最终返回一个 JSON包含 image_url 和 id。注意处理超时和错误返回合适的HTTP状态码。Qoder 会吐出一段类似这样的代码核心逻辑长这样import { createClient } from https://esm.sh/supabase/supabase-js2 Deno.serve(async (req) { if (req.method ! POST) { return new Response(Method Not Allowed, { status: 405 }) } const body await req.json() const imageApiUrl Deno.env.get(IMAGE_API_URL) const imageApiKey Deno.env.get(IMAGE_API_KEY) const supabase createClient( Deno.env.get(SUPABASE_URL)!, Deno.env.get(SUPABASE_SERVICE_ROLE_KEY)! ) const response await fetch(imageApiUrl, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${imageApiKey} }, body: JSON.stringify({ prompt: body.prompt, negative_prompt: body.negative_prompt, width: body.width, height: body.height, steps: body.steps, cfg_scale: body.cfg_scale, seed: body.seed }) }) const imageData await response.json() // 假设生图API返回 base64 编码的图片 const base64Data imageData.data[0].b64_json const imageBuffer Uint8Array.from(atob(base64Data), (c) c.charCodeAt(0)) const filename ${Date.now()}-${Math.random().toString(36).slice(2)}.png await supabase.storage.from(figures).upload(filename, imageBuffer, { contentType: image/png }) const publicUrl ${Deno.env.get(SUPABASE_URL)}/storage/v1/object/public/figures/${filename} const { error: dbError } await supabase.from(generations).insert({ prompt: body.prompt, image_url: publicUrl, created_at: new Date().toISOString() }) if (dbError) throw dbError return new Response(JSON.stringify({ image_url: publicUrl, id: filename }), { headers: { Content-Type: application/json } }) })你拿到代码之后不一定全盘照收重点检查它的字段名、错误处理、超时设置。Qoder 生成的东西有七成是能直接用的剩下三成需要你凭经验修一下。比如很多生图API返回的是图片URL而不是base64如果是这种情况就得改成先用 fetch 把图片二进制下载下来再传给 Supabase。这个区别很关键建议先看一遍生图服务商的接口文档再决定。本地调试 Edge Function先在项目根目录装一下 Supabase CLIsupabase init supabase functions serve generate --env-file ./supabase/.env.local--env-file指定本地环境变量文件把IMAGE_API_URL、IMAGE_API_KEY这些敏感信息放在.env.local里不要提交到Git。调试没问题之后一键部署到云端supabase functions deploy generate --project-ref your-project-ref然后把环境变量同步到线上supabase secrets set IMAGE_API_URLxxx IMAGE_API_KEYyyy --project-ref your-project-ref这样前端就可以通过https://your-project-ref.supabase.co/functions/v1/generate这个地址调用了。3.4 用ADB真机联调手机预览10秒搞定后端部署好之后前端本地开着开发服务器比如在http://localhost:8080。现在轮到 ADB 出场。为了让手机直接打开电脑上的开发服务器在USB或无线已连接的状态下执行adb reverse tcp:8080 tcp:8080这条命令的含义是手机上的 localhost:8080 端口被反向转发到电脑上的 localhost:8080 端口。执行之后你手机浏览器访问http://localhost:8080看到的其实就是电脑上正在跑的前端开发服务器。这个方案比用局域网IP稳定得多因为不经过路由器不依赖WiFi环境USB线连着就能用。然后用adb直接拉起手机浏览器连手动输入地址都省了adb shell am start -a android.intent.action.VIEW -d http://localhost:8080手机屏幕亮起你就能在真实设备上点按钮、调参数、测生图了。整个过程不到10秒比每次打包APK安装爽太多。如果你想让这个页面变成一个“接近原生”的App还可以用 Capacitor 包一层壳。Qoder 同样能帮你生成 Capacitor 工程这里不展开核心把流程跑通最重要。4. 常见问题与排查技巧实录4.1 生图任务参数到底怎么设置一张表讲清楚“生图的任务参数要怎么设置”是我被问得最多的问题。不同生图服务商参数名略有差异但核心参数是通用的这里给你一张调参表参数作用建议值说明prompt正向描述告诉AI要画什么3-4个关键特征词多用逗号分隔特征少用长句negative_prompt反向描述告诉AI不要画什么lowres, bad anatomy, extra fingers能明显提升手部、五官质量width / height图片宽高768x1024 或 1024x1024手办图常用竖版3:4steps迭代步数25-35太高浪费时间太低细节崩cfg_scale提示词引导强度7-9太高画面变灰太低不听话seed随机种子-1 表示随机复现同一张图时固定种子我踩过最大的坑是 steps 和 cfg_scale 调过头。很多人觉得步数越多越清晰结果50步出图慢一倍画面还死板。实际上30步左右已经是大部分模型的收敛区间再往上提升很小。cfg_scale 超过12颜色会发灰、出现涂抹感千万别贪高。4.2 生成慢、超时、图片保存失败怎么办如果你用的是云生图API最常见的错误是请求超时。生一张细节很多的图可能要10-30秒而普通免费的代理层默认超时时间往往只有几秒。Edge Function 默认超时是60秒够用但如果你在前端用了 axios 之类的库它默认超时可能只有几秒需要在请求配置里显式拉长const response await fetch(/functions/v1/generate, { method: POST, body: JSON.stringify(params), signal: AbortSignal.timeout(60000) // 60秒超时 })另外生图服务返回的图片如果体积太大Supabase Storage 上传会报 413请求体太大。免费档对单个文件大小有限制通常几MB以内没问题但如果你用的生图模型输出的是超大 PNG建议让后端把图片压缩成 JPEG 再传。不压缩的话我遇到过存储上传失败或者历史记录里图片加载半天出不来。4.3 Qoder国际版和国内版连不上模型以及Ollama本地模型接入有些人装了Qoder之后发现模型列表是空的或者发送消息一直转圈。如果你在用国内版检查一下网络能不能正常访问国内云服务如果你用国际版又说自己没有海外网络条件那大概率会卡在连接模型那一步。实际上两种版本的桌面端本体是同一套只是默认模型源不一样。在国内日常开发直接用国内版别折腾国际版。如果你非要用本地模型比如 Ollama 里已经拉了一个开源的代码模型那就在 Qoder 的设置里新增一个自定义模型源填http://localhost:11434/v1作为 Base URL模型名填你 Ollama 里实际拉取的名字比如qwen2.5-coder:14bAPI Key 随便填一个占位符就行。这样代码生成走本地模型代码不出本机隐私性更强。缺点是本地模型的生成能力上限就看你电脑的显卡了笔记本集显跑大模型速度会慢到怀疑人生。4.4 ADB连不上手机按顺序排查这几个位置ADB 连接失败基本可以归成四类按顺序排查驱动问题。Windows 上很多手机插上电脑后设备管理器里显示的是未知设备或者带黄色感叹号。先去手机厂商官网下载 USB 驱动装上或者直接用通用的 Android Composite ADB Interface 驱动。我遇到过的奇葩问题是某台国产手机系统自带“仅充电”模式不手动切到“文件传输”模式时ADB认不到设备。USB调试没开。开发者模式打开不等于USB调试打开这两个是独立开关。注意部分品牌还藏了一个“USB调试安全设置”或“USB安装”选项需要一并打开。端口被占用。无线连接时执行adb connect后卡在connecting大概率是5555端口被其他服务占了。换一个端口比如adb tcpip 5556然后adb connect ip:5556。配对码问题。Android 11 之后无线调试多了一个“无线调试”二级开关使用“使用配对码配对设备”时要先在手机开发者选项里点“使用配对码配对设备”拿到6位配对码然后在电脑端执行adb pair 192.168.1.100:37000输入配对码配对成功后才能adb connect。要注意的是这个配对端口比如37000和后续连接端口5555是两码事很多人卡在这里以为配对成功就等于连接成功实际还得再连一次。4.5 Supabase跨域CORS和访问权限问题前端页面直接调用 Supabase 的 Edge Function经常会遇到跨域报错。Supabase 云函数默认会返回基础的 CORS 头但你如果在前端用了自定义请求头比如Authorization需要确保预检请求能通过。最简单的做法是在 Edge Function 里统一处理Deno.serve(async (req) { if (req.method OPTIONS) { return new Response(ok, { headers: { Access-Control-Allow-Origin: *, Access-Control-Allow-Methods: POST, GET, OPTIONS, Access-Control-Allow-Headers: authorization, x-client-info, apikey, content-type } }) } // 正常业务逻辑 })如果图片明明上传成功了但历史记录里加载不出来先检查 bucket 是否为 public然后看图片的 URL 拼得对不对。Supabase 的 public URL 格式是https://project-ref.supabase.co/storage/v1/object/public/bucket/filename不少人把object拼成了objects一查一个准。5. 这套东西后续还能怎么扩展跑通最小Demo之后剩下的就是无限扩展了。我个人觉得很值得做的方向有三个一是接入用户系统。Supabase Auth 自带邮箱、手机号、微信登录接上之后每张生成图都自动绑定用户ID历史记录变成每个用户的私有数据再配合 RLS 策略保证用户只能看自己的图这基本就是一个商业化产品的雏形了。二是加一个“以图生图”功能。前端增加一个上传入口把用户上传的参考图跟描述文字一起提交给生图服务很多API支持图生图模式。这样用户就能拿自己已有的手办照片或者线稿来生成同风格新图玩法丰富不少。三是把手机页面壳成一个独立App。用 Capacitor 把 Qoder 生成的 H5 页面包装成 Android APK通过 ADB 安装到手机上就能得到一个桌面图标、全屏体验的“真App”。这个工程 Qoder 也能帮你生成你只需要给它一句“把现有web项目改造成Capacitor项目”。我在实际跑这个项目时最深的体会是工具链选对了5分钟真的能出一个能跑的Demo但要想做出一个真正「超火」的App后面要花时间的不是代码而是生图效果的调参和交互细节的打磨。就拿手办生图来说同一个提示词在Q版和写实风格下的差异巨大必须反复调试才能稳定输出好看的图。这套组合的优势在于你完全掌控了整个链路想调什么就调什么不会被某个平台的规则限制死。最后再分享一个小技巧以后想让 Qoder 帮你复刻某个App别急着描述半天直接截图丢给它用“以图生码”功能让它照着做再把自己需要改的地方用文字追加进去效果比从零描述好一倍。这个套路我几乎在每个项目里都会用真香。