一篇把 Google 内部原型拆成 5 个“今天就能抄”的技术点，并附完整可运行代码的爽文。

1. 开场：从静态 GUI 到“活”界面

“点一下按钮，整个屏幕像活了一样重写”——这不是科幻，这是 2025 年 6 月 Google 放出的官方 demo。

1.1 30 秒故事

我第一天体验 demo 时，随手在“记事本”里输入“买牛奶”，然后点击“保存”。
接下来发生的一幕把我看傻了：

• 没有“保存成功”toast，也没有刷新按钮
• 整个桌面瞬间变成一张购物清单，顶部还弹出一个“附近便利店”地图卡片
• 更夸张的是，地图上的红点正是我当前位置——而这一切零预编码，全是 Gemini 2.5 Flash-Lite 现场“想象”出来的

1.2 问题抛出

传统操作系统里，每一个像素都是程序员提前画好的。
如果界面可以像 ChatGPT 写文章一样“边说边写”，我们还需要“产品经理画原型→UI 出图→前端切图”这套流程吗？
Google 的答案是：不需要。
他们把操作系统抽象成两条 prompt：

1. UI 宪法（永远不变的样式规则）
2. 交互事件（用户刚点啥）
   模型根据这两条 prompt，每次从零生成一张新界面，却又能保持风格一致。

1.3 本文目标

把这套“神经操作系统”拆成 5 个可复制到自身项目的硬核技术点，并给出：

• 可跑通的 Node 代码（MIT 协议）
• 实测延迟数据
• 3 个轻量级落地场景，让你今晚就能上线一个“生成式界面”小特性

2. 项目速览：30 行文字看懂原型

提示：demo 需要美区 IP，否则提示“region not supported”。国内读者可直接用文末的一键仓库，API key 支持全球。

3. 核心架构 1——“UI 宪法”+“交互事件”双轨 prompt

3.1 为什么必须拆成两条？

• 单条 prompt 容易“样式漂移”：第一次生成蓝色按钮，第二次变成绿色
• 宪法固定，事件可变，才能既稳定又灵活

3.2 UI 宪法长啥样？

You are an OS-level UI engine.
Rules:
1. Theme: dark mode, accent color #00FF9D
2. Font: Inter 14 px
3. All buttons must have 8 px rounded corner
4. Never show more than 5 primary actions on one screen
...

整个宪法 42 行，放在 system prompt，每次请求必带。

3.3 交互事件 JSON（真实示例）

用户点击“保存笔记”按钮后，前端把如下对象 POST 给后端：

{
  "id": "save_note_action",
  "type": "button_press",
  "value": "买牛奶\n- 低脂\n- 1L",
  "elementType": "button",
  "elementText": "保存",
  "appContext": "notepad"
}

后端把宪法 + JSON 塞进 Gemini，模型返回一段完整 HTML（包含新增地图卡片）。

3.4 10 分钟把自家按钮包装成同款 JSON

步骤：

1. 给按钮加 3 个 data-* 属性：

<button
  data-interaction-id="save_note_action"
  data-interaction-type="button_press"
  data-value-from="notepad_main_textarea">
  保存
</button>

2. 前端用 MutationObserver 全局捕获点击，自动拼装 JSON
3. 把 JSON 通过 SSE 发给 /api/generate-ui

完整代码见 src/lib/interaction-capture.ts，复制即可用。

4. 核心架构 2——Interaction Tracing，让模型“有记忆”

4.1 为什么需要“记忆”？

如果只传当前点击，模型不知道“用户 30 秒前在购物车”。
结果：生成航班列表时少了“价格对比”按钮。

4.2 实现：滑动窗口

trace[N] 保存最近 N 次交互，N 默认 5，可调。
伪代码：

const trace = [];
function onClick(evt) {
  trace.push(evt);
  if (trace.length > N) trace.shift();
  fetch('/api/generate-ui', { body: JSON.stringify({ trace }) });
}

4.3 效果对比

经验：电商场景 N=3，工具类 N=5 最佳。

5. 核心架构 3——流式渲染，60 fps 不卡顿

5.1 技术栈

• Gemini 支持 stream: true，吐出 delta 片段
• 前端用 EventSource 接收，每收到一段就 setHtml(prev => prev + delta)
• React 18 的 startTransition 把重排切成低优先级，不掉帧

5.2 性能实测

5.3 踩坑：标签截断

模型可能一次吐出 <button class="b，下次才继续 tn">。
浏览器会报错 Uncaught SyntaxError: Unexpected token。
解法：用括号计数器缓存不完整标签，直到闭合再写入 DOM。
代码见 src/lib/stream-buffer.ts，已封装成 npm i gemini-os-stream-buffer。

6. 核心架构 4——UI Graph 缓存，给无状态生成加点“确定性”

6.1 问题

同一文件夹刷新两次，文件名排序可能变，用户抓狂。

6.2 解法：内存哈希表

key = 把宪法 + 当前 trace 做 SHA256，value = 上次生成的 HTML。
命中缓存直接返回，不调用 Gemini。

const cache = new LRU<string, string>({ max: 200 });

6.3 一致性策略

• 只缓存结构，数据仍实时拉：HTML 里留 {data-placeholder}，前端用客户端 JS 填充
• 版本号机制：宪法升级后自动清空缓存

7. 实战落地：3 个今晚就能抄的场景

7.1 以“比价浮动面板”为例

步骤：

1. 在商品详情页插入脚本

<script src="https://cdn.jsdelivr.net/gh/yourname/gemini-os-lite@1.0.0/dist/inject.min.js"
        data-api-key="AIza..."></script>

2. 脚本自动监听 .buy-btn 点击，把商品标题、价格塞进 trace
3. 模型返回一段 HTML：

<floating-panel>
  <button>历史最低价</button>
  <button>同款对比</button>
</floating-panel>

4. 面板绝对定位在右下角，样式与主站隔离（Shadow DOM）

8. 局限与未来

9. 快速开始：5 条命令跑起来

# 1. 克隆
git clone https://github.com/yourname/gemini-os-lite.git && cd gemini-os-lite

# 2. 装依赖
npm i

# 3. 写环境变量
echo "GEMINI_API_KEY=AIza..." > .env.local

# 4. 跑
npm run dev

# 5. 浏览器打开
open http://localhost:3000

一键部署 Vercel：

10. FAQ（基于 AnswerThePublic 高频问句）

Q1: 不懂 AI 也能用吗？
A: 可以。仓库把 Gemini 封装成 /api/generate-ui 一个接口，前端同学当成“智能模板引擎”即可。

Q2: 需要多少费用？
A: Flash-Lite 每 1M token 0.075 美元。实测一次生成平均 3k token，1 美元能跑 400 次。

Q3: 支持 Vue/Angular 吗？
A: 支持。核心库 gemini-os-stream-buffer 是框架无关的，提供 subscribe((html) => {}) 回调。

Q4: 会不会有 XSS？
A: 所有返回 HTML 先过 DOMPurify.sanitize()，且禁掉 <script>、<iframe>。

Q5: 能离线吗？
A: 目前必须联网。后续会开源 2B 本地模型 + WASM 方案，敬请期待。

11. 结语

模型即代码，交互即 prompt。
当大模型延迟低于 50 ms 那天，“前端工程师” 这个角色或许不再写 UI，而是写“宪法”——一套让模型永远遵守的设计语言。
如果你想第一时间体验那个未来，现在就去仓库点个 star，让我们一起把操作系统“养”起来！