内容
<p align="center">
<a href="https://aicanvas.me">
<img width="100%" alt="AI Canvas：开源动画React和Tailwind组件、设计系统和模板，可通过shadcn CLI或AI编辑器安装" src="https://ik.imagekit.io/aitoolkit/readme-banner.png" />
</a>
</p>
<h1 align="center">AI Canvas</h1>
<p align="center">
<b>开源动画React和Tailwind组件、设计系统和模板。</b><br/>
浏览、复制和部署。或者让您的AI编辑器为您安装。
</p>
<p align="center">
<a href="https://github.com/uiNerd16/aicanvas/stargazers"><img src="https://img.shields.io/github/stars/uiNerd16/aicanvas?style=flat&logo=github" alt="GitHub stars" /></a>
<a href="./LICENSE"><img src="https://img.shields.io/badge/License-MIT-A8B94D.svg" alt="License: MIT" /></a>
<a href="https://www.npmjs.com/package/@aicanvas/mcp"><img src="https://img.shields.io/npm/v/%40aicanvas%2Fmcp?logo=npm&label=%40aicanvas%2Fmcp" alt="@aicanvas/mcp on npm" /></a>
<img src="https://img.shields.io/badge/shadcn%20registry-%40aicanvas-000000.svg" alt="shadcn registry: @aicanvas" />
</p>
<p align="center">
<b><a href="https://aicanvas.me">在aicanvas.me浏览实时目录</a></b>
</p>
不断增长的动画React组件集合，以及基于令牌的设计系统和预制模板。每个组件都作为真实的源代码安装到您的项目中，其中许多组件包含用于Claude Code、Lovable和V0的复制提示。开源，MIT许可，免费开始。
## 安装
通过一条命令将任何组件添加到您的项目中：
```bash
npx shadcn@latest add @aicanvas/task-cards
```
启动新项目？先初始化，然后添加：
```bash
npx shadcn@latest init # 仅适用于新项目
npx shadcn@latest add @aicanvas/task-cards
```
### 三种使用方式
| 路径 | 命令或操作 | 最适合 |
| --- | --- | --- |
| **shadcn CLI** | `npx shadcn@latest add @aicanvas/<slug>` | 直接将完成且开源的代码放入您的仓库中 |
| **AI Canvas MCP** | `npx -y @aicanvas/mcp` | 让您的AI编辑器为您搜索和安装组件 |
| **与AI重构** | 从任何组件页面复制提示 | 在Claude Code、Lovable或V0中以您自己的方式重建组件 |
在 [aicanvas.me](https://aicanvas.me) 上浏览完整目录并复制任何组件的精确命令。 `pnpm dlx`、`yarn dlx` 和 `bunx` 也同样适用。
## 为什么选择AI Canvas
- **开源且免费开始。** 代码使用MIT许可，因此您可以将其用于个人和商业项目，自由修改，并无需署名即可部署。
- **完整的源代码，无锁定。** 每个组件都作为真实的React和TypeScript代码安装到您的代码库中，而不是黑盒依赖。您可以重新设计、扩展或直接部署它。它属于您。
- **为AI工作流构建。** 使用shadcn CLI安装，连接MCP以便您的代理为您安装，或为Claude Code、Lovable或V0提供复制提示。
- **默认动画。** 使用Framer Motion和Tailwind CSS构建，适用于Next.js App Router或任何现代React设置。3D组件使用Three.js。
AI Canvas免费开始。具有无限安装和完整设计系统及模板的Premium层即将推出。
## 特色组件
<table>
<tr>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/particle-constellation"><img src="https://ik.imagekit.io/aitoolkit/particle-constellation.png" width="200" alt="蜘蛛网" /></a><br/>
<a href="https://aicanvas.me/components/particle-constellation"><b>蜘蛛网</b></a><br/>
对光标做出反应的交互式丝网
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/cube-carousel"><img src="https://ik.imagekit.io/aitoolkit/cube-carousel.png" width="200" alt="立方体轮播" /></a><br/>
<a href="https://aicanvas.me/components/cube-carousel"><b>立方体轮播</b></a><br/>
可拖拽旋转的3D照片立方体
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/curious-ai"><img src="https://ik.imagekit.io/aitoolkit/curious-ai.png" width="200" alt="好奇AI" /></a><br/>
<a href="https://aicanvas.me/components/curious-ai"><b>好奇AI</b></a><br/>
跟随光标的变形3D AI球体
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/ripple-type"><img src="https://ik.imagekit.io/aitoolkit/ripple-type.png" width="200" alt="涟漪类型" /></a><br/>
<a href="https://aicanvas.me/components/ripple-type"><b>涟漪类型</b></a><br/>
在切换时产生涟漪效果的SVG文本
</td>
</tr>
<tr>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/product-card-deck"><img src="https://ik.imagekit.io/aitoolkit/product-card-deck.png" width="200" alt="产品卡片组" /></a><br/>
<a href="https://aicanvas.me/components/product-card-deck"><b>产品卡片组</b></a><br/>
可拖拽的卡片组
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/glass-music-player"><img src="https://ik.imagekit.io/aitoolkit/glass-music-player.png" width="200" alt="玻璃音乐播放器" /></a><br/>
<a href="https://aicanvas.me/components/glass-music-player"><b>玻璃音乐播放器</b></a><br/>
带有旋转黑胶唱片的玻璃迷你播放器
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/andromeda-button"><img src="https://ik.imagekit.io/aitoolkit/andromeda-button.png" width="200" alt="安德罗梅达按钮" /></a><br/>
<a href="https://aicanvas.me/components/andromeda-button"><b>安德罗梅达按钮</b></a><br/>
科幻蓝图按钮，五个变体
</td>
<td align="center" width="25%">
<a href="https://aicanvas.me/components/glass-dock"><img src="https://ik.imagekit.io/aitoolkit/glass-dock.png" width="200" alt="玻璃Dock" /></a><br/>
<a href="https://aicanvas.me/components/glass-dock"><b>玻璃Dock</b></a><br/>
类似macOS的Dock，带有光标放大
</td>
</tr>
</table>
在 [aicanvas.me](https://aicanvas.me) 上浏览所有组件。
## 与AI编辑器（MCP）一起使用
将AI Canvas连接到您的AI编辑器，让您的代理为您搜索、检查和安装组件。节省令牌。不要从头开始。
```bash
claude mcp add aicanvas -- npx -y @aicanvas/mcp
```
或将其添加到您的MCP配置中：
```json
{
"mcpServers": {
"aicanvas": {
"command": "npx",
"args": ["-y", "@aicanvas/mcp"]
}
}
}
```
与Claude Code、Codex、Cursor和其他MCP兼容的编辑器配合使用。服务器是只读的，并在运行时获取实时注册表，因此新组件在发布后不久就会到达您的代理。它返回已发布的组件源代码和复制提示。
## 设计系统和模板
除了独立的组件外，AI Canvas还提供了 **Andromeda**，一个基于令牌的科幻和蓝图设计系统，以及诸如任务控制、服务订单、资源规划和信号室等预制模板。安装Andromeda组件时会附带其源代码以及它所依赖的共享令牌包。
在 [aicanvas.me/design-systems/andromeda](https://aicanvas.me/design-systems/andromeda) 上查看它。
## 技术栈
React和TypeScript、Tailwind CSS和Framer Motion。适用于Next.js App Router，适用于任何现代React设置。3D组件使用Three.js。
## 项目状态
AI Canvas是一个积极维护的项目。新组件、设计系统和模板将定期发布。如果AI Canvas为您节省了时间，一个星标可以帮助更多构建者找到它。
[](https://star-history.com/#uiNerd16/aicanvas&Date)
## 贡献
AI Canvas在MIT许可下开源。问题、想法和拉取请求均欢迎。打开问题以建议组件或报告错误。
## 许可
MIT许可。在个人和商业项目中使用它，自由修改，并无需署名即可部署。参见 [LICENSE](./LICENSE)。
