Frontend UI/UX Engineer 是一个面向前端设计与开发的技能角色。其目标是在没有设计稿的情况下，创造视觉出色、以用户为中心的界面，尤其强调创意设计思维、进阶样式、动画以及可访问性最佳实践。资料称它适用于现代 Web 应用，且代码可能略显杂乱，但视觉输出始终出色。
用途
该技能用于把功能性 UI 转化为视觉上令人惊艳的界面；当没有设计稿但需要漂亮 UI 时使用；当视觉打磨和微交互优先时使用；当组件样式需要创意设计思维时使用；当没有专职设计师但需要改进用户体验时使用。资料明确说明，以下情况不应使用：需要后端逻辑或 API 开发时；纯代码重构且没有视觉变化时；性能优化是唯一优先事项时；需要以安全为核心的开发时；涉及数据库或基础设施工作时。
主要能力
资料展示了三项核心工作流与模式。工作流一：把功能性组件转化为出色 UI。资料以 React 商品卡片为例，给出改造前代码，然后分三步展开：视觉分析（思考应唤起何种情绪、视觉层级、何种交互让用户愉悦、需要留白的位置）；颜色与排版增强（示例使用 framer-motion、Tailwind 类名实现圆角、阴影、悬停位移、图片缩放、渐变叠层、价格排版与按钮样式）；微交互与打磨（加入加入购物车成功状态、促销徽章动画、价格变化动画等）。资料还列出了预期结果：视觉吸引力提升 5 倍、参与度指标典型提升 20-40%、通过微交互带来用户愉悦、保持可访问性（ARIA 标签、键盘导航）。
模式与模板
资料提供了玻璃拟态卡片模式（适用现代、高级审美，搭配彩色背景效果好），示例使用 backdrop-blur、半透明白底与白边框、渐变叠层。还提供了带微光效果的骨架屏加载模式（适用于卡片、列表的加载状态，比旋转加载器体验更好），示例使用绝对定位的动画微光层，并给出 Tailwind 配置中的 shimmer 动画与关键帧写法。
反模式示例
资料给出“忽视颜色对比度”的反例：浅灰文字配浅灰背景，对比度约为 2.1:1，未通过 WCAG AA 要求的 4.5:1。资料解释其失败原因：不符合 WCAG AA 可访问性、视障用户无法阅读、在强光下移动设备体验差。正确做法是使用足够对比度（如 #333333 配 #ffffff，对比度约 12.6:1，通过 WCAG AAA），或使用设计系统 token 保证 4.5:1。
质量清单
资料提供了一份质量清单，覆盖四个方面。视觉打磨：调色板最多 3 个主色加中性色；排版层级清晰（3-5 种字号）；间距遵循一致刻度（4、8、16、24、32 像素等）；所有交互元素有悬停状态；异步操作有加载状态；有帮助信息的空状态。可访问性：文本颜色对比度不低于 4.5:1（WCAG AA）；所有交互元素有可见焦点指示；动画尊重 prefers-reduced-motion；所有图片有替代文本；键盘导航可用（Tab、Enter、Esc）。响应式设计：移动优先（以 320 像素为基准）；断点为 sm 640、md 768、lg 1024、xl 1280 像素；移动端触控目标不小于 44x44 像素；移动端无横向滚动；图片响应式（max-width 100%、height auto）。性能：动画使用 transform 与 opacity（GPU 加速）；图片优化（WebP、懒加载）；CSS 打包体积小于 50KB（压缩后）；无布局偏移（CLS < 0.1）；字体预加载（link rel="preload"）。
使用方式
资料以“快速开始”形式说明何时调用该技能，并给出示例输入与输出代码，未提供安装命令或命令行调用方式。URL 为 https://www.skills.sh/404kidwiz/claude-supercode-skills/frontend-ui-ux-engineer，来源为 404kidwiz/claude-supercode-skills。
适用场景与限制
适用场景包括：将功能性 UI 改造为视觉出色的界面、无设计稿时创建美观 UI、优先视觉打磨与微交互、组件样式创意设计、无专职设计师时改善用户体验。限制在于：不适用于后端逻辑与 API 开发、纯代码重构且无视觉变化、仅做性能优化、以安全为核心的开发、数据库或基础设施工作。关于收费、价格、平台支持等事实，资料暂未提供。