🏝 Animal-Island-UI

一款参考《动物森友会》风格的 React UI 组件库

1. 介绍

本项目是基于 React + TypeScript 实现的轻量 UI 组件库，设计风格灵感来源于任天堂《集合啦！动物森友会》游戏界面，用于个人前端技术练习与组件化开发学习。

代码仓库：animal-island-ui

所有视觉元素、布局、图标、动画均为独立设计实现，未直接使用任何任天堂官方美术素材、代码或资源文件。

2. vue 版本

animal-island-vue

3. 预览

在线预览 (PC 端) animal-island-ui-pc
在线预览（移动端）animal-island-ui-mobile

4. 用 AI 工具一键生成 animal-island-ui 风格页面（无需写代码）

非研发人员，不想自己写代码？用 PROMPT.md 即可，不需要 npm，不需要打包工具。

4 步使用：

复制 PROMPT.md 全文。
粘贴到任意 AI 工具（Cursor / Claude / ChatGPT / Gemini / DeepSeek）发送。
AI 会反问做什么页面，用一句话回答即可（如「个人博客」「商品列表」「FAQ」）。
保存 AI 输出的 index.html，双击即可预览。

5. 安装

bash

npm install animal-island-ui

6. 快速上手

⚠️ 重要: 请务必导入样式文件 import 'animal-island-ui/style'，否则组件将没有样式与字体!

tsx

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

function App() {
    return (
        <div>
            <Button type="primary">开始冒险</Button>
            <Card color="app-blue">欢迎来到无人岛！</Card>
        </div>
    );
}

7. 文档

面向不同场景的完整参考：

文档	用途
`PROMPT.md`	🚀 给普通用户的一键提示词，复制到 Cursor / Claude / ChatGPT / v0 / Bolt / Lovable / Windsurf 即可生成 animal-island-ui 风格 React 页面。
`AI_USAGE.md`	面向 AI 代码助手的使用手册，逐字收录全部组件 props、类型与默认值，附 19 条硬性规则与可复制样板，杜绝臆造 API。
`DESIGN_PROMPT.md`	视觉风格提示词，适配 v0 / Figma AI / Midjourney / DALL-E，含色板、字体、尺寸表、Modal clip-path 与禁用清单。
`skill/SKILL.md`	像素级样式规范 Skill，覆盖设计 token、全部组件精确 CSS、Demo 布局数值、CSS 变量模板与新组件开发 Checklist。

8. 本地开发

bash

# 克隆仓库
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# 安装依赖
npm install

# 启动 Demo 开发服务器
npm run dev

# 构建组件库
npm run build

# 构建 Demo 站点
npm run build:demo

9. 案例

Animal Island New Tab _{动森新标签页}	ac-site-template _{动森主题个人网站模板}	HiKid _{儿童教育练习英语口语和听力}
AnimalIslandUI _{动森风格安卓UI库}	ItbugShop _{梁典典的博客}	KidsMathQuest _{小学生练习加减乘除}
animal_island_flutter _{动森风格Flutter UI库}	animal-island-blog _{动森风格博客}	Island Life Journal _{小岛生活图片志}