MengTo/Skills · 上手攻略

仓库：MengTo/Skills
链接：https://github.com/MengTo/Skills
分类：academic-writing
作者：Tom
更新：2026-08-08

这是什么

MengTo（梦溪）是一个设计圈知名创作者（著有《Design + Code》），其 Skills 仓库是一套精选的 AI Agent Skill 集合，专门服务设计师和开发者使用 Codex、Claude、Cursor 等 AI 编码工具构建高质量 UI、游戏和前端工作流。

每个 Skill 是一个独立文件夹，内含 SKILL.md（技能定义）、可选的 REFERENCES.md、ARTICLE.md、示例素材和演示代码。118 个 Skill 覆盖五大方向：运营设计、游戏开发、UI/UX 动画、Web 动效和开发工作流。

解决什么问题

AI 生成结果不稳定：设计师给 AI 一个简单提示，得到平庸的设计——Skill 提供结构化、分步骤的工作流，让 AI 输出可预测。
设计到代码的断层：设计师想要一个动画/动效，开发者需要反复沟通细节——Skill 把设计意图转成精确的构建指令。
重复劳动：每次做 landing page、Three.js 敌人系统、GSAP 动画都要重新写提示词——Skill 把最佳实践固化成可复用文件。
设计资产沉淀难：好用的 prompt、工作流、设计系统没有结构化存储——Skill 用版本化文件夹的方式持久化。

快速安装

MengTo/Skills 本身不需要"安装"，而是被其他 AI 工具引用。核心用法是把对应 Skill 的 SKILL.md 内容加载进 AI 对话。

在 Claude Code 中使用

在任意对话中，直接把 Skill 文本粘贴进去，或者引用：

Please use the video-to-superprompt skill from https://github.com/MengTo/Skills/blob/main/agent-skills/codex/video-to-superprompt/SKILL.md

在 Codex / Aura Build / Lovable 中使用

参考 CLAUDE.md 约定，在项目根目录的 AGENTS.md 中声明引用的 Skill 路径，AI 启动时自动加载。

查看全部 118 个 Skill

git clone https://github.com/MengTo/Skills
cd Skills
find agent-skills -name SKILL.md | sort | head -50

核心 Skill 详解

旗舰级：Video to Super Prompt

把参考视频（设计稿、落地页、动画）转成超详细复现提示词，供 Fable 5 / Aura Build 等工具一键生成页面。

最小可跑命令：

# 克隆仓库
git clone https://github.com/MengTo/Skills
cd Skills

# 检查视频信息（ffprobe）
ffprobe -v error -show_entries format=duration,size:stream=width,height,r_frame_rate -of json "video.mp4"

# 提取关键帧（每 1 秒一帧）
mkdir -p /tmp/video-frames
ffmpeg -y -i "video.mp4" -vf fps=1 /tmp/video-frames/frame-%03d.jpg

# 交给 AI（复制 SKILL.md 内容 + frames 目录给 AI 看）
cat agent-skills/codex/video-to-superprompt/SKILL.md

核心设计类 Skill

Skill	用途
`html-to-interaction-prompts`	把现有 HTML 页面拆成"一个动画 / 一个按钮 / 一个 hover 状态"的独立提示词
`stitched-full-page-capture`	截取整个落地页而非只有 hero，给 AI 全页面参考
`daily-ui-inspiration-capture`	抓取 5 个优秀落地页 → 转成 prompt 包，形成持续灵感循环
`build-awwwards-quality-sites`	构建 Awwwards 级别网站的工作流

游戏开发类 Skill

Skill	用途
`build-isometric-arpg`	等轴测 ARPG 游戏架构
`build-threejs-enemy-systems`	Three.js 敌人 AI 和动画系统
`author-game-levels`	程序化生成游戏关卡
`test-playable-web-games`	游戏可玩性 QA 流程

动画 / 动效类 Skill

