用途
ui-agent-patterns 是一个技能（Skill），用于编排 AI 智能体来生成、优化和维护用户界面。它的定位是把 Karpathy 所说的“新编程语汇”与实际的 UI/UX 开发工作流衔接起来，核心问题是：如何把界面工作合理地委派给智能体，以及如何在架构层面做取舍。
资料列出的适用场景包括：把复杂的 UI 生成委派给专业化智能体；在“综合主控”与“专业智能体”两种架构之间做决策；为设计系统编排多智能体工作流；管理研究、设计、实现智能体之间的交接；构建用于迭代优化 UI 的智能体流水线；把 UI 生成扩展到单智能体能力之外。
核心概念：新编程语汇
技能将 LLM 带来的新原语列出，并给出对应的 UI 应用：Agents（自主的 LLM 工作单元，用于 UI 生成器、评审器、优化器）、Subagents（被委派的专家，如组件构建者、无障碍检查器）、Prompts（作为代码的指令，如设计规范、组件契约）、Contexts（共享状态与知识，如设计令牌、品牌规范）、Memory（持续学习，如风格偏好、历史决策）、Modes（行为配置，如草稿模式、生产模式、审计模式）、Permissions（能力边界，如只读评审与修改代码）、Tools（外部能力，如 Figma API、浏览器 DevTools、截图捕获）、Plugins（模块化扩展，如设计系统加载器、组件库）、Skills（可复用知识，如本文件所固化的经验）、Hooks（生命周期拦截，如提交前设计检查、渲染后审计）、MCP（Model Context Protocol，工具集成标准）、Workflows（编排好的序列，如设计到代码的流水线）。
三种智能体架构模式
模式一：综合主控架构（Synthesis-Master）
由单个强智能体承担完整的 UI 生成任务。适用条件：UI 任务简单且定义清晰、决策之间耦合紧密、速度关键、上下文窗口足以容纳整个任务。结构中用户请求直接进入综合主控（持完整上下文），再输出完整 UI。资料给出的实现示例中，智能体在初始化时加载设计令牌、品牌规范、组件文档与无障碍规则，然后以“资深 UI 工程师兼设计师”的角色生成组件，输出要求包含 React/TypeScript 组件、Tailwind CSS 样式、无障碍属性、响应式断点与深色模式支持。优势是编排简单、无交接开销、风格一致、延迟更低；劣势是受上下文窗口限制、单点故障、难以扩展复杂度、缺少专门领域能力。
模式二：专业化智能体集群（Specialized Agent Swarm）
多个专业智能体协作。适用条件：复杂设计系统、需要不同专长的任务、并行处理有收益、通过专业化提升质量。结构由一个编排器分发到研究、设计、代码、评审四个智能体，分别产出上下文、线框图、组件、审计。资料为每个智能体定义了职责与权限：研究智能体拥有读取代码库、搜索网络、读取 Figma 的权限，负责收集已有模式、竞品分析、用户研究、技术约束；设计智能体拥有生成图像、访问设计令牌的权限，产出布局、间距、字体、配色、交互规范；实现智能体拥有写入代码、访问组件库的权限，把设计规范翻译为生产代码（框架 React、样式 Tailwind、TypeScript）；评审智能体处于 audit 只读模式，拥有读取代码、运行测试、访问浏览器的权限，对无障碍、性能、设计还原度、代码质量进行审计。
模式三：层级委派（Hierarchical Delegation）
主智能体把子任务委派给子智能体。适用条件：包含大量组件的复杂页面、需要并行生成组件、不同组件需要不同专长。资料以“创建一个仪表盘”为例：主智能体先规划页面结构，再把页头、侧边栏、图表、表格分派给对应的子智能体并行生成，随后把组件集成为统一页面，最后做一致性审查。规划阶段的提示词要求输出结构化 JSON，为每个组件指定类型、需求、数据依赖与布局位置。
三种多智能体工作流
工作流一，设计到代码流水线（Design-to-Code Pipeline）：按顺序经过解释、设计、规范、实现、评审、优化六个阶段，上下文在阶段间传递，若某阶段出现阻塞性问题可提前退出。
工作流二，迭代优化循环（Iterative Refinement Loop）：生成、评审、优化循环，直到质量分达到阈值（示例阈值为 0.85，最大迭代 5 次）或达到最大迭代次数后返回当前最佳结果。
工作流三，并行变体生成（Parallel Variant Generation）：并行生成多个设计变体用于 A/B 参考，示例包含极简（强调留白）、大胆（强调字体）、活泼（强调交互）三种策略，随后按评分排序返回。
记忆模式
设计决策记忆（Design Decision Memory）用于跨会话保持一致性。它按项目记录决策（如“主按钮使用 bg-blue-600 而非 bg-blue-500”“卡片圆角为 rounded-xl（12px）”“错误状态使用 red-600 并带抖动动画”），记录时间戳、类别、规则与理由；检索时对历史决策做语义搜索取前若干条；在生成前把相关决策注入提示词，以维持一致性。
模式与权限
资源给出四种智能体模式：draft（快速探索式生成，质量阈值 0.6，1 次迭代，包含注释与占位内容）、production（高质量可部署，阈值 0.9，5 次迭代，不含注释与占位内容）、audit（只读评审，不可修改，生成报告）、learning（解释决策、教学，详细推理并引用来源）。
权限边界分为文件系统权限（读取代码库、写入组件、写入样式、修改配置）、工具权限（访问浏览器、访问 Figma、运行测试、部署预览），并给出常用权限组合：只读评审者（读取代码库 + 访问浏览器）、组件构建者（读取代码库 + 写入组件 + 写入样式）、完全访问（在前述基础上加修改配置、访问浏览器、运行测试）。
需要避免的反模式
资料明确列出的反模式之一是“单体巨型提示词”（Monolithic Mega-Prompt），即把所有指令塞进一个巨大的提示词中。原文该处内容被截断，其余细节暂未提供。
获取方式
该技能来自 ormus-solutions/libreuiux-claude-code，页面地址为 https://www.skills.sh/ormus-solutions/libreuiux-claude-code/ui-agent-patterns。资料未提供安装命令、收费方式或价格信息，暂未提供。