【标签】学习工作
【标题】 【学习工作赛道】CanvasVideo Demo——一句话让AI生成沉浸式知识视频
【正文】
0. 先和大家打个招呼 
我是一名技术管理人员，平时也自己做内容分享。算起来我已经多年不写代码了，早年也是纯后端开发出身，前端、H5、视频这些领域基本没碰过。说实话，心里一直有遗憾——当年想做产品，最后被"技术路线"绑架，慢慢就走上了管理岗。
AI 让我的开发之路又亮了。最近半年我做的软件比过去这么多年加起来都多，想法终于可以落地了，根本停不下来。这次做 CanvasVideo，前端用 H5 + Vite、视频管线、Skill 工具链…… 这些以前完全不敢碰的领域，靠着和 TRAE 一句句对话，居然全跑通了。CanvasVideo 的三端架构（前端渲染 + 后端 API + AI Skill）都是我用 TRAE Work 协作完成的。实际感受是：TRAE 不只是"会写代码的工具"，更像一个能听懂产品意图的搭档。比如讨论"三端职责划分"时，我把脑中的产品形态描述清楚，它就能给出可落地的模块边界和接口设计；开发 canvasvideo-skill 的 9 步流程时，每一步的输入输出格式、校验规则，都是通过和 TRAE 一句句对话敲下来的。最让我意外的是——原本以为"AI 生成配置 → 渲染引擎"这种跨模块的链路打通会很麻烦，结果在 TRAE 里按流程聊几次就跑通了。整个过程让我可以专注在"想要什么样的视频"，而不是"代码怎么写"。
1. Demo 简介
是什么：
CanvasVideo 是一款配置式无限画布视频生成器。用户用一句话描述想法，AI 自动生成标准化 JSON 配置，工具精准渲染为可交互的画布视频。
面向谁：
知识博主、教育工作者、产品经理、自媒体创作者、演讲者——需要快速产出可视化讲解内容的人。
主要功能：
- AI 脚手架生成：一句话需求 → 自动拆解为骨架 → 生成标准化 JSON 配置 → 渲染成视频
- 双模式体验：画布模式（自由探索、可缩放可平移）+ 视频模式（按时间线自动播放）
- 10+ 组件库：标题、文本、图片、卡片、引用、徽章、角标、震撼文本、图形、聚合组件，支持Web 原生渲染和多主题切换，无需安装额外插件
Demo 体验： 画布视频 CanvasVideo
2. Demo 创作思路
灵感来源：
我自己也做视频，深感制作成本太高——哪怕用 AI 工具，也需要大量调试时间，反复抽卡、调提示词，最后还经常不满意。想要降低做视频的门槛，让人能专注创意和快速试错，而不是被工具绑架。
想解决的问题：
- AI 生成视频随机性强，反复调优仍不满意
- 调优时间比制作还长
- PR、剪映等专业软件门槛高
- PPT 太单调，无法展示复杂关系（架构图、流程图、知识图谱）
- 直接用 AI 生成视频成本高（API 调用贵、生成时间长），普通用户难以负担
为什么做这个方向：
CanvasVideo 定位"AI 脚手架"——让 AI 在规范内生成，既保留创造力，又确保结果可控。用户描述想法，AI 生成配置，工具精准渲染，真正做到"所说即所得"。
整套系统由三端组成：
- video-maker-system：前端 H5 渲染引擎
- server：项目上传/校验/预览 API
- canvasvideo-skill：AI 生成画布视频的工具包
3. Demo 体验地址
在线体验： 画布视频 CanvasVideo
进入首页即可观看产品介绍视频，并可获取 canvasvideo-skill 安装提示词，直接发给 TRAE 后立即体验 AI 生成画布视频。
项目目前仍在调试中，如有体验问题，欢迎在本帖直接交流。
4. TRAE 实践过程
使用 TRAE Work 完成了 CanvasVideo 三端架构的设计与核心功能开发。
关键开发流程：
- 初始版本（2026/6/10）：用 TRAE Work 搭建 CanvasVideo 第一版，确定"配置驱动 + 组件化"的产品形态。
- 系统设计（2026/6/22）：用 TRAE Work 讨论三端架构设计——前端渲染引擎 + 后端 API + AI 技能包，确定模块边界和协作链路。
- Skill 开发（2026/6/22-23）：实现 canvasvideo-skill 工具包，包含 9 步流程（初始化→配音→骨架设计→区域设计→合并→素材→自检→打包→上传），让一句话需求能落地为可播放视频。
- 功能测试（2026/6/24）：在 TRAE Work 中跑通端到端测试，验证 AI 生成配置 → 渲染引擎播放的完整链路，修复发现的兼容性问题。
关键开发步骤截图：
图1：初始版本搭建
图2：系统设计与三端架构讨论
图3：canvasvideo-skill 工具包开发
图4：端到端功能测试
关键任务 Session ID（双击 TRAE 对话复制）：
- Session ID 1（初始版本）：
3106567035304812:6f88b7cf9534a645e80c7c4a55a996d4_6a28bd328267c8f6df85a04f.6a2922608267c8f6df85ac67.6a2922608267c8f6df85ac65 - Session ID 2（开发 skill）：
3106567035304812:fe70cd821c9e3d6944f106ca949312a2_6a3792625d0543befb0ef661.6a38b29d5d0543befb0f1f69.6a38b29d5d0543befb0f1f67 - Session ID 3（讨论系统设计）：
3106567035304812:af8e67c2185b379c277a798e4ba75951_6a38da4c5d0543befb0f2320.6a3a00c6d62cfaf1c487d81e.6a3a00c6d62cfaf1c487d81c - Session ID 4（测试功能）：
3106567035304812:bf7a55109a7e9beb2ce28ca27366672b_6a3b73f2d62cfaf1c487ef6e.6a3bc164d62cfaf1c487fa45.6a3bc164d62cfaf1c487fa43
