前言¶
写界面的人常见这几类返工：键盘走不通，Tab 到一半就丢焦点；窄屏下布局直接崩；加载和空态没做，接口一慢页面就是一片空白；还有一种更隐蔽的问题——界面能跑、看着也还行，但一眼就是”AI 生成观感”：同样的卡片、同样的蓝紫渐变、同样的三栏等宽布局。这类问题靠临时补样式很难根除，需要在写代码之前就定好工程规范。
下面介绍的这个 Skill 就是针对这类问题设计的。它在 SkillHub 上的名称是「前端用户体验工程」，坐标 @user_e40a4360/frontend-ui-engineering，版本 1.0.0，来源 community，分类 dev-programming。
这是什么¶
一句话定位：一套生产级前端界面的工程规范，指导你在新建或修改界面、创建组件、实现布局、管理状态时，直接产出可访问、响应式、视觉上接近生产环境的界面，而不是带 AI 生成痕迹的界面。
它由 SkillHub 社区发布者 user_e40a4360 维护，需要明确的是，它属于社区来源（community），不是框架官方出品。它解决的问题不是”某个组件怎么写”，而是”从组件架构到颜色令牌、从状态分层到加载态，一套界面应该按什么规范组织”。
核心功能¶
Skill 指南按界面工程的几个层次展开，一节只覆盖一件事。
组件架构与文件同置¶
先定组件的边界，再谈样式怎么写。相关文件（组件本体、样式、小部件）按目录就近放置，避免一个组件的改动散在三四个目录里。
组合优于配置¶
优先用组合（子组件嵌套）表达界面结构，而不是给一个组件堆满布尔开关和配置项。配置项越多，调用方越难猜出默认行为，可访问性和样式一致性也越难保证。
数据获取与展示分离¶
数据层负责取数和缓存，展示层只管按给定数据渲染。两层不混在一个组件里，加载、错误、空态才有统一的挂载位置。
状态管理分层选型¶
按状态的作用域选方案：局部界面状态留在组件内，跨组件共享再上全局方案。分层的依据是作用域，不是”哪个库更流行”。
设计系统与语义化颜色令牌¶
颜色一律走语义化令牌（语义、层级、状态），不写死具体色值。改主题或做暗色模式时，只需替换令牌定义。
WCAG 2.1 AA 无障碍¶
这一节给出可核对的硬要求：键盘导航路径完整、交互元素带 ARIA 标签、焦点顺序可见且可预测、焦点管理正确。目标不是”看起来无障碍”，是能通过键盘和读屏软件实际走完流程。
响应式断点¶
断点按内容和容器定，不按某个固定设备列表照抄。布局随容器变化，而不是在断点处整体重排。
加载、更新与空态/错态¶
接口慢时先渲染骨架屏占位，不用空白或转圈打发用户；乐观更新先改界面、失败再回滚，并给出明确反馈。空态和错态单独设计，不沿用默认空白。
规避 AI 模板审美¶
这一节处理的是前述的”一眼 AI”问题：识别模板化的卡片堆叠、滥用渐变和等宽网格等套路，并给出替代做法，让界面在视觉上接近真实产品。
元数据与获取¶
截至本次抓取，SkillHub 页面上的公开数据如下：
- 评分 100000
- 下载 7776
- 安装 31
- 标签
requires_api_key=false，即不需要 API Key - 版本 1.0.0，来源 community
关于安装：SkillHub 页面未提供可直接复制的安装命令，需在页面内按其引导安装；本文档未核实到具体的 CLI 命令，故不列出，以免误导。
典型用法¶
这个 Skill 是规范类指南，不是可运行的代码库，因此典型用法是”按需查阅”而不是”一键执行”。以新建一个列表页为例：
1、先读「组件架构与文件同置」，定好页面和卡片组件的文件结构。
2、再读「数据获取与展示分离」，把取数逻辑抽到数据层。
3、接着读「状态管理分层选型」，决定哪些状态留在页面内、哪些上全局。
4、然后读「WCAG 2.1 AA」和「响应式断点」，给键盘路径和断点定规范。
5、最后读「加载、更新与空态/错态」和「规避 AI 模板审美」，补齐加载态、空态、错态，并检查视觉是否落进模板套路。
上面的步骤顺序不一定要照搬，但它体现了这套规范的使用方式：先定架构，再定交互和视觉，而不是先写样式。
适用场景与注意¶
适合这几类人：要在现有项目里新建或修改界面；要创建组件、实现响应式布局、管理前端状态；要满足 WCAG 无障碍要求；或者明确要求产出达到生产级质感的界面。
注意几点：
- 这是社区来源的规范文档，接入生产前需要对照你实际使用的框架和组件库核对，规范里给出的是通用做法，不是某个框架的 API 约定。
- 它覆盖的是界面工程规范，不涉及后端接口设计、部署和性能优化。
- 线索中另提到如需完整版可在淘宝搜索「AI灵匣」店铺获取，本文档未核实该渠道，仅作来源说明。
结尾¶
这个 Skill 的价值在于把”生产级界面”拆成了可逐项核对的工程要求：架构、数据、状态、无障碍、响应式、加载态各一节，缺哪一项就补哪一项。按它的顺序走一遍，产出的界面在可访问性和响应式上不会差，视觉上也能避开模板化观感。官方地址：https://www.skillhub.cn/skills/user_e40a4360/frontend-ui-engineering（API 地址：https://api.skillhub.cn/org-b6kzcl68/frontend-ui-engineering）。
