gsap-skills —— 专门给 Cursor / Claude Code / Codex / Copilot 做的动画技能包。 ✅ 性能优化再也不用看 AI 写的 "PPT 式僵硬动画" 了。扔给 Agent 一句话，直接输出 GSAP 官方级专业动效：✅ Timeline 丝滑序列 ✅ ScrollTrigger 滚动叙事 ✅ Flip 流畅切换 ✅ SplitText 文字特效 ✅ MotionPath 路径动画 支持 React / Vue / Svelte / 原生 JS，而且完全免费！ 前端人速冲 👇

GSAP 官方出了 AI 技能包，专门教 AI 写动画代码。 以前让 AI 写 GSAP 动画，它经常用错 API、忽略 cleanup、把 ScrollTrigger 用成内存泄漏制造机。 现在官方把这些坑都封装成了 8 个技能，包括核心动画、时间线、滚动触发器、插件、性能优化、React/Vue/Svelte 框架集成。 安装方式： npx skills add 然后你的 AI 代理就能写出规范的 GSAP 代码了。 核心技能： - gsap-core：核心 API 用法 - gsap-timeline：时间线编排 - gsap-scrolltrigger：滚动触发动画（含刷新和清理） - gsap-plugins：全部插件用法（SplitText、MorphSVG、Flip 等，现在全部免费） - gsap-utils：工具函数 - gsap-react：useGSAP hook 和 context 管理 - gsap-performance：性能优化 - gsap-frameworks：Vue、Svelte 等框架用法 适用场景：当 AI 代理需要写网页动画时，直接让 AI 用这些技能，生成的是可维护、可运行的生产级代码，而不是靠猜的塑料演示动画。 支持 Claude Code、Cursor、Codex、Copilot、Antigravity 等 40+ 工具。 GSAP 本身 100% 免费，所有插件都已开源免费。

终于有一个 skill 能拯救 AI 的动画审美了！ GSAP 官方开源了 gsap-skills，专门为 Cursor、Claude、Copilot 等 AI 工具提供了专业的动画能力拓展和审美设计能力，前端 AI 动画的短板终于被彻底补齐～ 以前 AI 写动画经常像 PPT：僵硬、呆板、没质感 现在 AI 能写出专业的动效了：丝滑 Timeline、ScrollTrigger 滚动叙事、Flip 流畅切换、SplitText 文字动画、SVG 形变等等，质感提升明显。 需要提高你的ai审美的朋友们可以试试～ 地址：

给Codex 5.6搭配这四款前端设计工具，写出来的网页不再死板，自带高级质感！ 分享一套我实测效果拉满的Codex前端设计搭配方案： 1️⃣GSAP Skills 补足Codex缺失的专业动效能力，Timeline、ScrollTrigger、Flip、SplitText、SVG各类动画全都全覆盖 🔗地址： 2️⃣Figma（内置插件） 一键读取设计稿、品牌标准与组件素材，能将视觉参考精准复刻为适配多端的响应式代码，不用让Codex凭空脑补设计样式。 3️⃣Taste-Skill 专门管控字体搭配、色彩搭配、留白间距、圆角弧度与组件比例，还能对现有页面做审核重构，消除AI生成页面廉价塑料质感。 🔗地址： 4️⃣Product Design（内置插件） 先敲定产品整体架构与设计调性，再产出多款不同风格的高清设计参考图，敲定视觉风格后再编写代码，摆脱盲目写前端的问题。 搭配GPT-5.6原生更强的布局把控、视觉层次划分与设计判断力，一套完整顺滑的前端工作流直接成型！

🎬 炸裂，用写网页的方式做视频，代码一改画面就变 GitHub 上 4.19 万 stars 做一批格式统一的视频是件苦差事。一百个学员的结业证书视频、每天更新的数据播报、几十条只换文案和产品图的广告片，在剪辑软件里就是同一套模板改一百遍，改完还要一条条导出。 HyperFrames 换了个思路：视频用 HTML、CSS、媒体文件和动画来定义，渲染器开一个无头 Chrome 逐帧截图，再交给 FFmpeg 编码。这意味着做视频变成了写代码，批量生成就是跑个循环，改样式就是改一行 CSS。 动画不用重新学，GSAP、CSS 动画、Lottie、Three.js、Anime.js 和 Web Animations API 都有对应适配器，前端手上现成的东西直接能用。渲染能力给了三档：本地渲染、Docker 渲染，还有 AWS Lambda 分布式渲染，量大的时候直接横向铺开。 项目本身是完整的一套：命令行工具、核心解析和运行时、捕获引擎、制作管线、浏览器编辑器、播放器组件和着色器转场都在。要求 Node.js 22 以上，依赖 FFmpeg，Apache 2.0 协议。 会写网页就会做视频，这个门槛降得有点狠。 GitHub：

