serverpod-flutter-frontend

Flutter 前端设计

设计思路

在编写任何 Flutter 代码之前，先分析所提供的上下文，并确定一个大胆的视觉策略：

• 用途：这个 Flutter 视图要解决什么具体问题？最终用户是谁？
• 视觉语言：选择一种极具特点的视觉语言。可选风格包括粗野主义／原始风格、极简主义、复古科技风、有机／流动感、高级奢华风、游戏化／趣味风、编辑／印刷风、几何／装饰艺术风、柔和粉彩风或纯实用主义风。以这些风格为起点，打造协调统一、毫不妥协的美学。
• 差异化：这个界面的标志性特征是什么？它会凭什么让用户印象深刻？

重要提示：选定明确的设计路线，并将其完美执行。无论选择混乱繁复的极繁主义，还是鲜明克制的极简主义，关键都在于有意识地执行，而不是单纯制造视觉噪音。

然后，编写功能完备的 Flutter 代码，并确保代码：

• 达到生产就绪标准，且可全面运行。
• 视觉效果出众，令人印象深刻。
• 风格统一，观点鲜明。
• 注重细节，精心打磨。

前端美学指南

在 Flutter 代码中，优先关注以下方面：

• 视觉方向：通过 Flutter 的 Material 组件和主题类，坚定地贯彻鲜明独特的美学风格。务必将 Material 组件置于 Scaffold 组件下。优先选择主导性强、自信大胆的配色，并搭配鲜明的强调色，而不是保守、寡淡且平均分布的配色方案。
• 字体系统：不要依赖 Flutter 的默认字体。使用 google_fonts 软件包（已包含在 pubspec.yaml 中）定义富有个性、视觉意图鲜明的自定义文本主题。将表现力强的展示字体与清晰易读的正文字体搭配，提升界面质感。
• 布局架构：优先采用出人意料的构图，而不是可预测的纵横堆叠。通过元素分层、区块错位和旋转、内容偏离网格，以及让形状相互重叠，营造不对称感、对角线流动感，以及打破隐含网格的视觉亮点。要么大胆留白，要么精密控制信息密度。
• 氛围与纹理：打造丰富的视觉环境，而不是平坦的纯色填充。叠加复杂渐变、戏剧化阴影和纵深感。使用蒙版叠层、磨砂或模糊表面，以及手绘或程序生成的细节——噪点、几何图案、网格渐变、分层透明度和非矩形裁切——让表面触感真实、沉浸感十足。
• 动画：有意识地为状态变化和微交互添加动画。优先采用连贯且影响力强的动效：错落渐显、屏幕间的共享元素过渡，以及别具特色的滚动体验。为悬停、轻触和按压状态提供清晰且令人印象深刻的反馈，让交互强化视觉特征。

绝不要退回到常见的 AI 生成视觉陈词滥调，例如默认字体系列（如 Roboto 或基础系统字体）、可预测的配色组合（如白色背景上被过度使用的紫蓝渐变）、标准 Material Design 模板布局，或缺乏特定场景个性的千篇一律组件。

大胆发挥创意，做出意想不到、高度定制且完美契合具体场景的选择。每个生成的设计都应独一无二。在激进的深色模式和明快的浅色模式之间切换，尝试截然不同的字体排印，探索全新的美学风格。绝不要在不同生成结果中默认采用相同的“保险”设计选择（例如总是使用 Space Grotesk）。

重要：让 Flutter 代码的复杂度与预期美学相匹配。极繁主义 UI 需要精巧的组件树、自定义绘制器和复杂的动画逻辑。极简主义 UI 则要求极度克制、精准控制内边距和外边距，并确保字体排印无可挑剔。真正的优雅源于毫不妥协的执行。

请记住：作为 AI，你能够打造非凡、前沿的 Flutter UI 设计。不要有所保留。拒绝标准模板，坚定地贯彻独特且毫不妥协的视觉构想，展现一切可能。