前言¶

让模型写界面，常见结果是：能跑，但没法交付。布局在窄屏上挤成一团，按钮缺少可访问的焦点样式，几种状态（加载、空、错误）只写了一个，配色随手挑，组件名和项目里的设计系统对不上。问题不在模型不会写代码，而在它默认按「看起来对」来判断，而不是按「生产环境该长什么样」来判断。

前端UI工程（@kunlungrowth/kg-frontend-ui-engineering）就是针对这个默认判断做约束的 Skill：它把设计系统、WCAG 可访问性、响应式布局和状态管理的实践固化为一套流程，让模型在写前端时先走规范，再写代码。

这是什么¶

一个面向前端界面开发的 Agent Skill，坐标 @kunlungrowth/kg-frontend-ui-engineering，版本 1.0.0，由昆仑增长发布，来源标记为 enterprise，在 SkillHub 上归类于 dev-programming。

它解决的问题是：模型生成的界面缺少生产级的约束检查，导致交付后还要人工返工。Skill 的定位是把这些检查前置到生成阶段，而不是事后补。

核心能力¶

按官方简介，该 Skill 覆盖四类约束：

1、生产级交付：不只是写出能渲染的代码，而是按可上线的标准组织界面实现，包含布局、交互与状态的完整性。
2、可访问性：遵循 WCAG 相关实践，关注语义化标签、键盘可达、焦点可见与对比度，而不是只做视觉还原。
3、响应式：在不同视口和断点下保持可用，避免只在单一宽度下看起来正常。
4、状态管理：覆盖加载、空、错误、成功等界面状态的实现，而不是只给出默认状态的静态结构。

另一个明确目标是规避「AI 审美」。这指的是模型倾向于生成风格趋同、配色随意、装饰重于功能的界面；Skill 的做法是让实现服从设计系统，而不是服从模型的即兴判断。

安装与启用¶

该 Skill 采用通用 SKILL.md 格式，通过 Agent Skill 宿主加载。以下是启用方式。

在 Cursor、Codex CLI 或 Claude Code 中启用 Skill 时，需要把 SKILL.md 放到宿主能识别的目录，或通过配置引用其坐标 @kunlungrowth/kg-frontend-ui-engineering。具体目录路径和配置字段取决于所使用的宿主版本。

抓取到的官方页面未给出可直接复制的安装命令，因此这里不写安装脚本。启用前建议先打开官方页面确认当前的安装方式：

https://www.skillhub.cn/skills/kunlungrowth/kg-frontend-ui-engineering

典型用法¶

按该 Skill 的能力范围，一次界面开发的流程可以这样组织。下面这个流程是对 Skill 覆盖能力的展开，具体提示词和步骤以官方 SKILL.md 为准。

1、先明确约束，再写代码：在动手前确定使用的组件库或设计系统、目标断点，以及界面需要覆盖哪些状态。把规范讲清楚，比反复改样式有效。

目标：实现一个数据列表页。
约束：使用项目现有组件库，不引入新的视觉风格。
断点：移动端 375px、桌面端 1280px。
状态：需要覆盖加载、空数据、请求失败三种。

2、结构与语义优先：先给出语义化的标签和组件结构，再考虑样式。可访问性依赖结构，事后补成本高。

3、状态补齐：对每个异步或可变状态，都给出对应的界面结构，包括错误提示的呈现方式和可重试入口。

4、响应式自检：按断点检查布局，确认在最小宽度下没有横向溢出，文字没有截断，触控目标间距合理。

5、可访问性自检：确认键盘可以完成主要操作，焦点顺序合理，交互元素有可辨识的焦点样式，文本与背景对比度满足要求。

适用场景与注意¶

适合的场景：需要交付真实前端页面、且项目已有设计系统或组件库的情况；需要同时覆盖多个界面状态的中大型界面任务；需要满足可访问性合规要求的界面。

需要注意的限制：

1、Skill 提供的是流程和约束，不包含组件库本身。项目中如果没有现成的设计系统，仍需先补齐这一层。
2、它不替代浏览器实测。响应式和可访问性需要在真实环境或工具里验证，Skill 的作用是让实现更接近正确，而不是自动保证正确。
3、「规避 AI 审美」的效果取决于给出的设计系统是否明确。规范越具体，模型偏离的空间越小。
4、抓取到的资料中未包含该 Skill 的完整正文、安装命令与配置字段，以上能力描述基于官方简介。使用前应以官方页面为准。

结尾¶

这个 Skill 的价值在于把前端交付中容易被忽略的几件事——可访问性、响应式、状态完整性、对设计系统的服从——从人工检查项变成生成阶段默认要走的流程。如果你的界面任务经常落在「能跑但没法交付」这个区间，可以先试用它，再按项目实际情况调整约束。

官方地址：https://www.skillhub.cn/skills/kunlungrowth/kg-frontend-ui-engineering

坐标：@kunlungrowth/kg-frontend-ui-engineering