集合啦！動物森友會風格的 UI 組件庫（開源）

作者：Rico的設計漫想
日期：2026年4月17日 上午2:36
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

animal-island-ui 係一個以《動物森友會》為靈感嘅 React UI 組件庫，開源且提供 40+ 風格組件，仲附有詳細 DESIGN.md 設計系統。

整理版摘要

呢篇文章係由 Rico 整理，介紹一個叫 animal-island-ui 嘅開源 React UI 組件庫，靈感嚟自《集合啦！動物森友會》。作者 guokaigdg 用 TypeScript + Vite 整出呢套組件，發佈唔夠一星期就有 8 類 40+ 樣式組件，仲寫咗一份好詳細嘅 DESIGN.md。文章想帶出嘅資訊係：呢個組件庫唔單止還原到動森嘅温暖質感，仲可以用嚟學習點樣用純前端技術做出遊戲 UI 嘅微妙效果。

成個組件庫嘅視覺核心係温暖米色系畫布，配標誌性青綠色，字體用圓潤嘅 'M PLUS Rounded 1c'，加上大量 18px 以上大圓角同柔和 3D 陰影。組件包括 Button、Input、Switch、Modal、Card、Collapse、Cursor、Divider，每個都好有手感，例如 Button 有 3D 按壓反饋，Modal 用 SVG 有機形狀裁切。作者仲整理咗 DESIGN.md，詳細講咗顏色、排版、間距、動畫等設計令牌，方便開發者自定義。

Rico 試過之後覺得呢套組件最適合兩類場景：一係想俾產品注入温暖治癒調性嘅應用（例如生活工具、創意社區），二係作為學習案例，拆解點樣用圓角節奏、陰影層次同動畫曲線還原遊戲 UI。不過要注意，呢個項目只可以用嚟學習同非商業展示，嚴禁商用。

  • 呢個組件庫用 React + TypeScript 開發，風格完全參考《動物森友會》，有 40+ 組件同完整 DESIGN.md。
  • 視覺上重點用温暖米色、青綠色、圓角字體同 3D 按壓效果，每個組件都有多種狀態。
  • Button 有 5 種類型 3 種尺寸，支援 loading、danger、ghost；Modal 用 SVG 有機形狀彈窗。
  • DESIGN.md 包含完整設計系統：顏色、字體、間距、陰影、動畫等 40+ CSS 變數，支援運行時換膚。
  • 最佳使用場景係需要温暖調性嘅產品或想學習還原遊戲 UI 嘅開發者；但嚴禁商用。
整理重點

開箱動森風格組件庫

朋友們，又發現寶藏喇！呢個 animal-island-ui 係一個風格參考《動物森友會》嘅 React UI 組件庫，開源、用 TypeScript + Vite 構建。視覺上充滿動森嘅温暖質感，發佈唔夠一星期已經有 8 個類型、40+ 樣式組件。

GitHub 倉庫同線上體驗網站都已經有得睇，作者係 guokaigdg。如果你鍾意動森嗰種軟綿綿嘅手感，呢套組件真係會令你心心眼。

整理重點

組件特點：還原度拉滿嘅手感

雖然組件數量唔多，但每一個都打磨得很有味道。核心係用 SVG 有機形狀裁切 同 3D 按壓按鈕，令每個交互都帶住遊戲裏面嗰種軟綿綿嘅觸感。

  • Button：5 種類型、3 種尺寸，支援 loading、danger、ghost 模式。
  • Input：支援前後綴、一鍵清空、多種校驗狀態。
  • Switch：受控/非受控均可，自定義文案，仲帶加載狀態。
  • Modal：SVG 有機形狀彈窗，支援 ESC 關閉。
  • Card：默認同帶標題兩種風格。
  • Collapse：FAQ 式摺疊面板，展開動畫絲滑自然。
  • Cursor：專屬動森手指光標。
  • Divider：裝飾性水平分割線。
整理重點

DESIGN.md：完整設計系統解析

作者仲整理咗一份好詳細嘅 DESIGN.md，可以直接拎嚟用。佢涵蓋咗成個設計系統：顏色、字體、間距、陰影、動畫等等，而且提供咗 40+ CSS 自定義屬性，支援 運行時換膚，唔使重新構建。

