{"schemaVersion":"1.0","type":"Article","types":["Article"],"slug":"animal-island-ui-6xqgf","url":"https://zyvop.com/animal-island-ui-6xqgf","title":"🏝 Animal-Island-UI","subtitle":null,"tldr":"🏝 Animal-Island-UI A React UI component library inspired by Animal Crossing: New Horizons English | 简体中文 Introduction This project is a lightweight UI componen...","keywords":[],"entities":["kai guo","guokaigdg","ZyVOP"],"keyTakeaways":["🏝 Animal-Island-UI A React UI component library inspired by Animal Crossing: New Horizons English | 简体中文 Introduction This project is a lightweight UI component library built with React + TypeScript.","The design style is inspired by Nintendo's \"Animal Crossing: New Horizons\" game interface, created for personal front-end technical practice and component development learning.","All visual elements, layouts, icons, and animations are independently designed and implemented, without directly using any official Nintendo art materials, code, or resource files."],"headings":["Introduction","🎉 Vue Version","Preview","🚀 Use AI to Generate animal-island-ui Pages (No Coding Needed)","Installation","Quick Start","Documentation","Local Development","Usage Cases","Notes","Copyright and Disclaimer","Contact","License"],"outboundLinks":["https://github.com/guokaigdg/animal-island-vue","https://guokaigdg.github.io/animal-island-ui/#/","https://ashleycry.github.io/AnimalIslandNewTab/","https://github.com/yunxinz/ac-site-template","https://github.com/xiaochong/hi-kid","https://github.com/liuyuhong0324/AnimalIslandUI","https://itbug.shop/","https://github.com/bk4ice/KidsMathQuest","https://github.com/ohmangocat/animal_island_flutter","https://github.com/guokaigdg/animal-island-blog","https://github.com/TIUCSIB/animal-island-blog","https://github.com/skyboooox/Animal-Crossing-Player","https://github.com/Gospelion/animal-island-ui-taro-port","https://github.com/guowenju/portal-os","https://github.com/961853266hyt/awesome-splatoon3","https://github.com/YuniqueUnic/callai","https://github.com/Mystic-Stars/acorn-theme","http://39.106.95.74:7765/api/file-links/f/17b0da9ffc5b/villager-test-v2.html"],"contentText":"🏝 Animal-Island-UI A React UI component library inspired by Animal Crossing: New Horizons English | 简体中文 Introduction This project is a lightweight UI component library built with React + TypeScript. The design style is inspired by Nintendo's \"Animal Crossing: New Horizons\" game interface, created for personal front-end technical practice and component development learning. All visual elements, layouts, icons, and animations are independently designed and implemented, without directly using any official Nintendo art materials, code, or resource files. 🎉 Vue Version animal-island-vue Preview Online Preview (PC) animal-island-ui-pc Online Preview (Mobile) animal-island-ui-mobile 🚀 Use AI to Generate animal-island-ui Pages (No Coding Needed) Non-developer and don't want to write code yourself? Use the one-click prompt — no npm, no build step. 4 steps: Copy the prompt block from docs/one-click-prompt.md. Paste into any AI tool that can fetch URLs (Cursor / Claude / ChatGPT / Gemini / v0 / Bolt) and send. The AI asks what page you want — reply in one phrase (e.g. \"personal blog\", \"product list\", \"FAQ\"). Save the index.html it returns and double-click to preview. Using an AI coding agent (Claude Code / Codex / Cursor)? Install the animal-island-ui-style skill instead: skills add guokaigdg/animal-island-ui Installation npm install animal-island-ui Quick Start ⚠️ Important: Please make sure to import the styles with import 'animal-island-ui/style', otherwise the components will have no styles or fonts! 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> ); } Documentation Routed by audience and scenario (English primary; Chinese mirrors under docs/zh-CN/): Document Purpose docs/design-system/ 🎨 Canonical design definition (single source of truth) — tokens, design rules, pixel-exact per-component specs, CSS variable template. skills/animal-island-ui-style/ 🤖 Installable Agent skill (skills add guokaigdg/animal-island-ui) — React project usage + standalone-HTML generation, with per-component props references. docs/one-click-prompt.md 🚀 One-click prompt for non-developers — paste one bootstrap prompt, the AI fetches the specs itself and returns a ready index.html. docs/design-prompts.md Prompts for design/image tools (v0 / Figma AI / Midjourney / DALL-E), linking to the canonical spec files. docs/development/ Development guide for this repository — structure, component development, coding standards, testing, build contract. docs/adr/ Architecture decision records. AGENTS.md Entry point for coding agents working in this repository. CONTRIBUTING.md Contributing guide. Local Development # Clone the repository git clone https://github.com/guokaigdg/animal-island-ui.git cd animal-island-ui # Install dependencies npm install # Start Demo development server npm run dev # Build component library npm run build # Build Demo site npm run build:demo Usage Cases Preview Project Description Animal Island New Tab Animal Crossing style new tab page ac-site-template Animal Crossing themed personal website template HiKid English learning app for children AnimalIslandUI Animal Crossing style Android UI library ItbugShop Liang Diandian's Blog KidsMathQuest Math practice for elementary school animal_island_flutter Animal Crossing style Flutter UI library animal-island-blog Animal Crossing style blog Island Life Journal Island Life Photo Journal Animal Crossing BGM Player ambience clock + hourly music animal-island-ui-taro-port Taro & WeChat Mini Program portal-os Animal desktop blog Awesome-splatoon3 Splatoon 3 resource station callai Cozy AI window-warming alarm (Tauri desktop + CLI) Acorn Acorn Astro Theme villager-test 无人岛性格测试 Notes This project is intended for personal learning, research, and non-commercial demonstration only. Any form of commercial use, resale, or profit-making activities is prohibited. Not to be used in any commercial product, enterprise project, external service, or paid template. Users are solely responsible for any risks arising from the use of this component library. Copyright and Disclaimer This project is not an official Nintendo product and has no association, authorization, or cooperation with Nintendo Co., Ltd. The game name included in the project name is only a descriptive reference to the style and does not constitute trademark use or brand association. All interface styles are merely design inspiration references and do not constitute reproduction or infringement of the original work. If the copyright holder believes that related content is suspected of infringement, they can contact via email, and I will make rectifications or deletions immediately. Contact For any questions or copyright-related communications, please contact via Issue or email. License Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) — see the LICENSE file for the full text. Commercial use: PROHIBITED. Permitted (non-commercial): personal learning, research, evaluation, testing, and non-commercial display. Attribution required: must retain the original copyright notice and license declaration. The author is not responsible for any legal issues or losses caused by the use of this library.","contentHash":"sha256:25da86f6cc274ebbbfb8baf25e69eef3b3b61a173a1f7ecdb2ab7eb81a78b0b3","authorName":"kai guo","authorUrl":"https://zyvop.com/author/kai","authorSameAs":["https://guokaigdg.github.io/home/index.html","https://github.com/guokaigdg"],"category":null,"tags":[],"audience":"Software engineers and developers building applications with software development","tone":"Professional, guokaigdg perspective","readingTimeMinutes":3,"wordCount":736,"faqs":null,"primaryTopic":null,"publishedAt":"2026-08-05T08:31:04.362Z","updatedAt":"2026-08-05T16:15:00.417Z","canonicalUrl":"https://zyvop.com/animal-island-ui-6xqgf"}