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
将视觉风格或设计系统转化为语义化Token，涵盖原型选择、色彩映射、排版间距配置及无障碍对比度验证，确保美学与可访问性平衡。
用户指定特定视觉风格（如高端、极简）
要求应用具体设计系统（如Stripe、Vercel）
需要调整界面质感使其更高级或非通用
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
根据简报生成符合 WCAG 标准的品牌设计系统，包含 OKLCH 色彩、排版及 DTCG 令牌，输出 theme.css 并验证对比度与引用。
需要从头构建品牌基础设计系统
创建新的配色方案或类型系统
为产品生成可主题化的令牌套件
npx skills add plugin87/ux-ui-agent-skills --skill brandkit -g -y
生成生产级、无障碍且基于设计令牌的跨框架组件代码。通过适配器系统支持React、Vue、SwiftUI等多种技术栈，确保代码完整、语义化及主题一致性。
需要为特定技术栈生成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
建立设计与可访问性质量门禁，集成令牌、硬编码、对比度及自动化无障碍检查，覆盖视觉回归测试与手动审查，防止设计退化。
用户希望设置CI质量门禁以防止设计回归
在发布前对组件或屏幕进行质量保证
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 格式的设计令牌，支持色彩、排版、间距等。遵循三层架构，结合无障碍规范验证对比度，并执行 JSON 有效性校验，确保设计系统的一致性。
用户请求生成或修改颜色调色板、字体比例、间距或阴影等设计令牌
需要验证现有令牌文件的结构、别名解析或对比度合规性
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -g -y
实现 Figma 与设计令牌的双向同步，映射层级并配置 Modes，利用 MCP 或 API 推送/拉取数据，校验组件变体一致性，确保设计代码一致。
将设计令牌同步至 Figma
从 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
将设计稿或截图转化为符合无障碍标准的代码，自动推断并生成统一的设计令牌主题。
用户提供UI设计图或截图
需要基于视觉参考生成前端代码
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
用于在不同设计系统（如 Material, Ant, shadcn 等）间进行迁移或互操作，通过角色映射表转换 Token，确保样式、对比度及无障碍性兼容。
提及跨设计系统迁移
需要适配特定 UI 库风格
设计系统 Token 互操作性需求
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设计、统一主题令牌并提升视觉品质。
用户希望改进或现代化现有UI
需要提升代码库的视觉质量
npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -y
将 DTCG token 源转换为多平台产物（CSS/Tailwind/JS/iOS/Android），支持样式字典等工具，并集成 CI 验证与对比度检查。
生成多平台主题文件
配置 Token CI 流水线
从 tokens/*.json 生成前端或移动端资源
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
