1分钟认识13类常见Motion动效名称
文章指出在交互和视频制作中,单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题,文章推荐了一个简短的视频教程,该视频整理并演示了 13 类常见的 Motion 动效名称(如 Push Slide, Staggered Entrance, FLIP 等)。掌握这些标准术语,可以帮助用户更准确地向 AI、设计师或开发者表达需求,大幅提升沟通效率。
文章指出在交互和视频制作中,单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题,文章推荐了一个简短的视频教程,该视频整理并演示了 13 类常见的 Motion 动效名称(如 Push Slide, Staggered Entrance, FLIP 等)。掌握这些标准术语,可以帮助用户更准确地向 AI、设计师或开发者表达需求,大幅提升沟通效率。
作者分享在开发 APP 时使用的 Apple Design Skill,它将 Apple WWDC 设计分享中的界面与动效原则整理成 AI 指导,帮助改善界面层级、反馈和整体连贯性,效果接近苹果原生 App 风格。该 Skill 来自 Linear 设计师 Emil Kowalski 开源的 AI Agent Skills 项目(GitHub Star 近 4w),还包括设计工程总则、动画制作与审查、原型方案生成、移动端网页优化、Swift 编写、UI 组件库选择等多个实用 Skill,适合前端与设计开发场景使用。
本文是 Vibe Coding 网页动效词典的下篇,从第 37 个词继续,涵盖组件反馈、布局过渡与页面转场三大板块。内容包括折叠展开、锚定浮层、弹窗过渡、抽屉、标签页切换、轮播等组件动效;数字计数、骨架屏、加载指示、成功错误反馈等结果反馈动效;布局过渡、共享元素转场和页面转场等空间变化动效。每个词条均配有常见类型、适用场景和可直接使用的 AI 提示词示例,最后介绍第四层 UX 规则(反馈、操作暗示等),帮助零基础开发者用提示词驱动 AI 实现专业网页动效。
本文是Remotion入门系列的第一篇,介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例,包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓,说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点,帮助读者通过代码控制视频效果,更顺畅地与AI协作制作产品演示和口播动画。
作者分享了用 Claude 编写程序生成动画的完整攻略。Claude 不直接生成视频画面,而是通过写代码逐帧渲染视频。文章梳理了 4 条技术路线:代码生成视频(Remotion、HyperFrames、Manim 等)、网页即动画(Claude Artifacts、p5.js、Three.js)、通过 MCP 操作专业软件(Blender、After Effects),以及 AI 素材与代码组装的混合编排。同时总结 11 种动画风格,包括产品发布片、动态排版、数据信息图、数学讲解、名画风、生成艺术、3D 场景等,每种风格附样例、适用场景和工具推荐,并附有素材来源、提示词模板、做片流程和开源 skill,是一份可直接上手的实操指南。
作者整理了12个用 AI Agent 制作视频的 Skill,按使用场景分类:口播去口误工具(如 chengfeng-videocut-skills)、剪映自动化(jianying-editor-skill)、艺术风与知识动画(huashu-art-motion)、产品宣传片动效(HyperFrames、Remotion)、通用 ffmpeg 处理、长视频切短视频(OpusClip)等。文章介绍了各工具的安装方式、优缺点,强调分清本地与云端处理的隐私成本问题,并提醒第三方 skill 的安全审查和版本变化风险,适合视频创作者作为选型地图参考。
作者基于与多家顶级 AI 公司合作的观察,分享了用 AI Agent 提速营销团队工作的实战方法论。核心流程:1)从客户已有的真实问题出发(销售通话、支持消息等)寻找内容选题;2)为写作 Agent 配置产品文档、客户问题和团队偏好,并创建自定义 Skill 将用例转为演示脚本、问题解答文章等,每天通过 Slack 给每个成员推送相关选题;3)将 Devin 接入 Slack 营销频道,自动起草初版并汇报进度,衡量标准是好想法变成已批准工作的速度;4)用 Remotion、InVideo 等工具将一个好的演示制作成多个视频。
花叔开源了一个名为huashu-art-motion的动画skill,可用Claude Code等agent生成代码绘制场景、合成配乐的动画视频。文章展示了复刻Fable 5.5风格艺术穿越动画的过程,制作了一镜到底穿越20多种画风的片子,以及白板、Vox、3Blue1Brown等8种解说风格动画,适用于B站、YouTube科普和教程视频。skill内含几十张艺术风格卡、参考视频拆解方法和自动质检流程,已开源在GitHub,支持Claude Code、Codex、Cursor等工具安装使用。
作者认为写代码对程序员来说不是难题,真正卡住人的是审美——界面丑到连自己都不想打开。他分享了偷懒招数:把顺眼的 UI 组件当积木,丢给 AI Agent 自己翻、挑并塞进项目。文章推荐了 5 个 UI 组件资源网站:Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui,链接可直接扔给 Claude Code、Codex 等编码 Agent,让它们自动扒组件、抠代码、调样式并集成到项目中。作者强调不需要懂设计,只要知道在哪里能淘到好看的组件就够了。
作者认为做自媒体不需要安装大量花哨的 Skill,装得越多越容易迷失方向。在试用全网工具后,作者精选出 8 个最实用的内容流水线 Skill:全局军师(统筹内容生产全流程)、热点雷达(追踪爆款与痛点)、对标粉碎机(拆解头部博主套路)、排版印钞机(宝玉同款,自动配图与多平台排版)、卡片神器(归藏出品,长文转爆款组图)、小红书操盘手(小红书文案与运营)、长视频解剖刀(视频转字幕与摘要)、AI 视频分镜师(自动生成视频脚本与分镜)。文章旨在帮助自媒体创作者精简工具、搭建高效内容生产线。
本文是网页动效词典系列的中篇,从第 17 到第 36 个动效词条,系统讲解了三大类网页动效:进阶文字动效(按字符显现、打字机、乱码解码、文字变形)、滚动与空间动效(视差滚动、多层视差、横向滚动、滚动缩放、固定式滚动叙事、图片序列、滚动吸附、进度提示)以及鼠标与指针动效(磁吸按钮、倾斜卡片、光标跟随、聚光灯、跟随眼睛、光标拖尾)。每个词条都说明了效果原理、常见类型、适用场景,并附上可直接使用的 AI 提示词,帮助开发者用 vibe coding 方式实现精致的网页交互效果。
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻:高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻(WebGL+GLSL 技术栈)以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论,如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等,并分享核心提示词「一边参考原片一边修改直到近乎一样」,总结 AI 自查与人工定点反馈两种协作路径,附通用 Prompt 模板与止损建议,展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
作者整理了自己收藏的大量前端 UI/UX 设计资源,并借助 Codex 分类归纳,形成一张面向实际工作的资源地图。文章将设计资源分为五类:真实产品案例(UXSnaps、Mobbin、SaaSFrame)、设计模式与拆解(Design Spells、Component Gallery)、设计系统与 Design Token、组件实现(Base UI、React Aria、shadcn/ui 等)以及质量验收(WCAG 无障碍、性能测试)。作者强调有效的使用顺序是:真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收,帮助读者从'抄视觉'升级为'有理由的设计'。