frontend-ui-engineering

前端 UI 工程开发指南

技能概述

Frontend UI Engineering 是一个专业的前端界面构建技能，专注于开发生产级别的、符合可访问性标准的响应式用户界面，帮助开发者构建专业、可维护的 UI 而不是通用的 AI 生成风格。

适用场景

构建新的 UI 组件和页面

当你需要创建新的前端组件或完整页面时，这个技能提供组件架构设计、文件结构组织和可复用模式的专业指导，确保代码质量和可维护性。

改进现有用户界面

修改或优化现有界面时，该技能提供响应式布局调整、状态管理优化、视觉问题修复和用户体验改进的最佳实践。

实现可访问性和响应式设计

需要满足 WCAG 2.1 AA 标准或支持多种设备时，该技能提供键盘导航、ARIA 标签、焦点管理和移动优先响应式设计的完整实现方案。

核心功能

组件架构与状态管理

提供基于组合优于配置的组件设计模式、数据获取与展示分离、文件结构并置等架构指导，以及从本地状态到全局存储的状态管理方案选择指南，帮助开发者构建清晰、可维护的组件体系。

可访问性（WCAG 2.1 AA）实现

包含键盘导航、ARIA 标签、焦点管理、有意义的空状态和错误状态等完整的可访问性实现方案，确保界面符合 WCAG 2.1 AA 标准，为所有用户提供平等的访问体验。

设计系统遵循与响应式布局

提供避免 AI 美学的设计指导、一致的间距布局、排版层次、语义化颜色令牌使用，以及移动优先的响应式设计模式，包含 320px 到 1440px 的标准断点测试规范，确保界面在各种设备上都表现出色。

常见问题

Frontend UI Engineering 技能适用于哪些场景？

该技能适用于构建新的 UI 组件或页面、修改现有用户界面、实现响应式布局、添加交互性或状态管理、修复视觉或 UX 问题等场景。特别适合需要避免"AI 美学"风格、构建真正专业级界面的项目。

如何避免让界面看起来像 AI 生成的？

避免常见的 AI 美学模式：不滥用紫色/靛蓝色、过度渐变、过大圆角、通用英雄区、占位文本、超大边距、阴影重设计。转而使用项目实际的颜色调色板、一致的设计系统间距和排版、内容优先的布局以及真实的占位内容。

这个技能如何帮助实现 WCAG 可访问性标准？

技能提供了完整的 WCAG 2.1 AA 实现方案，包括键盘导航（确保所有交互元素可通过键盘访问）、ARIA 标签（为缺少可见文本的交互元素提供标签）、焦点管理（对话框打开时移动焦点）以及有意义的空状态和错误状态设计，帮助开发者构建真正可访问的界面。