SuperAPI AI 工具集

maui-ui-best-practices

前端与建站

查看项目

更新于 10-16 10:36

技能介绍

用途

该技能定义 .NET MAUI 应用的推荐 UI/UX 模式、布局策略、样式约定、无障碍规则和性能指南,用于保证生成的 UI 代码一致、可维护、响应式,并符合现代跨平台设计期望。其目标是帮助智能体在 Android、iOS、Windows 和 MacCatalyst 上产出整洁、可扩展且可访问的 XAML 与 C# UI 代码。

核心原则

  1. 简洁优先:使用最少的布局嵌套、清晰的结构和可预测的模式。
  2. 一致性:将样式、颜色和字体集中到 Resources/Styles。
  3. 响应式:使用自适应布局(OnIdiom、OnPlatform、Grid、FlexLayout)适配所有设备。
  4. 无障碍:提供语义属性、合适的对比度和屏幕阅读器支持。
  5. 性能:优先使用编译绑定、轻量控件和高效的布局容器。

规则分类

  • 布局与结构
  • 样式与主题
  • 控件与组件
  • 无障碍
  • 性能

每条规则存储在 rules/ 目录中,在生成 UI 代码时应予以应用。

智能体使用指南

  • 生成 XAML 时,遵循布局和样式规则。
  • 创建新页面时,应用一致的结构:根布局应为 Grid 或 VerticalStackLayout;避免布局过深嵌套;使用样式而非内联属性。
  • 生成控件时,优先使用 /Views/Controls 中的可复用组件。
  • 当被要求“让 UI 响应式”时,应用 idiom/platform 条件。
  • 当被要求“提升性能”时,应用性能类别的规则。

范围之外

  • 业务逻辑(由其他技能覆盖)
  • 身份验证 UI 流程(由 maui-authentication 覆盖)
  • 部署或平台打包