给 Codex 5.6 装上这 4 个前端插件，做出来的网页总算不像 AI 流水线上下来的塑料件了 我实测下来最顺手的一套 Codex 审美组合，直接说，顺序按我自己的重要度排： 1️⃣ Taste-Skill 专管字体、配色、留白、圆角、组件比例这些细节，还能把已经写好的页面拉出来审计再重构，专治那种一眼假的廉价 AI 味。 🔗 2️⃣ GSAP Skills Codex 最缺的就是动效这块，这个给你补齐，Timeline、ScrollTrigger、Flip、SplitText、SVG 动画全都能整。 🔗 3️⃣ Product Design） 先把产品结构和设计方向定死，再生成几套不同风格的高保真参考图，你点头了它才动手写代码，别再让它蒙着眼睛瞎写前端。 4️⃣ Figma 直接读设计稿、品牌规范和组件，把视觉参考像素级还原成响应式代码，省得 Codex 自己在那凭空猜你想要啥。 再叠加 GPT-5.6 本身在布局、视觉层级、设计判断上更能打，这一套下来，前端流程基本就跑通了，做出来的东西是真有点灵魂在的。

🛠️ 挑一个最近冲得猛的开源：taste-skill——一句话,给你的 AI 装上"审美",让它别再吐那种一眼假的模板 UI。 30.8k 星、2.3k fork,MIT 协议。 痛点很多人都懂:让 Codex、Claude Code 、Cursor、写前端,出来的十有八九是居中大标题、一排卡片、渐变按钮,能跑但一看就是"AI 味儿"。 这个项目是一组可移植的 Agent Skill,专治这个。核心不是给你套模板,是给 AI 三个可调的旋钮,让它自己拿捏分寸: DESIGN_VARIANCE — 布局激进程度,低是干净居中,高是不对称的现代排版 MOTION_INTENSITY — 动效深度,低到 hover,高到滚动联动、磁吸 VISUAL_DENSITY — 单屏信息量,低是留白呼吸,高是密集仪表盘 还硬性禁用 em-dash、内置 GSAP 动效骨架、带"重设计审计"流程,专门堵 AI 偷懒截断半成品 装法一条命令:npx skills add Notion/Linear 风、工业 brutalist 风、高级软性风各一个,还有几个只出参考图不写代码的,配 ChatGPT 生图用。React、Vue、Svelte 都吃,因为规则管的是设计意图,不绑框架。 适合: 用 AI 撸前端、但总嫌成品太"生成感"的 Codex / Claude Code 重度用户,想让它写出的界面能直接见人的 想给团队定一套 AI 出 UI 的统一底线的 🔗

有人用 Fable 5 搭了一个超级 Nice 的网站，平滑滚动、动画、过渡，全用 Fable 5 完成。 我试了一下，流程也不复杂： 1. 先去 Mobbin 或 Godly 找个你喜欢的网站风格，截图下来。 2. 去 Aceternity UI 或者 Magic UI 拖那些现成的动画块（滚动揭示、视差、渐变） 3. 把步骤 1 的截图和步骤 2 的组件引用放进去，告诉 Fable 5 你要哪些部分以及滚动行为，让它先规划再动手 4. 动画工具选择 首选 GSAP + ScrollTrigger：适合复杂视差、pin、scrub 动画 备选 Framer Motion：React 组件内用 whileInView + variants 更快，适合简单 reveal 5. 细化迭代。这一步就是根据你自己的感受继续去改善。比如说我自己的“Hero 的视差太快，把背景移动幅度减半”

