FR live：浏览器本地图片动效工具
产品设计 / Vibe Coding / 交互实现
在线体验 FR live ↗
概览
我与 AI 协作完成了一个浏览器本地优先的图片动效工具：用户可以导入静态图片，选择多种动效，实时预览并导出 GIF、Live Photo、Motion Photo 与 MP4。项目重点不是做一个固定滤镜，而是把隐私边界、交互流程和多格式输出组织成一个可实际使用的工具。
- 角色
- 产品设计 / Vibe Coding / 交互实现
- 时间
- 2026.07 — 2026.08
- 平台
- 探索 AI 工具
证据
以下素材来自项目在场记录、路线整理和活动规范，用来证明项目沟通、路线设计、活动机制和审稿要求。
当前正式版本的空状态界面，包含本地处理提示、效果选择和参数面板。
当前正式版本上传图片后的实时预览、九种效果选择、参数控制和本地识别状态。
情境
静态图片缺少可控、可带走的动态表达
普通用户可以用修图工具改变图片，但想把一张静态图变成可预览、可调节、可下载的动效作品，往往需要安装专业软件或上传到云端。
- 用户需要在手机或电脑浏览器中直接完成处理。
- 图片动效要有明确的预设，也要允许用户继续微调。
- 隐私、预览质量和最终导出不能被拆成互相割裂的功能。
任务
把图片动效制作压缩成一条本地可完成的工作流
我负责把产品边界、效果机制、预览交互和多格式输出组织成一个可使用的工具，并通过 Vibe Coding 快速迭代界面和实现细节。
- 建立从图片导入、效果选择到预览和导出的最短路径。
- 让预览与导出使用同一套效果参数和渲染逻辑。
- 把隐私边界、浏览器能力差异和失败回退纳入产品设计。
行动
把数据留在浏览器里
明确图片、人物遮罩、逐帧渲染和导出文件均在浏览器本地完成，服务器只提供静态资源、模型和 WASM。
- 支持文件选择、拖拽和剪贴板图片入口。
- 图片改变后只执行一次人物分割，并在失败时回退到整图处理。
用统一注册表管理九类动效
把效果 ID、默认参数、控件描述、确定性随机和逐帧渲染放进统一结构，减少 UI、预览、Worker 和导出之间的分叉。
- 支持素描、粒子、波浪、CMYK、像素排序、景深漂移等九类效果。
- 支持播放、暂停、完整时间轴和随机种子复现。
为不同输出格式补上真实交付路径
围绕 GIF、MP4、Apple Live Photo 和 Android Motion Photo 分别处理编码能力、进度反馈、取消和浏览器降级。
- GIF 生成放入 Worker，避免长任务冻结主界面。
- 动态视频优先使用 WebCodecs，并保留 MediaRecorder 兼容路径。
结果
完成一个可直接访问的浏览器本地图片动效工具
FR live 已形成从图片导入、动效预览到多格式导出的完整工作流，并以公开网址提供体验。
- 用户无需安装专业软件或创建账号即可开始使用。
- 九类动效共享同一套预览与导出机制，减少结果偏差。
- 图片与生成素材不离开访问者设备，隐私边界落实到实现层。
复盘
这个项目让我确认，Vibe Coding 的价值不只是加快写页面，而是把需求、边界、交互和验证组织成一个可以持续迭代的系统。真正需要先想清楚的不是“要加多少效果”，而是用户把图片交给工具后，数据经过哪里、每一步能否被理解、失败时能否恢复，以及最后的文件是否真的能带走。
在这个基础上，我把效果、预览和导出放进同一条数据路径，避免出现“预览看起来对，导出却变了”的断裂；也把隐私边界变成产品能力，而不是一句说明文字。接下来我仍需要继续提升移动端性能、跨设备动态照片兼容性，以及把复杂能力收敛成更清晰的默认体验。