用途:指导按 animal-island-ui 的原创“温暖小岛”风格搭建 React 界面,或在不使用 npm 时以单个自包含 HTML 文件复刻该风格。设计源头与规范定义见 https://github.com/guokaigdg/animal-island-ui。
主要能力与风格:暖羊皮纸背景、大地棕文字(不用纯黑)、薄荷青主色、按钮与输入框为 50px 胶囊、交互元素圆角不低于 12px、仅主按钮使用 3D 像素堆叠阴影;字体为 Nunito + Noto Sans SC,正文 500、标题 600–900;动效为 cubic-bezier(0.4, 0, 0.2, 1)、0.15–0.35s。组件涵盖按钮、卡片、标题、分隔、折叠、标签页、表单控件、上传、日期时间选择、表单容器、浮层、反馈、通知、数据展示、计数、媒体与装饰等类别,共 39 个组件,参考文档按类别分列于 references/components/。
使用方式:React 项目可安装 npm 包,在应用入口一次性引入样式 import 'animal-island-ui/style',否则组件无样式;无 npm 场景使用 CDN + Babel 运行时的单文件 HTML。自定义元素与布局请使用 var(--animal-*) 令牌而非硬编码色值,主题可在引入样式后覆盖这些变量;完整 :root 模板见 css-variables.md。图标必须来自 naive-icons 包,不用 emoji、Unicode 符号、手写 SVG 或第三方图标库。
限制与硬性规则:不得臆造 props,属性须见于组件参考或包内 TypeScript 声明;不用纯黑或冷灰背景、不用冷蓝聚焦环(输入框聚焦为黄色 #ffcc00、按钮为薄荷主色);Select 仅支持受控,受控的 Input/Switch/Checkbox/Radio/Rate 需提供 onChange;优先使用库组件而非原生按钮、输入框、下拉与勾选控件;Modal 保留 SVG blob 裁剪路径,Title 为燕尾丝带形态;仅从包根与 animal-island-ui/style 引入,不做深层导入;不得用 className/style 覆盖组件的颜色、圆角与阴影。安装命令、具体价格与平台支持等信息暂未提供。