当前位置：首页 > news >正文

项目构想｜文生图小程序

news 2025/8/8 5:37:51

Date: August 4, 2025

项目介绍

👋，我们通过 Vibe Coding 做一个文字生成图片的小程序。

我们会从需求分析、技术选型、UI设计、项目构筑到最后打包，一路尝试 Vibe Coding 实现。

创建项目

创建文件夹：ai-pic-mini-app

采用 Git 进行管理。

需求分析

提示词：

请完成一个《文生图微信小程序》，目前围绕如下需求生成一份需求分析文档
主要功能：
1）基础文生图：用户输入自然语言描述（Prompt），AI生成对应图像，支持风格、尺寸、细节等参数调整。
技术实现：调用Coze API的TextToImage节点，传入prompt、width、height等参数，返回图片URL
2）风格化与多模态控制：允许用户指定艺术风格（如宫崎骏、蜡笔小新）、参考图融合或游戏IP画风
3）批量生成与场景化定制：支持批量生成多张图片（如表情包、电商海报），或针对特定场景（如生鲜广告）优化细节。
小程序设计建议：
精简交互：主界面仅保留输入框、风格选择、生成按钮，高级参数折叠。
API选型：图片生成调用 Coze API。
性能优化：限制单次生成图片数量（如1-4张），避免API超时或流量消耗过大。
文档保存位置：doc/Analysis.md

实现参考：

2.1.1 基础文生图功能
功能描述： 用户输入自然语言描述，AI生成对应图像技术实现：调用Coze API的TextToImage节点
输入参数：prompt（文字描述）、width（宽度）、height（高度）
输出：生成图片的URL
用户流程：用户在输入框输入文字描述
选择图片尺寸（可选）
点击生成按钮
系统调用API生成图片
展示生成结果
参数支持：图片尺寸：512x512、768x768、1024x1024等
质量设置：标准、高质量
生成数量：1-4张
2.1.2 风格化与多模态控制
功能描述： 允许用户指定特定艺术风格和画风支持风格：动漫风格：宫崎骏、蜡笔小新、新海诚
艺术风格：油画、水彩、素描、版画
游戏IP：原神、王者荣耀、英雄联盟
摄影风格：人像、风景、街拍
实现方式：预设风格模板，自动添加风格关键词到prompt
风格参考图融合（未来扩展）
风格强度调节
2.1.3 批量生成与场景化定制
功能描述： 支持特定场景的批量图片生成场景模板：表情包生成：可爱、搞笑、日常表情
电商海报：产品宣传、促销广告
生鲜广告：食材展示、菜谱配图
社交媒体：朋友圈配图、微博头图
批量功能：一键生成多张相似风格图片
支持批量下载和分享
批量编辑功能
2.2 辅助功能
2.2.1 历史记录
保存用户生成历史
支持收藏功能
快速复用之前的prompt
2.2.2 图片管理
图片预览和下载
分享到微信好友/朋友圈
保存到手机相册
2.2.3 用户系统
微信登录
生成次数统计
会员权益（如提高生成次数限制）
...

结合以上，我们发现 Cursor 生成了详细的方案，但是结合后续的技术方案来看，实现成本较高，因为会涉及很多的云函数，因此我们需要尽可能地优化方案。

@Analysis.md 
结合需求文档，我更新了一下需求，请重新生成文档：
1）保留核心功能： 基础文生图功能、风格化与多模态控制、批量生成与场景化定制
2）保留辅助功能：历史记录、图片管理
3）剔除会员制度：该小程序仅是免费且快速使用的工具，每人每天仅限使用10次之内，因此剔除会员相关制度。

技术方案

提示词：

@Analysis.md 请根据需求分析文档，生成一份技术文档。 要求：
1）包含项目目录结构
2）技术栈：微信小程序
3）采用微信小程序的云函数：小程序前端先调用云函数，云函数再调用Coze API
文档保存位置：doc/Technical.md