顏色方面，主色係青綠色 #19c8b9，背景係温暖米色 #f8f8f0。字體用圓潤嘅 'M PLUS Rounded 1c'，避免尖鋭工業風。

  1. 1 間距系統：@spacing-xs 4px 到 @spacing-xl 24px。
  2. 2 圓角系統：@border-radius-sm 12px, base 18px, lg 24px。
  3. 3 陰影層次：@shadow-sm, @shadow-base, @shadow-lg 支援 3D 按壓。
  4. 4 動畫速度：fast 0.15s, base 0.25s, slow 0.35s。

另外要注意，DESIGN.md 強調咗 DO 同 DON'T，例如一定要處理所有狀態（default、hover、active、disabled、loading），唔可以用尖鋭直角，動畫唔可以激烈閃爍，最重要係嚴禁商用。

整理重點

點樣用？快速上手

安裝好簡單：用 npm install animal-island-ui，然後就可以 import 返啲組件用。作者提供咗一個簡單例子，例如：

程式內容 jsx 
import { Button, Card, Switch } from 'animal-island-ui';

function App() {
 return (
 <div>
 <Button type="primary">開始冒險</Button>
 <Card color="app-blue">
 <p>歡迎來到無人島！</p>
 </Card>
 <Switch
 defaultChecked
 checkedChildren="開"
 unCheckedChildren="關"
 />
 </div>
 );
}

本地開發嘅步驟都寫得好清楚，包括克隆倉庫、安裝依賴、啟動開發伺服器、構建組件庫同 Demo 站點。

整理重點

最啱邊啲人用？

Rico 試過之後覺得呢套組件最適合兩類場景：一係想俾產品注入温暖、治癒調性嘅應用，例如 生活類工具、創意社區、遊戲周邊網站；二係作為 學習案例，拆解點樣用純前端技術還原遊戲 UI 嘅微妙質感。

不過要記住，呢個項目 嚴禁任何商業使用，只可以用嚟個人學習、研究同非商業展示。如果係用嚟學嘢，真係可以好好研究佢嘅圓角節奏、陰影層次同動畫曲線。

朋友們，又揾到寶藏啦！

animal-island-ui 係一款風格參考《動物森友會》嘅 React UI 組件庫，仲係開源㗎，用 TypeScript + Vite 整嘅，令到視覺充滿動森嘅温暖質感。

我哋嚟睇嚇頁面同細節

圖片
圖片
圖片
圖片


發佈時間仲未夠一個禮拜，新鮮出爐，而家有8個類型，40+款組件，可以期待嚇之後嘅更新，多謝作者 guokaigdg

  • GitHub：/guokaigdg/animal-island-ui
  • 線上體驗：animal-crossing-ui.netlify.app

組件特點

雖然組件數量唔多，但每一個都打磨得幾有味道，還原度好高嘅動森質感。採用 SVG 有機形狀裁切 + 3D 按壓按鈕，令到每一個互動都帶住遊戲入面嗰種軟淋淋嘅觸感。按鈕撳落去會有少少凹陷嘅反饋，彈窗邊緣係自然嘅有機曲線，連滑鼠都換咗做動森經典嘅手指樣式。

圖片
  • Button：5種型態、3種尺寸，支援載入、危險、幽靈模式
  • Input：支援前後綴、一鍵清空、多種驗證狀態
  • Switch：受控/非受控都得，自定義文字，仲有載入狀態
  • Modal：SVG有機形狀彈窗，支援ESC關閉
  • Card：預設同有標題兩種風格，適合各種內容展示
  • Collapse：FAQ式摺疊面板，展開動畫好順自然
  • Cursor：專屬嘅動森手指滑鼠
  • Divider：裝飾性水平分割線，增加頁面呼吸感
動森 DESIGN.md

我自己將目前呢套 UI 整理咗一份 DESIGN.md，可以直接攞嚟用，歡迎自取。

# Animal Island UI