推荐 @MengTo 为设计师和开发者们开源的 Skills MengTo 是 @designcodeio 和 创始人，在设计和开发结合方面有非常深的积累，他的分享必须关注起来，这个开源项目把设计指令、工作流、风格系统、抓取与调试经验都沉淀成了「四大类、75 个 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 = 操作规程”的写法。

AI 视频剪辑 Skill 分享「video-use」 @browser_use 团队推出的开源 Skill，定位为面向 AI Coding Agents（Codex、Claude Code、Cursor、Hermes Agent 等）的视频剪辑 Skill。它不做传统意义上的 Premiere / CapCut 替代品，它是一套让 LLM 通过 “阅读转写文本 + 按需可视化” 来理解视频、并调用 ffmpeg 等工具完成剪辑的 prompt-engineering + 工具脚本集合。 # 核心思想：LLM 不“看”视频，它“读”视频 第一层：音频转写文本（always loaded） 通过 ElevenLabs Scribe 获得逐词时间戳、说话人分离、音频事件标记（如笑声、叹息、掌声），打包成约 12KB 的 takes_packed.md。这是 LLM 的主要“阅读材料”。 第二层：视觉时间线视图（on demand） 仅在决策点（歧义停顿、重拍对比、切点校验）调用 timeline_view.py 生成胶片帧 + 波形 + 字幕的 PNG 复合图。 对比朴素方案“30000 帧 × 1500 tokens = 4500 万 tokens 噪声”，项目走的是 “12KB 文本 + 少量 PNG” 的轻量化路径。这与 Browser Use 让 LLM 读结构化 DOM 而非直接看截图的思路一致。 # 技术流水线：Transcribe → Pack → Reason → EDL → Render → Self-Eval 1. 转写 - transcribe. py / transcribe_batch.py 提取 16kHz 单声道音频，调用 ElevenLabs Scribe，缓存为 transcripts/.json 2. 打包 - pack_transcripts.py 将逐词 JSON 合并为按 0.5s 静音或说话人切换断句的 takes_packed.md 3. 决策 - LLM 自身 阅读 packed transcript，必要时用 timeline_view.py 可视化 4. 生成 EDL - subagents 输出 JSON 格式 edl.json，包含源文件、切点、节奏标签、引用、原因 5. 渲染 - render. py 分段提取 → 无损 concat → 叠动画 → 压字幕 → 响度标准化 6. 自评估 - timeline_view.py + LLM 在输出文件的每个切点 ±1.5s 检查跳帧、爆音、字幕遮挡，最多 3 轮 # 关键工程细节： ffmpeg 为主的剪辑实现 1. 分段提取 + -c copy 拼接（避免叠 overlay 时二次编码） 2. 每段边界 30ms 音频淡入淡出（消除切点爆音） 3. overlay 使用 setpts=PTS-STARTPTS+T/TB 进行时移，确保动画第 0 帧对齐输出时间线 4. 字幕始终最后叠加（防止被动画遮挡） 5. Master SRT 使用输出时间轴偏移：output_time = word.start - segment_start + segment_offset 6. 切点必须落在词边界，并加 30–200ms 填充以吸收 Scribe 50–100ms 的时间戳漂移 7. HDR 源自动 tone-map（HLG/PQ → Rec.709 SDR） 8. 竖屏源自动按高度缩放 9. 两-pass loudnorm：-14 LUFS / -1 dBTP / LRA 11，符合主流社交平台标准 # 动画与包装：多引擎并行 1. HyperFrames：HTML/CSS/GSAP compositions，适合产品 UI、网页转视频、动态排版 2. Remotion：React 组件化 compositions 3. Manim：数学/技术/3Blue1Brown 风格解释动画 4. PIL + PNG sequence + ffmpeg：简单卡片、计数器、打字效果 # SKILL.md 的 12 条“铁律”：生产正确性优先 1. 必须遵守的 12 条硬规则：字幕最后、分段提取再拼接、30ms 淡入淡出、PTS 时移、SRT 输出时间偏移、不切在词中、切点填充、逐词 ASR、缓存转写、并行动画、先确认策略再执行、输出在 /edit/ 2. 其余全部是可调整的“worked example”：调色风格、字幕分块、动画时长、节奏等都可按材料和用户品牌定制