ai-pic-mini-app/
├── miniprogram/              // 小程序前端代码
│   ├── app.js               // 小程序入口文件
│   ├── app.json             // 小程序全局配置
│   ├── app.wxss             // 小程序全局样式
│   ├── assets/              // 静态资源目录
│   │   ├── icons/           // 图标资源
│   │   └── images/          // 图片资源
│   ├── components/          // 自定义组件
│   │   ├── image-card/      // 图片卡片组件
│   │   ├── style-selector/  // 风格选择器组件
│   │   ├── param-panel/     // 参数面板组件
│   │   └── loading/         // 加载动画组件
│   ├── pages/               // 页面文件夹
│   │   ├── index/           // 首页（主生成页面）
│   │   ├── history/         // 历史记录页面
│   │   ├── user/            // 个人中心页面
│   │   └── detail/          // 图片详情页面
│   ├── models/              // 数据模型
│   │   ├── user.js          // 用户数据模型
│   │   ├── image.js         // 图片数据模型
│   │   └── styles.js        // 风格数据模型
│   ├── services/            // 服务类
│   │   ├── api.js           // API接口封装
│   │   ├── storage.js       // 本地存储服务
│   │   └── utils.js         // 工具函数
│   ├── store/               // 状态管理
│   │   ├── index.js         // Store入口
│   │   ├── user.js          // 用户状态
│   │   └── generation.js    // 生成状态
│   └── config/              // 配置文件
│       ├── api.js           // API配置
│       ├── constants.js     // 常量定义
│       └── styles.js        // 风格配置
│
├── cloudfunctions/          // 云函数目录
│   ├── generateImage/       // 图片生成云函数
│   │   ├── index.js         // 入口文件
│   │   ├── cozeAPI.js       // Coze API封装
│   │   └── package.json     // 依赖配置
│   ├── getHistory/          // 历史记录云函数
│   │   ├── index.js
│   │   └── package.json
│   └── login/               // 登录云函数
│       ├── index.js
│       └── package.json
│
├── doc/                     // 文档目录
│   ├── Analysis.md          // 需求分析文档
│   └── Technical.md         // 技术文档
│
└── project.config.json      // 项目配置文件


---### 项目架构图**提示词：**```bash
@Analysis.md @Technical.md 
请根据需求文档和技术方案文档，画一张业务架构图和业务架构图。 
要求：
采用 Mermaid 绘制 
文档保存位置：doc/

UI-UX 草稿设计

提示词：

@Analysis.md @Technical.md 
请根据需求文档和技术文档，设计 UI/UX 原型。
要求：
1）遵循 WeUI 设计规范，设计合理简约的交互，优先适配移动端。
2）采用 HTML5+CSS3 实现原型草稿文件，包含注释说明组件用途。 
参考页面保存位置：docs/ui-ux/

UI UX草稿生成如下：

核心页面 (4个完整页面)

📱 主页面 (index.html)

剩余次数状态栏
多行文本输入(500字符限制)
横向滑动风格选择器
可折叠高级参数面板
渐变生成按钮
2x2网格结果展示
加载状态模态弹窗

📖 历史记录页面 (history.html)

双层筛选器(时间+风格)
3列统计数据展示
瀑布流布局图片网格
收藏功能和操作菜单
底部滑出式操作面板
分页加载更多

👤 个人中心页面 (profile.html)

渐变用户信息卡片
使用统计网格展示
可视化进度条
功能菜单列表
设置开关组件
模态弹窗确认

🔍 图片详情页面 (detail.html)

沉浸式全屏预览
可滑动信息面板
顶部悬浮导航栏
4x1操作按钮网格
分享选项菜单
相似作品推荐

参考如下：
在这里插入图片描述

规划实现步骤

提示词：

@Technical.md@Analysis.md @/ui-ux 
请根据需求分析文档、技术文档和设计稿，写一份项目实现步骤文档。
文档保存位置：docs/

截取部分如下：

🏗️ 项目架构特点
技术规范
✅ 遵循微信小程序开发规范
✅ 基于WeUI设计系统
✅ 模块化和组件化设计
✅ 完善的错误处理机制
用户体验
✅ 响应式设计，适配不同屏幕
✅ 流畅的动画和交互效果
✅ 完善的加载状态和反馈
✅ 触觉反馈和视觉提示
开发友好
✅ 清晰的代码结构和注释
✅ 统一的命名规范
✅ 可配置的功能开关
✅ 完善的工具函数库

项目的结构目录：

ai-pic-mini-app/
├── project.config.json          ✅ 已配置 miniprogramRoot
├── miniprogram/                 ✅ 小程序代码目录
│   ├── app.json                ✅ 全局配置文件
│   ├── app.js                  ✅ 应用入口文件
│   ├── app.wxss                ✅ 全局样式文件
│   └── pages/                  ✅ 页面目录
│       ├── index/              ✅ 主页面（完整实现）
│       ├── history/            ✅ 历史页面（基础文件）
│       ├── user/               ✅ 用户页面（基础文件）
│       └── detail/             ✅ 详情页面（基础文件）
└── cloudfunctions/             ✅ 云函数目录