前言

最近全程使用Vibe Coding模式开发自研浏览器端AI视频编辑器Timeline Studio，借助Codex快速落地了全套AI剪辑能力，多轨时间线、自动字幕、AI配音、人像抠图、数字人、离线导出等功能全部实现。

但在实际剪辑测试时，我发现了Vibe Coding模式一个致命短板：AI可以孤立完美实现单个功能，却无法理解完整产品的交互逻辑，组件堆砌完成后，整体操作体验割裂、反直觉，用起来处处别扭。

一、功能齐全，但实操全程和界面“对抗”

先简单介绍项目基础能力，Timeline Studio是本地优先、纯浏览器运行的开源剪辑工具，基于WebGPU+ONNX模型全离线运算，素材无需上传云端，核心能力包含：

1. 全套本地AI能力

• 多语种AI配音：中文Piper、英文Kokoro等多语种离线语音合成；
  ​
• Whisper离线自动字幕，自动修正中文时间戳；
  ​
• YOLO+MODNet智能抠图、背景移除、智能画面裁切；
  ​
• 本地人声分离，自动隔离背景音乐与人声；
  ​
• JoyVASA+LivePortrait数字人渲染，WebGPU硬件加速；
  ​
• 所有AI模型本地缓存，全程不上传素材，隐私安全。

2. 专业剪辑导出能力

支持多轨道图层、画中画、关键帧动画、滤镜转场、磁吸对齐、无损 .timeline 工程文件保存，基于WebCodecs离线导出MP4/WebM，同时可安装PWA离线使用，适配多国语言。

除此之外项目还内置Codex兼容的Agent Skill套件 edit-timeline-studio ，可以让AI自主规划、校验、执行完整剪辑流程，保留可二次编辑的工程文件，而非仅生成不可逆视频成片。

纸面功能覆盖商用剪辑软件绝大多数能力，但实际上手剪辑时，大量细碎问题严重影响使用体验：

1. 不同轨道上的素材拖拽逻辑不一致，操作行为割裂；
   ​
2. 点击素材会无故拉动播放指针，打断预览；
   ​
3. 播放中拖拽素材手感生硬，无缓冲适配；
   ​
4. 字幕、贴纸、音频多层素材重叠会互相覆盖、丢失内容；
   ​
5. 转场功能单独藏在侧边面板，无法直接在两段素材接缝处添加；
   ​
6. 选中素材和正在播放素材视觉区分模糊，极易误操作；
   ​
7. 各类功能控制面板分散，上下文操作需要来回切换；
   所有功能代码单独运行都无Bug，但整套组合在一起，完全不符合人类剪辑的直觉操作习惯。

二、Vibe Coding的核心缺陷：只会实现单点功能，不懂整体交互逻辑

这是我这段时间开发最大的感悟：
AI擅长独立完成单一组件开发，拖拽控制器、字幕面板、时间轨道、动画按钮，给指令就能快速实现可用代码。
但AI无法自主串联整套产品的交互契约，只会零散生成可运行的模块，最终拼凑出一套“功能能用、体验割裂”的半成品。
很多开源项目都陷入这个误区：堆砌大量亮眼AI功能，却忽略最基础、最影响留存的交互细节。

三、重构交互：放弃新增AI功能，专注打磨底层操作逻辑

近期我暂停新增花哨大模型功能，全部精力用来统一交互规则，修复几十处反人类操作逻辑，核心优化点如下：

1. 素材拖拽逻辑优化：仅正式拖动素材时暂停播放，单击选中不会打断预览；点击标尺、播放头直接暂停，精准定位时间轴；
   ​
2. 轨道吸附对齐：素材可吸附其他轨道素材首尾，增加全高度可视化对齐辅助线；
   ​
3. 多层素材兼容：重叠字幕、贴纸、人声、背景音乐自动分配子轨道，不会互相覆盖丢失；
   ​
4. 选中态视觉强化：选中素材增加高亮外发光，和播放素材做出清晰视觉区分，点击素材不再自动跳转播放头；
   ​
5. 转场逻辑重构：转场直接挂载在两段素材接缝，无需跳转独立面板添加、调整；
   ​
6. 时间轴细节优化：缩略图铺满素材宽度，缩放时间轴自动适配缩略图密度；多视频导入音频全部保留，不会覆盖历史音频；
   ​
7. 动画、素材交互优化：动画预设悬停实时预览，点击才生效；素材直接拖入预览画布自动同步到时间轴；
   ​
8. 面板布局重构：功能菜单固定左侧，操作控件跟随素材上下文展示，转场、特效面板贴近对应素材，不再零散分布。

这些改动单独看都不算亮眼，没有新增炫酷AI模型、没有一键成片黑科技，全部是状态判断、拖拽阈值、同步逻辑、视觉层级这类底层细节。
但全部优化完成后，软件彻底摆脱“AI拼凑组件”的廉价感，整套操作逻辑统一、流畅，成为完整连贯的剪辑工具。

四、现存短板与项目现状

目前工具依旧存在不少待优化问题：

1. 浏览器WebGPU设备兼容性参差不齐，低端设备数字人高质量渲染速度偏慢；
   ​
2. 大量AI本地模型体积偏大，首次加载耗时较长；
   ​
3. 部分交互细节仍需打磨，新手首次使用仍存在理解门槛；
   ​
4. 浏览器视频渲染存在大量性能、兼容性边界问题。

但项目已经抵达关键里程碑：我现在可以用Timeline Studio剪辑它自身的演示视频，全程流畅无别扭操作。
我判断项目成熟度的标准很简单：如果连开发者本人都无法顺畅用软件产出演示素材，再多完整功能都只是半成品。

五、Vibe Coding真实开发感悟

AI能极快把项目做到“功能可用”，从零快速搭建完整AI剪辑框架；
但从“能用”升级到“顺手、自然”，无法依靠AI自动完成，必须亲身实测、持续观察真实剪辑流程，反复迭代大量细碎交互逻辑。
Vibe Coding是高效开发加速器，却不能替代人对产品体验的打磨。

六、项目体验&开源地址

在线Demo（无需部署，浏览器直接打开使用）：
https://video-editor.ai-creator.top/
GitHub完整开源仓库：
https://github.com/MartinDelophy/ai-video-editor
交流反馈Discord社群：
https://discord.gg/uq2uvUTBr

欢迎各位前端开发者、自媒体创作者测试使用，提交Bug、优化建议、PR共建项目，尤其欢迎反馈操作中依旧别扭、割裂的交互问题。

文章标签

#WebGPU #AI视频剪辑 #开源项目 #VibeCoding #前端开发 #本地大模型 #浏览器AI #程序员踩坑