文章分类： AI应用实战 / 独立开发 / Gemini API
阅读时间： 约 10 分钟

👋 前言：为什么我们需要一个“封面设计师”？

兄弟们，做自媒体最头疼的是什么？文案？剪辑？
不，我觉得是封面。

在这个“颜值即正义”的时代，无论你的内容多干货，封面如果不够吸睛，点击率直接归零。尤其是小红书、抖音、YouTube 这种平台，每一秒都有无数个封面在争夺用户的眼球。

为了做一张图，我们通常要：找素材 -> 抠图 -> 排版 -> 调色 -> 加字。一套流程下来，灵感早没了。

我就在想：既然 AI 这么强，能不能让它不仅帮我画图，还能帮我“设计”？

于是，在这个周末，我基于 Google 最新的 Gemini 3 Pro 和 Gemini 2.5 Flash 模型，手搓了一款 Web App —— instAIGC Workshop。

它不只是一个画图工具，它是一个拥有顶级审美的虚拟设计工作室。今天，我不光要把它分享给你们，还要手把手教你们，我是如何通过“提示词工程（Prompt Engineering）”，让 AI 帮我写出这个 App 的。

🎨 第一部分：instAIGC Workshop 是个什么神仙工具？

先给不知道的朋友介绍一下这个 App 的核心能力。这不是那种简陋的 API 套壳，我给它注入了“灵魂”。

1. 双引擎驱动：策划师 + 艺术家

市面上的文生图工具，通常是你给一句话，它给你一张图。但在 instAIGC 里，我设计了一个“双脑”架构：

  • 大脑（Planner）：由 Gemini 2.5 Flash 担任。它是一个极速的“创意总监”。当你输入“帮我做一个夏天饮料的封面”时，它会瞬间分析：
  • 平台是小红书吗？那需要精致、高饱和度、拼贴风。
  • 平台是 YouTube 吗？那需要高对比度、夸张表情、三分法构图。
  • 它会把你的简单需求，翻译成一段几百字的、充满了专业摄影术语和光影描述的 Prompt。
  • 双手（Artist）：由 Gemini 3 Pro Image 担任。它是目前 Google 最强的图像生成模型。拿到策划师的方案后，它负责执行，支持最高 4K 分辨率的渲染，光影质感简直炸裂。

2. iOS 级别的丝滑体验

我是一个对 UI 有洁癖的人。我不希望它长得像一个冷冰冰的网页。

  • 拟物化交互：生成过程被我设计成了一个“打印机”吐纸的效果，伴随着 RGB 呼吸灯，看着 loading 都是一种享受。
  • 沉浸式灯箱：看图要有仪式感，支持无损缩放、拖拽。
  • 暗黑模式：自动适配系统，深夜搞创作不刺眼。

3. 强迫症福音：所见即所得的水印系统

这是我最自豪的功能之一！很多工具加水印是盲猜位置。
但在 instAIGC 里，你可以像在 iPhone 相册里一样，拖拽水印胶囊。而且，无论是在手机预览，还是导出 4K 大图，水印的大小、位置比例是完全锁定（1:1）的。为了解决这个技术难题，我可是掉了不少头发（其实是让 AI 掉了不少算力，后面会细说）。

🕹️ 第二部分：保姆级使用教程

不管你是做小红书穿搭，还是做 YouTube 科技评测，这个工具都能帮你秒出图。

Step 1: 告诉它你的想法

在“创作灵感”框里，你不需要写很复杂的 Prompt。

  • 小白写法：“一张关于 AI 编程的封面，要酷炫一点。”
  • 进阶写法：直接把你的视频文案扔进去！或者是上传你的草图、参考图。AI 会自动提炼核心卖点。

Step 2: 选择你的战场（平台）

这步很关键！App 内置了 小红书、抖音、TikTok、YouTube、Instagram 等 8 大平台的审美算法。

  • 选 小红书，AI 会倾向于 ins 风、精致、生活化。
  • 选 YouTube，AI 会倾向于大字报、高对比、强视觉冲击。

Step 3: 定制化参数

  • 比例：1:1, 3:4, 16:9 随意切。
  • 风格：极简、赛博朋克、国潮、3D 卡通… 20 多种风格任选。如果你有选择困难症，选“自动”，让 AI 给你惊喜。

Step 4: 生成与“打印”

点击生成，看着打印机把你的创意“吐”出来。如果不满意？点击“基于此图修改”，你可以跟 AI 对话：“把背景换成蓝色的”、“给主角戴个眼镜”，AI 真的能听懂人话！

Step 5: 盖戳发布

拖动你的专属水印（支持头像+用户名），点击下载。搞定！发朋友圈、发平台，坐等点赞。