## 1. Visual Theme & Atmosphere
Animal Island UI 的設計靈感完全來自《集合啦！動物森友會》，營造出一種柔軟、温暖、手作温度的島嶼度假氛圍。整個界面像在小島上佈置傢俱：圓潤的有機形狀、輕微的 3D 按壓質感、柔和的奶油色調，以及 SVG 裁切的自然曲線，讓每一次交互都帶着治癒的小確幸。

視覺核心是温暖的米色系畫布（@bg-color: #f8f8f0），搭配標誌性青綠色（@primary-color: #19c8b9）作為活力點綴。字體採用圓潤可愛的 'M PLUS Rounded 1c'，配合大量 18px~24px 的大圓角和柔和 3D 陰影，整體感覺親切、自然，像遊戲裏的 UI 活了過來。

**Key Characteristics:**
- 温暖治癒的手作島嶼風 + SVG 有機形狀裁切
- 輕微 3D 按壓按鈕，帶來真實觸感反饋
- 柔和奶油色系背景與青綠主色
- 圓潤字體家族 'M PLUS Rounded 1c'
- 40+ CSS 自定義屬性，支持運行時動態換膚
- 柔和動效（0.15s~0.35s），Collapse 展開絲滑自然
- 專屬動森風格手指光標

## 2. Color Palette & Roles
### Primary Brand
- **Primary 青綠** (`@primary-color: #19c8b9`): 主按鈕、重點交互、品牌活力色
- **Primary Hover** (`#3dd4c6`): 懸停狀態
- **Primary Active** (`#11a89b`): 按壓/激活狀態
- **Primary Bg** (`#e6f9f6`): 輕微背景襯托

### Status Colors
- Success: `@success-color: #6fba2c`
- Warning: `@warning-color: #f5c31c`
- Error: `@error-color: #e05a5a`

### Neutral & Text
- **Text Primary** (`@text-color: #794f27`): 主要文字，温暖褐色
- **Text Secondary** (`@text-color-secondary: #9f927d`)
- **Text Disabled** (`@text-color-disabled: #c4b89e`)
- **Background** (`@bg-color: #f8f8f0`, `@bg-color-secondary: #f0e8d8`)
- **Border** (`@border-color: #9f927d`)

## 3. Typography Rules
### Font Family
- **Primary**: `'M PLUS Rounded 1c', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`

### Hierarchy（推薦）
- Base: 14px（@font-size-base）
- Small: 12px
- Large: 16px
- Line Height: 1.5715
- 整體風格：圓潤友好，適合輕鬆閲讀場景

**Principles**:
- 優先使用圓潤字體，營造手作温暖感
- 避免過於鋭利的工業風字體
- 文字對比度需滿足 WCAG 2.2 AA

## 4. Foundations Tokens
### Spacing
- `@spacing-xs: 4px`, `@spacing-sm: 8px`, `@spacing-md: 12px`, `@spacing-lg: 16px`, `@spacing-xl: 24px`

### Border & Radius
- `@border-radius-sm: 12px`, `@border-radius-base: 18px`, `@border-radius-lg: 24px`
- 大量使用 18px+ 大圓角，強化有機軟萌感

### Shadow & Depth
- `@shadow-sm`, `@shadow-base`, `@shadow-lg`（支持 3D 按壓效果）
- 按鈕按下時產生明顯凹陷反饋

### Motion
- Fast: 0.15s
- Base: 0.25s
- Slow: 0.35s
- Ease: `cubic-bezier(0.4, 0, 0.2, 1)`

### Component Size
- `@height-sm: 32px`, `@height-base: 40px`, `@height-lg: 48px`

**Theme System**：提供 40+ CSS 自定義屬性，支持運行時換膚（無需重新構建）。

## 5. Component Stylings
### Button
- 5 種類型、3 種尺寸
- 支持 loading、danger、ghost
- 核心特徵：3D 按壓反饋 + 有機形狀

### Modal
- SVG 有機形狀彈窗
- 支持 ESC 關閉，柔和入場動畫

### Card
- 默認與帶標題兩種風格
- 軟陰影 + 大圓角

