跪拜 Guibai
← Back to the summary

14 Repos That Give AI Coding Assistants Design Sense, 3D Skills, and Video Editing

Letting AI Learn Aesthetics, Modeling, and Video Editing: 14 Repos from My Bookmarks

Recently, while browsing my bookmarks, I noticed a clear change in the repos I've saved over the past year: before, I saved source code repos; now, most of what I save are Skills, MCPs, and plugins.

What attracts me isn't just saving a few lines of code, but that they let AI coding tools start touching areas they were never good at: aesthetics, modeling, motion effects, and video editing.

I combined my bookmarks with a design repo list I recently came across and organized them into three groups by purpose, 14 repos total. Each name has a repository link, so you can check the ones you like.

I. Making Pages AI Writes Stop Looking Like Templates

The most common problem with generating front-end pages using Claude Code or Codex isn't broken functionality, but that everything looks the same: the same gradient, the same card border radius, the same color scheme.

The page runs, but you can't see the product's personality.

This group of repos works from design rules, design fidelity, and motion expression to give AI more basis for its page output.

1. UI UX Pro Max

Give AI a design knowledge base.

It organizes color combinations, font pairings, and design rules by industry into knowledge that AI can use.

Finance, medical, and e-commerce pages naturally have different tones. With these rules, AI at least has a set of design references to work from before building a page.

It's good for the start of a project, to establish the visual direction before letting AI write the details.

Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

2. Impeccable

Specifically handles the 'AI smell' in pages.

You can ask it to review and polish an existing page, or ask for 'something bolder.' Its approach adjusts hierarchy, layout, and visual expression according to design principles, rather than randomly swapping colors.

If you've already written the page but feel something is off, start here.

Paired with UI UX Pro Max, one is for early design rationale, the other for late review and polish.

Repository:

https://github.com/pbakaus/impeccable

3. Framelink Figma MCP

Let AI read the structure of design files.

Give the AI coding tool a Figma link, and it reads structured information from the design file, not just a screenshot.

Layout, hierarchy, spacing, and component relationships shouldn't rely solely on eyeballing. For projects that demand high fidelity, this route is worth trying.

Repository:

https://github.com/GLips/Figma-Context-MCP

4. React Bits

Turn common animations and background effects into ready-made components.

Landing pages, corporate sites, and dashboard hero sections often need distinctive dynamic effects, but tuning parameters from scratch takes time.

React Bits offers a set of animation components, text effects, and background effects that you can use and modify directly. It's good for finding a close expression first, then adjusting to your project.

Repository:

https://github.com/DavidHDev/react-bits

5. GSAP Skills

Teach AI the correct way to use GSAP.

Timelines, scroll animations, and text effects are things AI often touches and often messes up when writing front-end code.

This Skill provides guidance around GSAP usage to help AI organize animation code more logically. When you need complex motion, it gives a better basis than asking AI to piece together APIs from memory.

Repository:

https://github.com/greensock/gsap-skills

II. Bringing AI into 3D Workflows

This is the group I care most about.

With Three.js and Blender projects, the difficulty often isn't the render loop but the asset stage before it: where does the model come from, how are materials handled, how do animations hook in, and finally how does it all get placed in a scene.

The projects below are attempts to connect these stages.

6. MCP for Blender

Let AI operate Blender through text commands.

Creating scenes, adjusting models, setting materials, and other steps that used to be done manually in the software can start being wired into an AI workflow through MCP.

For projects like digital twins and big-screen dashboards, the value is direct: one more entry point for asset preparation.

Start with a simple scene to see which operations suit AI and which still need your own adjustment.

Repository:

https://github.com/ahujasid/mcp-for-blender

7. dsh-blender-plugin

Another route for AI-driven Blender modeling.

It provides modeling tools and skills and tries to involve AI in the real-time modeling process.

If you're exploring Blender and AI together, try it side by side with the MCP approach. The real comparison is whether you can comfortably adjust, correct, and continue during modeling.

