前言
前面两篇文章介绍了如何使用AI工具制作微信红包封面，也预告了使用代码生成工具做一个微信红包挂件生成的网站，最近经过几天的尝试，我使用Cursor制作了一个生成红包气泡挂件的网站，过程非常有意思，今天就分享一下。
《超级简单，利用AI工具制作微信蛇年红包封面教程，顺便领取限量专属封面！》
《第二波，利用图生视频AI工具制作微信蛇年动态红包封面教程，顺便领取限量专属封面！》
我总结了代码生成网站的三个功能需求：
1.使用文生图大模型的API生成图片
2.使用抠图功能，去除背景并提取主要内容
3.根据挂件制作规范进行裁剪
相关文档：
微信红包的官方文档：
cover.weixin.qq.com/cgi-bin/mmc…
硅基流动API文档：
docs.siliconflow.cn/capabilitie…
可以的话注册使用我的链接：
cloud.siliconflow.cn/i/5ObwfSCD
双方可获赠2000万Tokens（14元平台配额）
代码生成工具
首先，我使用了Vercel的产品V0.dev这个AI代码生成工具，但试用次数太少。虽然页面设计得非常精美，但由于我自己的网站功能比较复杂，所以最终放弃了。
后来我下载了Windsurf和Cursor，分别描述了一下基本需求，它们的基本功能都大同小异，只是Windsurf免费的基础套餐限制太多，过几天就要提示充值了，所以最终我选择了Cursor。
Cursor官网：
www.cursor.com/
下载客户端，注册就能使用claude-3.5-sonnet进行代码生成
为了确保效率，提示词是首先需要描述项目的功能，先实现大体功能再逐步实现小细节，以下就是我的提示词:
帮我设计一个应用，基于用户输入的提示词通过API接口生成图片。生成的图片应根据以下规格进行裁剪和展示，并提供下载：格式：PNG，宽高：480x384像素，文件大小不超过300KB；上下各有一块可编辑区域，上方可编辑区域高度为96px，下方为72px，中间不可编辑区域需要透明化处理
帮我根据这个API制作生成图片的接口，密钥使用.env文件并放在后端处理，示例为修改请求和结果处理，：curl --request POST
--url https://api.siliconflow.cn/v1/images/generations
--header 'Authorization: Bearer *************************************************'
--header 'Content-Type: application/json'
--data '{ "batch_size": 1, "guidance_scale": 1, "image_size": "768x1024", "model": "stabilityai/stable-diffusion-3-5-large-turbo", "num_inference_steps": 4, "prompt": "一个小老虎啊" }' { "images": [ { "url": "http://sc-maas.oss-cn-shanghai.aliyuncs.com/outputs/3b0fec61-e22b-48e1-ab8f-d4f1ff2216fd_0.jpeg?OSSAccessKeyId=LTAI5tQnPSzwAnR8NmMzoQq4&Expires=1737445149&Signature=LeLdFbRJsqQCehEhDLiIontnXIM%3D" } ], "timings": { "inference": 1.833 }, "seed": 1900311377, "shared_id": "0", "data": [ { "url": "http://sc-maas.oss-cn-shanghai.aliyuncs.com/outputs/3b0fec61-e22b-48e1-ab8f-d4f1ff2216fd_0.jpeg?OSSAccessKeyId=LTAI5tQnPSzwAnR8NmMzoQq4&Expires=1737445149&Signature=LeLdFbRJsqQCehEhDLiIontnXIM%3D" } ], "created": 1737441550 }
裁剪预览的canvas 大小不变，我需要在canvas里面对生成的图片的内容进行拖拽和缩放
改一下前端传参，只传递prompt 和抠图开关，其他的参数固定写死在后端
使用API生成图片过后需要使用这个项目抠图：https://github.com/RimoChan/modnet-entry，帮我改下，文档：
pip install git+https://github.com/RimoChan/modnet-entry.git
安装时会从Google Drive下载预训练模型，所以要保证你的网络是好的。
首先随便准备一张test.png，然后
from MODNet_entry import get_model, infer2
model = get_model('modnet_photographic_portrait_matting.ckpt')
infer2(model, 'test.png', 'alpha.png', 'new_image.png')
这样就抠好啦，输出就是alpha.png和new_image.png这两张图。
帮我写一个dockerfile 和一个docker-compose 文件部署这个项目，注意需要使用pip install git+https://github.com/RimoChan/modnet-entry.git 来安装依赖包下载模型
通常情况下，使用composer模式可以读取项目的整个代码，对所有文件进行更改。可以选择全部接受或者根据提示词进行版本回退，甚至可以上传图片，让AI根据图片中的格式或内容进行代码生成，非常好用。
chat模式通常在遇到BUG或者不确定某些部分时使用，以获得建议。
我还让AI调整了以下细节：
生成中的省略号动效
按回车键触发生成动作
生成中禁用生成按钮
...
过程中需要根据自己的需求仔细描述，我认为需要一定的开发经验才能够有效快速地做出自己想要的东西！
最终效果展示：
项目已部署，可以点击直接访问：
widget.tuwei.space/
使用了硅基流动的免费文生图模型，其功能有限制，每分钟最多生成两张图，每天最多生成400张图。
再到微信红包后台进行提交审核：
cover.weixin.qq.com/#/covers
代码已开源(已部署可体验)：
github.com/koala9527/w…
最后
制作一个一键生成微信红包气泡挂件的网站，这项工作断断续续用了几天时间，过程非常令人震惊，效果比我想象中要好很多。以前体验的代码生成大多是针对单个文件进行极个别的修改，而这次对其有了新的认识。特别是在细节处理方面，像素级的图片裁剪、网页上的缩放和拖拽功能都难以快速实现，而使用AI几分钟就完成了。
年后红包封面审核比较慢，所以现在才发文章，文章首发微信，如想领取红包封面在微信搜索文章标题即可领取
尽管这项产品需求相对冷门，但对我启发很大。接下来我还会用代码生成工具制作更多有用的产品，敬请期待。
