AI Skills 目录

写给 AI 编程工具读的设计规则合集，现在有落地页设计、把静态设计做成动画两个 Skill。

• 动画与动效
• 界面与网页设计
• 前端开发

设计工程师 Emil Kowalski 把多年界面经验写成的 15 个 Skill，教 AI 做出更讲究的动效和界面细节。

• 动画与动效
• 界面与网页设计

35 种统一风格的图示模板，让 AI 生成带动效的流程图和结构图，也能导出静态图。

• 动画与动效
• 图表与流程图

用一句话让 AI 画出会动的架构图和流程图，导出成网页、图片或视频。

• 动画与动效
• 软件架构设计
• 图表与流程图
• +2

动效名称图鉴：看着样例挑出你想要的动画，再把准确的说法交给 AI。

• 动画与动效

让 AI 给网页加现成的 CSS 转场、把已有动画调顺，还能做出界面被 AI 现场生成的效果。

• 动画与动效
• 前端开发

LottieFiles 出的动效设计 Skill，教 AI 先想清楚情绪、时长和缓动，再给界面写动画。

• 动画与动效

6 个可单独安装的创作 Skill：口播视频网页、代码动效短片、网页设计、AI 生图、网页长文和本地资料检索。

• 动画与动效
• 界面与网页设计
• 前端开发
• +2

把位图 Logo 重建成平滑可编辑的 SVG，再编排成 Logo 动画，输出可重播的网页演示和预览。

• 动画与动效
• 品牌视觉设计
• 前端开发

让 AI 编程助手用代码画出会动的艺术动画和解说动画，内含 35 种画风配方。

• 动画与动效
• 视觉设计

GSAP 官方出的 8 个 Skill，教 AI 编程助手用对 GSAP，做网页动画和滚动效果。

• 动画与动效
• 前端开发

一套写给 AI 的网页设计规则，让 AI 做的页面在排版、字体、配色和动效上少一点模板味。

• 动画与动效
• 界面与网页设计
• 前端开发

把想搞懂或要规划的事讲给 AI 听，它画成一张能点、能缩放的互动图解网页。

• 动画与动效
• 图表与流程图
• 计划制定
• +1