UX UI Agent Skills：让 Claude Code 输出符合 WCAG 设计标准的 UI

UX UI Agent Skills：让 Claude Code 拥有资深设计架构师级别的 UI 生产能力

当大多数 AI 编程工具输出的界面还停留在「indigo-to-purple 渐变 + 四个等大卡片 + emoji 图标」阶段时，有一批 skill 已经在用 WCAG 标准、设计系统和客观门控来约束 AI 的每一次输出。ux-ui-agent-skills 正是其中将设计工程化做得最彻底的 skill 套装。

这个 skill 将 Claude Code 武装成一名资深设计架构师：内置 DTCG 三层 token 架构（W3C Design Token Token Community Group 规范）、52 个可直接调用的组件规格、WCAG 2.2 AA/AAA 无障碍审计、138 个设计系统参考（涵盖 Apple、Linear、Stripe、Vercel、Notion、shadcn 等），以及 50+ 个客观门控规则——它们会在构建失败前就让不符合标准的代码无法通过，而不是靠主观审美来判断。

ux-ui-agent-skills 包含 17 个子 skill，覆盖从设计到代码的完整流程：design-component 负责组件规格设计，design-code 生成跨框架（React+Tailwind、SwiftUI、Vue、Svelte、Angular、Flutter 等）的生产级代码，a11y-audit 做无障碍合规审计，design-review 做六维尼尔森启发式设计评审，design-tokens 管理 DTCG token，apply-aesthetic 应用 138 个设计系统的视觉方向，redesign 将现有网站升级到设计品质标准而不破坏功能，brandkit 从需求文档生成完整品牌设计系统，ux-writing 撰写界面文案和错误提示。每一项 skill 都可以独立调用，也可以串联成完整的设计-实现-验证流程。

截至 2026 年 10 月 6 日，该仓库在 GitHub 拥有约 1,500 颗星（Skill Leaderboard 数据显示 1.5k，近 7 天增长 +3.6%），16 个 fork，在 Agent Skills Hub 平台累计约 4,700 次安装。ClaudeSkills.info 将其排在 Design 分类第 29 位。它于 2026 年 10 月 6 日出现在 GitHub Trending 日榜，并持续受到社区关注。

GitHub：https://github.com/plugin87/ux-ui-agent-skills

作者为 plugin87，具体身份公开资料较少，但从仓库的维护质量（v2.9.2 版本、持续更新的 Changelog、完整的测试套件）判断，这是一位深度关注 AI 前端工程化的独立开发者。仓库内置 49 个可在线预览的真实 HTML 页面，展示了完整的设计系统输出能力。

ux-ui-agent-skills 的核心理念是「设计是门工程，不是审美偏好」。大多数 AI 工具对「好设计」和「差设计」的区别停留在「你觉得好不好看」，而这个 skill 建立了客观门控：用 axe-core 做无障碍扫描、用 WCAG 2.2 色对比度公式做色彩验证、用 DTCG token 结构做值检查、用正则规则识别 AI 界面俗套（hardcoded 颜色、emoji 图标、单一 radius 等）。当一个 UI 页面未通过门控时，Claude 会得到具体的问题描述和修复建议，而不是「再来一次」的空泛指令。

该 skill 还内置了 slop detector——专门识别 AI 生成界面中的标志性俗套：千篇一律的 indigo-to-blue 渐变、用 emoji 代替图标、单一半径值 everywhere、「删除账户」按钮用主色调而非危险色。门控会直接将这些标记为 HIGH 严重级别，使 AI 无法用主观偏好来辩驳。官方提供的对比案例显示：同一任务下，未经约束的 AI 输出被门控拒绝了 10 项指标，而符合规范的输出通过了全部 51 项门控。

ux-ui-agent-skills 是纯指令层，不依赖任何构建工具、npm 包或运行时环境。安装即用，无需配置。两种安装方式：Claude Code 用户可通过官方插件市场一键安装完整套装（19 个 skill、5 个命令、design-critic agent），跨项目共享，无需在每个仓库内复制文件；也可以用 npx 在当前项目内初始化，将完整 kit 装入项目文件夹。

Claude Code 安装命令：

/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills

npx 安装命令：

npx ux-ui-agent-skills init

支持 Claude Code、Codex、Cursor、Windsurf、Devin、OpenCode 等所有支持 SKILL.md 的 agent。skill 内置的 demo 页面（plugin87.github.io/ux-ui-agent-skills）可在不安装的情况下预览完整输出效果——20 个完整产品界面、52 个组件示例、light/dark 双主题。

该 skill 适合以下场景和人群：前端开发者想让 AI 生成的界面符合设计系统规范，而非每次都要手动调整；设计系统工程师需要从设计 token 到组件代码的完整可追溯链路；UX/UI 设计师想让 AI 辅助做设计评审和可访问性合规检查；AI 工程化团队希望在代码生成流程中引入客观质量门控，让 AI 的每一次输出都可量化评估；无障碍合规团队需要快速对现有 UI 做 WCAG 2.2 AA/AAA 合规审计。

案例一：设计组件规格
输入：Use the design-component skill to create a complete specification for notification in a SaaS dashboard.
输出：notification 组件的完整规格文档，包含 anatomy（图标 + 文案 + 时间戳 + 操作按钮）、variants（info/success/warning/error 四类）、sizes（sm/md/lg）、8 个状态（default/hover/focus/active/disabled/loading/success/error）、token 映射（$color-semantic-notification-bg-warning 等）、无障碍要求（ARIA role=”status”，键盘可聚焦，屏幕阅读器测试通过）。

案例二：无障碍审计
输入：Run a11y-audit on the login form at /login
输出：色对比度不足的具体位置（如 submit 按钮文字 #999999 on #FFFFFF 为 2.1:1，需要达到 4.5:1）、目标尺寸不合规的具体元素（如关闭按钮 15×16px，需要 24×24px）、键盘导航缺失的交互节点，以及每条问题的严重级别（Critical/Major/Minor）和修复建议。门控失败时构建阻断，而非静默通过。

ux-ui-agent-skills 是目前 GitHub 上对 AI 生成界面进行工程化约束最系统的 skill 套装。它不依赖模型自身的主观审美，而是通过 token 规范、W3C WCAG 标准、axe-core 扫描和自研 slop detector 建立了一套可以量化的设计质量基线——AI 输出要么通过门控，要么被打回重写，没有中间地带。

GitHub: https://github.com/plugin87/ux-ui-agent-skills