### Other Components
- Input：前後綴、一鍵清空、校驗狀態
- Switch：受控/非受控、自定義文案、加載態
- Collapse：平滑展開動畫
- Cursor：動森手指光標
- Divider：裝飾性分割線

## 6. Do's and Don'ts
### Do
- 優先使用語義化 CSS 變量和設計令牌
- 每個組件完整定義所有狀態（default、hover、active、disabled、loading 等），並體現 3D 按壓質感
- 大量運用 SVG 有機形狀，保持手作自然感
- 動畫控制在 0.35s 以內，保持柔和治癒節奏
- 通過 CSS 變量實現運行時換膚
- 充分處理空狀態、長內容溢出和響應式

### Don't
- 不要使用尖鋭直角或冷硬工業風陰影
- 不要隱藏 focus-visible 樣式或使用低對比度文字
- 不要引入硬編碼的魔法值，破壞 token 一致性
- 不要讓動畫激烈或閃爍
- 嚴禁用於任何商業項目（僅供學習與技術交流）

## 7. Accessibility & Quality Gates
- 目標：WCAG 2.2 AA
- 必須支持鍵盤操作，提供清晰 focus-visible
- 所有強制規則使用 “must”，建議使用 “should”
- 視覺一致性優先於局部創意
- 最終輸出必須保留温暖、柔軟、治癒的動物森友會核心氣質

**Note**：本 DESIGN.md 基於官方 Less 樣式表、Demo 站點與倉庫源碼整理。實際使用時請優先參考 40+ CSS 自定義屬性進行定製。

---

我自己試咗之後，發現佢最適合兩類場景：第一係想俾產品注入温暖、治癒調性嘅應用（生活類工具、創意社區、遊戲周邊網站等）；第二係作為學習案例，拆解作者點樣用純前端技術還原遊戲UI嘅微妙質感，從圓角節奏、陰影層次，到動畫曲線，都值得拆解同體會。

詳細介紹

呢個項目係基於 React + TypeScript 實現嘅輕量 UI 組件庫，設計風格靈感嚟自任天堂《集合啦！動物森友會》遊戲界面，用於個人前端技術練習同組件化開發學習。

所有視覺元素、佈局、圖標、動畫都係獨立設計實現，冇直接使用任何任天堂官方美術素材、代碼或資源文件。

快速上手？

  1. 安裝：
npm install animal-island-ui
  1. 喺項目入面引入同使用
import { Button, Card, Switch } from 'animal-island-ui';

function App() {
    return (
        <div>
            <Button type="primary">開始冒險</Button>
            <Card color="app-blue">
                <p>歡迎來到無人島！</p>
            </Card>
            <Switch
                defaultChecked
                checkedChildren="開"
                unCheckedChildren="關"
            />
        </div>
    );
}

3. 本地開發

# 克隆倉庫
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# 安裝依賴
npm install

# 啓動 Demo 開發服務器
npm run dev

# 構建組件庫
npm run build

# 構建 Demo 站點
npm run build:demo

注意事項

  • 呢個項目只用於個人學習、研究同非商業展示，禁止任何形式嘅商業使用、二次售賣或盈利行為。
  • 唔可以用於任何商業產品、企業項目、對外服務或付費模板。
  • 使用呢個組件庫產生嘅任何風險由使用者自行承擔。

我係Rico，多謝閲讀！


朋友們，又發現寶藏了！

animal-island-ui 這是一款風格參考《動物森友會》的 React UI 組件庫，並且開源，基於 TypeScript + Vite 構建，讓視覺充滿動森的温暖質感。

我們來看看頁面和細節

圖片
圖片
圖片
圖片


發佈時間還不到一週，新鮮出爐，目前有8個類型，40+樣式組件，可以期待一下後續的更新，感謝作者 guokaigdg

  • GitHub：/guokaigdg/animal-island-ui
  • 在線體驗：animal-crossing-ui.netlify.app

組件特性

雖然組件數量不多，但每一個都打磨得很有味道，還原度拉滿的動森質感 採用 SVG 有機形狀裁切 + 3D 按壓按鈕，讓每一個交互都帶着遊戲裏那種軟綿綿的觸感。按鈕按下去會有輕微的凹陷反饋，彈窗邊緣是自然的有機曲線，連光標都換成了動森經典的手指樣式。