先给大家看一波我在调试过程中生成的一些封面：

👨‍💻 第三部分：【高能】我是如何用提示词“写”出这个 App 的？

好了，到了最硬核的部分。很多朋友问我：“我也想做个这样的 App，但我代码基础一般，怎么办？”

朋友，现在是 AI 编程的时代。这个 App 90% 的代码，都是我通过 Prompt（提示词） 指挥 AI 写的。我更像是一个产品经理 + 验收员。

下面我公开我的“开发秘籍”。

1. 角色设定：催眠 AI

首先，你不能把 AI 当成搜索框，你要把它当成你的高级合伙人。
我的开场白通常是这样的：

“你现在是一个世界级的前端架构师，精通 React 19、Tailwind CSS 以及 Google Gemini API。你需要具备极高的 UI/UX 审美，对像素级细节有强迫症。我们的目标是开发一款名为 ‘instAIGC Workshop’ 的 Web App…”

💡 技巧：给 AI 戴高帽，限定技术栈，明确目标。

2. 定义规范：把控全局

不要让 AI 自由发挥代码结构，否则后期维护就是火葬场。我给它制定了严格的 XML 输出规范：

“所有的代码修改必须以 XML 格式返回，包含 路径和 。不要给我解释性的废话，直接给我代码。文件结构扁平化，不要嵌套 src 目录…”

💡 技巧：规定输出格式，可以极大提高 Copy-Paste 的效率。

3. 核心功能攻坚：以“水印系统”为例

在开发水印拖拽功能时，遇到过一个大坑：预览时看着挺好，导出 4K 图时水印就跑偏了或者变得巨小。

如果我自己写 CSS，可能要算半天各种 offset 和 scale。但我通过 Prompt 引导 AI 解决了这个问题。

我的 Prompt 思路是这样的：

  • 描述现象：“现在有一个 Bug，预览容器是响应式的，但导出 Canvas 是固定分辨率的。导致水印位置和大小不一致。”
  • 提出假设：“我们要弃用 px 单位。你能不能用 container queries (容器查询) 的 cqw 单位来定义水印大小？让它永远相对于父容器宽度的百分比缩放？”
  • 强制对齐：“在 Canvas 导出逻辑里，必须复刻 CSS 里的这套百分比逻辑。比如 CSS 里字体是 3.2cqw，Canvas 里你就得算 canvasWidth * 0.032。”

结果？AI 秒懂，给出的代码完美解决了 WYSIWYG（所见即所得）的问题。

4. UI 调优：像设计师一样沟通

不要说“把界面做好看点”。AI 听不懂。你要说具体的风格词：

“使用 iOS 风格的模糊背景 (backdrop-blur-xl)，圆角使用 rounded-2xl，阴影要柔和 (shadow-lg)。按钮要有点击反馈 (active:scale-95)。整体色调参考 Apple 的 Human Interface Guidelines。”

instAIGC 那个酷炫的“打印机”动画，其实就是我描述了：“一张纸先不可见，然后慢慢向下移动并变得清晰，模拟打印出纸的效果”，AI 就用 Tailwind 的 animate 类帮我实现了。

5. Gemini API 的集成技巧

这是本 App 的核心。

  • Thinking Config：Gemini 2.5 Flash 有个“思考”模式，我在 Prompt 里告诉 AI：“对于复杂的逻辑任务，启用 Thinking Config，给它预算，让它想清楚了再回答。”
  • System Instructions：我在代码里埋入了一段 System Instruction，告诉 Gemini：“你不是一个聊天机器人，你是一个视觉创意总监，你需要输出具体的画面描述…” 这直接决定了生成图片的质量。

🚀 结语：人人都是创造者

做完 instAIGC Workshop，我最大的感触是：编程的门槛正在消失，但想象力的门槛在变高。

以前我们需要花一周时间写 CSS 布局，现在只需要一句话。你可以不懂 useEffect 的依赖数组怎么写，但你必须知道你想要什么效果，以及如何清晰地描述它。

这个 App 所有的代码，从逻辑到样式，都是我在与 AI 的几百轮对话中诞生的。它不完美，但它验证了一个想法：只要你有创意，AI 就能帮你落地。

如果你也想体验 instAIGC Workshop，或者想看源代码学习，欢迎在评论区留言！我也把核心的 Prompt 整理了一份 PDF，感兴趣的朋友可以私信我“封面”获取。

别犹豫了，打开你的 IDE，叫上你的 AI 助手，去创造属于你的“爆款应用”吧！

了解 ~/jintaoblog/朝夕见闻志⚡️ 的更多信息

订阅后即可通过电子邮件收到最新文章。