SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场frontend-ui-engineering

frontend-ui-engineering

前端与建站

查看项目

更新于 10-13 20:08

技能介绍

用途

Frontend UI Engineering 用于构建生产级的用户界面，要求界面可访问、性能良好、视觉精致。其目标产物是看起来像由顶尖公司中具备设计意识的工程师所构建的界面，而不是由 AI 生成的界面。这意味着需要真正遵循设计系统、具备正确的无障碍支持、经过深思熟虑的交互模式，并避免通用的"AI 美学"。

适用场景包括：构建新的 UI 组件或页面；修改现有面向用户的界面；实现响应式布局；添加交互或状态管理；修复视觉或 UX 问题。

主要能力

组件架构

  • 文件结构共置：将某一组件的实现、测试、Storybook 故事、自定义 hook 与类型放在同一目录中。例如 src/components/TaskList/ 下包含 TaskList.tsx、TaskList.test.tsx、TaskList.stories.tsx、use-task-list.ts、types.ts。
  • 组件模式：优先使用组合而非配置（如用 Card/CardHeader/CardTitle/CardBody 组合代替大量 props 配置）。保持组件职责单一。将数据获取与展示分离：容器组件处理数据（加载、错误、空态），展示组件只负责渲染。

状态管理

按需选择最简单的方案：

  • 本地状态（useState）→ 组件特定的 UI 状态
  • 提升状态 → 在 2-3 个兄弟组件间共享
  • Context → 主题、认证、语言（读多写少）
  • URL 状态（searchParams）→ 过滤、分页、可分享的 UI 状态
  • 服务端状态（React Query、SWR）→ 带缓存的远程数据
  • 全局 store（Zustand、Redux）→ 应用级共享的复杂客户端状态

避免超过 3 层的 prop 逐层传递。如果正在穿过不使用该 prop 的组件传递它，应引入 context 或重构组件树。

设计系统遵循

  • 参考驱动的 UI 质量：当产品需要独特视觉方向时，先收集证据再选择布局。搜索可信参考目录或使用产品团队提供的参考；研究两三个相关页面，记录层级、密度、导航、控件、响应式行为与交互状态方面的决策；在实现前形成简短的设计契约，明确页面的任务、主要操作、必需状态、响应式规则以及要拒绝的模式；用产品自身的组件、token、内容和视觉语言重建有用的结构。绝不复制其他产品的品牌、专有文本、图像或精确布局。把参考当作证据，而非模板。如果无法获得参考，记录假设并对照产品现有设计系统验证结果。

  • 避免 AI 美学：AI 生成的 UI 具有可识别模式，需全部避免。资料中列出的对照表包括：紫色/靛蓝色泛滥（模型默认视觉"安全"配色，使应用千篇一律）→ 使用项目实际调色板；过度渐变（增加视觉噪音，与多数设计系统冲突）→ 与设计系统匹配的扁平或细微渐变；全部圆角（rounded-2xl，最大圆角暗示"友好"但忽略真实设计中圆角半径的层级）→ 使用设计系统中一致的 border-radius；通用 hero 区（模板驱动布局，与内容或用户需求无关）→ 内容优先的布局；Lorem ipsum 式文案（占位文本掩盖真实内容才会暴露的布局问题，如长度、换行、溢出）→ 真实的占位内容；到处超大内边距（等同的宽松内边距破坏视觉层级，浪费屏幕空间）→ 一致的间距尺度；库存式卡片网格（统一网格是忽略信息优先级与扫视模式的布局捷径）→ 目的驱动的布局；重阴影设计（层叠阴影增加与内容竞争的深度感，拖慢低端设备渲染）→ 除非设计系统指定，否则使用细微或无阴影。

  • 间距与布局：使用一致的间距尺度，不要臆造数值。示例：padding: 1rem（16px）、gap: 0.75rem（12px）为合规；padding: 13px、margin-top: 2.3rem 不在尺度上，为不合规。

  • 排版：尊重字体层级——h1 页面标题（每页一个）、h2 区块标题、h3 子区块标题、body 默认文本、small 次要/辅助文本。不要跳过标题层级，不要将标题样式用于非标题内容。

  • 颜色：使用语义化颜色 token（如 text-primary、bg-surface、border-default），而非原始十六进制值；确保足够对比度（普通文本 4.5:1，大号文本 3:1）；不要仅靠颜色传达信息（同时使用图标、文本或图案）。

无障碍（WCAG 2.1 AA）

  • 键盘导航：每个交互元素必须可通过键盘访问。原生 <button> 默认可聚焦；<div onClick> 不可聚焦；若用 div 模拟需 role="button"、tabIndex={0} 并处理 Enter/Space 键，但仍推荐优先使用 <button>。

  • ARIA 标签：为缺少可见文本的交互元素添加标签（如 aria-label="Close dialog"）；为表单输入使用 label htmlFor 或 aria-label。

  • 焦点管理：内容变化时移动焦点，例如对话框打开时聚焦关闭按钮，并在打开时将焦点限制在对话框内。

  • 有意义的空态与错误态：不要显示空白屏幕。空态应包含图标、标题、说明与主要操作按钮，并使用 role="status"。

响应式设计

移动优先，再扩展。资料中的 Tailwind 示例：grid grid-cols-1（移动端单列）→ sm:grid-cols-2（小屏两列）→ lg:grid-cols-3（大屏三列），gap-4。测试断点为 320px、768px、1024px、1440px。

加载与过渡

  • 对内容使用骨架屏加载而非旋转指示器，使用 aria-busy="true" 与 aria-label 标注。
  • 感知速度可用乐观更新：在 mutation 的 onMutate 中取消查询、保存先前数据、更新缓存；在 onError 中回滚。

使用方式与验证

技能文档以规则、代码示例与检查清单的形式呈现，供开发者在实现界面时对照使用。构建 UI 后的验证清单包括：组件渲染无控制台错误；所有交互元素可键盘访问（用 Tab 键走查页面）；屏幕阅读器能传达页面内容与结构；响应式在 320px、768px、1024px、1440px 下正常；在适用时处理加载、空、错误、成功与权限状态；遵循项目的设计系统（间距、颜色、排版）；渲染结果通过最终的 UI 专项完成度评审；开发工具或 axe-core 中无无障碍警告。

资料还包含"常见合理化借口"与"红旗信号"，例如组件超过 200 行、内联样式或任意像素值、缺少错误/加载/空态、未测试键盘导航、仅用颜色表示状态、通用的"AI 外观"等。

限制与说明

  • 资料指出，详细的无障碍要求与测试工具参见 ../../references/accessibility-checklist.md（该引用文件内容未在所提供的资料中给出）。
  • 该技能不涉及具体收费、价格、平台或效果的相关信息，这些内容暂未提供。