Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub依据 WCAG 2.2 和 ARIA 规范对 UI 进行无障碍审计，通过实测工具验证对比度、键盘导航及屏幕阅读器兼容性，输出包含严重等级与修复建议的 findings 表格。
Install All Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
Skills in Collection (17)
依据 WCAG 2.2 和 ARIA 规范对 UI 进行无障碍审计，通过实测工具验证对比度、键盘导航及屏幕阅读器兼容性，输出包含严重等级与修复建议的 findings 表格。
用户要求进行无障碍检查
需要验证组件是否符合 POUR 原则
请求对比度或键盘/屏幕阅读器审查
npx skills add plugin87/ux-ui-agent-skills --skill a11y-audit -g -y
根据用户指定的风格原型或设计系统，将视觉方向解析为语义化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
生成生产级、可访问的组件代码，支持多种前端框架。通过适配器系统解析设计令牌，确保无硬编码、全状态覆盖及无障碍合规，并执行严格验证以输出完整文件。
用户请求特定技术栈的 UI 组件代码
需要基于设计令牌生成跨框架的可复用组件
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于设计符合项目规范的前端UI组件规格，涵盖解剖、变体、尺寸、状态映射及无障碍标准。通过自动化脚本验证对比度与A11y，并截图人工检查视觉细节，确保所有状态在深浅色模式下正确渲染。
用户要求设计或文档化UI组件（如按钮、输入框等）的规格说明
需要生成组件的状态测试用例并进行视觉和可访问性验证
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
建立设计质量门禁，集成 Token 校验、硬编码检查、自动化无障碍审计、对比度检测及视觉回归测试，防止设计退化。
设置 CI 质量门禁
防止设计回归
组件或页面上线前 QA
npx skills add plugin87/ux-ui-agent-skills --skill design-qa -g -y
基于尼尔森十大启发式原则和6个加权维度，对设计/UI进行结构化评分与审计。提供无障碍检查、违规范例审查及优先级排序的发现列表，生成具体修复建议和质量得分。
用户需要对现有屏幕或页面进行设计批评
需要执行UI质量评分或启发式评估
npx skills add plugin87/ux-ui-agent-skills --skill design-review -g -y
用于生成、扩展和审计 DTCG 格式的设计令牌，涵盖颜色、排版等，支持三层架构与无障碍验证。
生成或扩展设计令牌
审计令牌合规性
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -g -y
实现Figma与设计令牌的双向同步，支持代码到设计或设计到代码的映射与验证。通过MCP服务器读取变量并检查组件一致性，确保设计与代码状态对齐。
将设计令牌同步至Figma
从Figma提取设计到代码
设置令牌与变量同步流程
检查设计与代码的差异
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 代码。通过推断设计系统并映射到 Token，生成符合规范的组件代码，并通过对比、对比度及自动化脚本验证结果，确保视觉与功能一致性。
用户提供设计稿或截图并要求生成对应前端代码
需要将视觉原型转换为可维护的 Token 驱动 UI
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
将当前设计系统令牌与外部系统（如Material、Ant等）进行映射或迁移。支持采用外部风格、在外部栈上构建组件或双向迁移，包含角色交叉对照、对比度验证及无障碍检查。
需要迁移或集成外部设计系统
提及设计系统互操作性或组件库桥接
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -g -y
针对 Core Web Vitals (LCP/INP/CLS) 优化 UI 性能。涵盖加载策略、布局偏移预防及动画规则，确保在低端设备上快速稳定，解决卡顿与布局跳动问题。
用户希望提升页面加载速度或响应性
需要修复界面卡顿（jank）或布局偏移（layout shift）
目标是满足 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/代码库
需要审计当前设计并消除AI生成痕迹
npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -y
将 DTCG token 源转换为 CSS、Tailwind、JS/TS、iOS/Android 等多平台主题文件，支持 Style Dictionary 等工具，并集成 CI 验证与对比度检查。
生成多平台主题文件
配置 Token 构建流水线
同步 Figma 设计令牌
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
