Animal-Island-UI
A React UI component library with a cute style
English | 简体中文
Introduction
This project is a lightweight UI component library built with React + TypeScript. It features an original, cozy island-style design language, created for personal front-end technical practice and component development learning.All visual elements, layouts, icons, and animations are independently designed and implemented from scratch.
🚀 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 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
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 is an independently created open-source project. It is not an official product of any game company and has no association, authorization, or cooperation with any company or its products.
- All visual assets (icons, illustrations, animations) in this repository are original works created for this project.
- 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.
For any questions or copyright-related communications, please contact via Issue or email.
Keep the Island Running
If this project has been helpful to you, consider buying the developer's cat a can of tuna — meowsters are the real fuel that keeps the island running.
Sponsor this Island
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.
Animal-Island-UI 是一个轻量级 React UI 组件库，拥有原创的“岛屿”风格设计语言——自定义图标、布局和动画，是作者为个人前端练习而制作的。