Appearance
Frontend UI Engineering 解决的是 AI 生成前端页面“能渲染但不像产品”的问题。它要求按项目已有设计系统写组件，处理状态、响应式、键盘操作、可访问性和真实浏览器验证。
AI 写前端页面为什么总有模板味：Frontend UI Engineering 怎么用
下载 frontend-ui-engineering 中文版 Skill ZIP
页面一渲染出来，又是紫色渐变和一排圆角卡片。
阴影很多，按钮很大，文案像模板，和项目里原来的界面完全接不上。
这类页面能跑，但不像你的产品。
frontend-ui-engineering 这个技能要解决的就是这个问题：前端不是把组件堆出来，而是要符合项目设计、用户路径和真实运行状态。
先看项目已有 UI
让 AI 写页面前，先让它看现有组件和页面。
不要让它凭默认审美创建新风格。
你可以要求：
md
先查看项目已有页面和组件风格。
复用现有按钮、卡片、表单、颜色和间距规则。
不要引入新的视觉风格，不要使用默认的紫色渐变和大阴影。AI 默认喜欢“安全好看”的模板，但站点或产品需要一致性。
真实内容比占位文字重要
前端页面用 lorem ipsum 很容易掩盖问题。
真实标题会换行，真实用户名长度不一，真实错误信息可能很长，真实列表可能为空。
让 AI 写 UI 时，要让它考虑这些状态：
- 加载中。
- 空状态。
- 错误状态。
- 数据很多。
- 文案很长。
- 移动端宽度。
只有 happy path 的页面，不能算完成。
可访问性不是装饰
AI 写 UI 时常见错误是把 div 当按钮，把图标按钮不加标签，弹窗打开后焦点乱跑。
审查时要看：
- 交互元素能不能用键盘操作。
- 表单输入有没有 label。
- 图标按钮有没有可读名称。
- 错误信息是否和输入框关联。
- 颜色是否有足够对比度。
- 页面标题层级是否合理。
这些不是只给少数用户准备。键盘、读屏、焦点管理做得好，普通用户也会觉得页面更稳。
组件不要过度配置
AI 很容易写一个万能组件，塞很多 props：variant、size、layout、headerMode、footerMode、showX、enableY。
这种组件看起来灵活，实际很难维护。
更好的方式是组合：
- 小组件职责清楚。
- 数据获取和展示分开。
- 状态逻辑不要塞进纯展示组件。
- 一次只抽取已经重复出现的模式。
前端代码最怕“为未来设计”。如果未来没来，复杂度会一直留在项目里。
写完一定要看浏览器
前端不能只靠类型检查和单元测试。
按钮位置、响应式、滚动、弹窗、焦点、接口请求，这些都要在浏览器里看。
如果是 Claude Code 这类工具，最好配合浏览器测试能力，让 Agent 截图、看 console、看 network。没有浏览器验证，就至少手动走一遍关键路径。
给 AI 的前端 Prompt
md
请按生产 UI 标准实现这个页面。
要求：
1. 先查看项目已有组件和样式，不要创造新视觉体系。
2. 覆盖加载、空状态、错误状态和移动端布局。
3. 交互元素必须可键盘操作，表单必须有 label。
4. 不要使用模板化紫色渐变、大阴影和无意义卡片堆叠。
5. 完成后说明如何在浏览器里验证。你可能还需要
同类技能：
如果页面是给用户看的，就不要只问 AI 有没有编译通过。打开浏览器看。