案例拆解

案例拆解 · IPFlows:把 IP 角色当成可复用的资产

解决 AIGC 最难的角色一致性问题。React 19 + Gemini 四个依赖跑通的 IP 工作流,以及 AI Studio 自然语言生成原型的新手捷径。

2026-06-04 6 min黑客松AIGC案例拆解工作流

本文拆解自我自己的黑客松获奖作品 IPFlows(ipflows.cc),所有做法均来自真实项目。

一句话定位

IP DNA V3.0 — AI 驱动的 IP 工作室,一条龙搞定角色设计、内容生产和发布。

它到底是个什么产品

IPFlows 不是又一个「输入一句话生成图片」的工具。它是一条为 IP 创作者设计的完整工作流,拆成三个模块:

  1. IP 设计 — 用专业设计工具构建角色的视觉风格。你可以理解为给一个虚拟角色「建档」:名字、性格、视觉、色调、气质全都固化下来,每一次生成都保持一致。这是 IP 最难的地方:角色一致性
  2. 内容引擎 — 基于 IP 的特征和思维模式,借助 AI 快速输出图文和视频。注意这一步不是「重新生成一个角色」,而是「让已经建档的角色去表演」。这是 IPFlows 最聪明的设计——它把 IP 当作一个可复用的资产,而不是一次性的作品。
  3. 发布中心 — 定期发布创意图文和视频,把内容从「做出来」推到「发出去」。

官网上几个真实用户的评价:

「内容引擎简直是抖音的神器。脚本和视觉效果都在一个工作流中完成。」—— Mico J. · 社交媒体博主

「终于有一个理解 IP DNA 的工作室了。我的角色在每一帧中看起来都是一样的。」—— Sarah Chen · AIGC 创作者

角色在每一帧中看起来都是一样的」这句话,才是 IPFlows 真正的价值主张。

技术栈:四个依赖跑通一个产品

IPFlows 的仓库是开源的。从 package.json 能看到技术栈非常简洁:

{
  "dependencies": {
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "framer-motion": "11.11.17",
    "@google/genai": "1.3.0"
  },
  "devDependencies": {
    "vite": "^6.2.0",
    "typescript": "~5.8.2"
  }
}

翻译过来就是:React 19 + Vite + framer-motion + Google Gemini SDK,就这 4 个核心依赖。没有 Next.js、没有后端框架、没有复杂数据库——最初版本完全是一个前端 + Gemini 的组合。

给新手的一条捷径

IPFlows 的 README 里写着 View your app in AI Studio。这说明这个产品最初是用 Google AI Studio 用自然语言生成出来的原型,再下载到本地继续改。

对你意味着什么?你不需要从零开始写 React。 你可以在 AI Studio 里用一段需求描述直接让 Gemini 给你生成一个跑得起来的 web app,再把代码拉下来用 Cursor 接着改。这是 2025–2026 年非技术背景做黑客松的一条新捷径,很多人还不知道。

给你的启示

在一个细分人群里把一条完整的工作流跑通,胜过在宽泛人群里做一个大而全的工具。 大部分 AI 工具死在「我什么都能做」——真正能活下来的,都是「我只做这一件事,但做到最好」。