【Hello AI 科技致善】用 SOLO 打造「咪咪快回家」AI 寻猫海报生成器 —— 让每一只走失的猫咪都能回家
① 摘要
面向宠物走失家庭，在紧急寻宠场景下提供一键生成多平台适配寻猫海报的能力，目前通过生成 3 种尺寸高清海报 + 可编辑 PPT 模板 + A4 打印 PDF 验证有效，全程零设计门槛，手机端即可操作。
② 真实场景与需求
目标人群
宠物走失的家庭，尤其是不具备设计能力的普通养宠人。他们往往在焦急状态下需要快速制作并分发寻宠启事。
痛点描述
- 时间紧迫：猫咪走失后的黄金寻回时间是 72 小时，越快发布寻宠信息越好
- 设计门槛高：普通养宠人不会用 PS/Figma，用手机拼图效果差、信息不全
- 多平台适配难：小红书要竖版 3:4、抖音要方形 1:1、朋友圈要横版 16:9，手动裁剪费时
- 信息遗漏：焦急中容易忘记写关键信息（绝育情况、性格特征、走失细节等）
- 打印需求：小区张贴需要 A4 打印版，很多工具生成的图片分辨率不够
现有做法
- 用美图秀秀/Canva 手动排版 → 耗时长，模板不够醒目
- 在微信群发文字描述 → 没有图片，传播力弱
- 找打印店做 → 费用高（50-100 元），来不及
- 为什么不够：成本高、速度慢、效果差、无法多平台同时分发
③ 作品介绍
「咪咪快回家」 是一个基于 Web 的 AI 寻猫海报生成器，核心特点：
核心功能
- 一键换猫：上传猫咪照片，自动生成所有尺寸海报
- 手机端操作：打开 HTML 页面，填写信息 → 实时预览 → 下载，全程手机完成
- 三种尺寸一键生成：竖版 3:4（1080×1440）、方形 1:1（1080×1080）、横版 16:9（1920×1080）
- 可编辑 PPT 模板：生成 4 页 PPT（封面 + 三种尺寸），方便二次修改
- A4 打印 PDF：直接打印张贴，内容不截断
- 多平台适配：小红书、抖音、朋友圈、电脑端全覆盖
设计特点
- 醒目紧急风：红黄配色 + 斜纹警示条 + 悬赏金额突出
- 信息结构化：猫咪特征卡片 + 走失信息卡片 + 联系方式 + 二维码占位
- 紧迫感标签：「已走失 X 天」红色标签，增强传播紧迫感
- 特征标注：照片上叠加红色箭头标注猫咪辨识特征
- 全矢量图标：不依赖 emoji，所有图标用 Canvas 矢量绘制，跨平台无兼容问题
技术方案
- 前端：单 HTML 文件 + Canvas API，零依赖，手机浏览器直接打开
- 后端生成：Python Pillow 高清渲染（2x 分辨率 2160×2880）
- PDF 输出：fpdf2 嵌入高清 PNG
- PPT 输出：PptxGenJS 生成可编辑模板
- AI 照片：GenerateImage 生成示例猫咪照片
④ 用 SOLO 实现的过程
任务拆解思路
我将整个项目拆解为 5 个阶段：
需求理解 → 设计方案 → 图片生成 → 海报渲染 → 多格式输出
用到的 SOLO 能力
| 能力 | 用途 |
|---|---|
| 多轮对话理解需求 | 通过提问确认海报风格、输出格式、平台适配等需求 |
| AI 图片生成 | 生成全身侧面照猫咪照片（白底，展示辨识特征） |
| Python 脚本执行 | 运行 Pillow 渲染脚本、fpdf2 生成 PDF、PptxGenJS 生成 PPT |
| 文件读写 | 创建/修改生成脚本，输出最终文件 |
| 图片审查 | 对生成的海报进行视觉审查，发现对齐/截断问题 |
| 浏览器测试 | 用浏览器自动化测试 HTML 页面的上传、预览、下载全流程 |
| 前端开发 | 编写手机端 HTML + Canvas + JS 交互页面 |
关键 Prompt 示例
生成猫咪照片：
生成一张全身侧面照猫咪照片，橘色虎斑，白色肚皮，戴粉色项圈，纯白背景，展示左耳缺口和尾巴白尖特征
海报设计：
创建醒目紧急风格的寻猫海报，红黄配色，包含紧急寻猫横幅、猫咪照片、特征信息卡片、走失信息卡片、悬赏金额、联系方式
踩过的坑
- Emoji 显示为方块：Pillow 不支持 emoji 渲染 → 改为 Canvas 矢量绘制所有图标（猫脸、定位针、警告三角、电话、金币、聊天气泡、爱心、时钟共 8 个）
- 海报模糊：初始分辨率 1080px → 改为 2x 高清渲染（2160×2880）
- PDF 内容截断：Pillow PNG→PDF 方式会截断 → 改为 fpdf2 嵌入完整 PNG
- 卡片高度截断：硬编码卡片高度导致文字被切 → 改为
measureText()动态计算 - 手机上传不生效：
display:none的 file input 在移动端不可交互 → 改为opacity:0+for属性显式关联 + 新增粘贴/拖拽上传 - 配色视觉疲劳：
#FFD700纯金色太刺眼 → 降饱和度至#FFCC33
迭代过程
v1: 基础版 → 发现 emoji 方块问题
v2: 修复对齐 → 发现模糊问题
v3: 矢量图标 + 2x 高清 → PDF 截断
v4: 全面优化（新照片+紧迫标签+二维码+特征箭头+配色优化）
v5: HTML 交互版（手机端一键操作）
⑤ 成果展示
生成文件清单
| 文件 | 说明 |
|---|---|
poster_vertical_hd.png |
竖版海报 2160×2880（小红书/朋友圈） |
poster_square_hd.png |
方形海报 2160×2160（抖音/微博） |
poster_horizontal_hd.png |
横版海报 3840×2160（电脑端/打印） |
poster_A4_v4.pdf |
A4 打印 PDF（3 页，竖版+横版+方形） |
poster_template_v4.pptx |
可编辑 PPT 模板（4 页） |
poster-generator.html |
手机端交互式海报生成器 |
海报效果
海报包含以下完整信息结构：
紧急寻猫红色斜纹横幅
「已走失 X 天」紧迫感标签
猫咪全身照 + 特征标注箭头（左耳缺口/尾巴白尖）
猫咪特征卡片（品种/颜色/体型/性格 + 辨识标签）
走失信息卡片（地点/时间/详细经过）
悬赏金额醒目红色横幅
联系方式（电话 + 微信 + 二维码占位）
感谢页脚
HTML 交互页面功能
- 点击上传 / 粘贴图片 / 拖拽上传（三种方式）
所有信息字段可编辑（名字/品种/走失地点/联系方式等）- 特征标签可添加/删除
三种尺寸实时切换预览
单张下载 / 一键下载全部 3 张
⑥ 验证方式与下一步
验证方式
- 功能验证：通过 SOLO 浏览器自动化完成全流程测试（上传→预览→下载），确认所有功能正常
- 多格式输出验证：生成 PNG/PDF/PPT 三种格式，检查内容完整性和视觉质量
- 移动端兼容性测试：修复了 iOS Safari label 点击不触发、file input display:none 不可交互等移动端兼容问题
- 视觉质量审查：通过 AI 图片审查，逐版检查对齐、截断、配色等问题
下一步计划
- 接入真实二维码生成（微信二维码）
- 增加更多宠物类型支持（狗狗、其他宠物）
- 增加地图标注走失地点功能
- 接入社交平台一键分享 API
- 收集真实用户反馈，优化信息模板
- 探索与宠物救助组织合作推广
工具：本项目全程使用 TRAE SOLO 完成，包括需求分析、AI 图片生成、Python 海报渲染、前端 HTML 开发、浏览器自动化测试等全部环节。
效果演示：
