下午对 jianfei-ppt-video 做了一次大动作——UI/UX 全面优化。
从 210 条建议到全部落地,分四批执行,用了 4 个并行 Agent,最后生成了第一个验证视频。
说到这个,真的挺有成就感的。
210 条优化建议的生成
先让 AI 把项目从头到脚看了一遍,维度拉满:
- 竖屏内容表达核心优化
- 排版与字体系统
- 色彩与视觉层次
- 动效与微交互
- 导航与信息架构
- 手势与交互
- 异常状态与容错
- 加载体验
- 新手引导
- 搜索功能
- 移动端适配
- 老年人/小白适配
- 专业用户高效操作
- 商业转化
- 竞品对标
最终输出了 210 条独立、不重复、可落地的建议,存到了 docs/UX_OPTIMIZATION_200_PLUS.md,整整 969 行,分成 21 个大类。
分批执行策略
不是一口气全改完,而是按优先级分成了四批:
| 批次 | 范围 | 内容 | 状态 |
|---|---|---|---|
| P0 | 1-48 | 竖屏核心体验、交互手势、异常状态 | ✅ 完成 |
| P1 | 49-108 | 视觉色彩、导航布局、加载体验、配置系统 | ✅ 完成 |
| P2 | 109-168 | 业务转化、多用户、高级功能 | ✅ 完成 |
| P3 | 169-200 | 老年人适配、人性化、竞品对标 | ✅ 完成 |
这样改起来更稳,也不容易出错。
并行执行
P0 这一批启动了 4 个并行 Agent,各自负责不同子领域:
- Agent 1:竖屏内容表达 + 排版字体
- Agent 2:动效与微交互
- Agent 3:导航与信息架构
- Agent 4:手势交互 + 异常状态
每个 Agent 独立改代码、独立提交,最后再合并——效率高,风险低。
代码质量保障
改完还得保证不出 bug,所以做了这些事:
- 单元测试从 35 个扩展到 80 个,全都通过
- 12 次 Git 提交,工作区一直干净
- 修复了 missing import、unused import 等小问题
- 补上了 runtime bug(比如
readdirSync/statSync缺少导入)
现在代码清爽多了,跑起来也安心。
视频验证
所有优化完成后,我们生成了一段竖屏短视频作为端到端验证:
- 分辨率:1080×1920
- 时长:25.5 秒
- 大小:2.5 MB
- 编码:H.264 + AAC
视频里能清楚看到改进的实际效果:
| 改进项 | 视频中可见 |
|---|---|
| 进度条 | 顶部紫色细条随页面推进 |
| 下一页提示 | 右下角 "Next: xxx" |
| 重播/分享 | 最后一页底部两个按钮 |
| 丰富页脚 | 章节名 · 页码 · 总页数 |
| 品牌个性 | 【剑飞助手】前缀 |
| 版权声明 | "© 2026 剑飞" 结尾页 |
| 庆祝动画 | 生成完成 ASCII 艺术 |
| 彩色输出 | 终端绿色成功/灰色信息 |
看着是不是挺顺眼?而且每处细节都有对应。
最终状态
✅ 200/200 UI/UX 改进全部完成
✅ 80 单元测试通过
✅ HTML 端到端通过
✅ 视频端到端通过
✅ 12 Git 提交,工作区干净
项目现在可以稳定生成竖屏短视频了。
下一步就是看看用户反馈,再打磨细节。