Gemini 3 非官方展示（三）：一个「还行」的产品演示是怎么一键生成的

如果你用 1 分钟评估在 topvibecoder.com/kaggle-gemini-3 查过排名，你可能注意到了一件事：除了一个快速排名信号，它还会生成一个产品演示。

原始发布源: https://www.kaggle.com/competitions/gemini-3/discussion/671193

有人问我：这是怎么做到的？

两个思维转变（动手之前）

在讲步骤之前，想先聊聊关于演示生成的两件事：

思维一：纯 HTML 强得离谱
思维二：AI 先规划再执行，这被严重低估了

先规划，后动手

我们可以直接说「给我来点酷炫效果」。但没有规划的话，AI 通常会胡乱堆砌，出来的东西你可能不喜欢。

工作流程：

(1) 代码 + 指令 → (2) 故事板 → (3) HTML 演示

Gemini 3 在 UI 生成方面出奇地强。于是我好奇：如果给它完整上下文——不是模糊描述，而是实际代码呢？

结果证明：效果相当不错。

第一步 · 生成故事板

把你的前端代码贴进去（或者全部贴进去——感谢大上下文窗口），然后让 Gemini 生成一个故事线。

关键洞察：不要一上来就要「酷炫动画」。要写出有目的的场景：

用户的问题是什么？
展示什么 UI 状态？
发生什么交互？
展示顺序是什么？

我用的关键词：

Minimal complete recreation principle
Feature spotlight
Infinit Canvas（效果没我预期的好）

(1 分钟评估只用了 "make it fun"——时灵时不灵，但灵的时候，绝了。)

第二步 · 生成 HTML

故事板看起来靠谱后，加上视觉约束生成演示 HTML。

我用的关键词：

High-Fidelity UI Demo
GSAP timeline
Tailwind (CDN)
Immersive UI Reveal
2.5D Parallax

就这些。不需要 100 个关键词的 prompt 马拉松。不需要 Remotion 技能。先规划，再绘制。

第三步 · 迭代

有了 HTML 格式的演示，你可以直接把它扔回 Gemini 里，vibe-edit 出更好的效果。

(是的，应用内的迭代体验可以做得更好。不，这不是借口 :D )

给你的挑战

你不需要 1 分钟演示就能尝试这个。直接打开 Gemini（或 AI Studio），粘贴：

<code>
[你的前端代码]
</code>

<instruction>
[你想让演示展示什么]
</instruction>

然后让它先生成一个故事板，调整到你满意，再生成 HTML。

挑战：你能写一个比我更好的故事板 prompt / 生成器 prompt 吗？如果发现了好东西，欢迎在评论区分享。

更详细的小抄

没代码？没关系。

如果你不想分享源代码，仍然可以用这个流程：

截取几个关键 UI 状态的截图（或者用 stitch.withgoogle.com 来捕捉流程）
让 Gemini 推断状态，并从视觉素材生成故事板 + 演示

这是我用这种方式做的 Slack 演示：demo.topvibecoder.com/slack.html

(冷知识：stitch.withgoogle.com 本身也可以用特殊流程复刻。有兴趣的话后续发一篇。)

来建个社区吧

看到大家对 AI 生成内容和 vibe coding 这么感兴趣，我觉得建个社区可能挺有用的。如果你也感兴趣，欢迎加入。

我会尝试在那里发一些有趣的见解来热热身。给我一个月时间！