最近翻收藏夹，发现这一年收藏的仓库有个明显变化：以前收的是源码库，现在收藏大多是 Skill、MCP 和插件。
它们吸引我的地方，不只是让人少写几行代码，而是让 AI 编程工具开始接触原来不擅长的环节：审美、建模、动效和剪辑。
我把收藏夹和最近刷到的一份设计仓库清单合在一起，按用途整理成三组，共 14 个。项目名称都附了仓库链接，感兴趣的可以直接去看。
一、让 AI 写出来的页面不再一股模板味
用 Claude Code 或 Codex 生成前端页面，最常见的问题不是功能不对，而是长得都一样：同样的渐变、同样的卡片圆角、同样的配色。
页面能跑起来，但看不出产品的性格。
这一组仓库，分别从设计规则、设计还原和动效表达入手，帮 AI 把页面做得更有依据。
1. UI UX Pro Max
给 AI 补一套设计知识库。
它把色彩搭配、字体组合和按行业划分的设计规则整理成 AI 可以使用的知识。
金融、医疗、电商的页面调性本来就不同。有了这些规则，AI 在做页面之前，至少有了一套可以参照的设计依据。
适合用在项目刚开始的时候，先确定视觉方向，再让 AI 往下写。
查看仓库：github.com/nextlevelbu...
2. Impeccable
专门处理页面里的"AI 味"。
你可以让它评审、打磨现有页面，也可以要求"更大胆一点"。它的思路是按设计原则调整层级、布局和视觉表达，而不是随机换个颜色。
如果页面已经写出来了，却总觉得哪里不对，可以从它开始。
和 UI UX Pro Max 放在一起看，一个偏前期设计依据，一个偏后期评审打磨。
查看仓库：
3. Framelink Figma MCP
让 AI 读取设计稿的结构。
把 Figma 链接交给 AI 编程工具，读取的是设计稿里的结构化信息，而不只是截图。
布局、层级、间距和组件关系，本来就不应该全靠目测。对还原度要求高的项目，这条路线更值得尝试。
查看仓库：
4. React Bits
把常用动画和背景效果变成现成组件。
做官网、落地页和大屏顶部区域时，经常需要一些有辨识度的动态效果，但从零开始调参数很花时间。
React Bits 提供了一批可以直接使用和修改的动画组件、文字效果与背景效果，适合先找到接近的表达，再按项目需求调整。
查看仓库：
5. GSAP Skills
把 GSAP 的正确用法交给 AI。
时间线、滚动动画和文字特效，都是 AI 写前端时容易碰到、也容易写乱的部分。
这套 Skill 围绕 GSAP 的使用方式提供指导，帮助 AI 更有条理地组织动画代码。需要复杂动效时，比让它凭记忆拼 API 更有依据。
查看仓库：
二、让 AI 进入 3D 工作流
这是我自己最关心的一组。
做 Three.js 和 Blender 项目，难点经常不在渲染循环，而在前面的资产环节：模型从哪里来，材质怎么处理，动作怎么接，最后又怎么放进场景。
下面几个项目，正在尝试把这些环节接起来。
6. MCP for Blender
让 AI 通过文本指令操作 Blender。
创建场景、调整模型、设置材质，这些原本需要在软件里逐步操作的事情，可以开始通过 MCP 接入 AI 工作流。
对数字孪生、大屏这类项目来说，它的价值很直接：资产准备多了一条入口。
可以先从一个简单场景开始，看看哪些操作适合交给 AI，哪些地方仍然需要自己调整。
查看仓库：
7. dsh-blender-plugin
另一条 AI 驱动 Blender 建模的路线。
它提供建模工具和技能，尝试让 AI 参与实时建模过程。
如果正在探索 Blender 和 AI 的结合，可以把它与 MCP 方案放在一起试。真正需要比较的，是建模过程中能否顺手地调整、纠错和继续往下做。
查看仓库：
8. img2threejs
根据参考图，用代码重建 Three.js 对象。
它走的是代码生成路线：根据图像参考，在 Three.js 里重建 3D 对象，并围绕结果做质量检查和动画扩展。
对前端开发者来说，这种形式很有吸引力。产物本身就是代码，后续调整结构、参数和交互时，可以继续留在熟悉的开发环境里。
查看仓库：
9. Motion2MixamoRig
把视频中的人体动作接到角色骨骼上。
它关注的是动作重定向：从视频里提取人体动作，再应用到 Mixamo 绑定的角色上。
做角色动画或游戏原型时，可以把它作为低成本动作方案来试。相比单独生成一个模型，角色能不能自然地动起来，往往更影响最终观感。
查看仓库：
10. dioramas
把 3D 资产组织成可交互的网站。
它基于 Three.js 和 WebGL，关注的是如何用 AI 生成的资产搭建具有电影感的交互式 3D 网站。
偏展示型、品牌型的项目，可以参考它如何组织场景、镜头和交互。
前面几个项目更接近"资产怎么来"，它则把注意力往后推了一步：资产有了以后，怎么组成一个完整的体验。
查看仓库：
三、用代码做视频
前端写 HTML 和 React，本来就是在描述画面：元素放在哪里，用什么样式，什么时候出现，如何变化。
当时间也进入这套描述，代码就开始具备组织视频的能力。
这一组项目，把画面、镜头、动画和剪辑接进了编程流程。
11. HyperFrames
用 HTML 描述画面，再输出成片。
产品宣传、动态图形，这些内容都可以沿着这条路线来做。
它吸引我的地方是链路很短：AI 擅长生成 HTML，开发者也熟悉 HTML，画面的布局和样式可以继续用代码调整。
查看仓库：
12. video-shotcraft
给代码视频补上镜头语言。
这是面向 Claude Code 和 Codex 的视频 Skill，基于 Remotion，用代码组织产品视频，并提供镜头配方作为参考。
代码能让画面动起来，但镜头怎么接、重点怎么突出、节奏怎么安排，仍然需要方法。这类项目的价值，就在于把这些经验整理成 AI 可以使用的规则。
查看仓库：
13. lemo-opuscar
尝试用纯代码组织不同风格的短片。
它不依赖视频生成模型，而是围绕已有风格，用代码生成影片。
适合关注视觉风格和程序化表达的人去看：同一种内容，换一套构图、节奏和动画规则，最后会呈现出怎样不同的气质。
查看仓库：
14. mg-styles-15
把 MG 动画拆开，看风格是怎么写出来的。
它整理了 15 种 MG 动画风格，同时提供成片、提示词和源码。
适合拿来拆解学习：一种动画风格，到底由哪些字体、图形、节奏和运动方式组成；这些视觉选择，又是怎么落到代码里的。
查看仓库：
这些工具，指向同一件事
把三组放在一起看，方向其实很一致：前端工程师能覆盖的范围，正在变宽。
以前，设计、建模、动画和视频各自对应一套软件、一种工作方式。现在，越来越多环节开始有了 AI 能读取的规则、能调用的接口，以及能继续修改的代码。
这也是我收藏这些仓库的原因。它们让人有机会把原本分散的工作，接进同一条流程。
至于"不学就会失业"这类说法，我不太认同。
工具不会替你判断什么是好的设计，也不会替你决定一个大屏应该突出哪个指标。一个动画该不该加、一段镜头该停多久，最后还是要有人做判断。
真正拉开差距的，是能不能把这些工具接进自己的项目，并且知道哪里适合让 AI 做，哪里需要自己把关。
如果想从最贴近自己的场景开始，我会这样选：
- 做页面：先试 UI UX Pro Max，再用 Impeccable 评审和打磨。
- 做 3D：先把 Blender MCP 跑通，完成一个简单场景。
- 做内容：先用 HyperFrames 做一段短片，走完从代码到成片的过程。