产品人人都是产品经理·莹柳设计··AI 生成
我用 Codex 调用这个动效Skill，不用手写复杂代码，一句话生成高级创意动画！
本文介绍了一个名为「p5-animation」的AI技能（Skill），用户只需在Codex或豆包等Agent中输入一句话（如「蓝色的雨帘，密集一点」），即可自动生成对应的P5.js动画代码或直接输出动画效果。作者演示了珠帘、花枝生长、飞燕飞舞三个基础动效，以及「鹿角开花」「头饰珠帘」两个创意组合案例。文章核心价值在于展示了「自然语言 → 生成式动画」的低门槛工作流，但本质是工具使用教程，缺乏对底层技术原理或设计方法论的分析，适合想快速尝试AI生成动效的设计师或前端爱好者快速入门。原文 ↗原文 ↗
核心观点
- ▍作者Livo开发的「p5-animation」Skill，允许用户通过自然语言一句话在Codex等Agent中生成P5.js动画代码或直接输出动画效果，无需手写复杂代码。
- 01下载方式：让Codex直接安装使用该Skill，或通过豆包等Agent使用。
- 02基础动效示例1：输入「/p5-animation 蓝色的雨帘，密集一点，做成动画效果」可生成具有真实物理效果的珠帘动态。
- 03基础动效示例2：输入「/p5-animation 5条自然生长的花枝，做成动画效果」可生成自然生长的树枝和花动画。
- 04基础动效示例3：输入「/p5-animation 30只黑色飞燕，做成动画效果」可生成自由飞舞的飞燕动画。
- 05创意动效案例1「鹿角开花」：将自然生长的花枝动效叠加到一张鹿的图片上，形成动态效果。
- 06创意动效案例2「头饰珠帘」：将珠帘动效与头饰图片结合，生成类似自然生长的动态效果。
反方 / 局限
- — 作者提醒：使用动效时注意不要影响页面加载速度、信息阅读和操作体验，隐含了过度使用动效可能带来的性能与可用性问题。
概念锚点
前置背景
平行视角