前端 UI 工程

要解决的问题

很多前端界面能跑，但视觉层级、交互状态和可访问性都靠临场发挥：紫蓝渐变、超大圆角、卡片网格、占位文案、缺 loading、error、empty，键盘和读屏体验不闭环。这类问题不是某个组件写错，而是缺少可复用、可检查的工程约束。

技能如何工作

这份 Frontend UI Engineering 技能把 UI 生产质量拆成几类可执行规则：

• 组件架构：组件文件就近组织，优先 composition 而不是 props 配置，拆短组件，避免超过 3 层 prop drilling。
• 设计系统：使用项目已有 spacing scale、type hierarchy、semantic tokens，例如 text-primary、bg-surface，不随意发明 hex 或 padding。
• 可访问性：按 WCAG 2.1 AA 检查键盘导航、ARIA 标签、focus management、空态与错误态，避免仅靠颜色表达状态。
• 响应式与状态：mobile first，覆盖 320px、768px、1024px、1440px，补齐 loading、error、empty 与 transitions。

适用边界

它适合新建组件、改已有用户界面、修 visual/UX 问题，但不替代真实设计决策；如果项目没有设计 token，应先定义或采用默认规范，而不是继续堆 AI 风格样式。