Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub基于 WCAG 2.2 和 ARIA 标准进行 UI 无障碍审计。通过实际测量对比度、验证键盘导航及屏幕阅读器兼容性，输出包含严重程度和具体修复建议的合规性报告，确保组件满足 POUR 原则。
Install All Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
Skills in Collection (23)
基于 WCAG 2.2 和 ARIA 标准进行 UI 无障碍审计。通过实际测量对比度、验证键盘导航及屏幕阅读器兼容性，输出包含严重程度和具体修复建议的合规性报告，确保组件满足 POUR 原则。
用户要求进行无障碍检查
需要验证界面对比度
审查键盘或屏幕阅读器交互
确认组件符合 POUR 原则
npx skills add plugin87/ux-ui-agent-skills --skill a11y-audit -g -y
根据指定视觉原型或设计系统，将语义令牌映射至具体 token 文件，生成符合无障碍标准的 UI 风格。
需要特定视觉风格
要求设计显高级
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/UX设计质量时
执行设计审查或验收环节时
npx skills add plugin87/ux-ui-agent-skills --skill critique -g -y
生成生产级、无障碍且基于设计令牌的组件代码，支持React、Vue、Flutter等多种框架。通过适配器系统解析规范与令牌，确保输出完整、无硬编码值并符合可访问性标准。
需要特定技术栈的UI组件代码
生成符合设计系统的可复用前端组件
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于设计符合高质量标准的UI组件规范，涵盖解剖结构、变体、尺寸、8种状态及无障碍访问。通过Token映射和自动化验证脚本确保视觉与可访问性合规。
用户要求设计或文档化UI组件（如按钮、输入框等）
需要生成包含完整状态和Token映射的组件规格说明
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
设计工作规范，涵盖验证协议、移动端优先原则及禁用原生组件等规则。强制通过脚本测量对比度、状态和响应式布局，确保UI交付质量与客观准确性。
构建或审查UI组件时
进行前端主题或令牌集开发时
npx skills add plugin87/ux-ui-agent-skills --skill design-doctrine -g -y
建立设计质量门禁，通过令牌与硬编码 lint、自动化无障碍（axe）、对比度检测及视觉回归测试，防止设计退化。支持 CI 集成与组件上线前 QA。
用户希望设置 CI 质量门禁
防止设计回归
发货前对组件或屏幕进行 QA
npx skills add plugin87/ux-ui-agent-skills --skill design-qa -g -y
基于尼尔森十大启发式原则和6个加权维度对设计/UI进行结构化审查与审计，提供评分、发现项及修复建议。
需要设计质量评估或评分
请求UI/UX审核或启发式评估
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 设计令牌与代码的双向同步，映射 DTCG 令牌至 Figma Variables，支持通过 MCP 服务器连接进行数据交换，并验证组件变体状态的一致性以确保设计与代码对齐。
用户希望将设计令牌推送到 Figma
用户需要从 Figma 拉取设计到代码
用户需要设置令牌与变量的同步机制
用户需要检查设计与代码之间的差异
npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -g -y
运行质量门禁脚本验证构建或代码审查的客观正确性，报告实际通过率。若未通过则修复并复测，直至全绿。涵盖Token、无障碍及渲染一致性检查。
声称构建或审查完成前
需要验证代码客观质量时
npx skills add plugin87/ux-ui-agent-skills --skill gate -g -y
管理设计系统的演进治理，涵盖组件/Token的SemVer版本控制、贡献工作流、废弃政策及变更沟通。用于规范新增、推广或废弃元素，确保系统一致性并防止碎片化。
需要决定组件或Token的版本升级幅度
希望建立或优化设计系统的贡献流程
计划添加新组件或废弃现有元素
npx skills add plugin87/ux-ui-agent-skills --skill governance -g -y
在开发前通过询问关键问题澄清需求，避免错误构建。自动检查环境并读取现有文档与主题，针对目的、内容、操作等维度提出必要疑问，记录假设以消除歧义。
需要澄清需求或设计意图时
项目启动前的需求分析阶段
npx skills add plugin87/ux-ui-agent-skills --skill grill-me -g -y
将设计图或截图转化为基于 Token 的 UI 代码。自动推断配色、排版等设计系统，生成可访问的代码并验证对比度与布局匹配度。
用户提供设计稿或截图并要求生成对应前端代码
需要将视觉参考转换为符合设计系统的 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 性能，涵盖加载策略、布局偏移预防及动画规则，确保低配设备流畅体验。
提升网页速度
修复界面卡顿或布局偏移
优化移动端低端设备性能
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/UX 质量。通过扫描、诊断和设计规则应用，实现现代化改造，确保无障碍和主题一致性。
用户希望改进或美化现有 UI/代码库
需要将现有应用升级为高品质设计
npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -y
用于初始化符合推荐布局的设计产品项目骨架，自动复制模板文件、处理本地配置并安装必要的引擎技能，快速搭建开发环境。
用户需要创建新的设计或产品项目
用户希望按照标准结构初始化项目目录
npx skills add plugin87/ux-ui-agent-skills --skill scaffold-project -g -y
发布前质量门禁与清单生成工具，执行准确性、响应式及规范检查，生成版本号和变更日志草稿，辅助确认发布细节。
准备打标签发布新版本
运行预发布质量检查流程
npx skills add plugin87/ux-ui-agent-skills --skill ship -g -y
将 DTCG JSON 设计令牌转换为多平台前端及原生代码（CSS、Tailwind、JS、iOS/Android），并集成 CI 验证与对比度检查，确保主题文件同步。
生成跨平台主题文件
配置令牌构建流水线
同步设计令牌到代码
npx skills add plugin87/ux-ui-agent-skills --skill token-build -g -y
专注于UI界面文案的撰写与审查，包括按钮、错误提示、空状态等微文案。遵循清晰、简洁的语调规范，应用错误描述公式及包容性语言规则，确保文案符合项目声音并经过预发布检查清单验证。
需要撰写或优化用户界面中的文本内容
对现有UI文案进行合规性与语调审查
npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -g -y
