affectUI 是一套面向 AI 产品和现代 SaaS 应用的 React 组件、插画与动效库，仓库代码以 MIT 协议发布。它的切入点很具体：不做通用按钮和输入框那一套，而是直接给 Agent 工作台的高频状态做现成零件，比如工具调用卡片、AI 消息下的操作栏、思考中加载态、邮件草稿审阅、评论串与决策收件箱。做 Agent 客户端时，这些状态往往最耗时间，拿现成组件拼起来，工作台一下就有了可交付的样子。
软件介绍
每个组件都是一个样式内聚的 .tsx 文件，不依赖 Tailwind，也不需要单独的 CSS 配置，取用方式接近 shadcn/ui：用 shadcn CLI 把单个组件拉到 components/ui，或者直接把仓库文件复制进项目，拿到的是自己拥有的源码。运行要求 React 19，带不带 TypeScript 都可以，Next.js 或纯 React 项目都能接。
适用场景
用通用组件库拼 AI 客户端，最费劲的从来不是基础控件，而是那些只有 AI 产品才有的状态：Agent 正在调用工具、模型在流式输出、要给用户看一条建议并允许反悔、要把一封待发邮件摊开审阅。这些状态自己画，动效要逐帧调，无障碍和暗色模式还得兜底，结果同一个工具调用条每个项目重画一遍，质感还参差不齐。affectUI 就是把这部分脏活提前做完，让开发者只关心业务逻辑。
主要功能
面向 AI 场景的现成组件
Tool Call Card 把一次工具调用收成一行，带计时、状态和摘要，展开后看参数与结果；Message Actions 是消息下的操作栏，复制变对勾、重新生成转圈并展开版本切换；Thinking Loader 是回复前那枚工作小药丸，滚动后停在对勾上。这些零件直接对应 AI 界面的交互状态，不用再为每个状态单独画一套。
单文件与 shadcn 式取用
每个组件就是一个 .tsx 文件，样式写在文件内部，没有 CSS 框架要配。按需取用，不会因为引入一个组件就拖进一整套设计系统，项目里只留下真正用到的代码，后续改样式也不用跟框架配置较劲。
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 工作台专属状态时挑几个组件引入。
获取方式
GitHub 国内访问较慢，如打不开可多刷新几次
下载方式
本站下载统一走下载说明页中转，正文不直接贴网盘地址：下载说明，按页内指引操作即可。
关注「软件教程管家」
回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。
本站资源仅供个人学习交流，请勿用于商业用途。软件与资料版权归原作者所有；如有侵权，请通过公众号「软件教程管家」联系我们，我们将在 24 小时内下架处理。查看免责声明 ›
