哈喽，大家好！
我是阿星
今天给大家分享一款我用gemini3搭建的图文种草生成器，
点击看效果真的，gemini3给我们干活就是屈才了！
今天阿星从效果实测到技术要点，一次性给大家讲清楚。
一、多品类验证，效果能打
界面很简单，输入区，生成区，都是gemini3自己设计的。
用法：直接拍照或者本地上传
输入方式也考虑到了实用性：
支持两种模式，
一是调用摄像头拍摄上传，
二是直接本地上传图片。
咔咔就是给你生成全套文字+网感种草商品图。
直接当甩手掌柜一点问题也没。
最后所有生成的图文都能打包成资源包下载，
解压后就能直接用，特别省心。
1. 仅输名称，直接出全套素材
比如我直接对着电脑镜头拍一张图片，
注意我根本没告诉AI哪个是产品，是润肤乳？还是眼镜？
只输入产品名“润肤乳”，未加任何修饰，同时设定生成5张配套图片。
图片生成后完全符合预期！（除了白底图这里有点小问题）
我特意要求的白底图（很多平台有硬性要求，且方便二次创作）；
后续图片涵盖手绘和真实居家两种风格，都围绕润肤乳这类化妆品展开。
其中一张带美颜效果，透着都市丽人的气质，背景用了牛皮纸质地，搭配可爱插画元素，整体效果我特别满意。
文案方面也非常完美，
直接给出了爆款标题，还精准提炼了产品卖点，正文、标签也一并生成，完整性很高。更实用的是编辑和复制功能：
每条内容都能单独编辑
支持单条内容单独复制
也能一键全选复制
2. 精准抓关键词，风格适配场景
换品类测试，这次选可乐。
我给生成器输入一段百科式介绍，明确提到了香草、肉桂、柠檬关键词，看它会不会掉词。
可乐（英文：Cola），是指有甜味、含咖啡因但不含乙醇的碳酸饮料。味包括有香草、肉桂、柠檬香味等。名称来自可乐早期的材料之一：可乐果提取物。最知名的可乐品牌有可口可乐和百事可乐。喝可乐本来是跟喝其他饮料没什么差别的消费行为。但是，内涵丰富的可乐文化，远超出了“喝饮料”的范畴。
结果文案输出很精准：标题围绕“可乐文化”展开，因为我在介绍里提了“香草味可乐”的相关内容，生成器完全捕捉并化用到笔记里。
图片质量更惊喜，光影效果出色，其中手绘风的版本特别适合做促销内容，直接用都没问题。
而且我关掉了“卖点文字标注”功能——开这个功能是因为种草笔记常用，但目前有个小问题：生成的中文偶尔会变形，所以我加了这个开关，先关再生成更稳妥。
3. 活用模特素材，场景感拉满
很多商家有带模特的实拍图，丢了可惜
阿星特意用带模特的围巾图测试，
看生成器能不能活用这类素材。
结果很理想：它不仅精准提取了围巾主体，还对模特图做了二次加工，
该图片疑似AI生成
其中一张甚至更换了底色，全新效果哦~
我又上传了单张的透明底的圣诞围巾图，生成效果同样亮眼：
AI不但添加了可爱小贴画，搭配温暖的光影，圣诞主题的红、绿配色和围巾完美呼应，氛围感直接拉满。我自己都想买了……
二、提示词里主要包括什么？核心人设
总体还是围绕“前端工程师”的开发人设，
核心技术栈围绕三点：
精通React生态、TailwindCSS，以及各大AI模型的API——
还要明确工具属性：这是一款 Web端应用 （网页工具，不是手机APP），核心功能就是“文案+配图”双生成，这两个是刚需点，必须优先保障。
API实现方式
刚才生成内容时它就在后台默默工作，
只是大家没察觉。
整个模型服务分两部分，
分别对应“文本生成”和“图片生成”，
这样才能实现图文同步产出。
这里有个细节提示：受浏览器跨域限制，
大家可以本地部署后端来用，而我们提前做好了SDK设置，
这才实现了刚才丝滑的图片生成效果。
AI“填表模式”
我们在前端输的常是大段文字（比如可乐的百科介绍），
但大模型靠代码运行，不会自己断句和定格式。
所以要让AI把文本分割后，以JSON格式输出，
这样才能避免内容混乱、断句不当，保证输出符合预期。
“排队”机制
之前生成5张图时，要是不处理直接跑，浏览器很可能卡死。我们的解决方案是：
所有任务并行推进，用时间间隔分摊浏览器压力，确保生成顺利。
状态“分身术”
编辑栏支持修改内容，是为了提升体验——最初我做的是不可编辑版，后来优化成可编辑。
核心是用React的useState用法，
让“屏幕显示内容、修改后的内容、下载的内容”三者状态完全一致，
避免出现“改了但下载还是旧版本”的问题，不然工具就没法用了。
三、基础版提示词，拿去试
因为这个网站阿星已经上线，所以这里就不再分享完整提示词啦，
最后分享一个基础版提示词，有兴趣的朋友可以直接上手测试哦～
# Role: 前端开发专家
# Goal:用 React + Tailwind CSS + Gemini API 开发一个简易版“小红书文案生成器 (Lite)”。
# Core Features:1. 界面：仿小红书配色（Rose-500），简洁的移动端布局。2. 输入：一个文本框输入产品描述。3. 核心功能： – 点击生成后，调用 Gemini API 生成符合小红书风格的标题、正文（带Emoji）。 – 同时调用 nano banana 生成 1 张种草配图（插画风格）。4. 输出展示： – 显示生成的文案（支持一键复制）。 – 显示生成的图片（支持点击下载）。
# Tech Stack:- React 19, Tailwind CSS, Lucide React- SDK: @google/genai
# Constraints:- 保持代码简单易读，适合新手学习。- 使用 Gemini Flash 2.5 模型。- 不需要复杂的错误处理，跑通流程即可。
我是阿星！
