什么是 ClipSketch AI？
ClipSketch AI (Bearbeitung & Skizzieren) 是一款专为视频创作者、社交媒体运营及二创爱好者打造的 AI 内容创作工作台。它通过深度集成 Google Gemini 多模态模型，将繁琐的“视频截图 $rightarrow$ 手动修图 $rightarrow$ 撰写文案”流程自动化。
Dieses Tool analysiert Sharing-Links von Bilibili und Xiaohongshu, extrahiert präzise Keyframes aus Videos und wandelt diese in detailreiche, handgezeichnete Storyboards um. Zudem generiert es automatisch verschiedene, an unterschiedliche Social-Media-Plattformen angepasste Texte und steigert so die Produktionseffizienz von Serieninhalten, Tutorial-Videos und Produktempfehlungs-Kurzfilmen erheblich.
适用场景与目标用户
- 短视频创作者： Es gilt, Videoinspirationen schnell in visuelle Storyboards umzusetzen und daraus eine Erzählung zu erstellen.
- 社媒运营者： Wir streben danach, häufig hochwertige Text-, Bild- und Videoinhalte zu produzieren.
- 二创博主： 习惯对 B 站、小红书热门视频进行拆解与再创作。
- Regisseur und Planer: 需要快速产出分镜脚本与视觉草图，用于团队沟通。
只要拥有基础的 Node.js 环境和 Gemini API Key，即可在本地部署此工具，将其作为高效的“分镜与文案工作站”。
Detaillierte Analyse der Kernfunktionen
1. 智能视频采集与交互
- 多平台解析： 支持 Bilibili 和小红书链接，能够智能识别包含文字说明的混合文案。
- 自适应布局： 针对 9:16 竖屏与宽屏视频进行了专门优化，确保预览体验直观。
- Hocheffiziente und präzise Steuerung: 引入快捷键操作，空格键控制播放 / 暂停，方向键实现逐帧微调或智能步长跳转。
2. 帧级标记与导出系统
- 毫秒级打点： 允许用户精确记录精彩瞬间的时间戳，非常适合拆解快节奏或技术类视频。
- Reibungsloser Betriebsablauf: 按下 T 键 即可快速标记当前帧，操作逻辑贴合专业剪辑习惯。
- 灵活导出： 支持将标记点导出为 TXT 时间轴标签，或将所有标记帧打包为 ZIP 图片包，便于后期归档。
3. AI 视觉与文案工作室（Powered by Gemini）
- 手绘故事板生成： 基于
gemini-3-pro-image-preview模型，将多个标记帧转化为连贯、可爱的叙事性手绘故事板。 - 多风格文案矩阵： 利用
gemini-3-pro-previewDas Modell kann auf Basis visueller Inhalte mit einem einzigen Klick Social-Media-Texte in drei Stilen generieren: „emotionale Geschichten“, „praktische Anleitungen“ oder „prägnante Sätze“. - IP 角色融合： 支持上传自定义头像或角色，AI 会将特定角色融入故事板，助力个人 IP 塑造。
- 封面与批量优化： 自动生成竖屏封面图，并支持通过 Batch API 进行分镜批量重绘，在保证质量的同时有效控制成本。
4. 一键分发导出
- 支持下载故事板图片、封面素材及完整素材包。
- 文案一键复制，无缝对接小红书、微博、X（Twitter）等发布平台。
快速上手指南
环境要求
- Node.js： v18 或更高版本
- API 凭证： 有效的 Google Gemini API Key
部署步骤
- 克隆仓库：
git clone https://github.com/RanFeng/clipsketch-ai.git cd clipsketch-ai - 安装依赖：
npm install - 配置环境： 在根目录创建
.env.local文件并写入：GEMINI_API_KEY=your_api_key_here - 启动服务：
npm run dev - 访问界面： 打开浏览器访问
http://localhost:3000。
完整创作链路
导入 $rightarrow$ 标记 $rightarrow$ 生成 $rightarrow$ 发布
- 导入： 粘贴 B 站 / 小红书链接 $rightarrow$ 点击导入。
- 标记： 播放视频 $rightarrow$ 按 T 键记录关键帧。
- AI 绘图： 进入 AI 工作室 $rightarrow$ 配置 API Key $rightarrow$ 生成手绘故事板与文案。
- Export: 下载素材 $rightarrow$ 复制文案 $rightarrow$ 发布平台。
技术架构与实现
- 前端栈： React 19 + TypeScript + Tailwind CSS + Lucide React。
- AI 驱动： 采用
@google/genaiSDK 实现多模态能力。 - 核心工具： 使用 JSZip 处理打包，Canvas API 处理图像截取。
- 数据持久化： 利用 IndexedDB 在本地保存标记记录与状态。
界面采用响应式设计，在 PC、iPad 及手机端均有良好表现，移动端会自动切换为符合短视频习惯的上下布局。
注意事项
- 权限检查： 若 AI 绘图出现 403 错误，请在 Google Cloud 控制台中确认 API Key 是否具备
gemini-3-pro-image-preview等模型的访问权限。 - 网络策略： 为解决跨域播放与截图问题，项目采用了特定的代理策略与
referrerPolicy='no-referrer'配置。 - 版权合规： 请在遵守原平台版权规则的前提下进行二创，合理使用公开内容。
本项目为开源项目，欢迎开发者进行二次开发与定制化集成。
GitHub 仓库： https://github.com/RanFeng/clipsketch-ai
