用途
Web Design Pro（Modern Design Engineering）用于进阶的设计工程工作，重点是设计令牌、无障碍、性能与生产级 UI 系统的构建。资料明确说明：当主要任务是依据外部规范做合规审计时，应使用 web-design-guidelines；当需要以交付物为导向的 UX 流程、组件规格以及直接的 UI 生成/优化输出时，应使用 ui-ux-pro-max。
主要能力
1. Design Systems & Tokens（设计系统与令牌）
将设计决策以数据管理，消除设计与代码之间的间隙。
- 令牌层级：Primitive Tokens（原始值，例：blue-500: #3B82F6）；Semantic Tokens（赋予角色与语境，例：action-primary: var(--blue-500)）；Component Tokens（特定组件专用，例：btn-bg: var(--action-primary)）。
- 实现指南：CSS Custom Properties（浏览器原生令牌，可实时切换主题）；Tokens Studio（Figma，从设计源直接导出 JSON/CSS）；自动化（令牌变更时通过 Style Dictionary 等在构建时分发到各平台）。
2. UI/UX Methodologies（现代 UX 方法论）
- Jobs to be Done (JTBD)：示例——玩家不是想读游戏介绍，而是想在 3 秒内确认这游戏是否好玩，因此 Hero 区域用 gameplay 视频取代文字。
- Design Thinking：共情—定义—创意—原型—测试的循环。
- Design Sprints：2~5 天内验证核心假设的压缩流程。
3. Responsive Design Patterns（响应式模式）
- Fluid Typography & Layout：使用 clamp() 无需媒体查询即可随屏幕尺寸调节字体/间距，示例：h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
- Container Queries：组件响应父容器尺寸而非视口。
- Mobile-First：以 320px 移动布局为基础，通过 @media (min-width: ...) 渐进扩展。
4. Accessibility Standards（无障碍标准，WCAG 2.1）
- Semantic HTML：用 <nav>、<main>、<article>、<section> 替代 <div>。
- Color Contrast：文本对比度 4.5:1 以上（AA 级标准）。
- Keyboard Friendly：所有交互均可通过 Tab/Enter 完成。
- ARIA Labels：仅有图标的按钮必须提供 aria-label。
- Reduced Motion：尊重 prefers-reduced-motion，控制过度动画。
5. Performance & Web Vitals（性能优化）
- Core Web Vitals（2024 标准）：LCP（最大内容绘制）< 2.5s；INP（交互到下一次绘制）< 200ms（替代 FID）；CLS（累积布局偏移）< 0.1。
- 优化技术：图片优化（使用 WebP/AVIF，显式声明 width/height 防止 CLS）；Preload（优先加载关键字体与 Hero 图片）；Defer JS（非必要脚本用 defer 或 async 处理）。
6. Game UI/UX Specifics（游戏特化 UI）
- Immediate Feedback：每次点击/悬停都给予即时视觉/听觉反馈。
- Visual Hierarchy：将最重要的 Action（如 Play Now）放在 F-Pattern 上方。
- 沉浸式布局：UI 需与游戏世界观的纹理、字体、基调一致。
7. 面向 eastsea.monster 改版的可执行技能
- Fluid Typography (clamp)：将所有页面字号改为 clamp，使移动端到桌面端过渡更平滑。
- WebP Batch Conversion：将全部游戏缩略图与素材转换为 WebP，改善 LCP。
- Hero Video Autoplay：以静音的 gameplay 视频替代静态图片放在 Hero 区域（应用 JTBD）。
使用方式
资料未提供安装命令、具体调用方式或配置步骤，暂未提供。
适用场景
设计系统与令牌体系搭建、生产级 UI 系统实现、无障碍与性能优化、响应式布局重构、游戏类作品集或游戏官网的 UI/UX 改版等。
限制
资料中未说明该技能的收费、平台支持范围、调用限制等信息，暂未提供。
最佳实践清单（游戏作品集）
- Hero 区域是否有 gameplay 视频（静音）？
- 主字体是否通过 clamp() 流式变化？
- 所有图片是否为 WebP 格式并指定 width/height？
- 是否仅用 Tab 键即可选择并游玩所有游戏？
- 悬停时按钮是否有反应（scale/glow）？
- Lighthouse 无障碍评分是否在 90 分以上？
- 在 prefers-reduced-motion 设置下闪烁效果是否关闭？