Repository:

https://github.com/sixtysevenlf/dsh-blender-plugin

8. img2threejs

Rebuild Three.js objects from reference images with code.

It follows a code-generation route: based on image references, it rebuilds 3D objects in Three.js, then wraps the result with quality checks and animation extensions.

For front-end developers, this form is attractive. The output is code itself, so later tweaks to structure, parameters, and interaction stay in the familiar development environment.

Repository:

https://github.com/img2threejs/img2threejs

9. Motion2MixamoRig

Retarget human motion from video onto character skeletons.

It focuses on motion retargeting: extracting human motion from video and applying it to Mixamo-rigged characters.

For character animations or game prototypes, try it as a low-cost motion solution. Compared to just generating a model, whether a character moves naturally often matters more to the final look.

Repository:

https://github.com/MaxLiu22/Motion2MixamoRig

10. dioramas

Organize 3D assets into interactive websites.

It's based on Three.js and WebGL and focuses on building cinematic, interactive 3D websites from AI-generated assets.

For showcase and brand-heavy projects, look at how it organizes scenes, camera, and interactions.

The earlier projects are closer to 'where assets come from'; this one pushes attention a step back: once you have assets, how do you compose them into a complete experience.

Repository:

https://github.com/blendi-remade/dioramas

III. Doing Video with Code

Front-end developers write HTML and React; they're already describing pictures: where elements sit, what styles they use, when they appear, and how they change.

When time enters that description, code gains the ability to organize video.

This group of repos wires scenes, camera, animation, and editing into the programming workflow.

11. HyperFrames

Describe scenes with HTML, then output the finished film.

Product promos and motion graphics can follow this route.

What attracts me is the short chain: AI is good at generating HTML, developers know HTML, and the layout and style of each scene can keep being adjusted in code.

Repository:

https://github.com/heygen-com/hyperframes

12. video-shotcraft

Add camera language to code-driven video.

It's a video Skill for Claude Code and Codex, built on Remotion, that organizes product videos with code and provides camera recipes as references.

Code can make scenes move, but how shots connect, how emphasis is placed, and how pacing is arranged still need a method. The value of projects like this is distilling that experience into rules AI can use.

Repository:

https://github.com/Vincentwei1021/video-shotcraft

13. lemo-opuscar

Try to organize short films in different styles purely from code.

It doesn't rely on video-generation models. Instead, it uses code to generate films around existing styles.

If you're interested in visual style and procedural expression, check it out: the same content will present a very different character when you swap composition, pacing, and animation rules.

Repository:

https://github.com/lemomo-ai/lemo-opuscar

14. mg-styles-15

Take MG animations apart to see how styles are written.

It compiles 15 motion-graphics (MG) animation styles and provides finished films, prompts, and source code.

It's for breaking down and learning: what exactly — fonts, shapes, pacing, motion patterns — makes up an animation style, and how those visual choices land in code.

Repository:

https://github.com/Vincentwei1021/mg-styles-15

These Tools All Point to the Same Thing

Looking at the three groups together, the direction is consistent: the territory a front-end engineer can cover is widening.

Before, design, modeling, animation, and video each required its own software and way of working. Now more and more of those stages have rules AI can read, interfaces AI can call, and code that can continue to be edited.

That's also why I saved these repos. They give people a chance to pull work that used to be scattered into the same pipeline.

As for the 'if you don't learn, you'll lose your job' kind of talk, I don't agree.

Tools won't judge what good design is, and they won't decide which metric a big-screen dashboard should highlight. Whether to add an animation or how long a shot should hold still needs a human to decide.

What actually separates people is whether they can wire these tools into their own projects and know where AI should act and where they need to stay in control.

If you want to start with the scenario closest to you, here's how I'd pick:

Comments

Top 1 from juejin.cn, machine-translated. The original thread is authoritative.

程序员张张

Nice