Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub用于评估UI或设计是否符合WCAG 2.2及ARIA标准，检查对比度、键盘导航等无障碍问题并提供修复建议。
Install All Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
Skills in Collection (18)
用于评估UI或设计是否符合WCAG 2.2及ARIA标准，检查对比度、键盘导航等无障碍问题并提供修复建议。
用户要求进行无障碍审计
验证组件是否符合POUR原则
检查对比度和键盘交互
npx skills add plugin87/ux-ui-agent-skills --skill a11y-audit -g -y
该技能用于应用视觉风格指南或设计系统（如 Apple、Stripe），通过解析并更新语义化 Token（颜色、排版等）来实现特定品牌调性，同时确保符合无障碍标准。
用户指定具体设计风格或原型
要求提升界面高级感或独特性
需要应用特定命名设计系统
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
根据品牌简报生成符合 WCAG 标准的完整设计系统，包含 OKLCH 色彩、语义层、排版及动效令牌，并输出 theme.css。
用户需要从零开始构建品牌设计基础
用户需要新的调色板或主题化令牌套件
npx skills add plugin87/ux-ui-agent-skills --skill brandkit -g -y
生成生产级、无障碍且基于设计令牌的前端组件代码，支持多种框架。通过适配器系统解析规范，确保无硬编码值、完整状态覆盖及深色模式支持，并执行严格自检以保障代码质量与一致性。
需要为特定技术栈生成UI组件代码
要求输出符合可访问性标准的完整前端文件
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于设计高质量UI组件规范，涵盖解剖结构、变体、尺寸、8种状态及无障碍适配。适用于按钮等组件在编码前的规格定义，确保视觉与可访问性标准。
用户需要设计或文档化UI组件（如按钮、输入框）的规格
需要在编码前确定组件的状态、变体和Token映射
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
前端UI设计质量规范，强制要求运行自动化门禁验证对比度、状态及响应式布局，禁止使用Emoji，确保Token语义一致性与输出完整性。
构建或审查屏幕/组件时
进行UI主题化工作时
npx skills add plugin87/ux-ui-agent-skills --skill design-doctrine -g -y
建立设计质量门禁，集成 Token 校验、无障碍自动化测试、视觉回归及手动检查，防止 UI 退化。
用户希望设置 CI 质量门禁
需要防止设计回归
在发布前对组件或页面进行 QA
npx skills add plugin87/ux-ui-agent-skills --skill design-qa -g -y
基于Nielsen启发式规则和6维权重对设计/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设计与代码的同步，管理3层DTCG Token与Figma变量的映射。支持双向同步、组件一致性校验及Token验证，确保设计稿与代码状态一致。
需要将Token推送至Figma
从Figma拉取设计到代码
设置Token与Variable同步
检查设计与代码的差异
npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -g -y
管理设计系统的演进治理，包括版本控制、贡献流程、废弃策略及变更沟通。用于处理组件或Token的添加、提升、废弃决策及版本升级，防止系统碎片化。
用户想要添加或提升组件/Token
需要决定版本升级幅度
设置贡献流程
执行废弃策略
npx skills add plugin87/ux-ui-agent-skills --skill governance -g -y
将设计参考图或截图转化为基于 Token 的可访问 UI 代码。通过推断设计系统（颜色、排版、间距等），生成符合 DTCG 标准的主题文件，并重建组件布局，最终通过自动化脚本验证对比度、无障碍及渲染效果。
用户提供设计稿、截图或 Mockup
需要将视觉设计还原为可维护的 UI 代码
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
用于在不同设计系统间进行迁移、互操作或主题映射，通过角色交叉表转换Token并验证无障碍对比度。
提及设计系统迁移
需要与其他UI库（如Material, Ant等）互操作
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -g -y
优化UI性能以符合Core Web Vitals标准，涵盖加载策略、防布局偏移及动画优化。用于提升速度、修复卡顿或布局跳动，确保在低端设备上流畅运行并达到性能预算。
用户希望改善UI响应速度
需要修复页面抖动或布局偏移问题
目标是达成Web Vitals性能指标
针对低端设备优化用户体验
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质量。涵盖扫描、诊断、风格制定与应用、验证等步骤，强调单主题一致性与无障碍合规。
用户希望改进或现代化现有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
负责撰写或审查界面文案，包括按钮、错误提示、空状态等。依据语音语调系统应用公式与包容性语言规则，确保清晰简洁，并通过预发清单验证。
需要生成UI界面文案
需要审查或优化现有界面文本
npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -g -y
