用途：Web Design Pro（现代设计工程）是一套面向网页设计工程化的技能集，目标是在视觉美感之外，整合系统设计、性能优化、无障碍与游戏特化 UX。
主要能力与细节： 一、设计系统与令牌：分三层——Primitive Tokens（原始值，如 blue-500: #3B82F6）、Semantic Tokens（语义，如 action-primary）、Component Tokens（组件专用，如 btn-bg）。实现建议用 CSS Custom Properties 支持实时主题切换，用 Tokens Studio（Figma）从设计源提取 JSON/CSS，并通过 Style Dictionary 等在构建时自动分发到各平台。 二、UI/UX 方法论：包含 Jobs to be Done、Design Thinking（共情—定义—构思—原型—测试）、Design Sprints（2~5 天验证核心假设）。示例思路是把 Hero 区文字换成 gameplay 视频，因为玩家想在 3 秒内判断游戏是否有趣。 三、响应式模式：用 clamp() 实现流体字体与间距，如 h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }；使用 Container Queries 按容器而非视口响应；移动优先，从 320px 起步再用媒体查询扩展。 四、无障碍（WCAG 2.1）：语义化标签（nav、main、article、section）、文本对比度 4.5:1 以上、键盘可操作、图标按钮加 aria-label、尊重 prefers-reduced-motion。 五、性能与 Web Vitals：LCP < 2.5s、INP < 200ms、CLS < 0.1；图片用 WebP/AVIF 并标明宽高，预加载关键字体与 Hero 图，非必要脚本用 defer/async。 六、游戏 UI 特化：即时反馈、视觉层级（如 Play Now 置于 F 型顶部）、界面风格贴合世界观。
使用方式与检查清单：资料给出游戏作品集最佳实践清单——Hero 是否有静音 gameplay 视频、主字体是否 clamp()、图片是否 WebP 且指定宽高、能否仅用 Tab 完成选择与游玩、悬停是否有缩放/发光反馈、Lighthouse 无障碍是否 90 分以上、开启 reduced-motion 后是否关闭闪烁效果。
限制：资料未说明该技能的安装命令、运行平台、收费或授权信息，暂未提供。