baoyu-design 本地动画视频导出功能更新

Baoyu on X: "baoyu-design skill can generate animated videos locally and export them in mp4 format, just like the attached video. The web version of Claude Design can create animated videos using prompts, but you can only view the video on the web page and cannot download it. Some people have also achieved this using third-party screen recording software plugins, but it's quite cumbersome and the effect isn't very good. Based on this set of Skills, I have already implemented the direct export of animations into https://t.co/rBMHNrRUTV" / X

Baoyu

@dotey

The baoyu-design skill can generate animated videos locally and export them in mp4 format, just like the attached video. The web version of Claude Design can create animated videos using prompts, but you can only view the video on the web page and cannot download it. Some people have also achieved this using third-party screen recording software plugins, but it's quite cumbersome and the effect isn't very good. Based on this set of Skills, I have already implemented the direct export of animations into

The underlying principle is similar: each frame of the image is calculated based on its time coordinate, like a function f(t). You can pass any time point t to the animation engine, and it can directly calculate the position, transparency, and size of each element on the screen at that moment. All visual states are completely determined by t. It doesn't need to play from the beginning to that moment, nor does it need to remember what happened before. Traditional animation writing is imperative: at a certain moment, change the position of an element and adjust the transparency. The state is scattered, and when the time is messed up, the picture becomes messy. This engine, on the contrary, uses a declarative approach: you don't drive the movement of elements, but only describe what each element should look like at the t-th second. To put it in an example, traditional animation is like watching a movie; you have to watch from the beginning to know what the picture is like at the 30th minute. This engine is more like a special book; when you flip to any page, the picture is complete and determined. This design brings three capabilities: 1. You can jump to any position by dragging the playback bar, because f(t) can be calculated at any time; 2. You can debug the same frame repeatedly, because the same t always produces the same frame; 3. You can also export the animation into a video, and the method is very clever. So how is the video export implemented? Intuitively, you can just record the screen to convert the animation in the browser into an MP4. However, screen recording is real-time. If the machine stutters slightly, it will drop frames, and the resulting video is not reproducible. Moreover, the "player shell" such as the playback bar, black background, and rounded shadows will also be recorded. The method used by baoyu-design is more like the filming of stop-motion animation: start a headless browser (a Chromium without a UI), load the animation page, and precisely control the timeline through a reserved control interface of the engine. For each set time point, wait for the browser to render the image, take a screenshot, and directly feed it into ffmpeg for encoding through a pipeline. A 95-second, 30fps animation is a 2850-cycle loop of "setting the time and taking a photo." It's slow, but every frame is precise, and no frame is dropped. There is an easily overlooked detail here: after setting the time, the tool waits for two frames of requestAnimationFrame before taking a screenshot. Because changing the time only changes the React state, the browser still needs one or two frames to truly draw the new image on the screen. If it waits too little, the screenshot may capture a ghost image from the previous frame. To make the image sharper, the screenshot is rendered with a 2x device pixel ratio, and the actual output is 3840×2160, which is then scaled down to 1080p by ffmpeg. The principle is the same as high-resolution printing: first, draw on a larger canvas with precision, then scale down with high quality, resulting in significantly clearer edges and fine lines. Baoyu-design is open-sourced on GitHub (MIT license), and currently has 1.2K stars. Interested people can check out its skills/baoyu-design directory, where the complete implementation of the animation engine is located.

github.com/jimliu/baoyu-d…

00:00

20h

Update to baoyu-design skill (let you run Claude Design locally): the effect of generating PPT locally, you can use Cursor, Codex's built-in browser to preview PPT, or directly use their marking tools to modify PPT details. Press F key to play in full screen. You can also export it as an editable PPTX

12:21 AM · Jun 17, 2026

2.3K

Views

2

3

1

13

8

18

Read 2 replies