Flipbook 深度解析：当整个互联网变成一股 AI 像素流

# Flipbook 深度解析：当整个互联网变成一股 AI 像素流 > **项目**: Flipbook —— Infinite Visual Browser > **发布**: 2026-04-22 / 23 > **团队**: Zain Shah（前 OpenAI、三星、YC S13）、Eddie Jiao（前 Humane/Slack）、Drew O'Carr（前 Apple） > **机构**: South Park Commons（Modal Labs 赞助算力） > **体验地址**: [flipbook.page](https://flipbook.page) --- ## 一、一句话总结 **Flipbook 不是"更好的浏览器"，而是"浏览器这个概念的终结"——当屏幕上的每一个像素都来自模型实时生成，HTML、CSS、DOM 这些统治了 30 年的 Web 基础设施，突然变成了可选的 legacy layer。** --- ## 二、它到底做了什么 想象一个场景：你输入"帮我规划巴黎旅行"，屏幕上没有出现导航栏、搜索框、卡片列表。取而代之的是一张**完整的、为你定制的插画**——地图、照片、日程、可点击的热点，全部画在同一张图里。你点击画面上的埃菲尔铁塔，画面立刻变形，生成一张专门讲埃菲尔铁塔的新插画。再点击某个区域，继续深入。 **这就是 Flipbook。它不是渲染页面，它在画画。** ### 技术实现的关键参数 | 维度 | 传统 Web | Flipbook | |------|---------|----------| | **输出单位** | HTML + CSS + JS → DOM → 像素 | **AI 模型直接输出像素** | | **文字渲染** | 浏览器字体引擎 | **图像模型像素绘制** | | **交互元素** | 预定义按钮/链接/表单 | **点击任意区域 → 新 prompt → 新图像** | | **布局** | 响应式 CSS Grid/Flex | **模型自主设计排版** | | **动画** | CSS transition / JS animation | **LTX Video 24fps 实时流** | | **信息来源** | 服务器返回结构化数据 | **Agentic web search + 模型知识** | | **生成延迟** | ~100ms（CDN 缓存） | **~数秒（实时生成）** | | **成本** | ~$0.0001/页 | **~$0.01-0.1/页（GPU 推理）** | --- ## 三、技术栈解剖 ### 1. 像素生成引擎：LTX Video（DiT 架构） LTX Video 是以色列公司 Lightricks 开源的 Diffusion Transformer 视频生成模型。核心能力： - **高压缩 latent space**：在压缩后的隐空间中做扩散，大幅降低计算量 - **多尺度渲染**：支持从 720p 到 4K 的 native 分辨率 - **实时性能**：在 H100 上快于实时生成（几秒生成数秒视频） - **开源**：社区可以 fork、优化、定制 Flipbook 团队对 LTX 做了大幅优化，专门适配了**交互式低延迟场景**——不是生成一段 10 秒视频然后播放，而是生成一帧、推送一帧、用户点击后再生成下一帧。 ### 2. 基础设施：Modal Labs Serverless GPU - **无服务器架构**：按需启动 GPU，不用时不计费 - **WebSocket 实时流**：模型输出直接推送到用户屏幕，不经过传统 HTTP 请求-响应周期 - **1080p 24fps**：目前实现的视频流规格 ### 3. 交互层：点击 → Prompt → 新图像 这是最被低估的部分。当用户点击图片上的某个区域时，系统需要： 1. **视觉理解**：识别用户点击的是哪个语义对象（不是像素坐标，而是"埃菲尔铁塔"） 2. **意图推断**：从"点击"推断用户想"了解更多" 3. **信息检索**：Agentic web search 拉取相关实时数据 4. **生成新 prompt**：组合上下文 + 新意图 + 检索结果 5. **图像生成**：调用 LTX 生成新画面 6. **流式推送**：通过 WebSocket 送到屏幕 这个循环必须在数秒内完成，否则用户体验会崩溃。 --- ## 四、为什么说这是"方向信号"而非"产品" Flipbook 上线后，社区反应两极分化。很多人喊"HTML 死了"，也有很多开发者冷静指出它的局限。 ### 目前的硬伤 | 问题 | 严重程度 | 说明 | |------|---------|------| | **文字渲染错误** | 高 | 模型会写错字、放错位置、拼写错误 | | **事实准确性** | 中 | 无引用来源，幻觉不可见 | | **成本** | 高 | 每页生成成本是传统网页的 100-1000 倍 | | **延迟** | 高 | 数秒等待 vs 毫秒加载 | | **可访问性** | 高 | 屏幕阅读器无法解析像素 | | **SEO/索引** | 高 | 搜索引擎无法抓取图像内容 | | **状态保持** | 中 | 无法真正执行操作（预订、购买、表单提交） | | **可编辑性** | 中 | 用户无法修改生成的内容 | ### Zain Shah 的诚实 创始人在 FAQ 中明确承认： > "Flipbook 目前功能有限，团队围绕视觉解释来设计。但随着模型变得更准确、更有状态，可做的事情会扩展。" 这不是一个已经ready的产品，而是一个**技术演示**——用来证明"这件事在技术上是可能的"。 --- ## 五、更深层的意义：Software is Dissolving into the Model Flipbook 的真正震撼之处不在于它今天能做什么，而在于它揭示了一个趋势： ### 从"组件树"到"像素流" 30 年来，软件的 UI 层是一个层级结构： ``` 应用 → 页面 → 组件 → DOM 节点 → CSS 样式 → 像素 ``` Flipbook 把这个结构压平了： ``` 意图 → 模型 → 像素 ``` 中间所有的抽象层——HTML、CSS、React、Vue、浏览器引擎——都被模型替代了。 这与另一个方向形成了镜像： - **输入端**：语音/图像/视频正在成为新的交互界面，取代键盘和鼠标 - **输出端**：Flipbook 证明像素流也可以成为新的呈现界面，取代 DOM 和组件 两者合起来，构成一个**端到端的模型原生体验**：你说一句话，模型理解意图，直接画出结果。 ### 与 DeepMind Genie 3 的对比 | 维度 | Flipbook | Genie 3（DeepMind） | |------|----------|-------------------| | **发布时间** | 2026-04 | 2026-01 | | **模型类型** | 视频 DiT | 世界模型 | | **交互粒度** | 点击 → 新页面 | 键盘/手柄 → 实时 3D 世界 | | **应用场景** | 信息浏览、学习 | 游戏、虚拟世界 | | **一致性** | 页面级 | 分钟级（世界持续存在） | | **状态保持** | 无 | 有（世界状态） | | **用户** | 所有人 | AI Ultra 订阅者 | 两个项目指向同一个方向：**渲染输出正在成为模型推理，而不是组件树**。 --- ## 六、我的独立判断 ### 1. "HTML 死了"是标题党，但"HTML 不再是唯一答案"是真的 传统 Web 在可预见未来不会消失。电商结账、银行转账、后台管理系统——这些需要确定性、可审计性、低延迟的场景，DOM + CSS + JS 仍然是最佳选择。 但 Flipbook 打开了一个新类别：**探索性、解释性、沉浸式的信息消费**。当你想"理解一个复杂概念"或"感受一个地方的氛围"时，一张定制的视觉叙事可能比 10 个标签页更有效。 ### 2. 真正的瓶颈不是模型能力，而是"状态" Flipbook 目前最大的局限是不能保持状态。你点击、生成、再点击——每次都是一个独立的生成调用。模型不记得你 5 分钟前看过什么。 要实现真正有用的产品（比如"在 Flipbook 里完成整个旅行预订"），需要： - **跨页面一致性**：生成的酒店图片风格保持一致 - **状态持久化**：购物车、表单填写进度、用户偏好 - **结构化数据**：最终还是要输出可执行的操作（预订 API 调用） 这些不是视频生成模型擅长的。未来的架构可能是**混合式**：视觉层用模型生成， transactional 层用确定性代码执行。 ### 3. 成本曲线决定 adoption speed 目前每页生成成本估算在 $0.01-0.1 之间（取决于分辨率、模型大小、优化程度）。传统网页成本接近零。 要让 Flipbook 成为主流，需要： - 成本降到 $0.001/页以下（100 倍降低） - 或者高价值场景愿意为此付费（比如高端旅游规划、教育内容） 这个曲线很可能遵循 Jensen's Law：每年 GPU 性价比提升 10 倍。如果模型效率也同时提升，3-5 年内成本问题可能不再致命。 ### 4. 可访问性是伦理问题，不是技术问题 一个没有 DOM 的界面，对盲人用户是灾难。但解决方案不一定是要回到 HTML——可以是**并行通道**：模型生成视觉界面的同时，生成一份结构化的文本描述供屏幕阅读器使用。 这增加了成本，但如果是面向公众的产品，这是不可妥协的。 ### 5. "像素界面"与"生成式 UI"的区别 2024-2025 年流行的"生成式 UI"（如 Vercel v0、Claude Artifacts）仍然输出代码（React、HTML），只是代码由 AI 生成。Flipbook 跳过了代码这一步，直接输出像素。 两者的差距： - **生成式 UI**：AI → 代码 → 浏览器 → 像素（可编辑、可维护） - **像素流**：AI → 像素（不可编辑、不可维护、但更灵活） 短期内生成式 UI 更实用，但 Flipbook 代表了**终极简化**——如果模型足够好，为什么要保留中间层？ --- ## 七、给产品团队的 actionable 思考 1. **不要 panic**：HTML/CSS/JS 不会在 5 年内消失，但你的团队应该开始实验模型原生界面 2. **区分场景**： - **需要确定性的场景**（交易、表单、数据录入）→ 保留传统 Web - **需要解释性的场景**（教育、旅游、新闻、概念理解）→ 尝试像素流或混合架构 3. **投资视觉理解**：如果你的产品依赖点击图像上的特定区域，需要视觉理解能力（segmentation、OCR、object detection），这些是连接"像素界面"和"功能实现"的桥梁 4. **准备混合架构**：最有用的产品可能是"视觉层模型生成 + 事务层确定性代码"的混合体。不要试图用扩散模型做所有事 5. **关注 LTX / CogVideo / SVD 等开源视频模型**：这些基础设施的成熟度决定了像素流的可行性 --- ## 八、一个哲学问题：如果界面是生成的，"设计系统"还存在吗？ 传统产品团队花大量时间维护设计系统（Design System）——组件库、颜色规范、字体层级、间距规则。Flipbook 挑战了这个概念：如果每次界面都是模型从零生成的，设计系统是什么？ 可能的答案： - **Prompt 作为新的设计系统**："生成一个符合 Apple HIG 的按钮" → prompt 就是规范 - **风格嵌入（Style Embedding）**：训练或微调模型使其输出保持品牌一致性 - **后处理层**：模型输出后，用确定性规则调整颜色、字体等（但这又回到了传统 pipeline） 设计工具本身也会变：Figma 的 Auto Layout 和组件变体，未来可能变成"给模型一个意图，它自己决定最佳布局"。 --- ## 参考 - 官方网站：[flipbook.page](https://flipbook.page) - 官方 FAQ：[sketchapedia.com/flipbook](https://www.sketchapedia.com/n/d739a0bbc3664ba2aad331c90fef7406) - Zain Shah 推特发布：[x.com/zan2434](https://x.com/zan2434) - Simon Willison 评价：[x.com/simonw](https://x.com/simonw) - LTX Video（Lightricks）：[github.com/Lightricks/LTX-Video](https://github.com/Lightricks/LTX-Video) - Modal Labs：[modal.com](https://modal.com) - DeepMind Genie 3：[deepmind.google/genie](https://deepmind.google/genie) #Flipbook #AI界面 #像素流 #生成式UI #LTXVideo #小凯