前端UI工程实践

要解决的具体问题

AI 辅助生成的前端界面常陷入「AI 审美」陷阱——满屏紫色渐变、过度圆角卡片、通用 Hero 区与 Lorem ipsum 占位文本，既偏离项目设计系统，也缺乏可访问性与生产级质量。此外，组件结构混乱、状态管理冗余、间距/字体随意取值等问题，会让后续迭代成本大幅上升。

核心能力与关键步骤

该技能聚焦生产级 UI 的工程化落地，核心包含以下方向：

• 组件架构：优先组合而非配置，聚焦单一组件职责，将数据请求与展示层解耦，相关文件 colocated 管理，避免超过 200 行的臃肿组件。
• 状态管理：选择最简可行方案，属性传递层级不超过 3 层，深层传递时改用 Context 或重构组件树。
• 设计系统遵循：使用 text-primary、bg-surface 等语义颜色 token 替代硬编码 hex 值，采用统一间距刻度，不随意定义数值；规避 AI 典型的「全紫色」「全渐变」「全圆角」等默认样式。
• 可访问性：满足 WCAG 2.1 AA 标准，覆盖键盘导航、ARIA 标签、焦点管理、空态/错误态语义，确保屏幕阅读器可传递内容结构。
• 响应式设计：移动优先布局，在 320px、768px、1024px、1440px 四个断点验证，避免后期 retrofit。

适用边界与注意点

• 若项目无既定设计系统，需先采用技能内置的默认规范，不可省略样式直接交付；
• 原型阶段同样需遵循架构规范，避免「原型变生产债务」；
• 所有交互元素需通过键盘导航测试，不可仅用颜色传递状态；
• 不适用于极简单静态页等无需设计系统约束的场景。