animal-island-ui

Animal-Island-UI

A cozy React UI component library

English | 简体中文

Introduction

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.

Preview

• Online Preview: animal-island-ui

Related

• Icons (naive-icons): https://github.com/guokaigdg/naive-icons
• Vue version (animal-island-vue): https://github.com/guokaigdg/animal-island-vue

Use AI to Generate animal-island-ui Pages

Option 1: Install the skill (recommended for AI coding agents)

Using an AI coding agent (Claude Code / Codex / Cursor)? Install the animal-island-ui-style skill:

skills add guokaigdg/animal-island-ui

Option 2: One-click prompt (no code, nothing to install)

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.

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

License & Disclaimer

• 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.

Support

• 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