AI Skills 目录

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

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

给编程智能体装上“耳朵”的 Skill：分析音频和视频里的声音，帮 AI 描述、挑选和对齐音效。

• 音频分析

让 AI 编程助手在你自己电脑上生成 3D 模型、工程图和打印文件的 Skill 插件，一套 12 个 Skill。

• 3D 生成

两个视觉生成 Skill：给文章做封面，给人、宠物或物品做风格头像。

• 视觉设计

选一个画风编号、一个排版图型和一个主题色，说出想画什么，就能拿到中英双语的生图提示词。

• 图像提示词设计
• 视觉设计
• 图像生成
• +2

让 AI 按设计规范做界面和组件，再用 52 项自动检查验收对比度、无障碍和手机适配。

• 决策辅助

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

• 前端开发
• 动画与动效

为中文文章设计白底手绘正文配图，由黑色小角色“小黑”在图里演出文章的关键观点。

• 插画制作

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

• 动画与动效

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

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

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

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

像导演拍片一样做网站：先写定艺术方向，再备素材、搭页面，最后用脚本查模板味和掉帧。

• 界面与网页设计
• 软件性能优化

教 AI 编程助手做出有原生质感的手机 App 界面，可选连接 Appllama 收费界面库，先研究畅销 App 再动手。

• 移动界面设计

111 个设计方法 Skill，分 9 个插件，覆盖用户研究、UI 与交互、设计系统、测试、交付和视觉评审。

• 界面与网页设计
• 视觉设计

把文章、报告或论文交给 AI，先定大纲和风格，再逐页生成整页图片，组装成 PPT。

• 演示文稿制作
• 图像生成

让 AI 给文章配图、做封面、漫画、信息图、幻灯片和小红书图卡，也能翻译和整理排版。

• 视觉设计
• 演示文稿制作
• 插画制作
• +2

把 Mermaid 图表代码变成带主题配色的 SVG、PNG 和终端字符图，本地渲染，不用浏览器。

• 图表与流程图

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

• 动画与动效
• 视觉设计

让 AI 把流程、结构和数据画成干净统一的图，还能套用你网站的配色和字体。

• 图表与流程图
• 界面与网页设计

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

• 动画与动效
• 前端开发

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

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

给 AI 编程助手配一套设计资料库，按你的项目配好风格、配色、字体和页面结构。

• 界面与网页设计

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

• 图表与流程图
• 计划制定
• 前端开发
• +1

给 AI 编程助手的设计指导：24 个设计命令加自动检查，让做出来的界面在排版、配色和布局上更讲究。

• 界面与网页设计
• 视觉设计

6 个 Skill 组成的一套，让 AI 把原型、线框图、计划和系统图做成能直接在浏览器打开的单个网页文件。

• 前端开发
• 图表与流程图

21 套手绘画风配方，按你选的风格生成生图提示词，再交给你常用的生图工具。

• 图像提示词设计
• 视觉设计
• 图像生成
• +1

把一张照片做成竖版杂志图：原照不动，下方配抽象的记忆色块和一句英文诗意标题。

• 视觉设计

让编程 Agent 把文字描述、代码库或基础设施配置画成可编辑的 draw.io 架构图。

• 图表与流程图
• 软件架构设计
• 代码质量与理解

让 Claude Code、Cursor 和 Codex 做出的网页界面不再千篇一律的设计 Skill。

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

用一到两种油墨色，把一个主题或一张照片做成有印刷感的编辑插画。

• 插画制作
• 视觉设计