一、这期视频的核心观点：AI 做 UI，精致感常输在「没有动效」

视频讲了两件很小的事：动态图标。AI 生成的页面（和人手写的）最大的通病是「图标全是静止的」——菜单就是三条杠、开关就是一个圆，点一下硬切。视频给的两个库恰好覆盖两类动效需求：Morphicons 管「状态之间自然变形」，Lordicon 管「操作完成后的动效反馈」，再配一条纪律：动态图标别铺满，只给最常点击、最需要反馈的几个位置。最后视频说作者把这两条规则整理进了一套 UI 设计 Skill，让 AI 做页面时按场景自动选动效（视频未给该 Skill 具体地址，本文不挂链接）。

两个库都实查属实，但口播的二分法要修一下——见第四节的实查修正。

二、Morphicons：它不是图标库，是「图标变形引擎」（开源 · MIT）

Morphicons（npm 包 morphicons，MIT 开源，核心 gzip 后约 6.5 KB、零运行时依赖）解决的是口播说的第一件事：图标状态之间不硬切，而是线条移动旋转、重组成新图标。菜单变关闭、播放变暂停、太阳变月亮、空心圆收成对勾——这些全是「同一位置反复切换状态」的场景，放在按钮、导航栏、播放控件、深浅色开关上效果最好（口播这段描述属实）。

它跟普通「两个 SVG 叠一起交叉淡入」的方案区别在技术实现上：库用 2D Procrustes 在闭式解里求出两个形状间的最优相似变换（旋转 + 缩放 + 平移 + 形变），所以 arrow-right → arrow-down 会自动转 90°，不需要人手写旋转分组；弹簧动画（smooth / snappy / bouncy 三个预设，可自定义刚度阻尼）可中断——连点一下，动画从当前中间形状重新规划并保留速度，不跳变。三种用法：非受控（改个 prop 就自动变形）、受控（传 0-1 进度，跟手势 / 滚动走）、命令式（ref 调 morphTo()）。React / Vue / Svelte / React Native / Astro / 纯 JS 都有入口，图标数据直接吃 d 属性或 Lucide 节点格式——它本身不带货图标，图标你随便用 Lucide、Tabler、Heroicons 的，它只负责两图标之间的变形。

三、Lordicon：人手做的动态图标库（商用 · 免费层 9,700+）

Lordicon（Poland 团队，Wrocław）是口播说的第二件事：自带一段完整动画的成品图标——点击发送纸飞机飞出、加载时循环转、清空后空状态图标轻晃，颜色和线条可按页面主色调。官网实查：动态图标总量 47,900+（持续增长，不同页面快照在 43,000~48,000 之间），分三个家族：Wired（~39K，装饰感、表现力）/ System（~2K，极简、清晰）/ Doodle（~6.5K，手绘涂鸦风）；9,700+ 免费、无需登录，全库为付费。

两个细节值得记：① 官方强调 每个图标都是人手做的（纸笔草图 → Figma 描矢量 → After Effects 逐帧调节奏，「No generated shortcuts」），不是 AI 批量生成——这条跟现在遍地 AI 生成素材的市场正好反着来；② 导出格式很全：Lottie / GIF / MP4 / WebP / APNG / SVG / PNG / AEP / MOGRT / 内嵌 HTML，颜色、线宽、速度、尺寸都可调，接入走 npm install @lordicon/element 一个自定义元素 + Figma / WordPress 插件。常用场景（口播的发送 / 加载 / 完成提示 / 空状态页 / 产品介绍）就是它的官方主打场景。

四、口播二分法的实查修正：Lordicon 自己也有 Morph 状态

视频给的搭配原则是「两状态反复切换用 Morphicons，一次性操作反馈用 Lordicon」，方向对，但按官网实查要修两处：

  • Lordicon 的动画状态本来就含 Morph（官方列了 Intro / Hover / Morph / Loop 等）——也就是说「图标 A 变图标 B」这件事，Lordicon 库里也有人做好的成品，只是你得库里恰有那对图标。所以真正的分工不是「变形 vs 反馈」，而是：你项目里用的图标集（Lucide / Tabler 之类）内部互切 → Morphicons 引擎；要成品动态图标（纸飞机、循环加载、空状态轻晃这种带叙事的）→ Lordicon。一个是「运动方式」，一个是「带动画的图标素材」，层次不同；
  • 「动态图标别铺太多」这条纪律是视频最有价值的一句：动效是调味料不是主菜，只给最常点击、最需要反馈的几个位置（发送、提交、主开关、加载态），全页铺满反而廉价。

五、放进 AI 工作流怎么用（含视频结尾那个 Skill 的定位）

  • 让 AI 出页面时选对动效，给模型一条选择规则就够了：「图标需要在两个状态间反复切换（菜单/关闭、播放/暂停、明暗开关）→ 用 morphicons + 项目的描边图标集；用户完成一次性操作需要明确反馈（发送、加载、成功、空状态）→ 从 Lordicon 挑一个成品图标（Lottie 或 GIF 最省事）」；
  • 视频说作者把这两条规则整理进了一套 UI 设计 Skill，让 AI 做页面时按场景自动选——这就是「规则沉淀成 Skill」的典型小例子：视频没给 Skill 地址，本文不挂；但思路可以直接抄：把「两状态切换 → morph、一次性反馈 → lordicon、动效只给 3-5 个关键位置」写成一段 prompt 规则喂给 AI 出 UI，效果就到位；
  • 性能账：Morphicons 核心 6.5 KB + 单 rAF 调度全页图标 + 自动 reduced-motion 支持（残障用户直接瞬切），移动端不心疼；Lordicon 用 Lottie/JSON 格式比 GIF 体积小，APNG/MP4 给非 Web 场景。

成本：Morphicons MIT 开源免费；Lordicon 免费层 9,700+ 图标够小项目用，全库 47,900+ 是付费订阅（价格在官网内看）。

数据红线：两个库的功能 / 体积 / 图标总量 / 格式 / 协议均以 morphicons.com、lordicon.com 官网与 npm 实查为准（2026-09-27）；「两状态反复切换用 Morphicons、一次性反馈用 Lordicon」为视频口播原则，实查修正见第四节（Lordicon 官方动画状态本身含 Morph）；视频结尾的「UI 设计 Skill」未给具体地址，本文不挂链接。