Animal Island Vue 设计风格指南

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

• 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-vue 是一套受《集合啦！动物森友会》启发的 Vue 3 + TypeScript UI 组件库。 设计语言核心：温暖大地色系 + 大圆角 pill 形 + 游戏按键立体感 + 柔和动效 + 几何 / 有机形状并存（几何代表：Title 飘带的 swallowtail clip-path；有机代表：Modal 的 SVG blob、WeddingInvitation 的不规则虚线边框）。

• 源码：src/components/<ComponentName>/（每组件包含 *.vue + index.ts + 可选 types.ts）
• Demo 站：demo/pages/<ComponentName>Demo.vue
• 构建：Vite (library mode) + vite.config.ts（库）/ vite.config.docs.ts（Demo）
• 样式系统：scoped <style lang="less" scoped> + BEM + src/styles/variables.less 设计 token（不使用 CSS Modules）

全量导出清单（43 个 named exports — 含子组件、命令式 API 与伴生导出）