用途：该技能为网站外观与交互设计提供端到端工作流，涵盖视觉设计、用户体验研究、无障碍、性能优化与测试，适合设计新页面或组件、优化转化漏斗、改进无障碍、执行性能审计、开展 A/B 测试以及排查 UX 问题。
主要能力：视觉设计方面包括现代设计系统（Tailwind、自定义 token）、字体层级、色彩对比（WCAG 2.2 AA/AAA）、布局、组件模式、响应式与微交互。UX 方面包括用户旅程映射、信息架构、转化漏斗优化、A/B 测试假设与变体设计、可用性启发式与渐进披露。无障碍方面要求语义化 HTML、ARIA、键盘导航、屏幕阅读器兼容、焦点管理、对比度（正文 4.5:1、UI 3:1）、触控目标 44x44px、替代文本与减少动效。性能方面关注 Core Web Vitals（LCP、FID、CLS）、Lighthouse 评分、图片优化、代码分割、懒加载、缓存与性能预算。测试方面覆盖跨浏览器（Chrome、Safari、Firefox、Edge）、多设备、视觉回归、截图对比、响应式验证与加载时间测试。
使用方式：技能强调先做基线与研究，再设计规划、开发迭代、测试验证，最后部署监控。推荐集成 Playwright MCP 做截图与视觉回归、Vercel MCP 做部署与分析和 Lighthouse、GitHub MCP 做分支与 PR 工作流；还可搭配 Notion、Linear、Figma、Nano Banana 等 MCP。文中给出相应调用示例，例如 vercel.runLighthouse、vercel.getAnalytics、github.createPR 等，实际使用时需按原文命令与参数执行。
适用场景：适用于需要系统化设计治理与质量保障的网站项目，尤其是重视无障碍、性能预算与数据驱动决策的团队。
限制：该技能依赖 MCP 集成与具体项目环境，资料未说明独立安装命令、收费标准或平台支持情况，部分 MCP 被标注为“如可用”或“推荐”，并非所有环境都能具备。技能中给出的具体数值目标（如 Lighthouse 95+、LCP<2.5s）属于推荐预算，实际项目应按需调整，资料未提供价格或授权信息。