一款参考《动物森友会》风格的 Vue 3 UI 组件库
简体中文 | English
本项目是基于 Vue 3 + TypeScript + Less 实现的轻量 UI 组件库，是 animal-island-ui（React 版）的 Vue 移植版本，设计风格灵感来源于任天堂《集合啦！动物森友会》游戏界面，用于个人前端技术练习与组件化开发学习。
所有视觉元素、布局、图标、动画均为独立设计实现，未直接使用任何任天堂官方美术素材、代码或资源文件。
- 在线预览 (PC 端) animal-island-vue-pc
- 在线预览（移动端）animal-island-vue-mobile
非研发人员，不想自己写代码？用 PROMPT.md 即可，不需要 npm，不需要打包工具。
4 步使用：
- 复制
PROMPT.md全文。 - 粘贴到任意 AI 工具（Cursor / Claude / ChatGPT / Gemini / DeepSeek）发送。
- AI 会反问做什么页面，用一句话回答即可（如「个人博客」「商品列表」「FAQ」）。
- 保存 AI 输出的
index.html，双击即可预览。
npm install animal-island-vue
⚠️ 重要: 请务必导入样式文件import 'animal-island-vue/style'，否则组件将没有样式与字体!
<script setup lang="ts">
import { ref } from 'vue';
import { Button, Card, Modal } from 'animal-island-vue';
import 'animal-island-vue/style';
const open = ref(false);
</script>
<template>
<Title color="green">欢迎来到无人岛</Title>
<Card>
<Button type="primary" @click="open = true">开始冒险</Button>
</Card>
<Modal v-model:open="open" title="Welcome"> 欢迎来到 animal-island-vue。 </Modal>
</template>面向不同场景的完整参考：
| 文档 | 用途 |
|---|---|
PROMPT.md |
🚀 给普通用户的一键提示词，复制到 Cursor / Claude / ChatGPT / v0 / Bolt / Lovable / Windsurf 即可生成 animal-island-vue 风格 Vue 页面。 |
AI_USAGE.md |
面向 AI 代码助手的使用手册，逐字收录全部组件 props、类型与默认值，附硬性规则与可复制样板，杜绝臆造 API。 |
DESIGN_PROMPT.md |
视觉风格提示词，适配 v0 / Figma AI / Midjourney / DALL-E，含色板、字体、尺寸表、Modal clip-path 与禁用清单。 |
skill/SKILL.md |
像素级样式规范 Skill，覆盖设计 token、全部组件精确 CSS、Demo 布局数值、Less 变量模板与新组件开发 Checklist。 |
CHANGELOG.md |
版本更新日志。 |
CONTRIBUTING.md |
贡献指南。 |
# 克隆仓库
git clone https://github.com/guokaigdg/animal-island-vue.git
cd animal-island-vue
# 安装依赖
npm install
# 启动 Demo 开发服务器
npm run dev
# 构建组件库
npm run build
# 构建 Demo 站点
npm run build:docs
Animal Island New Tab 动森新标签页 |
ac-site-template 动森主题个人网站模板 |
HiKid 儿童教育练习英语口语和听力 |
AnimalIslandUI 动森风格安卓 UI 库 |
ItbugShop 梁典典的博客 |
KidsMathQuest 小学生练习加减乘除 |
animal_island_flutter 动森风格 Flutter UI 库 |
animal-island-blog 动森风格博客 |
Island Life Journal 小岛生活图片志 |
- 本项目仅用于个人学习、研究与非商业展示，禁止任何形式的商业使用、二次售卖或盈利行为。
- 不用于任何商业产品、企业项目、对外服务或付费模板。
- 使用本组件库产生的任何风险由使用者自行承担。
- 本项目并非任天堂官方产品，与任天堂株式会社无任何关联、授权或合作关系。
- 项目名称中包含的游戏名称仅为风格描述性引用，不构成商标使用或品牌关联。
- 所有界面风格仅为设计灵感参考，不构成对原作品的复制或侵权。
- 若版权方认为相关内容存在侵权嫌疑，可通过邮箱联系，本人将在第一时间进行整改或删除处理。
如有问题或版权相关沟通，请通过 Issue 或邮件联系。
MIT 本项目基于 MIT 开源协议发布，仅限学习使用，作者不对因使用本库导致的任何法律问题或损失承担责任。