--- name: ui-picks description: UI 库选型表：做界面时按场景从表里取组件移植进项目，覆盖装饰特效、卡片编排、状态转场、微交互小件、产品控件、营销/仪表盘块、技术图解与主视觉、AI 聊天界面、界面音效 --- # UI Picks 个人品味的 UI 库选型表。组件清单和 API 以各库的 llms.txt / registry / 文档为准，构建时现取；下文只记查不到的获取方式、坑和红线。 ## 使用规则 1. 按任务场景选库，不按用户提到的库名："要个粒子背景"即特效场景。 2. 先查 `package.json`：项目已用表内库直接用；已用竞品时提示本表推荐，保留现有依赖。 3. 装饰性动效不限场景，产品 UI 也可按需用。内容层独立于特效层：文字可选中、链接可点击、核心信息不依赖特效。 4. WebGL / shader 特效（Canvas UI、Paper Shaders）只在用户明确要求时启用，读 [references/shaders.md](references/shaders.md)。 ## 移植流程 复制分发的库（源码落进项目）都按这一步走，完成标准是每个 import 已对账、每个 token 已映射： 1. 取源码进项目，剥掉示例里的 mock 数据、定时状态流、站点专属 CSS 变量和共享 atoms。 2. 依赖对账：逐个看组件带来的依赖（motion、Radix、vaul、three 等），项目已有的复用，没有的先评估 CSS 或原生替代，确实需要再引入并说明。 3. 颜色、圆角、字体、间距映射到项目设计系统；库自带的 token 体系和项目 token 二选一，不并存。 4. 按 ui-craft 核对「标签与页眉」「其他模板痕迹」、性能和 reduced-motion。 ## 路由表 | 场景 | 库 | | --- | --- | | 流光边框、液态 morph、液态金属、思考态 loader、图片生成态 | Libraries.dev | | 卡片空间编排（cover-flow、扇形、arc） | Amicro | | 既有元素的 CSS 状态转场（resize、数字翻转、开合、抖动） | transitions.dev | | 图标 morph（menu→X） | morphicons | | 带动效的 Apple 味小件（Folder、OTP、Gooey Nav、原地确认） | Rare UI | | 扁平无动效的实用小件（表单、日历、票据/名片 mockup、社交卡、Dock） | Opensource UI | | 产品控件，shadcn / 复制源码风格 | Fluid Functionalism | | 产品控件整包，React 19 + Tailwind v4 | Appica UI | | 复杂交互控件（签名、快捷键录制、@提及、滑动操作、长按确认、主题切换转场） | Arc | | 营销页与仪表盘的动效块（hero、卡片块、定价块、图表） | Spectrum UI | | 把一个技术概念画成会动的机器（文档配图、落地页或官网主视觉） | Anatomy | | AI 界面视觉件（思考态、流式、审批、工具调用） | Beautiful UI / Fluid Functionalism | | AI 聊天 runtime（线程、流式、工具调用） | assistant-ui | | 界面音效 | UI SFX | ## 库 ### Libraries.dev — 五个零依赖效果包（React） - `border-beam` 流光边框、`liquid-gooey` 液态 morph/move、`metal-fx` 液态金属（环、按钮、金属字，内置 Paper Shaders liquidMetal 引擎）、`thinking-orbs` 点阵思考球、`img-fx` WebGL 图片生成/加载态（peer `three`）；站点 [libraries.dev](https://libraries.dev)，各包子站有 demo，MIT。 - 安装：`npm i <包名>`，只 peer React；不走复制分发。 ### Amicro — 卡片编排微交互（React） - 站点 [amicro.vercel.app](https://amicro.vercel.app)，无 llms.txt，纯客户端渲染，选组件靠站点浏览。 - 获取：从站点组件页复制源码（依赖 Motion）。官方 `npx @subhanhq/amicro@latest add` 不可用（npm 包 1.0.1 无可执行入口，2026-10 验证）。 ### transitions.dev — CSS 状态转场片段（框架无关） - 站点 [transitions.dev](https://transitions.dev)。获取：`npx transitions-dev add `（免费款无需账号，`list` 看全量；Pro 需浏览器登录）或站点卡片复制。片段自含 `:root` 语义变量、`t-*` 命名空间类和 reduced-motion guard。 - 红线：多款默认带 blur，与 ui-craft 动效参考「blur 只在视觉语言需要且实测流畅时加入」冲突，实测流畅且视觉语言支持才保留。 ### morphicons — SVG 图标 morph（React / Vue / Svelte / RN / vanilla） - 零依赖 ~6-8KB；机读 （完整 API 在 llms-full.txt）。SSR 干净、默认 `aria-hidden`、自动尊重 reduced-motion。 - 安装：`npm i morphicons`，按框架取 `morphicons/react|vue|svelte|react-native|dom` 入口；图标以数据形式导入（装 `lucide` 包，不是 `lucide-react` 组件）。 - 红线：只支持 stroke 图标（Lucide/Tabler/Heroicons outline/Iconoir）；非 24×24 网格的包先用 `fitIcon` 重排。 ### Rare UI — Apple 味动效小件（React / shadcn registry） - 机读 ，MIT。获取：`npx shadcn@latest add swamimalode07/rare-ui/<组件>`。 - 红线：Duration Picker 拉 flubber/figma-squircle，Emoji Reaction 拉 react-apple-emojis（Apple emoji 资产授权自担）。 ### Opensource UI — 自包含扁平小件（React / Next.js / Tailwind v4） - 单文件组件，只靠 Tailwind + clsx/tailwind-merge，图标是仓库内 SVG；机读 ，组件页 `/components/` 带源码，仓库 `skills/opensource-ui/references/catalog.md` 是全量目录，MIT。 - 获取：组件页复制；`cn()` 用项目已有的，图标从仓库 `icons/` 取或换项目图标库。 - 红线：它的视觉语言（Instrument Serif + Geist、纯扁平、无渐变发光）很强势，移植时按项目 token 重映射，不把它的设计体系带进项目。 ### Fluid Functionalism — 成品感产品控件（React / shadcn registry） - 文档 [fluidfunctionalism.com/docs](https://www.fluidfunctionalism.com/docs)，机读 。 - 获取：`npx shadcn@latest add https://www.fluidfunctionalism.com/r/<组件>.json`；`/r/base/` 路径只有部分组件，用 `/r/`。 ### Appica UI — 产品控件整包（React 19 / Tailwind v4 / Base UI） - 机读 ，文档页加 `.md` 取纯文本，MIT。 - 安装：`pnpm add @appica/ui-react`，全局样式里 `@import '@appica/ui-react/styles.css'` 并加 `@source '../node_modules/@appica/ui-react/dist'`（相对该 CSS 文件的真实路径，写裸包名会静默失效、整体无样式）；按子路径逐个导入 `@appica/ui-react/button`。 - 红线：React 19 与 Tailwind v4 是硬门槛，不降级适配；它按角色命名的 token（`bg-background-muted`）和项目已有 shadcn token 二选一。 ### Arc — 复杂交互控件（React / shadcn registry / Motion） - 只用免费项（MIT，源码 [kuratlielia/arc-library](https://github.com/kuratlielia/arc-library)）；机读 ，组件页加 `/markdown` 取何时用、props、键盘与无障碍说明。 - 获取：`npx shadcn@latest add https://uiarc.dev/r/<组件>.json`。 - 红线：样式是 CSS modules + CSS 变量而非 Tailwind，变量映射到项目 token，不引入它的 `arc-foundation`，文件落进项目既有组件目录；它的规则去掉了 focus ring，按 ui-craft 补回 `:focus-visible`；不装它的 skill 与规则文件；Pro 项不照着重建。 ### Spectrum UI — 营销页 / 仪表盘动效块（React / shadcn registry / Motion） - 建立在 shadcn + Radix + Motion 上，机读 ，Apache-2.0。 - 获取：`npx shadcn@latest add @spectrumui/<组件>`，或 `claude mcp add spectrum-ui -- npx -y @spectrumui/mcp` 后直接让 MCP 装；每个组件页有已验证命令。 - 红线：每个组件按 registry 拉自己的依赖（motion、vaul、react-use-measure 等），移植流程第 2 步逐个对账。 ### Anatomy — 可交互的等轴测机器图（框架无关 TS→SVG/HTML / React / 自定义元素） - 把概念做成一台由几十到上百个立体零件组成、会动的机器，零件运动和读数出自同一份模型；只有一种画风：线稿等轴测、四档明暗、一个强调色。站点 [skills.wheresryan.sh/anatomy](https://skills.wheresryan.sh/anatomy)，源码 [wheresryan22/anatomy](https://github.com/wheresryan22/anatomy)，MIT，零依赖，Node ≥ 20.10。 - 现做一张：在目标项目里 `npx skills add wheresryan22/anatomy`（默认装进当前项目，`-g` 才装到全局），按它的流程做。用现成的 33 张图：`npm i anatomy-figures`，React 组件或 `` 自定义元素，颜色走 26 个 `--anatomy-*` 变量，映射到项目 token。 - 红线：小图 30–90 分钟、主视觉级 2–4 小时，开工前跟用户说清；画风和项目视觉语言不搭时不用；原生 APP 只能 WebView 嵌入或导出静态 SVG。 ### Beautiful UI — AI-native 界面原语（React / TypeScript） - 思考态、流式回答、人工审批、工具调用、AI 编辑器；站点 [beautifului.dev](https://www.beautifului.dev/)，shadcn registry 目录 ，无 llms.txt。MIT。 - 获取：`npx shadcn@latest add https://www.beautifului.dev/r/<组件>.json`；部分另需 `glimm`、`liveline`、`iconoir-react`。 ### assistant-ui — AI 聊天 runtime（React / TS） - 机读 。 - 安装：已有项目 `npx assistant-ui@latest init`，新项目 `npx assistant-ui@latest create`；或 `@assistant-ui/react` + 对应 runtime 包（如 `@assistant-ui/react-ai-sdk`）。样式与密度对齐项目设计系统。 ### UI SFX — 语义化界面音效（Web Audio / 跨端音频文件） - 按交互语义（success、drop、processing、level-up）调用 cue，换音色 pack 不改交互代码；机读 ，接线提示词 `/agent-prompt.txt`。代码 MIT、音频 CC0。 - 安装 `npm i uisfx`：`createUISFX({ pack, preferences: {} })` + 首次可信交互里 `await ui.unlock()`；运行时 12KB 零依赖、本地合成。React Native / 原生 / 引擎侧用包内 `uisfx/sounds/{pack}/{cue}.mp3|ogg` 与 `uisfx/manifest`。 - 红线：音效只强化已有的可见反馈；提供持久静音开关（`setEnabled`），loop cue 随可见状态结束即 `stop()`，密集界面里 hover 音保持安静或关闭。