Lightswind-UI-Library

160+ 动效 React 组件，复制即用，AI 助手直接调用

开源 🏷️定价信息待确认 ⏳ 访问状态待核验设计创意 🍴 复刻 129 🐛 待处理 2 👀 关注 6

访问官网 ↗ GitHub ↗

GitHub 星标 ★ 1251

维护状态活跃

是否开源开源

定价模式 🏷️定价信息待确认

项目预览

Lightswind-UI-Library 项目界面预览图 — 图片来源：项目官网

项目数据

分类设计创意

开发团队codewithMUHILAN

官网地址https://lightswind.com

GitHubhttps://github.com/codewithMUHILAN/Lightswind-UI-Library

定价模式🏷️定价信息待确认

价格说明定价信息待确认

访问状态⏳ 访问状态待核验

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型ai-native,animated-components,component-library,design-system,framer-motion,frontend,gsap,lightswind-ui,mcp-server,nextjs,react,tailwindcss,typescript,ui-library,vite

GitHub 星标★ 1251

上线时间2023-07-11 00:00:00

代码更新2026-10-30

仓库体积258.1 MB

本站数据更新2026-11-01

维护状态活跃

收录时间2026-11-01

浏览次数0

项目介绍

Lightswind UI Library 是一个面向 React 生态的 AI 原生、CLI 优先组件库，提供 160 多个带动画、可访问且可直接用于生产环境的界面组件。它解决的是传统组件库样式固化、定制成本高、与 AI 编程助手协作不畅的问题：组件采用复制粘贴式架构，代码直接进入你的项目，所有权归你，便于深度改造而无需与库版本绑定。核心能力包括：通过 CLI 快速拉取组件；内置 Framer Motion 与 GSAP 驱动的动效；遵循无障碍规范；提供 MCP Server 支持，可被 Cursor、Claude、GitHub Copilot 等 AI 编程工具调用，让助手直接理解并生成符合该库规范的界面代码。技术栈为 TypeScript，适配 Next.js 等现代前端框架，适合追求视觉表现力与 AI 辅助开发效率的团队。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-11-01 · 当前星标 ★ 1251

技术标签

ai-native design-system frontend mcp-server nextjs

使用教程

ℹ 本教程由 AI 依据该项目 README 整理，个别步骤可能需要按你的环境微调。

难度：入门约 10 分钟部署方式：命令行工具 6 步

环境要求

Node.js 环境（需支持 npx 命令）
一个已有的 React 项目（README 技术栈为 Next.js / TypeScript）
可选：支持 MCP 的 AI 编程工具（Cursor、Claude、GitHub Copilot）
可访问 npm 源以拉取 lightswind CLI 包

安装与启动步骤

1检查 Node 环境

在项目根目录确认 node 与 npx 可用，组件通过 npx 拉取，无需全局安装。
```
node -v
npx -v
```
2初始化组件库

运行官方 init 命令，把配置文件与基础组件结构写入你的 React 项目。
```
npx lightswind@latest init
```
3浏览并拉取组件

在官网组件库页面挑选组件，按该组件页面给出的 CLI 命令复制到本地项目执行。
4自动配置 MCP

让 CLI 自动识别你的编辑器并写入对应的 MCP 配置文件，供 AI 助手调用。
```
npx lightswind mcp init
```
5手动配置 MCP

若自动检测失败，按官网 MCP Server 文档的 Manual Configuration 章节手动写入编辑器配置。
6在项目中改造组件

组件源码已落在你项目内，直接打开文件按业务需求改样式与交互，不与库版本绑定。