Agent Skills
› plugin87/ux-ui-agent-skills
plugin87/ux-ui-agent-skills
GitHub基于 WCAG 2.2 和 ARIA 规范对 UI 组件进行无障碍审计，验证对比度、键盘导航及屏幕阅读器兼容性，输出带严重程度的修复建议。
安装全部 Skills
npx skills add plugin87/ux-ui-agent-skills --all -g -y
集合内 Skills (26)
基于 WCAG 2.2 和 ARIA 规范对 UI 组件进行无障碍审计，验证对比度、键盘导航及屏幕阅读器兼容性，输出带严重程度的修复建议。
用户要求进行无障碍检查
需要验证组件是否符合 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/UX 工作进行对抗性设计评审，通过渲染截图、运行自动化审计脚本并严格遵循规则，找出设计缺陷并提供拒绝理由。
需要专业设计师视角的 UI/UX 质量审查
验证界面在响应式及主题切换下的表现
进行严格的可用性或视觉规范合规性检查
npx skills add plugin87/ux-ui-agent-skills --skill critique -g -y
根据设计规范和Token生成生产级、无障碍且适配多框架的UI组件代码，支持自动化验证与状态处理。
用户请求生成特定技术栈的UI组件代码
需要基于设计令牌（Tokens）和A11y规范创建可复用前端组件
npx skills add plugin87/ux-ui-agent-skills --skill design-code -g -y
用于设计符合高标准的 UI 组件规范，涵盖解剖结构、变体、尺寸、8种状态及无障碍适配。通过自动化门控验证确保所有状态在明暗模式下均正确渲染。
用户需要设计或文档化 UI 组件规范
涉及按钮、输入框等组件的规格定义
npx skills add plugin87/ux-ui-agent-skills --skill design-component -g -y
设计验证协议，规定UI/设计工作的检查流程。要求运行自动化门禁测试（对比度、状态、响应式等），禁止未测量即断言，强调移动端优先和输出完整性，确保设计规范落地。
构建或审查屏幕、组件时
进行主题化或Token集设置时
npx skills add plugin87/ux-ui-agent-skills --skill design-doctrine -g -y
用于设置和设计质量门禁，涵盖 Token lint、自动化无障碍测试、对比度检查及视觉回归，防止设计退化。
用户希望建立 CI 质量门禁
在发布前对组件或屏幕进行 QA
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 格式的设计令牌，遵循三层架构。支持颜色、排版等令牌创建及多品牌主题化，并集成无障碍审计与 JSON 验证以确保规范合规。
需要生成或修改设计令牌（如颜色、间距）
验证设计令牌文件的正确性
配置多品牌主题
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -g -y
实现 Figma 设计与代码的双向同步，映射 Token 至 Figma Variables，支持 MCP 集成及组件一致性校验。
将设计 Token 同步到 Figma
从 Figma 提取设计到代码
检查设计与代码的差异
npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -g -y
执行自动化质量门禁，验证构建、代码规范及UI渲染的正确性。通过运行准确率报告和像素级检查确保交付物符合标准，修复失败项直至全绿，为发布或审查提供客观依据。
用户声称构建或审查已完成时
需要验证UI组件状态和响应式布局时
npx skills add plugin87/ux-ui-agent-skills --skill gate -g -y
管理设计系统的演进治理，包括版本控制、贡献流程、废弃策略及变更沟通。用于组件/Token的添加、升级或废弃决策，确保系统一致性并防止碎片化。
用户想要添加或提升新组件/Token时
需要决定版本号升级幅度时
执行组件或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 代码。自动推断设计系统并生成主题，构建组件并通过自动化脚本验证对比度、无障碍及渲染一致性。
用户提供设计稿或截图并要求生成对应代码
需要将视觉参考重构为标准化设计系统代码
npx skills add plugin87/ux-ui-agent-skills --skill image-to-code -g -y
用于在不同设计系统间迁移或互操作，通过角色映射表将外部设计系统（如Material 3、Ant等）与内部Token体系进行转换，支持样式适配、主题桥接及无障碍验证。
用户提到设计系统迁移
需要对接外部UI库或设计规范
涉及Token系统的互操作性配置
npx skills add plugin87/ux-ui-agent-skills --skill migrate-design-system -g -y
用于审查 Agent 近期会话是否遵循规则，读取本地钩子事件报告页面编辑、停止钩子及未关闭发现项等合规情况。
检查 Agent 是否遵循规则
查看会话违规记录
审计钩子事件
npx skills add plugin87/ux-ui-agent-skills --skill observe -g -y
优化前端UI性能以符合Core Web Vitals标准，涵盖加载策略、布局偏移预防及动画优化，旨在提升低配设备上的页面速度与交互流畅度。
用户希望提升页面加载速度或减少卡顿
需要修复布局偏移（CLS）或优化动画性能
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
用于初始化符合推荐结构的设计产品项目骨架，自动复制模板、配置Claude环境并安装相关技能依赖。
开始新的设计或产品开发项目
需要快速搭建标准项目目录结构
npx skills add plugin87/ux-ui-agent-skills --skill scaffold-project -g -y
发布前质量门禁，执行响应式、准确率及UI检查，生成包含版本号和变更日志的发布清单，等待确认后才允许打标签或发布。
准备标记新版本
执行发布前最终检查
生成发布说明
npx skills add plugin87/ux-ui-agent-skills --skill ship -g -y
将 DTCG JSON 令牌源转换为 CSS、Tailwind、JS/TS、iOS 及 Android 等平台产物，支持 Style Dictionary 等工具，并集成 CI 验证与对比度检查。
用户希望从令牌生成平台主题文件
配置令牌持续集成流程
需要多平台令牌输出
npx skills add plugin87/ux-ui-agent-skills --skill token-build -g -y
用于生成或审查UI界面文案（按钮、错误提示等）的技能，遵循特定语调系统、包容性语言及what-why-how公式，确保文案清晰、简洁且符合无障碍标准。
需要撰写界面微文案
请求对现有UI文案进行审查
npx skills add plugin87/ux-ui-agent-skills --skill ux-writing -g -y
构建高密度数据仪表盘（如分析控制台、交易终端），涵盖布局序列、SVG图表几何实现及无障碍与对比度规范，适用于需同时展示大量数据的屏幕。
需要构建数据分析控制台或交易终端界面
请求生成包含多种实时图表的数据监控视图
设计高密度数字展示屏幕
npx skills add plugin87/ux-ui-agent-skills --skill data-dashboard -g -y
端到端设计或构建页面、网站及UI，通过制定明确的Brief Inference（领域、受众、情绪等）确保独特视觉方向，避免平庸生成。支持从需求到落地的完整流程，并智能路由至数据看板或重设计等专项技能。
design a landing page
build a settings screen
make me a website
design the onboarding
npx skills add plugin87/ux-ui-agent-skills --skill design-screen -g -y
