前言¶
下面介绍 SkillHub 上的 frontend-ui-engineering 技能（坐标 @org-b6kzcl68/frontend-ui-engineering）。
先看痛点。让 AI 写前端页面，常见的问题是模板化审美：组件结构千篇一律，配色和间距像同一个模子出来的，交互细节缺失。更实际的问题是可访问性与响应式容易被忽略——键盘导航没做、ARIA 标签缺失、断点只在某个宽度碰巧能看。这些在手工编码里靠 review 把关，在 AI 生成里靠提示词难以稳定命中。frontend-ui-engineering 的做法是把生产级界面工程规范写进技能，让模型在新建或修改界面时按规范执行，而不是凭感觉生成。
这是什么¶
frontend-ui-engineering 是一套生产级前端界面工程技能，面向”构建可访问、响应式、视觉精良的用户界面”这一目标，覆盖组件架构、数据获取、状态管理、设计系统、无障碍、响应式布局等工程环节。
出品方为重庆途光网络传媒有限责任公司，来源企业级（enterprise），版本 1.0.0，分类 dev-programming。技能标签为 requires_api_key=false，即不需要 API Key 即可使用。
它解决的问题是：AI 生成界面时质量不稳定、观感停留在模板水平，且无障碍和响应式等硬指标常被遗漏。
核心功能¶
根据 SkillHub 页面资料，该技能的覆盖范围如下：
- 组件架构与文件同置：组件代码与其相关文件放在一起，避免目录散落
- 组合优于配置：优先用组合实现复用，而不是堆配置项
- 数据获取与展示分离：数据层与视图层分开，便于维护与测试
- 状态管理分层选型：按场景分层选择状态方案，不盲目引入重型状态库
- 设计系统遵循与语义化颜色令牌：颜色用语义化令牌表达，而不是随意写色值
- WCAG 2.1 AA 无障碍：键盘导航、ARIA 标签、焦点管理
- 响应式断点：按断点组织布局
- 骨架屏加载与乐观更新：加载态与即时反馈的工程处理
- 空态/错态设计：列表为空、请求失败时的界面设计
- 系统规避 AI 模板审美：产出要求达到生产级质感，而非 AI 生成观感
触发场景（官方描述）：用户要新建或修改界面与页面、创建组件、实现响应式布局、管理状态、满足 WCAG 无障碍要求，或要求产出达到生产级质感而非 AI 生成观感的界面。触发词包括前端界面、组件架构、无障碍、WCAG、响应式布局、状态管理、设计系统、骨架屏、ARIA。
安装与启用¶
该技能基于通用 SKILL.md 格式，在支持 SkillHub 技能安装的客户端（Cursor / Codex CLI / Claude Code 等）中通过技能市场安装。具体安装命令官方资料未给出，本文不编造；技能页地址见文末官方地址。安装后在客户端技能列表中启用即可，无需配置 API Key（requires_api_key=false）。
典型用法¶
官方资料给出的是触发条件而非逐字示例，用法按触发词组织。几个可复现的调用场景：
1、用户说”帮我做一个订单列表页”，技能按组件架构与文件同置规范拆组件，按数据获取与展示分离组织请求与视图，加载时显示骨架屏，列表为空时展示空态，请求失败时展示错态。
2、用户说”这个表单要满足无障碍要求”，技能按 WCAG 2.1 AA 补齐键盘导航、ARIA 标签与焦点管理。
3、用户说”界面看起来太像 AI 生成的”，技能按设计系统与语义化颜色令牌重做配色与间距，规避模板审美。
4、用户说”移动端要适配”，技能按响应式断点组织布局。
适用场景与注意¶
适合需要新建或修改界面、创建组件、实现响应式布局、管理状态、满足 WCAG 无障碍要求的前端开发场景，尤其是希望产出达到生产级质感而非 AI 生成观感的团队和个人。
需要注意：
- 资料中 SkillHub 页面显示评分 100000、下载 1548、安装 0；任务线索中给出的 SkillHub 评分 99289、下载 2793 次，两者不一致，且技能页在撰写时无法抓取核实，请以 SkillHub 页面实际数据为准
- 技能来源为企业级（enterprise），官方简介末尾提到”如需职场求职完整工作流套件，淘宝搜索「AI灵匣」店铺获取完整版”，即该技能是完整工作流套件的一部分
- 该技能面向界面工程，不覆盖后端接口设计、部署运维等环节
结尾¶
frontend-ui-engineering 的价值在于把生产级前端界面工程的硬指标（无障碍、响应式、设计系统、状态分层）固化进技能，减少 AI 生成界面时的模板化观感和遗漏项。官方地址：https://www.skillhub.cn/skills/org-b6kzcl68/frontend-ui-engineering，技能 API 地址：https://api.skillhub.cn/zcwl/frontend-ui-engineering。
