Appearance
使用 Zafiro.Avalonia 构建现代化且可维护的 UI 布局
解决 XAML 代码冗余和布局嵌套过深的问题：通过引入 Zafiro.Avalonia 的语义化容器和共享样式规范，让 AI 能够生成更简洁、易于维护的现代化 UI 界面。
为什么需要这个技能
在开发 Avalonia UI 应用时，开发者经常陷入一个误区：为了实现特定的视觉效果，在 XAML 中通过多层 Grid 和 StackPanel 进行深度嵌套，并手动编写大量重复的颜色、尺寸等字面量属性。这不仅导致文件体积臃肿，而且在需要全局调整主题时极其困难。
Zafiro.Avalonia 提供了一套成熟的语义化组件和样式方案。掌握该技能后，AI 可以帮你用 HeaderedContainer 代替繁琐的 Border 组合，用 EdgePanel 扁平化布局，并强制执行“样式与结构分离”的原则，显著提升代码质量。
适用场景
- 需要构建现代化、响应式且具有统一视觉风格的桌面应用程序。
- 面对复杂界面时，需要减少 XAML 嵌套层级以优化渲染性能。
- 准备构建可复用的通用 UI 组件库，避免在每个页面重复定义样式。
- 将传统的
IValueConverter逻辑迁移到更灵活的Interaction.Behaviors或 ViewModel 属性中。
核心工作流
- 语义化结构分析：不再使用基础容器，优先选择
HeaderedContainer（标题容器）、EdgePanel（边缘面板）或Card（卡片）来定义页面骨架。 - 样式去冗余：禁止在 View 中硬编码颜色和尺寸，统一使用
DynamicResource调用themes.md中定义的共享资源。 - 图标与交互增强：通过
{Icon fa-name}扩展快速集成图标，并使用Xaml.Interaction.Behaviors处理 UI 交互逻辑，减少 Code-behind 代码。 - 布局扁平化检查：对照 Checklist 检查是否存在过度嵌套，将重复出现的布局模式提取为泛型组件（Generic Components）。
下载和安装
下载 avalonia-layout-zafiro 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