affectUI 是一套面向 AI 产品和现代 SaaS 应用的手写 React 组件、插画与动效库，作者为 Flo，仓库代码以 MIT 协议发布。它和通用 UI 库的区别在于，组件本身就围绕 Agent 工作台的典型场景设计，比如工具调用卡片、AI 消息下的操作栏、思考中加载态、邮件草稿审阅、评论串与决策收件箱等，每个组件都是一个样式内聚的 .tsx 文件，不依赖 Tailwind，也不需要单独的 CSS 配置，安装方式接近 shadcn/ui。
它属于 开源软件 里的 前端开发 资源，也是 设计资源 中面向 AI 界面的一类素材，适合做 Agent 客户端和工作台时按需取用，也能省掉自己从零画状态条的时间。
场景痛点
用通用组件库拼一个 AI 客户端，最费劲的不是按钮和输入框，而是那些只有 AI 产品才有的状态：Agent 正在调用工具、模型在流式输出、要给用户看一条建议并允许反悔、要把一封待发邮件摊开审阅。这些状态自己画，动效要逐帧调，无障碍和暗色模式还得兜底，结果同一个工具调用条每个项目重画一遍，质感还参差不齐，做出来的工作台总像临时凑出来的，离可直接交付的产品状态还差一口气，也难形成统一的交互语言。
主要功能特点
面向 AI 场景的现成组件
仓库组件直接对应 AI 界面的高频状态。Tool Call Card 把一次工具调用收成一行，带计时、状态和摘要，展开后看参数与结果；Message Actions 是消息下的操作栏，复制变对勾、重新生成转圈并展开版本切换；Thinking Loader 是回复前那枚工作小药丸，滚动后停在对勾上。这属于 UI设计 里针对交互状态的零件，也是 设计工具 可复用素材。
单文件与 shadcn 式取用
每个组件就是一个 .tsx 文件，样式写在文件内部，没有 CSS 框架要配。它沿用 shadcn/ui 的复制模式：用 shadcn CLI 把单个组件拉到 components/ui，也可直接复制仓库文件进项目，拿到的是自己拥有的源码。要求 React 19，带不带 TypeScript 都行，Next.js 或纯 React 都能接。这属于 工具推荐 里可控性较强的一类。
MCP 供编码 Agent 检索
affectUI 提供一个 MCP Server，接上一次，Claude Code、Cursor、VS Code 或 Codex 这类编码 Agent 就能搜索组件、读文档并加进工程。不想配 MCP 时，网站还提供 llms.txt。这等于把组件目录变成 Agent 可查的知识库，是 在线工具 与编码工作流的新入口。
动效、暗色与无障碍默认
组件动效走克制路线：形变、交错显现、数字滚动和状态切换都有，并尊重系统的 prefers-reduced-motion 设置。暗色模式内置，祖先节点加 dark 类即切换；默认带真实按钮、键盘支持和必要的 live region。这些细节平时最耗时间，属于 创意灵感 里直接能用的成熟方案。
免费 MIT 与 Pro 付费边界
仓库里的组件全部以 MIT 协议发布，个人和商业项目都能用；但 Pro 档另有 119 个组件、屏幕、区块和插画，包括命令菜单、聊天输入框、KPI 图表和定价页区块，源码不在这个仓库，是一次性付费、终身更新。用之前先确认看中的组件在免费仓库还是 Pro 范围，价格与授权以官网 Pro 页为准。
新项目的成熟度与适用位置
项目还比较新，仓库 Star 数和生产案例都在积累，长期维护能力有待观察，不建议把它当成大型产品唯一的 UI 基础设施。更稳妥的做法是当作 shadcn/ui 等成熟体系的补充，在需要 AI 工作台专属状态时挑几个组件引入。它适合做 Agent 客户端的开发者关注，也是 网站推荐 里值得收藏的 Web应用 资源。
官方网站
GitHub https://github.com/flohoeller/affectui
下载地址
https://pan.quark.cn/s/0fdbf80bd7ad
相关推荐
