让 Claude 帮你做动效设计！这个开源技能包有点东西

你有没有这种感觉——同样的功能，加了动效之后，整个产品像是被点亮了？

那种「流畅的弹性」、「点击时的微妙反馈」、「滚动时的优雅过渡」……动效做对了，产品从「能用」直接跃升到「让人想用」。但问题是：大部分人不知道怎么做，不知道怎么让 AI 帮你做。

最近挖到一个开源项目叫 Genjutsu，专门解决这个痛点——让 Claude 真正懂得「动效设计」，而不是生成一堆生硬的 CSS 动画。

🎭 它能做什么

Genjutsu 是一套为 Claude Code 和 Claude.ai 打造的专业创意编程技能包，核心理念是把界面从「功能型」变成「体验型」。

覆盖平台超广：

• Web（React、Vue、Svelte、纯 CSS、Three.js、Canvas）
• Android（Jetpack Compose、Compose Multiplatform）
• Apple（SwiftUI，iOS + macOS）

不管你用什么技术栈，Genjutsu 都能接管动效设计这块。

⚡ 两个核心命令

/genjutsu:cast —— 改造现有界面

适合场景：「给这个下拉菜单加点弹性」「做个滚动驱动的动画」「让按钮点击有反馈感」

流程是：扫描技术栈 → 评估范围 → 提出交互方案 → 加载子技能 → 实施 → 完成后 mini 审计（reduced-motion、退出动画、卡顿、布局性能）。

/genjutsu:paint —— 从零打造视觉语言

适合场景：「给我设计一套品牌视觉系统」「做一个有独特气质的登录页动效」

流程更完整：先头脑风暴 → 定义视觉+交互理念 → 生成设计系统文件 → 实施 → 全面审计（动效缺口、无障碍、颜色一致性、响应式、性能）。

生成的设计系统文件是持久化的，Web 用 Tailwind/CSS，Android 用 Theme.kt，Apple 用 Color+App.swift——直接进你的代码库，不是飘在外面的设计稿。

✨ 亮点细节

最戳我的是它的工作方式——先提案，再实现。Genjutsu 不会上来就写代码，而是先告诉你「我打算怎么做，用什么方式实现」，等你点头才动手。这完全改变了人和 AI 在设计上的协作模式。

审计功能也很实用，15 个模块覆盖 foundations、Web、Apple、Android 四个家族，常见动效场景基本都封装好了。

🔧 怎么安装

Claude Code 用户一行命令搞定：

npx skills add athevon/genjutsu

或者从插件市场安装：/plugin marketplace add athevon/genjutsu

文档和官网在 genjutsu.athevon.dev，写得很清楚，入门成本极低。

288 GitHub ⭐，8 月 26 日刚更新，活跃度拉满。想让 AI 真正帮你做好动效设计，而不只是生成一堆没有灵魂的 CSS keyframes？Genjutsu 值得试试。

👉 GitHub 仓库直达

GitHub: https://github.com/AThevon/genjutsu