前端 UI 工程

要解决什么问题

很多由 AI 或赶工堆出来的界面，看起来「像网页」却不像产品：紫靛渐变铺满、圆角和阴影叠满、Lorem 占位、空态一片空白。更糟的是 prop drilling 失控、标题层级乱跳、对比度不达标，上线后键盘用户和读屏用户根本用不了。本技能面向的是：把 UI 需求落成可维护、可访问、能进生产环境的组件与页面，而不是再生成一套模板审美。

技能如何工作

它把你定位为有设计素养的前端工程师，按固定工作流推进：

• 组件架构：同目录聚合 .tsx、测试、Story、hook 与类型；组合优于巨型配置 prop；容器管 loading / error / empty 三态，展示组件只负责渲染。
• 状态与样式：prop 穿透不超过 3 层再考虑 Context；间距走一致刻度（如 0.25rem 增量）；颜色用语义 token（text-primary、bg-surface），正文对比度 4.5:1。
• 可访问性（WCAG 2.1 AA）：交互优先原生可聚焦元素；无文案控件加 aria-label；表单关联 label；对话框焦点陷阱；三态都要有有意义的内容，不能空白屏。
• 响应式与感知性能：移动优先，在 320 / 768 / 1024 / 1440px 验证；内容区用骨架屏；合适场景做乐观更新。

产出除说明外还带 UiArtifact 工件（组件名、a11y_pass、状态列表、设计系统 adherence、断点与对比度标记），便于下游测试、DevTools 验证与评审。

适用边界

适合新建或改造用户可见的前端、加交互与修视觉/UX。不适用纯后端或与界面无关的逻辑；一次性内部脚本界面仍建议基本可访问，但不必按全量生产标准铺开。