← 返回 Blog
UseAIAPIAI API2min

拆了 Google 官方那几个 demo 才发现：Gemini 3.1 Pro "纯代码 SVG 动画"和"ISS 实时遥测看板"背后的 prompt 结构长这样

Google 为 Gemini 3.1 Pro 打造了两个堪称招牌的演示案例：一个是 "纯代码 SVG 动画"—— 戴着蓝白条纹骑行帽、车筐里装着鱼的鹈鹕悠然骑自行车；另一个是 "国际空间站实时轨道监控仪表盘"—— 星空中地球缓缓自转，轨道路径清晰可见，高度、速度、经纬度数字实时跳动，质感堪比 NASA 控制中心的专业界面。

GeminiGemini 3.1 Pro

谷歌两个惊艳 Demo 背后的真相：你不是在问模型问题，而是在写工程任务说明书

Google 为 Gemini 3.1 Pro 打造了两个堪称招牌的演示案例：一个是 "纯代码 SVG 动画"—— 戴着蓝白条纹骑行帽、车筐里装着鱼的鹈鹕悠然骑自行车；另一个是 "国际空间站实时轨道监控仪表盘"—— 星空中地球缓缓自转，轨道路径清晰可见，高度、速度、经纬度数字实时跳动，质感堪比 NASA 控制中心的专业界面。

我拆解了这两个 Demo 背后的真实 Prompt 结构，发现它们遵循完全相同的底层逻辑：不是向模型提问题，而是给它写一份标准化的工程任务说明书。

一、SVG 动画：一只用代码 "画" 出来的矢量艺术家

传统 AI 生成图像走的是像素路线，输出的是一张.png 文件，放大就会模糊。而 Gemini 3.1 Pro 做的是完全不同的事 —— 它输出的是纯 XML 代码：用<path>定义形体，用@keyframes控制动画，用可选的 JS 实现交互，最终产物是可以直接复制进浏览器地址栏打开的.svg 文件。

那个最经典的触发词，来自独立开发者、博主 Simon Willison 的长期基准测试：

"Generate an SVG of a pelican riding a bicycle"

他在 AI Studio 中运行这句指令，模型启动了约 323.9 秒的深度思考（Deep Think 模式的思考痕迹清晰可见），最终交出的 SVG 被他评价为 "见过的所有模型中最好的"—— 甚至连代码注释都在兼顾生物学准确性：

  • 鹈鹕的白色身体、橙色大嘴、黄色眼球与黑色瞳孔
  • 蓝白条纹复古骑行帽、飘动的绿色围巾（带浮动滤镜效果）
  • 红色车架、管状高光模拟金属质感、每个车轮 8 根辐条
  • 链条和牙盘用虚线模拟齿轮啮合关系，车把上还装了一个小铃铛
  • 车篮里有条鱼 —— 因为那是鹈鹕最具代表性的特征
  • 渐变蓝天、三朵白云、太阳光晕、两座绿色山丘、带车道虚线的灰色路面
  • 鹈鹕双腿分别踩在两侧踏板上，脚蹼清晰可见；左翅向后展开，右翅搭在车把上
  • 所有阴影效果均通过原生 SVG 滤镜实现

更令人惊讶的是，模型自己在代码中添加了注释："繁殖季羽色从红褐过渡到橄榄绿"" 颈部渐变：栗色颈背 / 白黄前额 "—— 它甚至主动对代码的可维护性和生物学准确性负责。

为什么它能做到？（架构视角）

这一代模型的核心变化之一是向 MoE（混合专家）方向实现了更精细化的分工。当任务同时涉及空间推理和代码生成时，token 路由会将更重的计算负载分配给对应的专家子网，而非无差别激活全部参数。这解释了为什么它在 SVG 这种 "既要懂坐标变换又要懂结构语义" 的任务上突然拉开了代差。

Demo 级质量的 Prompt 怎么写？

拆解这类高质量输出的写法，核心就是官方提示词设计文档中反复强调的结构化四件套（目标 / 约束 / 过程 / 验收）：

  • Goal（目标）：请输出一个可直接在浏览器打开验证的动画 SVG：一只鹈鹕骑着自行车……
  • Constraints（约束）：纯 SVG 代码，不引入任何外部库或图片；动画帧平滑；代码中保留必要注释……
  • Process（过程）：先输出结构描述（包含哪些元素、层次关系、坐标锚点），再输出完整代码
  • Acceptance（验收）：生成的 *.svg 文件双击浏览器即可打开；动画流畅不抖动；至少通过 10 项自检清单

即使是更简洁的一句话，也隐含了这套逻辑：

"Generate an animated SVG of [subject] [action], through [scene description] — output a single .svg file with @keyframes, pure code, browser-ready."

二、ISS 实时遥测仪表盘：从 "看图说话" 到 "看数干活"

如果说 SVG 动画展示的是空间想象力，那 ISS 仪表盘展示的则是更底层的工程能力 —— 读取 API 文档、接入实时数据流、端到端完成全栈可视化。

可用的公开数据源

这个 Demo 并不依赖什么 NASA 机密控制台。最常用、最稳定的公开接口是 Open Notify 提供的 ISS 当前位置 API：

需要注意的是，https://wheretheiss.at/redirect/接口目前存在访问解析问题，不推荐使用。

