--- title: "创意与设计参考：reactbits design assistant agent - 创意与设计 | 思行致远" canonical: "https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-reactbits-design-assistant-agent/" dateModified: "2026-06-30" datePublished: "2026-06-30" --- 打开 AI·外脑目录 AI·外脑 [返回专栏首页](https://siyuanailab.com/knowledge/) × 站内搜索 ⌕ 主要栏目 - [AI 核心概念](https://siyuanailab.com/knowledge/ai-core/) - [工作流](https://siyuanailab.com/knowledge/workflows/) - [工具配置与选型](https://siyuanailab.com/knowledge/toolkits/) - [信源与标准](https://siyuanailab.com/knowledge/sources/) - [场景案例 待开发](https://siyuanailab.com/knowledge/scenarios/) - [职业与能力](https://siyuanailab.com/knowledge/career/) 专题 - [从这里开始](https://siyuanailab.com/knowledge/start/) - [获取与安装](https://siyuanailab.com/knowledge/install/) - [建设日志](https://siyuanailab.com/knowledge/ops/) [工作流子目录](https://siyuanailab.com/knowledge/workflows/) 基础设施层 - [浏览器自动化 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/browser-automation/) - [MCP 工具 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/mcp-tools/) - [文件系统与本地执行 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/filesystem-local/) - [API 网关与工具路由 **5**](https://siyuanailab.com/knowledge/workflows/infrastructure/api-tool-routing/) Skill 生产线 - [目标明确 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/goal-definition/) - [Skill 设计 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/skill-design/) - [代码实现 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/implementation/) - [测试评估 **5**](https://siyuanailab.com/knowledge/workflows/skill-forge/testing-evaluation/) Skill 参考库 - [写作与内容 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/writing-content/) - [研究与知识 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/research-knowledge/) - [沟通与协作 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/communication-collaboration/) - [产品与项目 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/product-project/) - [数据与分析 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/data-analysis/) - [创意与设计 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/) - [WF-066 创意与设计参考：AI Image PromptGenerator](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-ai-image-promptgenerator/) - [WF-067 创意与设计参考：design review ai](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-design-review-ai/) - [WF-068 创意与设计参考：img prompt](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-img-prompt/) - [WF-069 创意与设计参考：interior design assistant agent skill](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-interior-design-assistant-agent-skill/) - [WF-070 创意与设计参考：reactbits design assistant agent](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-reactbits-design-assistant-agent/) - [商业与营销 **5**](https://siyuanailab.com/knowledge/workflows/skill-library/business-marketing/) Agent Building 只收录有多步工作流、工作标准、Loop、Harness、工具链或通信机制的真 Agent；不收纯 persona、profile、curated list 或只有 system prompt 的仓库。 - [多 Agent 框架 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/multi-agent-frameworks/) - [工作流编排 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/workflow-orchestration/) - [Sub-agent 模式 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/sub-agent-patterns/) - [Harness 与评估 **5**](https://siyuanailab.com/knowledge/workflows/agent-building/harness-evaluation/) Skill 参考库 · 创意与设计 · Skill 解读 · WF-070 # 创意与设计参考：reactbits design assistant agent 思行致远 · 2026/6/30 · 置信度：中 创意生成设计辅助图像提示词设计评审 一个 ReactBits 专家 Agent，专门辅助选择动画组件、编排动效、控制性能预算和无障碍实现。 # reactbits design assistant agent > 一个 ReactBits 专家 Agent，专门辅助选择动画组件、编排动效、控制性能预算和无障碍实现。 ## 这个能力解决什么问题 它解决的是前端团队使用 ReactBits 这类动效组件库时，容易只追求炫技、忽略品牌、性能和可访问性的问题。输入是页面类型、品牌个性、目标受众、性能/无障碍要求和具体 UI 问题；输出是组件选择、prop 建议、组合方案、替代方案和代码示例。 ## 核心逻辑 Agent 先问清上下文，再按决策框架选组件：识别 UI 目标，匹配 Text/UI/Background/Animation 类别，考虑品牌个性，检查性能预算，验证 accessibility。每次建议都要求具体组件名、prop 值、trade-off 和完整示例；遇到移动端、粒子、并发动画等场景，会给 bundle、FPS、particle count 和 prefers-reduced-motion 约束。 ## 技术结构 - 关键模块：`AGENT.md` 定义 agent persona、调用场景、决策框架、性能预算、常见场景；README 展示安装、示例和知识范围。 - 调用链路：用户设计问题 -> context questions -> component selection framework -> recommendation/trade-off/code -> accessibility/performance checklist。 - 输入输出：输入是前端设计需求；输出是 ReactBits 组件方案和实现建议。 - 核心依赖：Claude Code/OpenClaw agent 机制，ReactBits 组件知识，可选 ReactBits MCP tools。 ## 为什么值得参考 它把“组件推荐”写成设计咨询，而不是代码补全。尤其性能预算表、动画时长表和 accessibility checklist 很实用，能防止 Agent 一味堆动效。对前端设计 Skill 来说，这是把品味、工程和无障碍放在同一决策框里的样板。 ## 为什么不建议直接套用 它只适用于 ReactBits 生态，组件清单和 prop 可能随上游变化。README 里的代码示例是说明性内容，不保证直接适配你的项目结构。Agent 可能建议高成本动画，仍需要真实设备测试、Playwright 截图和性能 profiling。 ## 如何改造成自己的版本 把 ReactBits 替换成你的组件库，例如 shadcn、Ant Design 或内部 Design System。保留五步选择框架和性能预算，把组件 catalog 变成可更新资源文件。每条建议必须带“不用这个组件的替代方案”和“移动端降级策略”。 ## 适用场景 - React 动效组件选型和组合。 - Landing page、portfolio、SaaS 页面动效审查。 - 前端设计 agent 的决策框架参考。 ## 不适用场景 - 不使用 ReactBits 或 React 技术栈。 - 需要直接生成完整应用而非设计咨询。 - 没有性能测试和无障碍验收的上线流程。 ## 参考信息 - 原项目：[reactbits-design-assistant-agent](https://github.com/unobtuse/reactbits-design-assistant-agent) - 作者：unobtuse - 相关概念：[[动效编排]]、[[前端无障碍]] - 相关卡片：保守留空 ## 参考对象信息 **名称：**reactbits-design-assistant-agent **作者：**unobtuse **链接：**[https://github.com/unobtuse/reactbits-design-assistant-agent](https://github.com/unobtuse/reactbits-design-assistant-agent) ## 适用场景与行动 **场景：**Skill 参考库 / 创意与设计 **适合谁：**关注 AI 工作流、Skill 生产和 Agent Building 的读者 **下一步：**先阅读边界说明，再判断它是否适合改造成自己的创意与设计流程。 当前内容按公开来源和已审核草稿整理，只作为工作流理解与方法论参考。 涉及客户数据、外部平台、会议记录和业务系统的场景，必须保留人工确认与授权边界。 [上一张：创意与设计参考：interior design assistant agent skill](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/skill-library-creative-design-interior-design-assistant-agent-skill/) [返回当前分类](https://siyuanailab.com/knowledge/workflows/skill-library/creative-design/) [返回工作流专栏](https://siyuanailab.com/knowledge/workflows/)