Avatar
虚拟形象助手:集成 Simli 视频渲染和 ElevenLabs TTS 的交互式 AI 虚拟形象
Interactive AI avatar with Simli video rendering and ElevenLabs TTS
clawhub install avatarRemotion 视频生成:使用 Remotion 框架从 Stitch 项目生成演示视频,支持流畅的过渡效果、缩放和文字覆盖。
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
也可通过以下平台安装:
clawhub install remotion# 安装 Skill npx skills add google-labs-code/stitch-skills@remotion # 安装后 Claude Code 会自动识别并使用
# 同样的安装命令,兼容所有支持 SKILL.md 的 AI 编程工具 npx skills add google-labs-code/stitch-skills@remotion
需Node.js环境,视频渲染可选择本地或云端
list_tools to identify available MCP servers and their prefixes:
stitch: or mcp_stitch: prefixremotion: or mcp_remotion: prefix[stitch_prefix]:list_projects with filter: "view=owned"
- Identify target project by title (e.g., "Calculator App")
- Extract Project ID from name field (e.g., projects/13534454087919359824)[stitch_prefix]:list_screens with the project ID (numeric only)
- Review screen titles to identify all screens for the walkthrough
- Extract Screen IDs from each screen's name field[stitch_prefix]:get_screen with projectId and screenId
- Retrieve:
- screenshot.downloadUrl — Visual asset for the video
- htmlCode.downloadUrl — Optional: for extracting text/content
- width, height — Screen dimensions for proper scaling
- Screen title and description for text overlaysweb_fetch or Bash with curl to download screenshots
- Save to a staging directory: assets/screens/{screen-name}.png
- Organize assets in order of the intended walkthrough flowremotion.config.ts or package.json with Remotion dependencies
- If exists, use the existing project structure npm create video@latest -- --blank
- Choose TypeScript template
- Set up in a dedicated video/ directory cd video
npm install @remotion/transitions @remotion/animated-emoji
ScreenSlide.tsx — Individual screen display componentimageSrc, title, description, width, height
- Features: Zoom-in animation, fade transitions
- Duration: Configurable (default 3-5 seconds per screen)WalkthroughComposition.tsx — Main video compositionScreenSlide components
- Handles transitions between screens
- Adds text overlays and annotationsconfig.ts — Video configuration@remotion/transitions for professional effects: import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';
spring() animation for smooth zoom
- Apply to important UI elementsscreens.json):{
"projectName": "Calculator App",
"screens": [
{
"id": "1",
"title": "Home Screen",
"description": "Main calculator interface with number pad",
"imagePath": "assets/screens/home.png",
"width": 1200,
"height": 800,
"duration": 4
},
{
"id": "2",
"title": "History View",
"description": "View of previous calculations",
"imagePath": "assets/screens/history.png",
"width": 1200,
"height": 800,
"duration": 3
}
]
}
ScreenSlide.tsx:useCurrentFrame() and spring() for animations
- Implement zoom and fade effects
- Add text overlays with proper timingWalkthroughComposition.tsx:<Sequence> components
- Apply transitions between screens
- Calculate proper timing and offsetsremotion.config.ts:resources/screen-slide-template.tsx as starting pointresources/composition-checklist.md for completenessexamples/walkthrough/ directory npm run dev
- Opens browser-based preview
- Allows real-time editing and refinement npx remotion render WalkthroughComposition output.mp4
[remotion_prefix]:render with composition details
- Specify output format (MP4, WebM, etc.)--quality)
- Configure codec (--codec h264 or h265)
- Enable parallel rendering (--concurrency)import {interpolate, useCurrentFrame} from 'remotion';
const Hotspot = ({x, y, label}) => {
const frame = useCurrentFrame();
const scale = spring({
frame,
fps: 30,
config: {damping: 10, stiffness: 100}
});
return (
<div style={{
position: 'absolute',
left: x,
top: y,
transform: scale(${scale})
}}>
<div className="pulse-ring" />
<span>{label}</span>
</div>
);
};
<Audio> componenthtmlCode.downloadUrl for each screenproject/
├── video/ # Remotion project directory
│ ├── src/
│ │ ├── WalkthroughComposition.tsx
│ │ ├── ScreenSlide.tsx
│ │ ├── components/
│ │ │ ├── Hotspot.tsx
│ │ │ └── TextOverlay.tsx
│ │ └── Root.tsx
│ ├── public/
│ │ └── assets/
│ │ └── screens/ # Downloaded Stitch screenshots
│ │ ├── home.png
│ │ └── history.png
│ ├── remotion.config.ts
│ └── package.json
├── screens.json # Screen manifest
└── output.mp4 # Rendered video
npx skills add remotion-dev/skillsscreenshot.downloadUrl quality settings |
| Misaligned text | Verify screen dimensions match composition size; adjust text positioning based on actual screen size |
| Choppy animations | Increase frame rate to 60fps; use proper spring configurations with appropriate damping |
| Remotion build fails | Check Node version compatibility; ensure all dependencies are installed; review Remotion docs |
| Timing feels off | Adjust duration per screen in manifest; preview in Remotion Studio; test with actual users |Look up the screens in my Stitch project "Calculator App" and build a remotion video
that shows a walkthrough of the screens.
assets/screens/screens.json manifest with screen metadataScreenSlide.tsx, WalkthroughComposition.tsx)calculator-walkthrough.mp4npx skills run remotion --project "./stitch-project" --transitions smooth --zoom-factor 1.5 --text-overlay true --output demo.mp4 --fps 30虚拟形象助手:集成 Simli 视频渲染和 ElevenLabs TTS 的交互式 AI 虚拟形象
Interactive AI avatar with Simli video rendering and ElevenLabs TTS
clawhub install avatarAI Avatar Generation:从照片或文字描述生成专业的 AI 虚拟人物,包括真人头像、卡通形象、3D 角色等。
Generate AI avatars from photos or text descriptions using each::sense. Create professional headshots, cartoon avatars, 3D characters, fantasy personas, gami...
clawhub install ai-avatar-generation