圖片
  • Button：5種類型、3種尺寸，支持加載、危險、幽靈模式
  • Input：支持前後綴、一鍵清空、多種校驗狀態
  • Switch：受控/非受控均可，自定義文案，還帶加載狀態
  • Modal：SVG有機形狀彈窗，支持ESC關閉
  • Card：默認和帶標題兩種風格，適合各種內容展示
  • Collapse：FAQ式摺疊面板，展開動畫絲滑自然
  • Cursor：專屬的動森手指光標
  • Divider：裝飾性水平分割線，增加頁面呼吸感
動森 DESIGN.md

我自己把目前的這套 UI 整理了一份 DESIGN.md, 可以直接拿來使用，歡迎自取。

# Animal Island UI

## 1. Visual Theme & Atmosphere
Animal Island UI 的設計靈感完全來自《集合啦！動物森友會》，營造出一種柔軟、温暖、手作温度的島嶼度假氛圍。整個界面像在小島上佈置傢俱：圓潤的有機形狀、輕微的 3D 按壓質感、柔和的奶油色調，以及 SVG 裁切的自然曲線，讓每一次交互都帶着治癒的小確幸。

視覺核心是温暖的米色系畫布（@bg-color: #f8f8f0），搭配標誌性青綠色（@primary-color: #19c8b9）作為活力點綴。字體採用圓潤可愛的 'M PLUS Rounded 1c'，配合大量 18px~24px 的大圓角和柔和 3D 陰影，整體感覺親切、自然，像遊戲裏的 UI 活了過來。

**Key Characteristics:**
- 温暖治癒的手作島嶼風 + SVG 有機形狀裁切
- 輕微 3D 按壓按鈕，帶來真實觸感反饋
- 柔和奶油色系背景與青綠主色
- 圓潤字體家族 'M PLUS Rounded 1c'
- 40+ CSS 自定義屬性，支持運行時動態換膚
- 柔和動效（0.15s~0.35s），Collapse 展開絲滑自然
- 專屬動森風格手指光標

## 2. Color Palette & Roles
### Primary Brand
- **Primary 青綠** (`@primary-color: #19c8b9`): 主按鈕、重點交互、品牌活力色
- **Primary Hover** (`#3dd4c6`): 懸停狀態
- **Primary Active** (`#11a89b`): 按壓/激活狀態
- **Primary Bg** (`#e6f9f6`): 輕微背景襯托

### Status Colors
- Success: `@success-color: #6fba2c`
- Warning: `@warning-color: #f5c31c`
- Error: `@error-color: #e05a5a`

### Neutral & Text
- **Text Primary** (`@text-color: #794f27`): 主要文字，温暖褐色
- **Text Secondary** (`@text-color-secondary: #9f927d`)
- **Text Disabled** (`@text-color-disabled: #c4b89e`)
- **Background** (`@bg-color: #f8f8f0`, `@bg-color-secondary: #f0e8d8`)
- **Border** (`@border-color: #9f927d`)

## 3. Typography Rules
### Font Family
- **Primary**: `'M PLUS Rounded 1c', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`

### Hierarchy（推薦）
- Base: 14px（@font-size-base）
- Small: 12px
- Large: 16px
- Line Height: 1.5715
- 整體風格：圓潤友好，適合輕鬆閲讀場景

**Principles**:
- 優先使用圓潤字體，營造手作温暖感
- 避免過於鋭利的工業風字體
- 文字對比度需滿足 WCAG 2.2 AA

## 4. Foundations Tokens
### Spacing
- `@spacing-xs: 4px`, `@spacing-sm: 8px`, `@spacing-md: 12px`, `@spacing-lg: 16px`, `@spacing-xl: 24px`

### Border & Radius
- `@border-radius-sm: 12px`, `@border-radius-base: 18px`, `@border-radius-lg: 24px`
- 大量使用 18px+ 大圓角，強化有機軟萌感

### Shadow & Depth
- `@shadow-sm`, `@shadow-base`, `@shadow-lg`（支持 3D 按壓效果）
- 按鈕按下時產生明顯凹陷反饋

