plugin87/ux-ui-agent-skills

解决的问题

该项目提供了一个全面的知识与指令层，可将AI代理（特别是Claude）转变为高级UX/UI设计架构师。它解决了AI生成UI存在不一致、不可访问或‘粗糙’的问题，通过提供结构化的设计令牌、无障碍标准（WCAG 2.2）以及138个设计系统库，确保在任何前端框架中都能生成生产就绪的、基于令牌的输出。

如何工作

该工具包作为一个纯指令与知识层，通过 CLAUDE.md 文件与Claude Code或Claude驱动的IDE集成。它使用一个 请求路由器 按需加载特定规则和知识。该系统围绕三个核心驱动构建：

1. 知识层：包含大量设计令牌（DTCG格式）、遵循原子设计的组件规范，以及包含美学原型的“品味层”。
2. 可运行技能：17个可调用的 /skills（例如 /brandkit、/a11y-audit、/design-code），用于协调复杂的设流程。
3. 目标关卡：一套Python和Node.js脚本，可程序化验证令牌有效性、在亮暗模式下的WCAG对比度比率以及无障碍要求，以确保输出正确性。

适用人群

需要专业级设计系统、严格无障碍合规性以及与框架无关实现的前端开发者、产品设计师及团队，他们使用AI代理生成UI代码。

主要亮点

• 框架无关：使用适配器协议可支持任何技术栈，包括React、Next.js、SwiftUI、Vue、Svelte和Flutter。
• 无障碍优先：内置WCAG 2.2 AA/AAA审计功能和自动对比度验证脚本。
• 设计令牌架构：采用DTCG标准实现三级层次结构（Primitive → Semantic → Component）。
• 丰富库资源：包含138个品牌级设计系统以提供视觉方向，以及50个详细的组件规范。
• 对抗性评审：配备由 design-critic 代理驱动的 /critique 技能，可渲染作品并基于高级设计证据提出拒绝理由。