SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场avalonia-pro-max

avalonia-pro-max

设计与创作

查看项目

更新于 11-03 16:15

技能介绍

用途

avalonia-pro-max 是 Avalonia 桌面与跨平台应用的美化技能。基础技能教框架本身，本技能教界面达到专业观感：设计令牌、主题选择、组件配方、动效、无障碍、响应式布局、图标与最终质量检查。它是 ui-ux-pro-max 的桌面/跨平台对应版本，优先级相同，但每条规则都映射到 Avalonia 12.x 的具体机制（XAML、FluentTheme、ControlTheme、伪类、AutomationProperties 等）。

版本约定

支持 Avalonia 11.3、12.0 与 12.1（最新 12.1.4）。应先探测项目版本，并配合 avalonia-versions 技能使用（版本矩阵、重命名 API、标签约定）。子技能中：(12.0+) / (12.1+) 表示需该版本或更新；(11.x) 表示仅 11.x（12 中移除或过时）；无标注表示 11.3、12.0、12.1 均可。不得混用 11.x 与 12.x API。尚无项目时，建议 12.1.x 配 net10.0。

何时使用

必须使用：新建屏幕、窗口或页面；重设现有应用外观或替换默认样式；选择主题库（FluentAvalonia、SukiUI、Semi、Material、ShadUI、Ursa 等）；定义颜色、字体、间距、圆角、层级令牌；添加动画、过渡、悬停与按下状态；实现明暗主题变体；交付或 PR 前评审 UI；用户要求“做得好看”“现代化”“打磨”“太朴素”。

建议使用：把 WPF 视觉迁移到 Avalonia 并希望获得现代观感（可配合 avalonia-wpf-migration）；跨平台润色（桌面、移动、Web）；构建可复用组件库。

跳过的情形：纯数据绑定、MVVM 基础结构、服务、部署，应使用基础 avalonia 子技能。

路由表

设计令牌、调色板、字体层级、间距、主题变体、语义色系统 → design-system。 选择与配置主题库（FluentAvalonia、SukiUI、Semi、Material、ShadUI、Ursa、Material.Avalonia） → themes。 可直接用于生产的 XAML 配方：卡片、对话框、命令栏、侧边导航、设置页、表单、空状态 → components。 过渡、关键帧动画、缓动、悬停与按下反馈、页面切换、减少动效 → motion。 对比度、焦点环、键盘导航、AutomationProperties、屏幕阅读器、动态字体缩放 → accessibility。 响应式设计、断点、AdaptiveLayout、NavigationView 与侧边栏与底部导航、仪表盘 → layout-patterns。 图标库（Lucide、Material、FontAwesome、Heroicons）、SVG（Svg.Skia）、品牌资源、图片优化 → icons-imagery。 合并或发布前的最终检查清单 → review-checklist。 在实现前用浏览器画廊向用户展示 2–3 个渲染后的 Avalonia 设计备选，由用户在对话中选择 → preview-server。

“构建美观 Avalonia 应用/界面”的工作流

  1. 建立设计系统 → design-system：确定调色板（语义令牌）、字体层级、间距节奏、圆角尺度、层级，持久化为 Resources/Tokens.axaml 与主题变体字典。
  2. 选定主题基础 → themes：FluentTheme 加社区主题（或纯自定义）；themes 子技能按应用类型给出推荐矩阵。
  3. 用配方构建界面 → components：使用配方库，已有经过验证的模式时不要从零手写卡片、对话框或导航。
  4. 应用动效 → motion：为交互控件添加 Transitions，为导航添加页面过渡，并尊重 prefers-reduced-motion。
  5. 验证无障碍 → accessibility：AutomationProperties、焦点顺序、4.5:1 对比度、键盘操作对等。
  6. 检查响应式行为 → layout-patterns：在 800、1280、1920 宽度下测试；移动/平板通过 Avalonia.Mobile。
  7. 运行评审清单 → review-checklist：合并前审计，不通过则回到相应步骤。

可选：先向用户展示方案。如果用户希望在确定方向前先看备选（例如“给我几个选项”“这会是什么样”），在第 3 步前插入 preview-server：生成 3 个变体 .axaml，用 Avalonia.Headless 渲染为 PNG（明暗 × 宽窄），提供并排 HTML 画廊；用户在浏览器中查看后告诉你构建哪一个。

关注优先级（映射到 Avalonia 机制）

  1. 无障碍：AutomationProperties.*、焦点伪类、对比度 → accessibility。
  2. 触摸与交互：通过 Padding/MinHeight 保证最小点击区域、:pointerover / :pressed 样式 → components、motion。
  3. 性能：CompiledBinding（12.0+ 默认，11.x 需显式开启）、虚拟化（VirtualizingStackPanel）、RenderOptions.BitmapInterpolationMode → components、layout-patterns。
  4. 样式选择：主题库加 ControlTheme 加 Style 类 → themes、design-system。
  5. 布局与响应式：Grid 的 * / Auto、AdaptiveLayout、NavigationView.PaneDisplayMode → layout-patterns。
  6. 字体与颜色：主题变体字典、DynamicResource、字体层级 → design-system。
  7. 动画：Transitions、Animation、KeyFrame、IterationCount → motion。
  8. 表单与反馈：验证（DataAnnotations / INotifyDataErrorInfo）、Flyout、错误伪类 → components。
  9. 导航：TabControl、SplitView、FluentAvalonia NavigationView → layout-patterns、components。
  10. 图表与数据：LiveCharts2、ScottPlot、OxyPlot → components。

“默认就好看”的推荐技术栈

App.axaml 示例：

<!-- App.axaml -->
<Application.Styles>
  <FluentTheme/>
  <StyleInclude Source="avares://MyApp/Resources/Tokens.axaml"/>
  <StyleInclude Source="avares://MyApp/Resources/ComponentStyles.axaml"/>
</Application.Styles>

NuGet：Avalonia 12.1.x（或项目所用版本）；Avalonia.Themes.Fluent（或 SukiUI / Semi.Avalonia）；FluentAvaloniaUI（Avalonia 12 用 3.x，11.3 用 2.5.x），提供 NavigationView、InfoBar、TeachingTip；Lucide.Avalonia 或 Material.Icons.Avalonia 图标；Svg.Skia 矢量资源；Avalonia.Xaml.Behaviors 声明式事件触发器。themes 子技能会按产品类型解释各类替代方案。

反模式（详见各子技能）

在视图中散落硬编码十六进制颜色，应使用 DynamicResource 加主题字典；用 emoji 当图标，应使用矢量图标库；为求干净移除焦点环，会破坏键盘无障碍；到处使用 Margin="10"，应使用 4/8 间距尺度；动画 Width/Height 而非 RenderTransform Scale，会卡顿；主题变体画刷用 StaticResource，切换变体时不会更新；图标按钮忘记 AutomationProperties.Name；同一应用混用 FluentTheme 与 Material.Avalonia，视觉不一致；自定义控件缺少 :pointerover / :pressed / :disabled / :focus 样式；一个巨大的 Window 不做 UserControl 拆分。