ClipSketch AI：快速视频转手绘故事板工具
ClipSketch AI 是一款AI内容创作工具，能快速将视频转换为手绘风格的故事板，并提供多种文案格式，适用于视频创作者、社交媒体运营者等。
ClipSketch AI 是什么
ClipSketch AI 是一款专为视频创作者、社交媒体运营者和二创爱好者设计的AI内容创作平台。它能够解析Bilibili和小红书的视频链接，提取精彩画面，并利用Google Gemini多模态模型自动生成手绘风格的故事板和适配社交平台的文案格式。
适合谁使用 ClipSketch AI
- 短视频创作者
- 社交媒体运营者
- 视频二创博主
- 导演与策划
拥有Gemini API Key和基础的Node.js环境，用户即可在本地运行ClipSketch AI，作为日常创作的辅助工具。
核心功能亮点
视频采集与播放体验
- 多源解析：支持解析Bilibili和小红书的分享链接，包括短链接和带文字说明的混合文案。
- 布局适配：优化了竖屏和宽屏视频的布局，提供更直观的浏览体验。
- 精准控制：支持键盘快捷键控制播放节奏，实现逐帧或智能步长调整。
帧级标记系统
- 毫秒级标记：精确记录精彩瞬间，适合拆解讲解类视频或节奏紧凑的内容。
- 快捷打点：按下T键即可标记当前帧，也可点击按钮完成标记。
- 多种导出方式：支持导出TXT时间轴标签，或将标记帧打包为ZIP图片包。
AI手绘故事板与文案工作室（Powered by Gemini）
- 智能故事板生成：基于gemini-3-pro-image-preview模型，将多个标记帧整合成一张连贯的手绘风格故事板。
- 多风格种草文案：利用gemini-3-pro-preview模型，生成三种不同风格的社交媒体文案。
- 角色融合能力：支持上传自定义角色或头像，AI会将其融合到故事板画面中。
- 封面生成：基于精选文案与原始画面生成竖屏视频封面。
- 批量精修：支持分镜批量重绘与优化，可配置使用Batch API控制成本。
导出与分享
- 下载生成的故事板图片和封面素材。
- 打包导出所有标记帧、故事板和封面。
- 一键复制生成的文案，用于小红书、微博、X（Twitter）等平台发布。
使用流程概览
环境准备
- Node.js：版本v18及以上。
- 有效的Google Gemini API Key。
安装与启动
- 克隆项目仓库：https://github.com/RanFeng/clipsketch-ai.git
- 安装依赖：npm install
- 配置环境变量：在项目根目录创建.env.local文件，填入自己的API Key。
- 启动开发服务器：npm run dev
- 在浏览器中访问http://localhost:3000，进入ClipSketch AI界面。
从视频到故事板的完整路径
- 导入视频链接：复制B站或小红书的视频分享链接，粘贴到首页输入框，点击“导入视频”。
- 标记精彩画面：使用空格键控制播放节奏，利用左右方向键调整进度，出现关键画面时，点击Tag按钮或按T键完成标记。
- 开启AI工作室：标记结束后，在标记列表区域点击“下一步：AI绘图”，在右上角粘贴Gemini API Key。
- 生成故事板与文案：由AI分析视频步骤与画面内容，生成手绘故事板，可选择融合自定义角色，对每一格画面进行高清重绘，支持批量模式，自动生成多种风格的社交媒体文案与配套封面方案。
- 导出结果并发布：下载故事板、封面或完整素材包，一键复制文案到目标平台，配合图像素材完成发布。
技术栈与实现细节
- 核心框架：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等模型的权限。
- 跨域与播放策略：为支持外部视频链接播放和截图，项目使用了代理策略和referrerPolicy="no-referrer"配置。
- 隐私与版权：在使用平台视频进行创作时，需要遵守内容平台的版权与使用规则。
项目为开源项目，源码托管于GitHub仓库https://github.com/RanFeng/clipsketch-ai，适合二次开发、定制化集成与团队协作使用。
