English | 简体中文
A lightweight React + TypeScript component library with an original, cozy island-style design language. Every visual element, layout, icon, and animation is crafted from scratch.
Requires React and React DOM 18 or later; components use useId, which React 17 does not provide.
- Online Preview: animal-island-ui
- Icons (naive-icons): https://github.com/guokaigdg/naive-icons
- Vue version (animal-island-vue): https://github.com/guokaigdg/animal-island-vue
- WeChat Mini Program version (animal-island-wx): https://github.com/lns567/animal-island-wx
Using an AI coding agent (Claude Code / Codex / Cursor)? Install the animal-island-ui-style skill:
skills add guokaigdg/animal-island-uiNon-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.htmlit returns and double-click to preview.
npm install animal-island-ui
⚠️ Important: Please make sure to import the styles withimport '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>
);
}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. |
# 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- Distributed under the MIT License — free to use, copy, modify, merge, publish, distribute, sublicense, and sell copies of the Software, including in commercial products (see the LICENSE file for the full text). The copyright notice and this permission notice must be included in all copies or substantial portions of the Software.
- The Software is provided "AS IS", without warranty of any kind; the authors are not liable for any claims, damages, or other liability arising from its use. Users are solely responsible for any risks arising from the use of this component library.
- 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.
-
The easiest way to support is to give it a star and share it. If you have ideas or suggestions about the project, feel free to open an Issue or submit a PR.
-
If the project has been helpful to you, you could also buy the developer's cat a can of tuna — meowsters are the real fuel that keeps the island running. Sponsor this Island