前端 UI 工程

要解决什么问题

很多由 AI 辅助写出的界面，在评审或上线前会暴露出同一类问题：配色像默认紫/靛模板、圆角与间距随意、卡片网格千篇一律，以及缺少加载/错误/空状态。更隐蔽的是可访问性缺口——仅靠颜色区分状态、键盘无法完整走通、标题层级跳跃——这些在原型阶段常被当成「以后再补」。

本技能面向正在实现或改造用户可见界面的场景：新组件与页面、响应式布局、交互与状态、以及视觉/体验缺陷修复。目标不是「能跑起来」，而是产出接近设计意识强的工程师在成熟团队里的水准。

技能如何引导你落地

组件与结构：提倡组合优于巨型配置、单组件职责清晰，并把数据获取与展示分层；相关文件就近放置，避免单文件膨胀（文档将 200 行以上视为拆分信号）。

设计系统：使用项目真实的色板与语义 token（如 text-primary、bg-surface），遵守统一间距刻度与字体层级；对照「AI 默认审美」对照表，主动替换渐变滥用、超大 padding、占位文案等模式。

状态与可访问性：状态管理选够用且最简单的方案；props 穿透超过约三层则考虑 Context 或重构。交互需满足 WCAG 2.1 AA：键盘导航、ARIA、焦点管理，以及有意义的空态/错态。响应式按 320 / 768 / 1024 / 1440px 验证。

收尾提供 Verification 清单（控制台、Tab 走查、读屏、断点、设计系统一致性、axe 等），并列出 Red Flags 便于自检。

适用边界与注意点

技能是工程准则与检查框架，不能替代你们产品已有的 Figma/设计规范文件；references/accessibility-checklist.md 需结合项目自行打开。若设计尚未定稿，仍应先用设计系统默认值，而不是裸 HTML 凑合——文档明确反对「原型所以先不样式化」的借口。