ClipSketch AI 是什么

ClipSketch AI（剪辑·素描）是一款面向视频创作者、社交媒体运营者和二创爱好者的 AI 内容创作工作台。它可以解析 Bilibili 和小红书的分享链接，把视频中的精彩画面精确定位出来，再通过 Google Gemini 多模态模型，自动生成手绘风格故事板和适配社交平台的多种文案格式。

对比传统“截图 + 修图 + 手写文案”的人工流程，这个工具把采集、标记、绘图、文案和导出整合在一个界面里，更适合做系列内容、教程类视频、剧情向短片和种草内容。


适合谁使用 ClipSketch AI

  • 想做故事化内容的短视频创作者
  • 需要高频输出图文、视频的社交媒体运营者
  • 喜欢对 B 站、小红书视频进行二创剪辑的博主
  • 需要用分镜脚本与视觉草图和团队沟通的导演与策划

只要有 Gemini API Key 和基础的 Node.js 环境，就可以在本地跑起来，作为日常创作的“分镜与文案工作台”。


核心功能亮点


视频采集与播放体验


  • 多源解析

    ：支持解析 Bilibili 和小红书的分享链接，短链接和带文字说明的混合文案也能识别。

  • 布局适配

    ：针对竖屏（9:16）与宽屏视频做了自适应布局优化，浏览画面更直观。

  • 精准控制

    ：支持键盘快捷键控制播放节奏：空格播放/暂停，方向键实现逐帧或智能步长调整。


帧级标记系统


  • 毫秒级标记

    ：精确记录精彩瞬间的时间点，适合拆解讲解类视频或节奏紧凑的内容。

  • 快捷打点

    ：按下 T 键即可标记当前帧，也可点击按钮完成标记，操作节奏贴合剪辑习惯。

  • 多种导出方式

    ：支持导出 TXT 时间轴标签，或将标记帧打包为 ZIP 图片包，方便后期剪辑或归档管理。


AI 手绘故事板与文案工作室（Powered by Gemini）


  • 智能故事板生成

    ：基于

    gemini-3-pro-image-preview

    模型，把多个标记帧整合成一张连贯的手绘风格故事板，画风偏可爱与叙事感。

  • 多风格种草文案

    ：利用

    gemini-3-pro-preview

    模型，围绕视觉内容生成三种不同风格的社交文案，例如：情感故事型、干货教程型、短句精简型。

  • 角色融合能力

    ：支持上传自定义角色或头像，AI 会把角色融合到故事板画面中，适合打造个人 IP 或品牌形象。

  • 封面生成

    ：基于精选文案与原始画面生成竖屏视频封面，用于小红书、短视频平台的首图展示。

  • 批量精修

    ：支持分镜批量重绘与优化，可配置使用 Batch API 控制成本，对系列内容或长项目更友好。


导出与分享

  • 下载生成的故事板图片和封面素材
  • 打包导出所有标记帧、故事板和封面
  • 一键复制生成的文案，用于小红书、微博、X（Twitter）等平台发布


使用流程概览


环境准备

  • 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\"

    配置，部署时需要保证相关服务可正常访问。

  • 隐私与版权

    ：在使用平台视频进行创作时，需要遵守内容平台的版权与使用规则，合理使用公开内容，避免侵犯作者权益。

项目为开源项目，源码托管于 GitHub 仓库

RanFeng/clipsketch-ai

，适合二次开发、定制化集成与团队协作使用。

GitHub地址：

https://github.com/RanFeng/clipsketch-ai

体验地址：

https://clipsketch-ai.vercel.app/