ClipSketch AI (剪辑·素描)

ClipSketch AI 是一款面向视频创作者、社交媒体运营者和二次创作爱好者的开源工具。它不仅能精准解析 Bilibili 与小红书视频链接，还通过 Google Gemini 多模态大模型，将你标记的精彩片段自动转化为手绘风格故事板，并生成适配小红书等平台的三种风格文案——从标记到成稿，全程在本地浏览器完成。

为什么需要 ClipSketch AI？

在短视频内容复用、灵感整理或二次创作中，创作者常面临两大痛点：

1. 手动截图+写文案效率低
2. 难以从长视频中快速提取高光片段

ClipSketch AI 将这一流程自动化：看视频 → 打标记 → 自动生成视觉+文案内容，大幅降低内容再创作门槛。

核心功能

视频精准解析与播放

• 支持 Bilibili 和小红书 的分享链接（含短链、带文案的混合链接）
• 自动适配 竖屏（9:16）与横屏视频 布局
• 键盘快捷键控制：
  • 空格：播放/暂停
  • ← / →：逐帧或智能步长跳转
  • T 键：一键标记当前帧

帧级标记与导出

• 毫秒级时间戳记录，确保不遗漏任何高光瞬间
• 支持导出：
  • TXT 时间轴标签（便于后期剪辑）
  • ZIP 包含所有标记帧截图

AI 内容生成（需 Gemini API）

• 手绘故事板：调用 gemini-3-pro-image-preview 模型，将多个标记帧融合为一张连贯、可爱的手绘风格插画
• 三种风格文案（基于 gemini-3-pro-preview）：
  • 情感故事型
  • 干货教程型
  • 短小精悍型
• 支持一键重绘或重写，快速迭代内容

全平台响应式体验

• PC、iPad、手机自动适配布局
• 移动端采用上下结构，触控操作更流畅

快速上手（本地部署）

前提条件

• Node.js ≥ v16
• 有效的 Google Gemini API Key（需启用 gemini-3-pro-image-preview 模型）

安装步骤

git clone https://github.com/RanFeng/clipsketch-ai.git
cd clipsketch-ai
npm install
npm run dev

访问 http://localhost:3000 即可使用。

使用流程

1. 粘贴 B站/小红书视频链接 → 导入
2. 播放视频，按 T 键标记精彩帧
3. 点击“下一步：AI 绘图”
4. 输入 Gemini API Key，点击“开始绘图”
5. 生成后点击“生成文案”，复制心仪版本
6. 下载图片或导出文本

技术栈与注意事项

• 前端框架：React 19 + TypeScript
• 样式：Tailwind CSS
• AI 集成：Google GenAI SDK (@google/genai)
• 工具库：JSZip（打包）、Canvas API（截图）

⚠️ 注意：

• 若遇 403 错误，请确认 Google Cloud 项目已启用所需模型
• 视频播放依赖 referrerPolicy="no-referrer" 与代理策略，以绕过跨域限制