Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub依据 WCAG 2.2 和 ARIA 规范对 UI/设计进行无障碍审计，通过脚本实测对比度和状态，输出包含严重程度及修复建议的审查报告。
Install All Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
Skills in Collection (17)
依据 WCAG 2.2 和 ARIA 规范对 UI/设计进行无障碍审计，通过脚本实测对比度和状态，输出包含严重程度及修复建议的审查报告。
用户要求进行无障碍检查
验证组件是否符合 POUR 原则
需要确认对比度或键盘导航合规性
npx skills add plugin87/ux-ui-agent-skills --skill a11y-audit -g -y
根据指定原型或设计系统（如 Apple、Stripe）解析并应用视觉风格到 Token 体系，涵盖色彩、排版及动效映射，并强制校验无障碍对比度，确保品牌感与可访问性平衡。
用户希望应用特定视觉风格或品牌调性
要求提升设计的高级感或非通用感
需要将抽象美学转化为具体的 Token 配置
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
根据简报生成完整的品牌设计系统，包含DTCG令牌、色彩、排版及主题CSS。确保符合WCAG无障碍标准，支持明暗模式，为产品提供可维护的设计基础。
用户需要从零开始构建品牌或设计基础
需要生成新的调色板和字体系统
需要可主题化的令牌套件
npx skills add plugin87/ux-ui-agent-skills --skill brandkit -g -y
根据指定框架和样式方法，生成生产就绪、可访问且基于Token的UI组件代码。支持多前端框架，强制使用语义化Token、处理8种状态及暗色模式，确保代码完整无占位符并经过严格的可访问性与主题一致性验证。
用户需要特定技术栈的UI组件代码
要求生成符合设计令牌规范的界面
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于设计符合高标准规范的UI组件规格，涵盖解剖结构、变体、尺寸、8种状态、Token映射及无障碍访问。需在编码前或同时生成文档，并通过自动化脚本验证对比度和可访问性。
用户要求设计UI组件规范
需要为按钮、输入框等组件生成详细规格文档
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
建立设计质量门禁，集成 Token/Lint、无障碍(a11y)、对比度及视觉回归测试。通过 CI 自动化拦截设计缺陷，确保组件状态、主题及 RTL 等场景下的 UI 一致性与合规性。
用户要求运行设计质量检查或门禁
防止设计回归的 CI 流程配置
发布前对组件或屏幕进行 QA
npx skills add plugin87/ux-ui-agent-skills --skill design-qa -g -y
基于尼尔森十大启发式原则和六个加权维度，对设计或UI进行结构化审查、评分及可访问性检查，输出优先级发现的问题与修复建议。
需要设计质量评估
执行可用性审计
界面合规性检查
npx skills add plugin87/ux-ui-agent-skills --skill design-review -g -y
基于DTCG标准生成、扩展或审计设计令牌，涵盖颜色、排版等13类属性。遵循三层架构，确保无障碍合规并输出JSON。
生成或修改设计令牌
验证令牌文件有效性
创建多品牌主题
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -g -y
实现Figma设计令牌与代码的同步，支持双向映射、MCP集成及组件一致性校验，确保设计系统与代码严格对齐。
需要同步Figma变量到代码或反之
检查设计与代码的组件差异
配置设计令牌同步流程
npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -g -y
管理设计系统的版本演进、贡献流程、废弃策略及变更沟通，确保系统一致性。适用于组件或 Token 的添加、提升、废弃决策，以及版本升级和流程规范制定。
用户想要添加或推广组件/Token
需要决定版本号升级幅度
设置贡献流程
执行组件或 Token 的废弃操作
npx skills add plugin87/ux-ui-agent-skills --skill governance -g -y
将设计参考图或截图转换为基于 Token 的可访问 UI 代码。自动推断色彩、排版和间距等设计系统，生成符合 WCAG 标准的主题文件并验证布局还原度。
用户提供设计稿、截图或 Mockup
需要将视觉设计转化为可执行的前端代码
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
将设计令牌与外部设计系统（如 Material、Ant）进行映射、迁移或互操作。通过角色交叉表建立映射，支持从外部采纳样式或将内部组件适配至外部框架，并验证对比度等无障碍指标。
提及跨设计系统迁移
需要与其他 UI 库（如 Ant、Material）互通
设计令牌映射或主题桥接
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -g -y
优化UI性能以符合Core Web Vitals标准，涵盖加载策略、布局偏移预防和动画性能规则，旨在提升速度、修复卡顿并改善低端设备体验。
用户希望提高页面加载速度
需要修复界面卡顿或布局偏移问题
目标是达到Web Vitals预算指标
优化低端设备上的UI流畅度
npx skills add plugin87/ux-ui-agent-skills --skill performance -g -y
指导产品原型设计与用户研究，按保真度阶梯推进（内容至代码），结合用户旅程映射与可用性测试脚本，确保每阶段验证并覆盖异常路径。
需要制作原型或线框图
规划用户流程或体验地图
制定可用性测试计划
npx skills add plugin87/ux-ui-agent-skills --skill prototype -g -y
针对现有网站或应用进行审计优先的重设计，在保留功能的前提下提升 UI 质量。通过扫描、诊断和系统化应用设计令牌与样式，消除 AI 痕迹并统一主题，确保无障碍和视觉一致性。
用户希望改善、现代化或润色现有 UI/代码库
需要升级现有网站或应用至高品质而不破坏功能
npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -y
将DTCG设计令牌转换为CSS、Tailwind、JS/TS及移动平台资源，支持多工具链与CI集成。
生成跨平台主题文件
配置令牌CI流程
执行多平台令牌输出
npx skills add plugin87/ux-ui-agent-skills --skill token-build -g -y
用于生成或审查界面文案（按钮、错误提示、空状态等），遵循特定语气语调及无障碍规范。
需要撰写界面文案
进行文案审查
npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -g -y
