前端界面工程

解决什么问题

让 AI 直接生成界面时，结果往往带着明显的「AI 味」：整页紫蓝渐变、一律 rounded-2xl 的圆角、模板化的 Hero 区和卡片网格。这类界面不仅视觉同质化，还常在可访问性、响应式和状态处理上留下隐患。这个技能要解决的问题很具体：把 AI 生成的 UI 拉回工程标准——遵循项目设计系统、满足 WCAG 2.1 AA、处理好加载 / 错误 / 空状态。

技能如何工作

核心内容分四层：

组件架构

• 相关文件集中放置（colocation）
• 组合优先于配置，保持组件职责单一
• 数据获取与展示分离

状态管理

• 选择能满足需求的最简方案
• prop drilling 不超过 3 层，否则引入 context 或重构组件树

设计系统

• 使用项目真实色板，而不是紫 / 靛默认色
• 采用一致的间距刻度，不凭空发明数值
• 颜色用语义 token（如 text-primary），正文对比度至少 4.5:1
• 标题层级不跳级，不用标题样式渲染非标题内容

可访问性与响应式

• 键盘导航、ARIA 标签、焦点管理
• mobile first，在 320px / 768px / 1024px / 1440px 四个断点验证

适用边界

• 技能只提供工程约束，项目本身需要有设计系统（token、间距刻度、色板）可供遵循
• 超过 200 行的组件应拆分；内联样式、任意像素值是危险信号
• 不能仅靠颜色传达状态，需配合图标或文字
• 详细的可访问性要求与测试工具见 references/accessibility-checklist.md，本技能只是入口