flutter-design

Flutter 设计

基于证据进行设计。不要从模糊的需求直接跳到编写组件代码。

工作流

1. 检查 pubspec.yaml、Flutter/Dart 版本、应用结构、主题、路由、状态管理、可复用组件、测试以及当前 Git 状态。
2. 明确产品、主要用户、关键操作、平台组合、内容层级、约束条件和可衡量的成功标准。
3. 对工作进行分类，并调用最精简且有用的专家集合：
   • 诊断现有界面：使用 $flutter-audit。
   • 设计令牌、主题或组件契约：使用 $flutter-design-system。
   • 实施已批准的 UI：使用 $flutter-implementation。
   • 过渡或交互动画：使用 $flutter-motion。
   • 无障碍、文本缩放、键盘或 RTL：使用 $flutter-accessibility。
   • 渲染效果审查或黄金测试：使用 $flutter-visual-qa。
4. 实施前，明确记录一种视觉方向：字体特征、信息密度、配色方案的运用、几何形态、图像和动画特征。阅读 references/visual-direction.md 和 references/anti-slop.md。
5. 列举数据和交互状态：初始、加载、空、已填充、部分填充、错误、离线、禁用、破坏性操作确认，以及成功（视情况而定）。 对于涉及多个领域的仪表板或互联工具，请阅读 references/connected-product-workflows.md，并在安排界面区域前定义关联模型。
6. 为紧凑和扩展布局、主题、文本缩放以及关键交互定义验收标准。
7. 仅在视觉方向和状态明确后实施。
8. 完成前，要求通过静态检查、渲染效果验证、无障碍审查，并进行一轮改进。

关卡

• 如果缺少的产品背景会实质性影响设计，请提出一个有针对性的问题。
• 如果视觉方向确实尚未确定，请提供两到三种方案；根据产品需求推荐其中一种。
• 除非用户授权更改行为，否则保留现有业务行为。
• 将截图视为证据。未检查渲染结果，绝不声称视觉效果一致或精致。
• 如果无法进行渲染或测试，请明确说明环境限制。

输出约定

开篇说明已实施或推荐的方案。说明所选方向、重要的交互决策、已验证的视口/主题组合、运行过的测试以及尚未解决的限制。避免叙述常规的文件操作。