【25.12.6】一键将视频瞬间转化为AI手绘故事板的创作神器

可以解析 Bilibili 和小红书的分享链接，把视频中的精彩画面精确定位出来，再通过 Google Gemini 多模态模型，自动生成手绘风格故事板和适配社交平台的多种文案格式。

使用流程概览

环境准备

• Node.js：版本 v18 及以上
• 有效的 Google Gemini API Key

安装与启动

1. 克隆项目仓库：git clone https://github.com/RanFeng/clipsketch-ai.git cd clipsketch-ai
2. 安装依赖：npm install
3. 配置环境变量：在项目根目录创建 .env.local 文件，填入自己的 API Key：GEMINI_API_KEY=your_api_key_here
4. 启动开发服务器：npm run dev
5. 在浏览器中访问 http://localhost:3000，进入 ClipSketch AI 界面。

从视频到故事板的完整路径

1. 导入视频链接
   • 复制 B 站或小红书的视频分享链接
   • 粘贴到首页输入框，点击“导入视频”
2. 标记精彩画面
   • 使用空格键控制播放节奏
   • 利用左右方向键调整进度
   • 出现关键画面时，点击 Tag 按钮或按 T 键完成标记
3. 开启 AI 工作室
   • 标记结束后，在标记列表区域点击“下一步：AI 绘图”
   • 在右上角粘贴 Gemini API Key（如未在环境变量中配置）
4. 生成故事板与文案
   • 由 AI 分析视频步骤与画面内容
   • 生成手绘故事板，可选择融合自定义角色
   • 对每一格画面进行高清重绘，支持批量模式
   • 自动生成多种风格的社交媒体文案与配套封面方案
5. 导出结果并发布
   • 下载故事板、封面或完整素材包
   • 一键复制文案到目标平台，配合图像素材完成发布

技术栈与实现细节

• 核心框架：React 19 + TypeScript
• 样式系统：Tailwind CSS
• 图标库：Lucide React
• AI SDK：Google GenAI SDK（@google/genai）
• 工具库：JSZip（打包下载）、Canvas API（截图与图像处理）
• 数据存储：IndexedDB，用于本地状态持久化和标记记录保存

前端采用响应式设计，适配 PC 宽屏、iPad 平板与手机竖屏。移动端会自动切换为上下布局，更接近常见的短视频观看习惯。

使用注意事项

• API 权限配置：使用 AI 绘图功能时，API Key 需要具备访问 gemini-3-pro-image-preview 等模型的权限。如出现 403 错误，需要在 Google Cloud 控制台中检查项目与模型授权。
• 跨域与播放策略：为支持外部视频链接播放和截图，项目使用了代理策略和 referrerPolicy="no-referrer" 配置，部署时需要保证相关服务可正常访问。
• 隐私与版权：在使用平台视频进行创作时，需要遵守内容平台的版权与使用规则，合理使用公开内容，避免侵犯作者权益。