# MengTo 开源 75 个 AI 智能体技能包，含设计指令与工作流

- 来源：meng shao (@shao__meng)
- 发布时间：2026-07-15 18:11
- AIHOT 分数：38
- AIHOT 链接：https://aihot.virxact.com/items/cmrlxec8v0164bi5knljsyo7r
- 原文链接：https://x.com/shao__meng/status/2077335188666044426

## AI 摘要

设计师与开发者 MengTo 开源了包含 75 个 Skills 的项目，将设计指令、工作流和风格系统沉淀为可复用的 AI 智能体技能包。项目涵盖 10 个 Codex 工作流（如从参考视频一键生成 HTML）和 62 个网页设计技能，并提供“design-first-ui-prompting”方法论，通过固定 prompt 骨架和变体迭代提升输出质量。

## 正文

推荐 @MengTo 为设计师和开发者们开源的 Skills

MengTo 是 @designcodeio 和 http://aura.build 创始人，在设计和开发结合方面有非常深的积累，他的分享必须关注起来，这个开源项目把设计指令、工作流、风格系统、抓取与调试经验都沉淀成了「四大类、75 个 Skills」
https://github.com/MengTo/Skills

1. Codex workflows - 10 个
可复用的 Agent 操作流程（抓取、转 prompt、性能剖析、内容生产）
video-to-superprompt、stitched-full-page-capture、html-to-interaction-prompts、daily-ui-inspiration-capture、optimize-web-animations、performance-profiling

2. Media - 2 个
按用途/裁切/比例挑选高质量图片素材
aura-asset-images、unsplash-asset-images

3. UI - 1 个
"像设计系统一样写 prompt"的方法论
design-first-ui-prompting

4. Web design - 62 个
落地页结构、动效系统、WebGL/3D、CSS 处理、布局系统、视觉风格
landing-page、pricing-page、gsap、threejs、tailwindcss、animation-on-scroll、globe-gl、cobejs、vantajs、progressive-blur、css-border-gradient、各种 dark/glass/skeuomorphic 风格包 …

旗舰工作流：从参考视频到一键 HTML
1. video-to-superprompt -- 输入一段参考视频（设计稿/落地页/动画录屏），用 ffprobe+ffmpeg 抽帧，按"故事 / 布局 / 运动 / 视觉 / 技术重建 / 可访问性"六层分析，输出一个长到不看原视频也能重建的 paste-ready prompt，明确点名 GSAP ScrollTrigger、Lenis、Three.js、video.currentTime scrubbing 等具体机制。
2. html-to-interaction-prompts -- 把已有 HTML 页面（如 Aura Build 产物）拆成"单段/单动画/单按钮/单 hover/单 WebGL 效果"的可复用 prompt 文章。
3. stitched-full-page-capture -- 解决 Framer 等懒加载/滚动动画站点 fullPage 截图发白的痛点：滚动预热 → 视口分步截图 → 垂直拼接 → 用拼接图重切 section crop，并写回 manifest。配套 Playwright + ffmpeg 脚本。
4. daily-ui-inspiration-capture -- 把"浏览 + 抓取 + 参考研究 + prompt 生成"组合成每日自动循环，产出 prompt pack。

两个值得细读的 Skill 范式
1. design-first-ui-prompting 给出了一套固定 prompt 骨架：GOAL → FORMAT → LAYOUT → TYPE SYSTEM → COLOR+MATERIAL → IMAGERY → COPY → CONSTRAINTS → NEGATIVE PROMPT，并强调三个关键技巧：
· "Variants > rerolls"：先锁定布局+层级+文案，再每次只改一个变量（角度/强调色/卡片排布/背景调子）。
· 2-pass 字体工作流：模型常拼错字时，先无字生成留出文字安全区，再回 Figma 排版。
· Constraints card：用 FONT / STYLE / MODE 三行小面板像 mini style guide 一样锚定输出。
2. landing-page 则示范了一个"设计 + 转化 + SEO"三合一 SOP：先收集页面目的/受众/证据/约束，再给核心结构（首屏 5 要素 → 中段论证 → 底部异议处理），列出 4 种布局选型、6 条高转化策略、headline/CTA 文案模板、逐节迭代顺序、SEO/AEO 清单和常见坑--典型地体现了"Skill = 操作规程"的写法。