Animal-Island-UI

animal-island-ui 是一个基于 React + TypeScript 构建的轻量级 UI 组件库。它的视觉设计灵感来源于任天堂热门游戏《集合啦！动物森友会》，所有视觉元素、布局和动画均由开发者独立设计与实现，并未直接使用任何官方美术素材。目前该项目在 GitHub 上已斩获 3851 个 Star。

亮点

• 动森风格视觉：圆角、柔和配色与可爱动画，完美还原《集合啦！动物森友会》的治愈系游戏界面风格。
• 技术栈扎实：基于 React + TypeScript 构建，包含 28 个组件，通过了 371 项测试，并遵循 WAI-ARIA 无障碍标准。
• AI 无代码建站：提供 PROMPT.md 提示词文件，非开发者也能直接复制给 Cursor、ChatGPT 等 AI 工具，一键生成动森风格的网页。
• 丰富的衍生生态：除了 React 版本，社区还同步产出了 Vue、Flutter、Android 以及 Taro 小程序版本的动森风格 UI 库。
• 详尽的开发文档：为开发者提供了组件手册、视觉风格提示词、设计令牌以及像素级样式规范，方便二次开发与设计协作。

快速开始

通过 npm 安装组件库：

npm install animal-island-ui

在项目中引入并使用（注意必须手动引入样式文件，否则组件会丢失样式和字体）：

import { Button, Card } from 'animal-island-ui';
import 'animal-island-ui/style';

function App() {
    return (
        <div>
            <Button type="primary">Start Adventure</Button>
            <Card color="app-blue">Welcome to the deserted island!</Card>
        </div>
    );
}

AI 使用建议

帮我安装 https://github.com/guokaigdg/animal-island-ui 到项目中，使用该项目风格设计前端界面

相关链接

• 官方网站与文档：https://guokaigdg.github.io/animal-island-ui
• GitHub 仓库：https://github.com/guokaigdg/animal-island-ui
• Vue 版本仓库：https://github.com/guokaigdg/animal-island-vue

⚠️ 使用提示：该项目采用 CC BY-NC 4.0 许可证，仅限个人学习、研究及非商业演示使用，严禁用于任何商业产品、企业项目或付费模板中。