🏝 Animal-Island-Vue

介绍

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

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

🎉 React 版本

• animal-island-ui

预览

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

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

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

4 步使用：

1. 复制 PROMPT.md 全文。
2. 粘贴到任意 AI 工具（Cursor / Claude / ChatGPT / Gemini / DeepSeek）发送。
3. AI 会反问做什么页面，用一句话回答即可（如「个人博客」「商品列表」「FAQ」）。
4. 保存 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

案例

注意事项

• 本项目仅用于个人学习、研究与非商业展示，禁止任何形式的商业使用、二次售卖或盈利行为。
• 不用于任何商业产品、企业项目、对外服务或付费模板。
• 使用本组件库产生的任何风险由使用者自行承担。

版权与免责声明

• 本项目并非任天堂官方产品，与任天堂株式会社无任何关联、授权或合作关系。
• 项目名称中包含的游戏名称仅为风格描述性引用，不构成商标使用或品牌关联。
• 所有界面风格仅为设计灵感参考，不构成对原作品的复制或侵权。
• 若版权方认为相关内容存在侵权嫌疑，可通过邮箱联系，本人将在第一时间进行整改或删除处理。

联系方式

如有问题或版权相关沟通，请通过 Issue 或邮件联系。

License

MIT 本项目基于 MIT 开源协议发布，仅限学习使用，作者不对因使用本库导致的任何法律问题或损失承担责任。