SuperAPI AI 工具集

ui-and-design

设计与创作

查看项目

更新于 10-15 21:09

技能介绍

用途:这是一份 Flutter UI 与设计规范技能,用于指导界面性能优化、设计系统落地、组件组织、交互模式与自适应布局。

主要能力:性能与渲染方面要求 const 优先,超过 10 项的列表必须使用 SliverList.builder 或 SliverGrid.builder 懒加载,复杂动画或重 UI 用 RepaintBoundary,超过 1MB 的 JSON 解析用 compute() 或 Isolate,图片用 cached_network_image,异步操作在组件销毁时正确取消,跨异步间隙使用 context 前检查 mounted。设计系统方面要求使用设计令牌,禁止硬编码颜色、间距、圆角与字体,完整定义见 design-system/SKILL.md。组件模式禁止返回 widget 的私有 _build*() 方法,应抽成独立 StatelessWidget 或 StatefulWidget;非简单滚动布局优先 CustomScrollView 与 Sliver 系列组件;减少 Container,简单间距用 SizedBox;优先内置动画组件;交互组件加 Key('feature_action_id'),列表项用 ValueKey(item.id)。UI 状态需处理加载、错误与空状态。交互模式规定主操作使用 FAB,存在 FAB 或底部导航时须为滚动内容添加动态底部内边距,复杂表单优先完整 Scaffold 页面而非 ModalBottomSheet,复杂流程应支持深链接。自适应设计采用移动优先,用 LayoutBuilder 与 MediaQuery 适配,断点为小于 600 移动、600–840 平板、大于等于 840 桌面;不锁定方向,不用 Platform.isIOS/Android 判断布局,不用 OrientationBuilder 做布局变化,大屏限制内容宽度,并支持键盘导航、鼠标悬停与焦点处理。

使用方式与限制:资料未提供安装命令或具体调用步骤,仅给出规范内容与 design-system/SKILL.md 引用;具体令牌定义、组件规则、主题标准与无障碍细节需查阅该文件,资料中暂未提供。