Skill	用途
`gsap`	GSAP ScrollTrigger 最佳实践
`threejs`	Three.js 场景搭建规范
`matterjs`	Matter.js 物理引擎集成
`animation-on-scroll`	滚动驱动动画
`cobejs`	Globe.gl 3D 地球可视化
`unicorn-studio`	Unicorn Studio 动画工作流

运营 / 开发工作流 Skill

Skill	用途
`audit-verify-explain-grade-5`	审计 AI 输出、验证声明、简单解释结果
`browser-video-recording`	从脚本 UI 场景渲染精美屏幕录制视频
`article-prompts-to-skills`	把文章和 prompt 包转成聚焦的验证技能包
`optimize-web-animations`	分析并减少动画、Canvas、WebGL 性能开销
`elevenlabs-tts`	生成 ElevenLabs 语音旁白

Skill 文件结构约定

agent-skills/<category>/<skill-name>/
├── SKILL.md        # 必选：frontmatter + 工作流（AI 加载此文件）
├── REFERENCES.md   # 可选：外链列表（保持 SKILL.md 精简）
├── ARTICLE.md      # 可选：长篇解释
├── assets/         # 可选：图片、模板、示例
├── scripts/        # 可选：辅助脚本
├── demo/           # 可选：视觉 / 交互演示
│   ├── index.html  # 独立 HTML/CSS/JS 演示
│   └── PROMPT.md   # 精确复现和改编提示词
└── demo/
    ├── input.md              # 虚构输入
    └── expected-output.md    # 预期输出（handoff 约定）

Frontmatter 约定（SKILL.md 顶部）：

---
name: video-to-superprompt
description: Turn a reference video into a super detailed recreation or inspiration prompt.
---

坑与注意

Skill 是"提示词"不是"代码"：Skill 定义的是 AI 工作流程，不是可独立运行的程序。你需要配合 Codex / Claude / Cursor 等 AI 工具才能使用。
部分 Skill 需要额外 API：如 elevenlabs-tts 需要 ElevenLabs API Key，gsap 等动画 Skill 依赖对应的第三方库许可证。
Video to Super Prompt 对视频质量有要求：分辨率低、帧率不稳定、镜头快速切换的视频，分析质量会明显下降。
游戏 Skill 主要面向 Web 游戏：Three.js / Matter.js / GSAP 都是 Web 端技术栈，桌面/移动原生游戏 Skill 较少。
仓库无 CI/CD：Skill 质量由作者个人维护，无自动化测试，引用前建议自己读一遍 SKILL.md 确认逻辑。
部分 Skill 依赖 Awwwards 类设计审美：如果你目标用户是 to B 企业产品，部分 Skill 的设计方向（炫酷动效、高端品牌感）可能过于强调视觉而不够实用。
中文资料少：MengTo 本身英文为主，中文社区对大部分 Skill 的使用经验分享较少，遇到问题需要直接读 SKILL.md。

与同类对比

仓库	Skill 数量	专注方向	AI 兼容性	维护状态
MengTo/Skills	118	设计/UI/游戏/Web 动效	Codex / Claude / Cursor	活跃（MengTo 个人维护）
`antfu/skills`	~50	DX / 工具链 / 现代前端	Claude / Codex	活跃
`Jeffallan/claude-skills`	66	全栈开发	Claude Code	活跃
`awesome-agent-skills`	300+	汇总合集	多	纯索引
`stitch-skills`	MCP 工具集	Stitch MCP	Stitch	活跃

MengTo 的差异化在于设计深度：设计师视角的动效、Three.js、可视化类 Skill 占比高，而非通用开发任务。

一句话推荐结论

如果你是一名设计师或全栈开发者，想让 AI 产出 Awwwards 级别或设计杂志水准的 UI/动效/游戏，MengTo/Skills 是目前设计导向最纯粹、Skill 数量最丰富的参考库——直接挑一个最接近你需求的 Skill，把 SKILL.md 扔给 AI，效果立竿见影。