### Motion
- Fast: 0.15s
- Base: 0.25s
- Slow: 0.35s
- Ease: `cubic-bezier(0.4, 0, 0.2, 1)`

### Component Size
- `@height-sm: 32px`, `@height-base: 40px`, `@height-lg: 48px`

**Theme System**：提供 40+ CSS 自定義屬性，支持運行時換膚（無需重新構建）。

## 5. Component Stylings
### Button
- 5 種類型、3 種尺寸
- 支持 loading、danger、ghost
- 核心特徵：3D 按壓反饋 + 有機形狀

### Modal
- SVG 有機形狀彈窗
- 支持 ESC 關閉，柔和入場動畫

### Card
- 默認與帶標題兩種風格
- 軟陰影 + 大圓角

### Other Components
- Input：前後綴、一鍵清空、校驗狀態
- Switch：受控/非受控、自定義文案、加載態
- Collapse：平滑展開動畫
- Cursor：動森手指光標
- Divider：裝飾性分割線

## 6. Do's and Don'ts
### Do
- 優先使用語義化 CSS 變量和設計令牌
- 每個組件完整定義所有狀態（default、hover、active、disabled、loading 等），並體現 3D 按壓質感
- 大量運用 SVG 有機形狀，保持手作自然感
- 動畫控制在 0.35s 以內，保持柔和治癒節奏
- 通過 CSS 變量實現運行時換膚
- 充分處理空狀態、長內容溢出和響應式

### Don't
- 不要使用尖鋭直角或冷硬工業風陰影
- 不要隱藏 focus-visible 樣式或使用低對比度文字
- 不要引入硬編碼的魔法值，破壞 token 一致性
- 不要讓動畫激烈或閃爍
- 嚴禁用於任何商業項目（僅供學習與技術交流）

## 7. Accessibility & Quality Gates
- 目標：WCAG 2.2 AA
- 必須支持鍵盤操作，提供清晰 focus-visible
- 所有強制規則使用 “must”，建議使用 “should”
- 視覺一致性優先於局部創意
- 最終輸出必須保留温暖、柔軟、治癒的動物森友會核心氣質

**Note**：本 DESIGN.md 基於官方 Less 樣式表、Demo 站點與倉庫源碼整理。實際使用時請優先參考 40+ CSS 自定義屬性進行定製。

---

我自己試了之後，發現它最適合兩類場景： 一是想給產品注入温暖、治癒調性的應用（生活類工具、創意社區、遊戲周邊網站等；二是作為學習案例，拆解作者如何用純前端技術還原遊戲UI的微妙質感，從圓角節奏、陰影層次，到動畫曲線，都值得拆解和體會。

詳細介紹

本項目是基於 React + TypeScript 實現的輕量 UI 組件庫，設計風格靈感來源於任天堂《集合啦！動物森友會》遊戲界面，用於個人前端技術練習與組件化開發學習。

所有視覺元素、佈局、圖標、動畫均為獨立設計實現，未直接使用任何任天堂官方美術素材、代碼或資源文件。

快速上手？

  1. 安裝：
npm install animal-island-ui
  1. 在項目中引入和使用
import { Button, Card, Switch } from 'animal-island-ui';

function App() {
    return (
        <div>
            <Button type="primary">開始冒險</Button>
            <Card color="app-blue">
                <p>歡迎來到無人島！</p>
            </Card>
            <Switch
                defaultChecked
                checkedChildren="開"
                unCheckedChildren="關"
            />
        </div>
    );
}

3. 本地開發

# 克隆倉庫
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# 安裝依賴
npm install

# 啓動 Demo 開發服務器
npm run dev

# 構建組件庫
npm run build

# 構建 Demo 站點
npm run build:demo

注意事項

  • 本項目僅用於個人學習、研究與非商業展示，禁止任何形式的商業使用、二次售賣或盈利行為。
  • 不用於任何商業產品、企業項目、對外服務或付費模板。
  • 使用本組件庫產生的任何風險由使用者自行承擔。

我是Rico，感謝閲讀！