Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub用于对 UI 或设计进行 WCAG 2.2 AA/AAA 无障碍审计，通过测量对比度、检查键盘导航和屏幕阅读器兼容性，生成包含严重级别和具体修复建议的审查报告。
安装全部 Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
集合内 Skills (17)
用于对 UI 或设计进行 WCAG 2.2 AA/AAA 无障碍审计，通过测量对比度、检查键盘导航和屏幕阅读器兼容性，生成包含严重级别和具体修复建议的审查报告。
用户要求进行无障碍访问检查
验证组件是否符合 POUR 原则
需要对比度验证或键盘/屏幕阅读器审查
npx skills add plugin87/ux-ui-agent-skills --skill a11y-audit -g -y
该技能用于根据用户指定的视觉风格或设计系统，解析并应用对应的语义令牌（颜色、排版等），同时强制验证无障碍对比度，确保在保持品牌调性的前提下符合可访问性标准。
需要特定视觉风格或品牌感
要求设计显得高端或非通用
指定具体设计系统如 Stripe 或 Linear
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -g -y
根据需求简报生成完整的可访问品牌设计系统，包含OKLCH色彩、语义层、排版间距等DTCG令牌及theme.css，并通过WCAG AA对比度验证，为产品提供统一的可主题化基础。
需要从头构建品牌设计规范
创建新的调色板和字体系统
生成可主题化的令牌套件
npx skills add plugin87/ux-ui-agent-skills --skill brandkit -g -y
生成生产级、可访问且基于 Token 的跨框架 UI 组件代码。支持 React, Vue, SwiftUI 等主流技术栈，强制遵循无障碍标准、暗色模式及单一主题一致性规范，确保代码完整可用。
用户需要特定框架的前端组件代码
请求生成具有无障碍和响应式设计的 UI 实现
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于生成符合项目规范的高质量 UI 组件规格说明书，涵盖解剖结构、变体、状态及无障碍设计。通过自动化脚本验证对比度与 ARIA 正确性，并结合视觉检查确保所有状态渲染无误。
需要设计或文档化 UI 组件（如按钮、输入框、模态框等）的规格说明
在编码前或同时准备组件的详细设计规范
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
建立设计质量门禁，集成Token校验、硬编码检测、自动化无障碍（a11y）、对比度及视觉回归测试，防止设计回退，确保组件在多种变体和主题下的质量。
用户希望设置CI质量门禁以防止设计回退
在发布前对组件或页面进行质量保证
npx skills add plugin87/ux-ui-agent-skills --skill design-qa -g -y
基于尼尔森启发式和6维权重对设计/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与设计令牌的双向同步，映射3层DTCG令牌至Figma变量，支持通过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代码。通过推断设计系统（色彩、排版等），生成符合规范的CSS主题和组件，并验证对比度与渲染效果，确保代码质量与设计语言一致。
用户提供设计参考图或截图
需要将视觉稿转化为可访问的代码
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
用于在不同设计系统（如 Material 3、Ant 等）间迁移或互操作，通过角色映射表转换 Token，并验证对比度和状态兼容性。
用户提及设计系统迁移
需要在不同 UI 库间进行样式桥接
要求适配外部设计系统的视觉规范
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -g -y
优化前端UI性能以符合Core 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/代码库的视觉质量
需要现代化或打磨现有应用的设计
执行设计审计以识别AI痕迹或通用设计
npx skills add plugin87/ux-ui-agent-skills --skill redesign -g -y
将 DTCG token 源转换为多平台产物（CSS/Tailwind/JS/iOS/Android），支持 Style Dictionary 等工具，自动化 CI 验证与生成。
用户希望从 tokens 生成平台主题文件
配置 token CI 流水线
需要多平台 token 输出
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
