animal-island-ui：动森风格的React组件库

📝

动森的 UI 有一种很难用语言精确描述的”舒服感”——奶油色的背景、圆角的对话框、木纹质感的按钮、标志性的浅蓝和浅绿色块。animal-island-ui 把这个视觉语言完整拆解成了一组可用的 React 组件。

🎯 它可以做什么

📦 28+ 个组件，风格统一。 按钮、卡片、对话框、输入框、导航栏、标签页……每个组件都严格遵循动森的视觉规范——圆角弧度、阴影距离、字间距都按原版感觉来的，放到一起不会「串味」。
🎨 视觉规范文档齐全。 项目里专门有一份 DESIGN_PROMPT.md，列出了完整的调色板、字体栈、尺寸表、Modal 裁切形状——设计师拿这份文档就能理解整套视觉体系的”设计 Token”，甚至可以用它去调教 Figma AI 或 Midjourney 生成同风格素材。
🤖 不写代码也能用。 这是对设计师最友好的部分——复制 PROMPT.md 全文，粘贴到 Cursor、Claude、ChatGPT 或任何 AI 工具里，然后说一句”帮我做一个个人博客首页”，AI 就自动生成一个使用这套组件库的完整页面，保存成 HTML 双击就能预览。

🎮 从游戏 UI 提取设计系统的完整案例。 这不是简单的”模仿风格”，而是把一款游戏的界面语言系统地拆解为设计 Token、组件规范和 CSS 变量——对研究”如何从参考中提炼设计系统”这件事本身就很有学习价值。
📝 提示词驱动的工作流示范。 PROMPT.md + DESIGN_PROMPT.md + AI_USAGE.md 三份文档构成了一个完整的”用 AI 生成品牌一致页面”的范式，设计师可以借鉴这套方法为自己的设计系统配一套类似的提示词。
🔗 生态丰富，多端覆盖。 已有 Vue 版本、Flutter 版本、微信小程序移植版、Astro 主题，甚至有人用这套组件做了儿童英语学习 App、桌面闹钟和动森 BGM 播放器——说明这套视觉语言在不同平台上的复用性很强。

采用 CC BY-NC 4.0 协议，允许个人学习和非商业展示，禁止商业使用——用于个人项目、学习研究或展示作品集都没问题，商用需谨慎。

对于喜欢任天堂设计美学、或者正在研究”如何把游戏 UI 转化为设计系统”的设计师来说，animal-island-ui 是一份很有参考价值的开源样本。

本文转载自微信公众号。