A micro-interaction motion pattern library for AI agents: 16 production-ready web animation patterns — magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more — with copy-paste code and live demos.
Make my landing page feel alive — add a magnetic CTA button, smooth scroll reveals, and a marquee stats counter.
你能得到
- SKILL.md with 16 production-ready web micro-interaction patterns: magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more
- references/ with implementation guides and usage notes for each pattern
- Two live demo pages in examples/ you can open in the browser
- Copy-paste-ready code snippets for real projects
适合场景
- Perfect for landing pages, marketing sites, and portfolios that need delightful, polished motion. Great for designers and developers who want proven interaction patterns instead of building animations from scratch.
不适合
- Not for full 3D/WebGL scenes or game-like physics simulations. Assumes you can add custom CSS and JavaScript to your pages — not a no-code page-builder asset.
- 名称
- Micro Interaction UI
- 下载数
- 0
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: Initial release — v1.0.0. Ships SKILL.md with 16 production-ready web micro-interaction patterns (magnetic buttons, scroll narratives, 3D tilt cards, marquee counters, and more), references/ with per-pattern implementation guides, and two live demo pages in examples/.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip micro-interaction-ui-v1.0.0.zip -d ~/.claude/skills/micro-interaction-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
喜欢这个免费 skill？Premium 解锁 28 个独家 skills。
一次订阅，解锁全部高级 skill、prompt 和内容包，以及未来的每一期新品。
评价
相关技能
Claymorphism UI
Claymorphism UI
Design websites in the Claymorphism style — puffy inflated 3D surfaces like modeling clay, pastel colors, big rounded corners, triple-layer shadows (soft outer drop + inset top-left highlight + inset bottom-right shade), rounded display type, and springy bouncy motion.
Claude Code · Codex · Cursor · Copilot +3
Emil Kowalski Design Skills
Emil Kowalski Design Skills
Give your coding agent taste. 11 design-engineering skills from Emil Kowalski (ex-Vercel, ex-Linear) — animation decisions, motion review, Apple design principles, and UI polish. MIT-licensed, curated with attribution.
Claude Code · Codex · Cursor · Copilot +3
Aurora-Glass UI Design
Aurora-Glass UI Design
Dark, high-motion landing pages in the aurora-glass language — drifting multi-color aurora gradients, frosted-glass cards, glow CTAs, mouse parallax, canvas waveforms. Ships tokens, components, snippets, and an animated Prismwave demo.
Claude Code · Codex · Cursor · Copilot +3
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1