Animal-Island-UI

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.

Preview

• Online Preview (PC) animal-island-ui-pc
• Online Preview (Mobile) animal-island-ui-mobile

Icons

Need icons? The recommended set is naive-icons: https://github.com/guokaigdg/naive-icons

🚀 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:

1. Copy the prompt block from docs/one-click-prompt.md.
2. Paste into any AI tool that can fetch URLs (Cursor / Claude / ChatGPT / Gemini / v0 / Bolt) and send.
3. The AI asks what page you want — reply in one phrase (e.g. "personal blog", "product list", "FAQ").
4. 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.

Contact

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.