这些数据每秒都会更新，模型需要处理的远不只是 "画个球"，而是异步轮询→状态更新→3D 坐标投影→平滑动画过渡这一整套完整的工程链路。

驱动它的 Prompt 同样遵循 "任务说明书" 逻辑：

  • Context（背景）：接入 ISS 公开遥测位置 API（iss-now.json 格式：latitude/longitude/timestamp），每秒轮询一次数据
  • Task（任务）：构建一个实时更新的 3D 地球模型，绘制空间站轨道弧线，标注高度、速度、经纬度等关键数字
  • Constraints（约束）：使用 Three.js 进行渲染，100% 前端代码，不将 API 密钥暴露在前端
  • Output Format（输出格式）：生成单文件 iss-dashboard.html，双击浏览器即可运行

正是这种结构化的 Prompt，让 Gemini 3.1 Pro 从 "只会看图说话的多模态模型"，升级成了 "能按数字干活的工程级工具"。

三、两个 Demo 背后的通用骨架：为什么 "一句话 Prompt" 能炸出完整结果

拆到底，两段 Prompt 的底层逻辑完全一致 —— 把 AI 当作 "项目经理 + 架构师 + 高级工程师 + 质检员" 的综合体来用，而不是一个更大的文本补全框。

官方文档将有效的工程级 Prompt 拆解为五个核心要素：

表格

要素你实际在回答的问题
Objective/Goal终点在哪？什么叫 "做完"？
Instructions/Task具体要执行什么步骤？
Constraints不许做什么？技术栈必须锁死什么？
Context/Background给什么材料让它参考？
Acceptance Criteria怎么验收？自检清单是什么？

一个可直接抄的通用工程 Prompt 模板

plaintext

目标：在一个可直接运行/嵌入网页的HTML文件中实现[你的具体需求]

约束：
- 技术栈限制为[SVG纯代码/Three.js/原生JS，不引入外部库]
- 动画帧率≥60fps
- 代码必须包含清晰的功能注释
- 不暴露任何敏感信息或API密钥

过程：
1. 先输出整体架构设计和核心逻辑描述
2. 再输出完整的可运行代码

验收标准：
- 代码能直接复制到浏览器打开并正常运行
- 至少通过以下自检项：
  1. [自检项1]
  2. [自检项2]
  3. [自检项3]
  4. [自检项4]
  5. [自检项5]

这五个要素缺一不可：没有目标，模型不知道终点在哪；没有约束，模型要么过度设计要么偷工减料；没有过程指引，它会跳过架构直接写实现；没有验收标准，它连 "什么叫完成" 都不知道。

正如 Google Cloud 官方提示词文档反复强调的：Prompt 不是 "写一句话"，而是 "给模型构建一个可工作的指令系统"。把同一个需求从 "随口问" 改成 "结构化四段式"，输出质量能直接翻倍。

四、编程工程师的三条可执行动作

要把这些认知落到日常工作中，你需要三个具体的动作：

① 把 "写 Prompt" 改成 "写任务说明书"

每次调用前花 30 秒搭建四段式结构 —— 不是写更长的 Prompt，而是写更有结构的 Prompt。Gemini 3.1 Pro 的 MoE 路由对 "结构化输入" 远比上代敏感：输入越规整，专家路由越准确，输出质量越高。

② 在请求中显式设置 thinkingLevel

SVG 动画、ISS 仪表盘这类需要空间推理和多步规划的任务，值得用 MEDIUM 甚至 HIGH 档；日常简单代码生成用 MEDIUM 就足够；绝对不要让默认档在 "你没想清楚" 的时候替你选最贵的档位。

json

"generationConfig": {
  "thinkingConfig": {
    "thinkingLevel": "MEDIUM"
  }
}

③ 用 Canvas/AI Studio 实时预览，把 "看代码" 变成 "看效果"

Canvas 是 Gemini 的实时代码预览环境 —— 你敲完 Prompt，几秒后右边就能直接渲染出动画、SVG 或 3D 场景。这一步才是把模型从 "代码生成器" 升级成 "交互式开发环境" 的转折点：你能直接看到最终效果，而不只是读枯燥的代码。

最后一句

回头看那两个惊艳的 Demo——SVG 动画和 ISS 仪表盘 —— 它们的差距从来不是模型能力本身的差距，而是 Prompt 结构从 "碰运气填空" 到 "系统化工程指令" 的差距。

Gemini 3.1 Pro 已经在这里了，ARC-AGI-2 测试 77.1% 的得分也在这里等着。它能不能真的帮你把活干完？答案从来不在模型那边，而在你写 Prompt 之前，有没有先把目标、约束、过程、验收这四格填完。

想要第一时间体验 Gemini 3.1 Pro 的强大工程能力，以及 Claude、GPT、DeepSeek 等全球主流 AI 大模型的最新特性？UseAIAPI为广大企业和开发者提供一站式稳定接入服务。平台全面覆盖全球热门 AI 大模型 API 接口，无需繁琐配置即可快速上手，同时还可根据企业个性化需求提供定制化解决方案，全程保障服务的稳定性与安全性。

在成本方面，UseAIAPI 推出了极具竞争力的专属优惠政策，所有模型 API 调用最低可享官方价格 5 折优惠。无论是独立开发者的日常创意实现，还是企业级的大规模全栈应用部署，都能大幅降低算力成本，让你在使用深度推理能力时不再有预算顾虑，能够全身心投入到核心业务创新中。