monisuo/flutter_monisuo/PROMPT.md

目标

为 Flutter 数字货币应用 (monisuo) 设计并实现一套专业、一致、响应式的主题系统，确保:

• 视觉一致性
• 良好的可读性 (对比度 >= 4.5:1)
• 响应式布局
• 专业的金融应用风格
• 杜绝文字和背景颜色一样无法区分的情况

参考文件

• specs/theme-design.md - 主题设计规范 (颜色系统、间距、圆角、文字样式)
• AGENTS.md - 项目说明和注意事项
• IMPLEMENTATION_PLAN.md - 实施计划 (Phase 6: 主题系统深度优化)

设计原则

1. 一致性 - 所有页面使用统一的设计语言
2. 可读性 - 确保文字与背景对比度充足 (WCAG AA 标准 >= 4.5:1)
3. 响应式 - 适配不同屏幕尺寸
4. 专业性 - 符合金融/交易类应用的专业感
5. 无障碍 - 避免颜色冲突，杜绝文字和背景颜色一样无法区分的情况

禁止事项

• ❌ 文字与背景颜色相同
• ❌ 低对比度组合 (对比度 < 4.5)
• ❌ 仅用颜色区分状态
• ❌ 过小的触摸目标 (< 44px)
• ❌ 不一致的组件样式
• ❌ 硬编码颜色值

当前任务: Phase 6 主题系统深度优化

P0 - 立即执行 (核心基础)

1. 6.1 颜色系统重构

   • 重构 lib/core/constants/app_colors.dart
   • 统一主色调 (#00D4AA 青绿色系)
   • 标准化涨跌色 (#00C853 绿 / #FF5252 红)
   • 优化背景色层次 (#0F0F1A -> #1A1A2E -> #16213E)
   • 清理 coin_card.dart 等文件中的硬编码颜色

2. 6.4 Shadcn 主题定制

   • 创建自定义 ShadColorScheme (品牌绿色)
   • 更新 main.dart 使用自定义主题

P1 - 高优先级

1. 6.2 文字样式系统

   • 创建 lib/core/theme/app_text_styles.dart
   • 标题样式 (h1-h4)、正文样式、数字样式

2. 6.3 间距与圆角系统

   • 创建 lib/core/theme/app_spacing.dart
   • 统一间距常量、圆角常量、响应式断点

P2 - 中优先级

1. 6.5 组件样式统一

   • 优化按钮、卡片、输入框样式

2. 6.6 页面样式优化

   • 所有页面应用新主题系统

P3 - 验证

1. 6.7 对比度检查
   • 验证所有文字/背景组合 >= 4.5:1

完成标准

• 颜色系统完整且无重复定义
• 所有文字/背景对比度 >= 4.5:1
• 无硬编码颜色值
• 统一的间距和圆角系统
• 所有页面使用新主题
• flutter analyze 无错误
• 应用可正常运行

技术栈

• Flutter
• shadcn_ui (UI 组件库)
• Lucide Icons

注意事项

• ⚠️ 不要修改业务逻辑
• ⚠️ 不要修改 API 调用
• ⚠️ 不要修改 Provider 逻辑
• ⚠️ 不要删除现有功能
• ⚠️ 确保文字和背景颜色区分明显
• ⚠️ 每次修改后运行 flutter analyze

开始指令

开始工作：

1. 读取 specs/theme-design.md 了解设计规范
2. 读取 IMPLEMENTATION_PLAN.md 了解实施计划
3. 按 P0 -> P1 -> P2 -> P3 优先级执行
4. 完成后更新 IMPLEMENTATION_PLAN.md 状态

Let's create a professional theme system for the Monisuo Flutter app! 🎨