Animal Island UI 设计风格指南

三文档分工（生成代码 / 调样式时按需查阅，避免互相翻查）：

• AI_USAGE.md — API 手册：每个组件的 props、类型、默认值、合法取值、禁用用法。写代码优先查这里。
• skill/SKILL.md（本文档）— 像素级样式：设计 token、每组件精确 CSS（hex/px/keyframe）、Demo 布局、新组件开发模板。要自己实现/扩展样式时查这里。
• DESIGN_PROMPT.md — 给外部工具（v0 / Figma AI / Midjourney / DALL-E）的提示词包，含 clip-path、色板速查、禁用清单。只在喂别的 AI 时用。

概述

animal-island-ui 是一套受《集合啦！动物森友会》启发的 React + TypeScript UI 组件库。 设计语言核心：温暖大地色系 + 大圆角 pill 形 + 游戏按键立体感 + 柔和动效 + 几何 / 有机形状并存（几何代表：Title 飘带的 swallowtail clip-path、Wallet 的橄榄黄胶囊；有机代表：Modal 的 SVG blob）。

• 源码：src/components/<ComponentName>/
• Demo 站：demo/
• 构建：Vite (library mode) + vite.config.ts（库）/ vite.config.demo.ts（Demo）
• 样式系统：Less Modules + src/styles/variables.less 设计 token

全量导出清单（28 个组件 + 3 个伴生导出：FormItem / useForm / ICON_LIST）