SuperAPI AI 工具集

flutter-custom-design-system

设计与创作

查看项目

更新于 10-16 02:19

技能介绍

用途

本技能面向 Flutter 应用,目标是在项目已有的自有设计系统之上实现界面,而不是使用 Material 3 / Cupertino 的默认外观。若仓库已经命名了颜色、字体、圆角、动效或可按压控件,就应沿用这些名称与数值;除非用户明确要求弃用系统,否则不要把应用改回 FilledButton / NavigationBar / ColorScheme.fromSeed 风格。配套技能 flutter-native-ui 仅用于确实想使用 Material 3 或 Cupertino 原生外观的应用。

主要能力

参考资料位于 references/ 目录:tokens.md 说明 ThemeExtension 挂载、context 访问器与 1:1 规则;pressable.md 说明缩放/下沉按压、NoSplash、焦点环与语义。

使用方式

先检测系统。在编写组件前,先搜索仓库中的 ThemeExtension<;返回颜色/token 的 extension <Name> on BuildContext;名为 tokens、semantics、theme、WIDGETS.md、DESIGN-SYSTEM.md 的文件;名为 *Pressable 的组件;NoSplash.splashFactory / splashFactory: NoSplash。然后打开附近的生产屏幕,复制其访问器(如 context.pt、St6Theme.of(context)、context.colors 等),产品代码必须使用该访问器,不得新建一个。

若尚无系统且用户想要一个,可按 references/tokens.md 与 references/pressable.md 安装该模式:一个 token 模块、一个 extension、一个 pressable。不要引入第三方 UI 套件。

硬性规则

Token 方面:数值只存在于单一来源(Dart token 文件、由 CSS/JSON 生成,或已签署确认的 tokens.dart);组件中不得出现原始十六进制、魔法圆角或临时时长。运行时挂载为 ThemeData.extensions 上的 ThemeExtension<T>,外加一个 context 访问器;不要在其他地方导入 FooColors 类。与系统文件 1:1 对应:若交接稿为 #C9A24B,token 就是 #C9A24B,不得“改进”对比度、虚构浅色主题或添加系统未命名的角色。缺失角色应同时补充到 token 来源与 extension,或询问;绝不能在组件中用十六进制来走捷径。暗色模式仅在系统提供时才存在,不得自行发明。

Chrome 方面:陌生人不应看出这是默认 Flutter Material。除非系统特别指定,否则不应有墨迹波纹、M3 primary-container 胶囊或原生 NavigationBar 指示器。每次点击都要经过自有 Pressable(仓库若没有就创建)。按压为缩放和/或下沉,主题与 pressable 上使用 splashFactory: NoSplash.splashFactory 与透明 overlay。不要为了“免费获得无障碍”而把品牌控件包进 FilledButton / ElevatedButton / InkWell,再与波纹对抗;应把语义放在 pressable 上。可使用 Material 行为(焦点、媒体查询、文本缩放、Shortcuts),但不使用 Material 外观。

字体与间距:字体角色来自系统(或 extension 的文本样式),而非 TextTheme.of(context).titleLarge,除非系统已映射到 TextTheme。间距、圆角与动效使用 token 数值(space200、radiusControl、durationPress),不得在调用处自行发明 EdgeInsets.all(13) 或 Duration(milliseconds: 180)。

Key 与调试:交互控件使用 const ValueKey<String>('kebab-name'),便于测试 find.byKey。God-mode、galleries、prefills、jump chips 仅限 kDebugMode,且仍走真实 auth/session 路径,不得有 release 后门。

不要做的事

若系统已内置字体,不要添加 google_fonts;如涉及 golden 测试,需用 FontLoader 加载这些字体——Roboto 的 golden 不是产品。不要添加 flutter_screenutil、GetX 或第二个设计包。不要“就这一次”把原生 M3 组件混到品牌界面上。

构建屏幕

读取 token 文件、extension、pressable 与一个现有屏幕;用项目 shell(自定义 app bar / tab bar)搭建,而非全新的 AppBar + NavigationBar;颜色、字体、间距、圆角、动效仅用 extension/tokens;点击走自有 pressable;图标用系统的图标集,而非 Icons.favorite(除非那正是系统)。安全区与键盘使用 SafeArea、MediaQuery.sizeOf / viewInsetsOf / textScalerOf;若系统定义了窗口宽度断点则使用,否则沿用现有 shell 规则。用项目分析器与运行帧验证。

何时拒绝 Material 默认

在品牌界面上,除非系统的组件清单列出,否则拒绝使用:FilledButton、NavigationBar、NavigationRail、NavigationDrawer、SnackBar(若系统有 toast)、FloatingActionButton、Chip、Card、带 elevation tint 的 Material、带默认波纹的 InkWell。非 chrome 的 OS 原生意图仍可使用 .adaptive()(Switch.adaptive、Checkbox.adaptive),前提是系统未指定替代。

验证

在改动过的文件中 grep Color(0x / Color.from / #,命中应位于 token 文件而非组件;每个新点击目标都经过自有 pressable;分析器无报错,热重载,并将运行帧与附近品牌屏幕对照,而非凭 Material 3 gallery 记忆。当存在 key 时,组件测试使用 find.byKey,而非可见文案。

适用场景

适用于已具备或需要建立项目自有设计系统、要求严格按 token 还原品牌视觉、且希望避免默认 Flutter Material 观感的 Flutter 应用。

限制

价格、收费、具体平台支持与效果等资料中未提供。