SuperAPI AI 工具集

avalonia-pro-max/design-system

设计与创作

查看项目

更新于 11-03 16:15

技能介绍

这是一个面向 Avalonia 应用的技能,用于建立或重构 UI 设计系统。其目标是把颜色、画刷、字体、字号、间距、圆角、阴影等统一为命名资源,并放入被 App.axaml 合并的 ResourceDictionary 中;视图中通过 DynamicResource 引用这些资源,而不是直接写十六进制颜色或数字。

主要能力围绕三层令牌模型展开。第一层是 Primitive(原始值),例如 Slate50 至 Slate950、Blue500/600/700、Red500、Green500、Amber500,只在底层使用,不在视图中直接引用。第二层是 Semantic(语义令牌),按 Light 和 Dark 两个 ThemeDictionaries 分别定义表面、文本、边框、品牌与状态色,例如 SurfaceBackgroundBrush、TextPrimaryBrush、AccentBrush、DangerBrush、SuccessBrush、WarningBrush。第三层是 Component(组件级,可选),例如 ButtonPrimaryBackgroundBrush、CardBackgroundBrush,引用语义令牌。规则是视图只用第二、三层。

排版方面,资料建议选定一种比例并保持一致,默认给出 1.25 模块化比例,从 FontSizeXs 12 到 FontSize4xl 48,并提供 FontSans、FontMono 字体族、行高倍数(Tight 1.2、Normal 1.5、Relaxed 1.65),以及 h1、body、muted 等 TextBlock 样式示例。字体部分说明应提供每种字重的静态 .ttf/.otf 文件;可变字体轴控制尚未发布,不能依赖 wght/wdth 或 FontVariations;12.0+ 只支持 TrueType 和 OpenType 字体,旧 Type 1 字体不再加载。字母间距在 12.0+ 为 TextElement 上的可继承附加属性,11.x 仅 TextBlock.LetterSpacing;文本渲染选项在 12.0+ 位于 TextOptions,11.x 为 RenderOptions.TextRenderingMode,不要混用;显式调用 UseSkia() 时需同时调用 UseHarfBuzz(),否则启动会报错。

间距采用 4/8 节奏的 Space0 至 Space16 数值,并为 Margin/Padding 提供 Thickness 资源,如 PaddingCard、PaddingCardCompact、PaddingPage。圆角提供 RadiusSm 4 到 RadiusFull 9999,阴影用 BoxShadows 定义 ShadowSm/Md/Lg,应用到 Border;暗色模式下建议把阴影不透明度减半或改用 1px 边框。

使用方式是在 App.axaml 的 Application.Resources 中合并 Primitives、Semantic、Typography、Spacing、Radius 等资源字典,并在 Application.Styles 中加入 FluentTheme 与自定义样式;运行时可通过 Application.Current.RequestedThemeVariant 在 Light 和 Dark 间切换,并持久化设置。资料还按产品类型给出强调色与风格建议,并提醒始终在白底和暗色表面上验证文本对比度至少 4.5:1。

适用场景是 Avalonia 桌面应用的界面设计系统搭建、明暗主题切换与样式重构。限制与注意事项包括:视图里写死十六进制颜色、缺少暗色变体、主题画刷误用 StaticResource(运行时不会切换)、强调色过多、随意编造间距值、桌面正文小于 13px、纯黑纯白对比过强、暗色模式沿用相同阴影不透明度等。该技能主要面向 Avalonia 的 XAML 与资源组织,不涉及具体业务逻辑或收费信息。